LogicWeb / CSS Question

Question

LogicWeb 0 Junior Poster in Training

16 Years Ago

I would appreciate if any designer can help me out on these two issues I'm trying to solve.

To clarify, I'm using Firefox 2 on Vista 64 bit Ultimate.

I also tested it with IE7 (32bit and 64bit versions).

Same problem on all 3 browsers / versions.

#1

The green hover disappears on the tab when the drop down is visible
Hovered on Tab
[IMG]http://aycu40.webshots.com/image/42079/2002192255228255486_rs.jpg[/IMG]

Hovered on tab's sub menu, green disappears (but should not)
[IMG]http://aycu24.webshots.com/image/44303/2002197490775326122_rs.jpg[/IMG]

Entire site.css file

body {
margin:0px;
padding:0px;
border:0px;
color:#738f93;
font-family: Tahoma, "Trebuchet MS", Arial, Verdana, Lucida, Sans-Serif;
font-size:12px;
line-height:16px;
background-color:#c3dcf1;
background-image:url(../images/bgd_page.gif);
background-repeat:repeat-x;
}


A:link, A:active, A:visited {
color:#2fb4c8;
text-decoration: none;
}

A:hover {
color:#2fb4c8;
text-decoration: underline;
}

/* ------------------ */
/* primary navigation */
/* ------------------ */

#menu {
margin:0px;
padding:0px;
background-image:url(../images/navigation/primary_nav_full_bgd.gif);
background-repeat:no-repeat;
height:42px;
}

ul#primary-navigation {
margin:0px;
padding:0px;
white-space: nowrap;
padding:10px 0px 0px 14px;
}

#primary-navigation li {
margin:0px;
padding:0px;
display:inline;
list-style-type: none;
float:left;
margin: 0 5px 0 0;
}

#primary-navigation li a {
display:block;
padding:0;
margin-right:4px;
}




/* These items were changed */

#primary-navigation li a span { display: none;}


#menuItemHome .tab,
#menuItemServices .tab,
#menuItemWhy .tab,
#menuItemSupport .tab, 
#menuItemAbout .tab, 
#menuItemPartner .tab { display: block; height: 32px;  }

#menuItemHome .tab { width: 64px; background:url(../images/navigation/_home.gif) no-repeat top left;}
#menuItemServices .tab { width: 80px; background:url(../images/navigation/_services.gif) no-repeat top left;}
#menuItemWhy .tab { width: 79px; background:url(../images/navigation/_why.gif) no-repeat top left}
#menuItemSupport .tab { width: 80px; background:url(../images/navigation/_support.gif) no-repeat top left}
#menuItemAbout .tab { width: 86px; background:url(../images/navigation/_about.gif) no-repeat top left}
#menuItemPartner .tab { width: 86px; background:url(../images/navigation/_order.gif) no-repeat top left}

#menuItemHome .tab:hover,
#menuItemServices .tab:hover,
#menuItemWhy .tab:hover,
#menuItemSupport .tab:hover,
#menuItemAbout .tab:hover,
#menuItemPartner .tab:hover {background-position: left bottom;}








/* drop down box elements */

#primary-navigation li ul {
position:absolute;
width:150px;
left:-999em;
margin:0px;
padding:0px;
font-size:11px;
color:white;
}

#primary-navigation li:hover ul, #primary-navigation li.sfHover ul {
left: auto;
}

/* individual drop down menu widths */

#dropMenuServices li, #dropMenuWhy li, #dropMenuSupport li, #dropMenuAbout li, #dropMenuPartner li {
margin:0;
padding:0;
display:block;
}

#dropMenuServices a, #dropMenuWhy a, #dropMenuSupport a, #dropMenuAbout a, #dropMenuPartner a  {
width:140px;
}

#dropMenuServices a {
width:175px;
}


#dropMenuServices a:link, #dropMenuWhy a:link, #dropMenuSupport a:link, #dropMenuAbout a:link, #dropMenuPartner a:link {color:white;}

#dropMenuServices a:visited, #dropMenuWhy a:visited, #dropMenuSupport a:visited, #dropMenuAbout a:visited, #dropMenuPartner a:visited {color:white;}

    
#dropMenuServices li a:link, #dropMenuServices li a:visited, #dropMenuWhy li a:link, #dropMenuWhy li a:visited, #dropMenuSupport li a:link, #dropMenuSupport li a:visited, #dropMenuAbout li a:link, #dropMenuAbout li a:visited, #dropMenuPartner li a:link, #dropMenuPartner li a:visited {
background-image: url(../images/navigation/primarynav_drop_item.gif);
background-repeat:repeat;
background-position:top left;
padding:5px;
}
    
#dropMenuServices li a:hover, #dropMenuServices li a:active, #dropMenuWhy li a:hover, #dropMenuWhy li a:active, #dropMenuSupport li a:hover, #dropMenuSupport li a:active, #dropMenuAbout li a:hover, #dropMenuAbout li a:active, #dropMenuPartner li a:hover, #dropMenuPartner li a:active {
background-image: url(../images/navigation/primarynav_drop_item_hover.gif);
background-repeat:repeat;
background-position:bottom;
padding:5px;
}

/* ---------------- */
/*  general layout  */
/* ---------------- */

#header{
margin:auto;
width:834px;
}

#body-container {
margin:auto;
padding:18px 18px 0px 18px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:798px;
background-color:#FFFFFF;
}

#body-container-client {
margin:auto;
padding:18px 18px 0px 18px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:798px;
background-color:#FFFFFF;
}

#body-container-client-support {
margin:auto;
padding:9px 9px 0px 9px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:816px;
background-color:#FFFFFF;
}

/* ------------------------- */
/*      sub-menu tabs      */
/* ------------------------- */

#tabcell td:hover {
background:#c3dcf1;
}

/* ---------------- */
/*      footer      */
/* ---------------- */

#footer {
margin:auto;
margin-top:10px;
padding:18px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:798px;
background-color:#9ec5e5;
border:1px solid #93c5ef;
border-top:none;
}

#footer-navigation {
color:white;
font-size:11px;
line-height:20px;
}

#footer-navigation li:hover {
background:#8bb6d9;
}

#footer-navigation a {
color:white;
}

#footer-navigation a:hover {
color:white;
}

.f_home {
width:40px;
float:left;
margin-right:8px;
}

.f_services {
width:140px;
float:left;
margin-right:8px;
}

.f_whyus {
width:90px;
float:left;
margin-right:8px;
}
.f_support {
width:130px;
float:left;
margin-right:8px;
}
.f_about {
width:120px;
float:left;
margin-right:8px;
}
.f_cc {
width:800px;
float:left;
margin-right:8px;
}

.footer-navigation-heading {
color:white;
font-size:11px;
font-family:inherit;
font-weight:normal;
background-color:#8bb6d9;
margin:0px;
padding:6px;
}

.footer-navigation-heading2 {
color:#white;
font-size:11px;
font-family:inherit;
font-weight:normal;
background-color:#8bb6d9;
margin:0px;
padding:3px 6px 3px 6px;
}

.footer-navigation-cc {
color:#8bb6d9;
font-size:14px;
font-family:inherit;
font-weight:normal;
background-color:#fff;
margin:0px;
padding:5px;
border:3px solid #8bb6d9;
text-align: center;
vertical-align: super;
}

ul.f_services, ul.f_whyus, ul.f_support, ul.f_about
{
 margin:0px;
 padding: 0px;
 text-align:left;
}

ul.f_services li, ul.f_whyus li, ul.f_support li, ul.f_about li
{
 list-style:none;
 margin:0px;
 padding:3px 0px 3px 6px;
 border-bottom:1px dotted #fff;
}

#contactdetails {
float:right;
background-color:#FFFFFF;
width:230px;
padding: 10px 0px 10px 0px;
}

#contactdetails p {
padding:0px 0px 0px 10px;
}

/* ------------------------- */
/*     hover buttons       */
/* ------------------------- */

button { 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 10px 0 0; 
  text-align:center;
  text-decoration: none;
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 10px; 
  text-align:center;
}

/*blue buttons*/
button.submitBtn { 
  background:url(../images/btn_blue_right.gif) right no-repeat; 
  font-size:1.3em; 
}
button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(../images/btn_blue_left.gif) left no-repeat;
  color:#fff; 
}
button.submitBtn:hover {
  background:url(../images/btn_blue_right_hover.gif) right no-repeat; 
}
button.submitBtn:hover span {
  background:url(../images/btn_blue_left_hover.gif) left no-repeat; 
}

/* ------------------------- */
/*           Chat Logo         */
/* ------------------------- */

#imgmap {
    position: relative;
}


#area1 {
    position: absolute;
    display: block;
    left: 603px;
    top: 37px;
    width: 227px;
    height: 47px;
}

Portion of a sub page (example)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>LogicWeb, a smart web solution</title>
<meta name="author" content="LogicWeb" />
<meta name="description" content="LogicWeb, provider of affordable website hosting since 2004." />
<meta name="keywords" content="web hosting, hosting, shared hosting, reseller hosting, cheap domains, multiple domains, affordable web hosting, support, savvis datacenter, LogicWeb, cenixhost, webhost, web host, inexpensive, cheap, australia, bundle multi-accounts, united states, webhosting from savvis, website hosting, reliable, affordable, solutions, services, quality, superior uptime, designers, developers, web agencies, hosting plans, large bandwidth" />

<style type="text/css">
<!--
@import url("styles/site.css");
@import url("styles/homepage.css");
#menuItemHome .tab { background:url(images/navigation/on_home.gif) no-repeat top left; }
.style1 {
	border-width: 0;
}
.style2 {
	color: #FF722B;
}
.style3 {
	text-decoration: underline;
}
-->
</style>

<script type="text/javascript" src="scripts/tabber.js"></script>
<link rel="stylesheet" href="styles/tabs.css" type="text/css" media="screen" />
<!--[if IE]>
<script type="text/javascript">try {  document.execCommand(\'BackgroundImageCache\', false, true); } catch(e) {}</script>
<link rel="stylesheet" type="text/css" href="'core/css/designIE.css" />
<style type="text/css">body { behavior: url('.$siteurl.'css/hover-css.htc); }</style>
<![endif]-->
</head>
<body>

<div id="header">
<div id="imgmap">
    <a href="/index.php">
    <img src="images/header.gif" alt="Logo" class="style1" /></a>
	<a id="area1" href="#" onclick="window.open('http://messenger.providesupport.com/messenger/chadi.html', '_blank', 'menubar=0,location=0,scrollbars=auto,resizable=1,status=0,width=500,height=460')"></a>
</div>

<div id="menu">
<ul id="primary-navigation">
<li id="menuItemHome"><a class="tab" href="http://www.logicweb.com"><span>Home</span></a></li>
<li id="menuItemServices"><a class="tab" href="/services/index.php"><span>Services</span></a>
<ul id="dropMenuServices"><li><a href="/services/shared.php">Shared Hosting Plans</a></li>
<li><a href="/services/reseller.php">Reseller Hosting Plans</a></li>
<li><a href="/services/vps/index.php">Virtual Private Servers</a></li>
<li><a href="/services/server/index.php">Linux / Windows Dedicated Servers</a></li>
<li><a href="/services/compare.php">Compare Hosting Types</a></li>
<li><a href="/services/index.php">Additional Services</a></li>
<li><img src="images/navigation/dropmenu_bottom_services.gif" alt="Drop Menu" /></li></ul></li>

<li id="menuItemWhy"><a class="tab" href="/reasons/index.php"><span>Why Us?</span></a>
<ul id="dropMenuWhy"><li><a href="/reasons/awards.php">Awards</a></li>
<li><a href="/network/index.php">Data Center</a></li>
<li><a href="/reasons/index.php">Logical Solutions</a></li>
<li><a href="/reasons/guarantee.php">Guarantee</a></li>
<li><a href="/reasons/testimonials.php">Testimonials</a></li>
<li><img src="images/navigation/dropmenu_bottom_why.gif" alt="Drop Menu" /></li></ul></li>

<li id="menuItemSupport"><a class="tab" href="/portal/index.php"><span>Support</span></a>
<ul id="dropMenuSupport"><li><a href="https://www.logicweb.com/billing">Billing Portal</a></li>
<li><a href="/portal/contact.php">Contact Us</a></li><li><a href="https://www.logicweb.com/support/index.php?_m=knowledgebase&amp;a=view">Knowledgebase</a></li>
<li><a href="/portal/index.php">Support Desk</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" alt="Drop Menu" /></li></ul></li>

<li id="menuItemAbout"><a class="tab" href="/aboutus/index.php"><span>About Us</span></a>
<ul id="dropMenuAbout"><li><a href="/aboutus/company.php">Company Overview</a></li>
<li><a href="/aboutus/aup.php">Acceptable Use Policy</a></li>
<li><a href="/aboutus/contact.php">Contact Us</a></li>
<li><a href="/aboutus/dmca.php">DMCA</a></li>
<li><a href="/aboutus/faq.php">FAQ</a></li>
<li><a href="/aboutus/privacy.php">Privacy</a></li>
<li><a href="/aboutus/tos.php">Terms of Service</a></li>
<li><img src="images/navigation/dropmenu_bottom_why.gif" alt="Drop Menu" /></li></ul></li>

<li id="menuItemPartner"><a class="tab" href="https://www.logicweb.com/billing/cart.php"><span>Partner</span></a></li>
</ul>
</div>
</div>

#2

I actually just noticed another problem in IE7 specifically (32bit / 64bit same). I know IE is horrible, but from an accessibility point of view I have to try anything I can to make sure it works for all.

See attached. The drop down does not go away when you hover to another tab.

[IMG]http://aycu25.webshots.com/image/43904/2001890566433275998_rs.jpg[/IMG]

html-css web-design

3 Contributors
16 Replies
203 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by LogicWeb

ndeniche 402 Posting Virtuoso

16 Years Ago

shouldn't the dropdown menu be designed in javascript?

ndeniche 402 Posting Virtuoso

16 Years Ago

do you have a backup? maybe you could turn back to a restore point and start again with the sliding menus and see where it went the wrong way...

FC Jamison 31 Posting Pro in Training

16 Years Ago

Your initial problem should be able to be resolved by preloading the rollover images.

ndeniche 402 Posting Virtuoso

16 Years Ago

no programmer in his sane mind would try to read your html code... you should try writing it a little bit nicer...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

LogicWeb 0 Junior Poster in Training · Answer 1 · 2008-02-06T21:43:51+00:00

It was designed in css and was working fine until someone else suggested switching to sliding menus style to fix the disappearing tab upon initial hover.

LogicWeb 0 Junior Poster in Training · Answer 2 · 2008-02-08T05:12:41+00:00

I do have a backup, but the original problem was the disappearing tabs on initial page load / hover. The whole point of sliding doors was to fix this problem.

LogicWeb 0 Junior Poster in Training · Answer 3 · 2008-02-12T03:08:47+00:00

Your initial problem should be able to be resolved by preloading the rollover images.

Thanks for your response. I'm not a designer by trade, so please if you may help me out on how to achieve. I'm getting mixed Google search results here.

My site.css sheet currently is this

body {
margin:0px;
padding:0px;
border:0px;
color:#738f93;
font-family: Tahoma, "Trebuchet MS", Arial, Verdana, Lucida, Sans-Serif;
font-size:12px;
line-height:16px;
background-color:#c3dcf1;
background-image:url(../images/bgd_page.gif);
background-repeat:repeat-x;
}

A:link, A:active, A:visited {
color:#2fb4c8;
text-decoration: none;
}

A:hover {
color:#2fb4c8;
text-decoration: underline;
}

/* ------------------ */
/* primary navigation */
/* ------------------ */

#menu {
margin:0px;
padding:0px;
background-image:url(../images/navigation/primary_nav_full_bgd.gif);
background-repeat:no-repeat;
height:42px;
}

ul#primary-navigation {
margin:0px;
padding:0px;
white-space: nowrap;
padding:10px 0px 0px 14px;
}

#primary-navigation li {
margin:0px;
padding:0px;
display:inline;
list-style-type: none;
float:left;
margin: 0 5px 0 0;
}

#primary-navigation li a {
display:block;
padding:0;
margin-right:0px;
}

#menuItemHome,
#menuItemServices,
#menuItemWhy,
#menuItemSupport, 
#menuItemAbout, 
#menuItemOrder { display: block; height: 32px; }

#menuItemHome { width: 64px; background:url(../images/navigation/_home.gif); background-repeat:no-repeat; background-position:top left;}
#menuItemServices { width: 80px; background:url(../images/navigation/_services.gif); background-repeat:no-repeat; background-position:top left;}
#menuItemWhy { width: 79px; background:url(../images/navigation/_why.gif); background-repeat:no-repeat; background-position:top left;}
#menuItemSupport { width: 80px; background:url(../images/navigation/_support.gif); background-repeat:no-repeat; background-position:top left;}
#menuItemAbout { width: 86px; background:url(../images/navigation/_about.gif); background-repeat:no-repeat; background-position:top left;}
#menuItemOrder { width: 86px; background:url(../images/navigation/_order.gif); background-repeat:no-repeat; background-position:top left;}

#menuItemHome:hover {position: static; background-image:url(../images/navigation/active_home.gif);}
#menuItemServices:hover {position: static; background-image:url(../images/navigation/active_services.gif);}
#menuItemWhy:hover {position: static; background-image:url(../images/navigation/active_why.gif);}
#menuItemSupport:hover {position: static; background-image:url(../images/navigation/active_support.gif);}
#menuItemAbout:hover {position: static; background-image:url(../images/navigation/active_about.gif);}
#menuItemOrder:hover {position: static; background-image:url(../images/navigation/active_order.gif);}

/* drop down box elements */

#primary-navigation li ul {
position:absolute;
width:150px;
left:-999em;
margin:0px;
padding:0px;
font-size:11px;
color:white;
}

#primary-navigation li:hover ul, #primary-navigation li.sfHover ul {
left: auto;
}

/* individual drop down menu widths */

#dropMenuServices li, #dropMenuWhy li, #dropMenuSupport li, #dropMenuAbout li, #dropMenuPartner li {
margin:0;
padding:0;
display:block;
}

#dropMenuServices a, #dropMenuWhy a, #dropMenuSupport a, #dropMenuAbout a, #dropMenuPartner a  {
width:140px;
}

#dropMenuServices a {
width:175px;
}

#dropMenuServices a:link, #dropMenuWhy a:link, #dropMenuSupport a:link, #dropMenuAbout a:link, #dropMenuPartner a:link {color:white;}

#dropMenuServices a:visited, #dropMenuWhy a:visited, #dropMenuSupport a:visited, #dropMenuAbout a:visited, #dropMenuPartner a:visited {color:white;}
    
#dropMenuServices li a:link, #dropMenuServices li a:visited, #dropMenuWhy li a:link, #dropMenuWhy li a:visited, #dropMenuSupport li a:link, #dropMenuSupport li a:visited, #dropMenuAbout li a:link, #dropMenuAbout li a:visited, #dropMenuPartner li a:link, #dropMenuPartner li a:visited {
background-image: url(../images/navigation/primarynav_drop_item.gif);
background-repeat:repeat;
background-position:top left;
padding:5px;
}
    
#dropMenuServices li a:hover, #dropMenuServices li a:active, #dropMenuWhy li a:hover, #dropMenuWhy li a:active, #dropMenuSupport li a:hover, #dropMenuSupport li a:active, #dropMenuAbout li a:hover, #dropMenuAbout li a:active, #dropMenuPartner li a:hover, #dropMenuPartner li a:active {
background-image: url(../images/navigation/primarynav_drop_item_hover.gif);
background-repeat:repeat;
background-position:bottom;
padding:5px;
}

/* ---------------- */
/*  general layout  */
/* ---------------- */

#header{
margin:auto;
width:834px;
}

#body-container {
margin:auto;
padding:18px 18px 0px 18px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:798px;
background-color:#FFFFFF;
}

#body-container-client {
margin:auto;
padding:18px 18px 0px 18px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:798px;
background-color:#FFFFFF;
}

#body-container-client-support {
margin:auto;
padding:9px 9px 0px 9px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:816px;
background-color:#FFFFFF;
}

/* ------------------------- */
/*      sub-menu tabs      */
/* ------------------------- */

#tabcell td:hover {
background:#c3dcf1;
}

/* ---------------- */
/*      footer      */
/* ---------------- */

#footer {
margin:auto;
margin-top:10px;
padding:18px;
/* box model hack for ie 5.5 */
width:834px;
voice-family: "\"}\""; 
voice-family:inherit;
width:798px;
background-color:#9ec5e5;
border:1px solid #93c5ef;
border-top:none;
}

#footer-navigation {
color:white;
font-size:11px;
line-height:20px;
}

#footer-navigation li:hover {
background:#8bb6d9;
}

#footer-navigation a {
color:white;
}

#footer-navigation a:hover {
color:white;
}

.f_home {
width:40px;
float:left;
margin-right:8px;
}

.f_services {
width:140px;
float:left;
margin-right:8px;
}

.f_whyus {
width:90px;
float:left;
margin-right:8px;
}
.f_support {
width:130px;
float:left;
margin-right:8px;
}
.f_about {
width:120px;
float:left;
margin-right:8px;
}
.f_cc {
width:800px;
float:left;
margin-right:8px;
}

.footer-navigation-heading {
color:white;
font-size:11px;
font-family:inherit;
font-weight:normal;
background-color:#8bb6d9;
margin:0px;
padding:6px;
}

.footer-navigation-heading2 {
color:white;
font-size:11px;
font-family:inherit;
font-weight:normal;
background-color:#8bb6d9;
margin:0px;
padding:3px 6px 3px 6px;
}

.footer-navigation-cc {
color:#8bb6d9;
font-size:14px;
font-family:inherit;
font-weight:normal;
background-color:#fff;
margin:0px;
padding:5px;
border:3px solid #8bb6d9;
text-align: center;
vertical-align: super;
}

ul.f_services, ul.f_whyus, ul.f_support, ul.f_about
{
 margin:0px;
 padding: 0px;
 text-align:left;
}

ul.f_services li, ul.f_whyus li, ul.f_support li, ul.f_about li
{
 list-style:none;
 margin:0px;
 padding:3px 0px 3px 6px;
 border-bottom:1px dotted #fff;
}

#contactdetails {
float:right;
background-color:#FFFFFF;
width:230px;
padding: 10px 0px 10px 0px;
}

#contactdetails p {
padding:0px 0px 0px 10px;
}

/* ------------------------- */
/*     hover buttons       */
/* ------------------------- */

button { 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 10px 0 0; 
  text-align:center;
  text-decoration: none;
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 10px; 
  text-align:center;
}

/*blue buttons*/
button.submitBtn { 
  background:url(../images/btn_blue_right.gif) right no-repeat; 
  font-size:1.3em; 
}
button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(../images/btn_blue_left.gif) left no-repeat;
  color:#fff; 
}
button.submitBtn:hover {
  background:url(../images/btn_blue_right_hover.gif) right no-repeat; 
}
button.submitBtn:hover span {
  background:url(../images/btn_blue_left_hover.gif) left no-repeat; 
}

/* ------------------------- */
/*		   Chat Logo         */
/* ------------------------- */

#imgmap {
    position: relative;
}

#area1 {
    position: absolute;
    display: block;
    left: 603px;
    top: 37px;
    width: 227px;
    height: 47px;
}

The html is this:

<div id="menu">
<ul id="primary-navigation">
<li id="menuItemHome"><a href="http://www.logicweb.com"><img src="images/navigation/spacer_home.gif" border="0" alt="home" /></a></li>
<li id="menuItemServices"><a href="/services/index.php"><img src="images/navigation/spacer_services.gif" border="0" alt="services" /></a><ul id="dropMenuServices"><li><a href="/services/shared.php">Shared Hosting Plans</a></li><li><a href="/services/reseller.php">Reseller Hosting Plans</a></li><li><a href="/services/vps/index.php">Virtual Private Servers</a></li><li><a href="/services/server/index.php">Linux / Windows Dedicated Servers</a></li><li><a href="/services/compare.php">Compare Hosting Types</a></li><li><a href="/services/index.php">Additional Services</a></li><li><img src="images/navigation/dropmenu_bottom_services.gif" border="0" alt="" /></li></ul></li>
<li id="menuItemWhy"><a href="/reasons/index.php"><img src="images/navigation/spacer_why.gif" border="0" alt="why us?" /></a><ul id="dropMenuWhy"><li><a href="/reasons/awards.php">Awards</a></li><li><a href="/network/index.php">Data Center</a></li><li><a href="/reasons/index.php">Logical Solutions</a></li><li><a href="/reasons/guarantee.php">Guarantee</a></li><li><a href="/reasons/testimonials.php">Testimonials</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li></ul></li>
<li id="menuItemSupport"><a href="/portal/index.php"><img src="images/navigation/spacer_support.gif" border="0" alt="support" /></a><ul id="dropMenuSupport"><li><a href="https://www.logicweb.com/billing">Billing Portal</a></li><li><a href="/portal/contact.php">Contact Us</a></li><li><a href="https://www.logicweb.com/support/index.php?_m=knowledgebase&amp;a=view">Knowledgebase</a></li><li><a href="/portal/index.php">Support Desk</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li></ul></li>
<li id="menuItemAbout"><a href="/aboutus/index.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a><ul id="dropMenuAbout"><li><a href="/aboutus/company.php">Company Overview</a></li><li><a href="/aboutus/aup.php">Acceptable Use Policy</a></li><li><a href="/aboutus/affiliates.php">Affiliates</a></li><li><a href="/aboutus/contact.php">Contact Us</a></li><li><a href="/aboutus/dmca.php">DMCA</a></li><li><a href="/aboutus/faq.php">FAQ</a></li><li><a href="/aboutus/privacy.php">Privacy</a></li><li><a href="/aboutus/tos.php">Terms of Service</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li></ul></li>
<li id="menuItemOrder"><a href="https://www.logicweb.com/billing/cart.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a></li>
</ul>
</div>
</div>

LogicWeb 0 Junior Poster in Training · Answer 4 · 2008-02-12T10:55:44+00:00

no programmer in his sane mind would try to read your html code... you should try writing it a little bit nicer...

Did it ever occur to you the code is crushed by the small width of the forums? It looks perfectly "nice" in my html editor and source code, had you even tried looking first.

Did you read my post? I am not a designer / programmer. If I was, I wouldn't be here asking for a little help.

ndeniche 402 Posting Virtuoso Featured Poster · Answer 5 · 2008-02-12T11:09:42+00:00

dude... take a chill pill...

first of all, not because you're a programmer it means you don't need help... that's what this community is for...

second, i did read, but got stuck when i got to the code... you could use a little indenting... like this:

<div id="menu">
<ul id="primary-navigation">
	<li id="menuItemHome"><a href="http://www.logicweb.com"><img src="images/navigation/spacer_home.gif" border="0" alt="home" /></a></li>
	<li id="menuItemServices">
		<a href="/services/index.php"><img src="images/navigation/spacer_services.gif" border="0" alt="services" /></a>
		<ul id="dropMenuServices">
			<li><a href="/services/shared.php">Shared Hosting Plans</a></li>
			<li><a href="/services/reseller.php">Reseller Hosting Plans</a></li>
			<li><a href="/services/vps/index.php">Virtual Private Servers</a></li>
			<li><a href="/services/server/index.php">Linux / Windows Dedicated Servers</a></li>
			<li><a href="/services/compare.php">Compare Hosting Types</a></li>
			<li><a href="/services/index.php">Additional Services</a></li>
			<li><img src="images/navigation/dropmenu_bottom_services.gif" border="0" alt="" /></li>
		</ul>
	</li>
	<li id="menuItemWhy">
		<a href="/reasons/index.php"><img src="images/navigation/spacer_why.gif" border="0" alt="why us?" /></a>
		<ul id="dropMenuWhy">
			<li><a href="/reasons/awards.php">Awards</a></li>
			<li><a href="/network/index.php">Data Center</a></li>
			<li><a href="/reasons/index.php">Logical Solutions</a></li>
			<li><a href="/reasons/guarantee.php">Guarantee</a></li>
			<li><a href="/reasons/testimonials.php">Testimonials</a></li>
			<li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li>
		</ul>
	</li>
	<li id="menuItemSupport">
		<a href="/portal/index.php"><img src="images/navigation/spacer_support.gif" border="0" alt="support" /></a>
		<ul id="dropMenuSupport">
			<li><a href="https://www.logicweb.com/billing">Billing Portal</a></li>
			<li><a href="/portal/contact.php">Contact Us</a></li>
			<li><a href="https://www.logicweb.com/support/index.php?_m=knowledgebase&amp;a=view">Knowledgebase</a></li>
			<li><a href="/portal/index.php">Support Desk</a></li>
			<li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li>
		</ul>
	</li>
	<li id="menuItemAbout">
		<a href="/aboutus/index.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a>
		<ul id="dropMenuAbout">
			<li><a href="/aboutus/company.php">Company Overview</a></li>
			<li><a href="/aboutus/aup.php">Acceptable Use Policy</a></li>
			<li><a href="/aboutus/affiliates.php">Affiliates</a></li>
			<li><a href="/aboutus/contact.php">Contact Us</a></li>
			<li><a href="/aboutus/dmca.php">DMCA</a></li>
			<li><a href="/aboutus/faq.php">FAQ</a></li>
			<li><a href="/aboutus/privacy.php">Privacy</a></li>
			<li><a href="/aboutus/tos.php">Terms of Service</a></li>
			<li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li>
		</ul>
	</li>
	<li id="menuItemOrder">
		<a href="https://www.logicweb.com/billing/cart.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a>
	</li>
</ul>
</div>

since you're not a programmer, you can't tell how hard it is to read a disordered code...

btw... fyi, it looks pretty in my html editor...

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 6 · 2008-02-12T15:52:51+00:00

Web site visitors hate to wait, so many Web designers preload images to speed up page display. Although JavaScript is the most common way to preload images, it isn't your only option. Consider using the CSS DISPLAY property instead. It may be more reliable and it requires less complex code.

First, let's create a class with display set to none and add it to the HEAD section of the page:

<style type="text/css">
.hiddenPic {display:none;}
</style>

Next, we'll add image tags for our images. Always place them at the bottom of the page! If the visitor is at the home page, you certainly want it to display as quickly as possible.

<img src="image1.jpg" 
  alt="image1" title="image1" 
    height="350" width="350" class="hiddenPic">

<img src="image2.jpg" 
  alt="image2" title="image2" 
    height="350" width="350" class="hiddenPic">

<img src="image3.jpg" 
  alt="image3" title="image3" 
    height="350" width="350" class="hiddenPic">

Note that we used the "hidden" class name for each image. Again, the browser will request the image files and save them locally, but will not display them on the page as long as the DISPLAY property is set to none. Don't use that class for every image on your page or none will display!

LogicWeb 0 Junior Poster in Training · Answer 7 · 2008-02-12T21:09:17+00:00

Thanks FC. My question is which 3 images should I be applying this to? The menu tabs is under three images per tab

Example:
http://www.logicweb.com/images/navigation/_about.gif

Then:
http://www.logicweb.com/images/navigation/active_about.gif

Active:
http://www.logicweb.com/images/navigation/on_about.gif

LogicWeb 0 Junior Poster in Training · Answer 8 · 2008-02-12T21:39:45+00:00

I gave it a go on the 3 tabs (inactive, active, on) and I have this rather strange issue in firefox where the menu background is not showing up. Strange, because I did not apply your method to the background at all.

Attached is a comparison with IE7. Are you able to duplicate this?

On a side note, do you know how I can somehow apply this preloader procedure to the ajax tabs on the home page?

Thanks again.

PS: please confirm if I even applied this correctly. To me it seems to work right on the tabs. I think I also fixed the firefox issue.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 9 · 2008-02-13T08:05:20+00:00

I didn't recreate your site, I was simply advising you on how to preload your menu images.

I would apply the method I described to any image that is called when you hover over a tab.

Glancing at the css again, I would apply the hiddenPic class to the images referenced here:

#menuItemHome:hover {position: static; background-image:url(../images/navigation/active_home.gif);}
#menuItemServices:hover {position: static; background-image:url(../images/navigation/active_services.gif);}
#menuItemWhy:hover {position: static; background-image:url(../images/navigation/active_why.gif);}
#menuItemSupport:hover {position: static; background-image:url(../images/navigation/active_support.gif);}
#menuItemabout:hover {position: static; background-image:url(../images/navigation/active_about.gif);}
#menuItemOrder:hover {position: static; background-image:url(../images/navigation/active_order.gif);}

LogicWeb 0 Junior Poster in Training · Answer 10 · 2008-02-13T08:46:31+00:00

Thanks. That's exactly what I had done.

I added this for example to the main index.php at the bottom, slightly before </body> tag.

<img src="images/navigation/active_about.gif" 
  alt="image2" title="image2" 
    height="86" width="32" class="hiddenPic" />

<img src="images/navigation/active_home.gif" 
  alt="image2" title="image2" 
    height="86" width="32" class="hiddenPic" />

<img src="images/navigation/active_services.gif" 
  alt="image2" title="image2" 
    height="86" width="32" class="hiddenPic" />

<img src="images/navigation/active_why.gif" 
  alt="image2" title="image2" 
    height="86" width="32" class="hiddenPic" />

<img src="images/navigation/active_support.gif" 
  alt="image2" title="image2" 
    height="86" width="32" class="hiddenPic" />

<img src="images/navigation/active_order.gif" 
  alt="image2" title="image2" 
    height="86" width="32" class="hiddenPic" />

<img src="images/navigation/on_order.gif"
  alt="image3" title="image3" 
    height="86" width="32" class="hiddenPic" />

I added this to the head part.

It renders the bg image (behind tabs) blank in firefox, even though I did not apply your method to that image as you can see above. It works fine in IE7 odd enough. Baffled.

This is the bg image I'm referring to
http://www.logicweb.com/images/navigation/primary_nav_full_bgd.gif

If you know what may cause that to not display in Firefox please let me know. Thanks again.

FC Jamison 31 Posting Pro in Training Team Colleague · Answer 11 · 2008-02-13T09:15:46+00:00

FC Jamison 31 Posting Pro in Training

16 Years Ago

The page looks good when I view it in Firefox.

LogicWeb 0 Junior Poster in Training · Answer 12 · 2008-02-13T09:22:17+00:00

Thanks. I tested it with Browser Shots. Apparently I have a corrupt FF profile.

I appreciate your help. Thanks again.