[Resolved] Left Menu Not Working in IE (I'm a noob(

Breakpoint · Jan 6, 2007

Left Menu Not Working in IE (Im a noob(

I am just getting into designing websites and I have a problem with understanding how something works in FF but not IE. I am looking to see if anyone here has a working answer for me to get it to work in IE also.

I am trying to create a left side menu for a template and have a little divider between the buttons. The buttons have a blue background color and the divider is an image 2px high by 1px wide which repeats on x.

The website preview is at http://www.breakpointdesigns.com/nathan
It works in Firefox, but not IE.

Here is the code I am using.

Code:

<html>
 <head>
  <style type="text/css">

   body 
   {
    text-align: center;
    background-image : url("images/background.jpg"); 
    background-repeat : repeat;
    font-size:12px;
   }

   #center 
   { 
    width:671px; 
    margin:0px auto; 
    text-align:left; 
   }

   #width 
   { 
    width:671px; 
   } 

   #header 
   { 
    width:671px; 
    height:96px;
    background-color:#ffffff;
   } 

   #top_gradient 
   {
    width:611px;
    float:left; 
    height:18px;
    background-image:url("images/topgradient.gif"); 
    background-repeat:repeat-x; 
   } 

   #divider
   {
    width:2px;
    float:left; 
    height:18px;
    background-image:url("images/divider.gif");
    background-repeat:repeat-x;
   }

   #login_button
   {
    width:58px;
    float:right; 
    height:18px;
    background-image:url("images/topgradient.gif");
    background-repeat:repeat-x;
    line-height:18px;
    text-align: center;
   }

   #banner
   {
    width:671px;
    float:left; 
    height:56px;
    background-image:url("images/banner.gif");
    background-repeat:repeat-x;
    margin-top:2px;
    margin-bottom:2px;
   } 

   a.white:link {color: #ffffff; text-decoration: none; }
   a.white:visited {color: #ffffff; text-decoration: none; }
   a.white:hover {color: #ffffff; text-decoration: underline; }
   a.white:active {color: #ffffff; } 

   #bottom_gradient 
   {
    width:190px;
    float:left; 
    height:18px;
    background-image:url("images/bottomgradient.gif"); 
    background-repeat:repeat-x;
   } 

   .divider2
   {
    width:2px;
    float:left; 
    height:18px;
    background-image:url("images/divider2.gif");
    background-repeat:repeat-x;
   }

   .bottom_gradient2 
   {
    width:70px;
    float:left; 
    height:18px;
    background-image:url("images/bottomgradient.gif"); 
    background-repeat:repeat-x;
    line-height:18px;
    text-align: center;
   }

   #bottom_gradient3 
   {
    width:191px;
    float:left; 
    height:18px;
    background-image:url("images/bottomgradient.gif"); 
    background-repeat:repeat-x;
   }

   #main
   {
    width:671px;
    float:left; 
    height:100%;
    background-color:#ffffff;
   } 

   #leftmenu
   {
    width:130px;
    float:left; 
    height:100%;
    margin-top:10px;
    margin-bottom:10px;
   }

   #navigation
   {
    width:130px;
    float:left;
    height:18px;
    background-image:url("images/topgradient.gif"); 
    background-repeat:repeat-x;
    margin-bottom:1px;
   }

   .button
   {
    width:130px;
    float:left;
    height:18px;
    background-color:#03237D; 
   }

   .menudivider
   {
    width:130px;
    float:left; 
    height:2px;
    background-image:url("images/menudivider.gif");
    background-repeat:repeat-x;
   }

  </style>
 </head>
 <body>
  <div id="center"> <!-- Centers FireFox --!>
   <div id="width">
    <div id="header">
     <div id="top_gradient">
     </div>
     <div id="divider">
     </div>
     <div id="login_button"><a class="white" href="#">Login</a>
     </div>
     <div id="banner">
     </div>
     <div id="bottom_gradient">
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">Home</a>
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">About</a>
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">Portfolio</a>
     </div>
     <div class="divider2">
     </div>
     <div class="bottom_gradient2"><a class="white" href="#">Contact</a>
     </div>
     <div class="divider2">
     </div>
     <div id="bottom_gradient3">
     </div>
    </div>
    <div id="main">
     <div id="leftmenu">
      <div id="navigation">
      </div>
      <div class="button">
      </div>
      <div class="menudivider">
      </div>
      <div class="button">
      </div>
      <div class="menudivider">
      </div>
      <div class="button">
      </div>
      <div class="menudivider">
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

beaver6813 · Jan 6, 2007

Firstly i reccomend strongly that you do not use DIV's for the menu's and that instead you use <ul> and <li>. As its what they are primarily for. I have optimized this as much as i can in the small space of time i have. And removed tons of div's and css tags that were un-needed. Use div's sparingly, you used one for every single thing there, ive even merged some of the css tags together because you had one <div id="width"> that did exactly the same as the one above it.

I've converted both menus to use <ul>'s and <li>'s , the divider you had at the bottom of each button in the menu i changed to use a bottom border, which looks almost identical. I've also changed the layout of the horizontal menu, it now only uses 1 image.

http://www.beaver6813.com/temp/breakpointdesigns.com.htm

This time i've done it for free

But remember to keep your code as slim as possible next time.

Code:

<html><head>
 
  <style type="text/css">

   body 
   {
    text-align: center;
    background-image : url("http://breakpointdesigns.com/nathan/images/background.jpg"); 
    background-repeat : repeat;
    font-size:12px;
   }

   #center 
   { 
    width:671px; 
    margin:0px auto; 
    text-align:left; 
   }

   #width 
   { 
    width:671px; 
   } 

   #header 
   { 
    width:671px; 
    height:96px;
    background-color:#ffffff;
   } 

   #top_gradient 
   {
    width:611px;
    float:left; 
    height:18px;
    background-image:url("http://breakpointdesigns.com/nathan/images/topgradient.gif"); 
    background-repeat:repeat-x; 
   } 

   #divider
   {
    width:2px;
    float:left; 
    height:18px;
    background-image:url("http://breakpointdesigns.com/nathan/images/divider.gif");
    background-repeat:repeat-x;
   }

   #login_button
   {
    width:58px;
    float:right; 
    height:18px;
    background-image:url("http://breakpointdesigns.com/nathan/images/topgradient.gif");
    background-repeat:repeat-x;
    line-height:18px;
    text-align: center;
   }

   #banner
   {
    width:671px;
    float:left; 
    height:56px;
    background-image:url("http://breakpointdesigns.com/nathan/images/banner.gif");
    background-repeat:repeat-x;
    margin-top:2px;
    margin-bottom:2px;
   } 

   #main
   {
    width:671px;
    float:left; 
    height:100%;
    background-color:#ffffff;
   } 

   #leftmenu
   {
    width:130px;
    float:left; 
    height:100%;
    margin-top:10px;
    margin-bottom:10px;
   }

   #navigation
   {
    background-image:url("http://breakpointdesigns.com/nathan/images/topgradient.gif"); 
    background-repeat:repeat-x;
	padding-left:5px;
   }

#tab-container{
background-image:url("http://breakpointdesigns.com/nathan/images/bottomgradient.gif");
width:100%;
}

#nav-tabs-horizontal{
margin: 0;
padding: 0;
text-decoration: none;
list-style:none;
}

	#nav-tabs-horizontal li{
	display: inline;
	text-decoration: none;
	margin: 0px;
	padding-left:20px;
 	padding-right:20px;
 	border-left:thin groove #425A9E;
	}
		#nav-tabs-horizontal li a:link {color: #ffffff; text-decoration: none; }
   		#nav-tabs-horizontal li a:visited {color: #ffffff; text-decoration: none; }
   		#nav-tabs-horizontal li a:hover {color: #ffffff; text-decoration: underline; }
   		#nav-tabs-horizontal li a:active {color: #ffffff; } 
		
		
.farright{
border-right:thin groove #425A9E;
}

#nav-tabs{
text-decoration: none;
list-style:none;
margin:0;
padding:0;

}
#nav-tabs li
   {
   text-decoration: none;
    background-color:#03237D;
    line-height:17px;
    padding-left: 19px;
    margin: 0px;
	border-bottom:groove thin #425A9E;
	}
		#nav-tabs li a:link {color: #ffffff; text-decoration: none; }
   		#nav-tabs li a:visited {color: #ffffff; text-decoration: none; }
   		#nav-tabs li a:hover {color: #ffffff; text-decoration: underline; }
   		#nav-tabs li a:active {color: #ffffff; } 
	.white{
	color:#FFFFFF;
	}

   }
  </style></head><body>
  <div id="center"> <!-- Centers FireFox -->
    <div id="header">
     <div id="top_gradient">
     </div>
     <div id="divider">
     </div>
     <div id="login_button"><a class="white" href="#">Login</a>
     </div>
     <div id="banner">
     </div>
	 <div id="tab-container" align="center">
	 <ul id="nav-tabs-horizontal">
	 <li><a href="#">Home</a></li>
	 <li><a href="#">About</a></li>
	 <li><a href="#">Portfolio</a></li>
	 <li class="farright"><a href="#">Contact</a></li>
	</ul>
	</div>
    </div>
    <div id="main">
     <div id="leftmenu">
	<ul id="nav-tabs">
	<li id="navigation" class="white">Navigation</li>
	 <li><a href="#">Home</a></li>
	 <li><a href="#">About</a></li>
	 <li><a href="#">Portfolio</a></li>
	 <li><a href="#">Contact</a></li>
	</ul>
     </div>
    </div>
  </div>
 </body></html>

Rep & $NP Appreciated

Breakpoint · Jan 9, 2007

thank you, i have save the temp page to my harddrive and will look over you code and gain knowledge, I will have some questions in the future and would like your help if you would be willing (easy questions)

I have donated all the NP$ I have and will try and get some more for the future.

[Resolved] Left Menu Not Working in IE (I'm a noob(

More options

Breakpoint

Established Member

beaver6813

Established Member

Breakpoint

Established Member

Similar threads

We're social

New posts ➔

Auction activity ➔

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest ➔

Hot this week ➔

Community favorite ➔

Hot this month ➔

Blog favorites

FACO.org

deepfakedetectionsoftware.com

DigiCities.com

qtzero.com

CharlestonConsulting.com

Backpacking.co

FatWars.com

XHDEX.com

pio.gr

zerofrio.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling