CSS Horizontal Menu Bar - IE Problems!!

[swillicott]

Hi,

I have just finished building a template page for a website I am building which views fine in both safari and FF for mac. However, when tested in IE and FF for windows I get some horible results!!

You can view the site here:

http://www.eightyonedesign.co.uk/cli.../template.html

And this is how it should look:

http://www.eightyonedesign.co.uk/cli...mock-up-2.html

The menu bar views fine in Safari and FF but the images which load behind the unordered list do not show up properly in IE? and I can't figure out for the life of me what is throwing it out?

i am also having some problems with getting the menu to fill the hoizontal width of the navbar div? and I can't seem to figure out how to center the nav?

I know it is a lot to look through but If anyone can save me it would be much appreciated - i think i have been looking at the code too long!!!

Thanks

Steve

My css:

Code: Select all

/* Header*/ 

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

#flash { width : 796px; margin: auto;}

/* Navbar */ 

#navbar { width : 796px; height:50px; margin: auto; background-image:url(images/nav-main-bg.gif); background-repeat:repeat-y;}

	
.menu {
	list-style-type:none;
	margin:0px 8px;
	padding:0;
	height:50px;
	border-top:2px solid #FFFFFF;
	overflow:hidden;
}

.menu li {
	background:none;
	padding:0;
	display:table-row;
	vertical-align:middle;
	float:left;
	height:50px;
	
}

.menu li.last_menu,{
	float:right;
}


.menu li a {
	font-size:70%;
	line-height:normal;
	line-height:50px;
	display:table-cell;
	vertical-align:middle;
	height:50px;
	padding:0 5px 0 6px;
	background-image:url("images/nav-bg.gif");
}

.menu li a:hover,
.menu li a:active {
	background-position:center left;
	color:#FFFFFF;
}

.menu li.current_page_item a {
	background-position:bottom left;
	color:#FFFFFF;
}

.menu li a.first_menu {
	padding-left:35px;
	background-repeat:no-repeat;
	background-image:url("images/nav-bg-start.gif");
}

.menu li a.last_menu{
	padding-right:35px;
	background-repeat:no-repeat;
	background-image:url("images/nav-bg-end.gif");
	background-position:top right;
}

.menu li a.last_menu:hover,
.menu li a.last_menu:active {
	background-position:center right;
}

.menu li.current_page_item a.last_menu {
	background-position:bottom right;
}

.menu li a {
	color:white;
	text-decoration:none;
}


/* content boxes */ 

#contentwrapper {width : 796px; margin-left : auto; margin-right : auto; background-image:url(images/content-bg.gif); background-repeat:repeat-y; }

#content { width : 549px; padding-left: 22px; padding-right: 10px; float: left;}

#contentbox1, #contentbox3, #contentbox5 { float: left; width: 244px; border-right:1px solid #CCCCCC; padding-right: 20px; padding-bottom: 32767px; margin-bottom: -32767px;}

#contentbox2, #contentbox4, #contentbox6 { float: left; width: 244px; padding-left: 20px; padding-bottom: 32767px; margin-bottom: -32767px;}

#rowwrapper1, #rowwrapper2 { width: 549px; overflow: hidden; border-bottom:1px solid #CCCCCC;}

#rowwrapper3 { width: 549px; overflow: hidden;}


	
/* Side Boxes */ 

#sideboxes_main { width: 202px; float: left;}

#sideboxwrapper, #sideboxwrapper2, #sideboxwrapper3, #sideboxwrappe4r, #sideboxwrapper5  {background-image:url(images/boxes-bg.gif); background-repeat:repeat-y;}

#title, #title2, #title3, #title4, #title5  {
	width: 202px;
	height: 26px;
	color: #6D5E9F;
	padding-top: 8px;
	text-align: center;
	background-image:url(images/boxes-top.gif);
	background-repeat:no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	font-weight: bold;
}

#bottombox, #bottombox2, #bottombox3, #bottombox4, #bottombox5  { width: 202px; height: 18px; background-image:url(images/boxes-bottom.gif); background-repeat:no-repeat;}

#newslettersignup { width: 202px; padding-bottom: 20px;}

form {
	width: 200px;
}

.col1 {
	text-align: right;
	width: 65px;
	height: 31px;
	margin: 0;
	float: left;
	margin-right: 2px;
	color: #6D5E9F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 65%;
	line-height: 27px;
}

.col2 {
	width: 125px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
}

div.row {
	clear: both;
	width: 202px;
}

.submit {
	height: 29px;
	width: 200px;
	padding-top: 2px;
	clear: both;
} 

.input {
	background-color: #fff;
	font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #5A698B;
	margin: 4px 0 5px 8px;
	padding: 1px;
	border: 1px solid #8595B2;
}

.textarea {
	border: 1px solid #8595B2;
	background-color: #fff;
	font: 11px/14px "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #5A698B;
	margin: 4px 0 5px 8px;
}

/* footer */ 

#footer { width : 750px; margin:auto; border-top:1px solid #CCCCCC;clear: both; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size: 65%; font-weight: normal; color: #666666;}

#footer img {padding: 2px;}

#bottom { width : 796px; height: 12px; margin:auto; clear: both; text-align:center; background-image:url(images/content-bg-bottom.gif); background-repeat:no-repeat;}

/* visual styles*/ 

body {background-color:#D4D4D4; }

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-weight: normal;
	color: #A992E0;
}


p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: normal;
	color: #666666;
	}
	
a:link {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
	}

.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;
	font-weight: normal;
	color: #666666;
}

.footer a:link{
	color: #666666;
	text-decoration: none;
}

.footer a:visited{
	color: #666666;
	text-decoration: none;
}

.footer a:hover{
	text-decoration: underline;
}

.footerpadding { margin-right: 150px;}

.credit {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 60%;
	font-weight: normal;
	color: #666666;
}

.credit a:link {
	color: #666666;
	text-decoration: none;
}

.credit a:visited {
	color: #666666;
	text-decoration: none;
}

.contentlinks {font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: normal; color: #A992E0;}

and my html:

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="estrategy.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="images/header.gif" alt="Header" width="796" height="127" /></div>
<div id="flash"><img src="images/flash-graphic-temp.gif" alt="temporary flah graphic" width="796" height="165" /></div>

<div id="navbar">

  <ul class="menu">

<li class="current_page_item"><a class="first_menu" href="#" title="Home">Home</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Search Engine Optimisation">Search Engine Optimisation</a></li>
<li><a href="#" title="Consultancy">Consultancy</a></li>
<li><a href="#" title="Pay per Click Advertising">Pay per Click Advertising</a></li>
<li><a href="#" title="Online PR">Online PR</a></li>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Case Studies">Case Studies</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li class="last_menu"><a href="#" class="last_menu" title="Contact Us">Contact Us</a></li>

  </ul>
</div>

<div id="contentwrapper">
<div id="content">


<div id="rowwrapper1">
  <div id="contentbox1">
    <h1>Welcome to E-Strategy</h1>
    <p>E-Strategy is widely recognised as one of the leading Internet marketing and strategy planning agencies in the UK.<br />
      E-Strategy specialises in strategic Internet marketing, with an emphasis on customer acquisition, conversion and retention, helping our clients achieve their online business objectives.<br />
      Acting as the online business partner of clients such as Pro Direct Soccer, Image Integrators and First Data Bank Europe, E-Strategy focuses on creating highly effective Internet marketing strategies, building online awareness, generating targeted website traffic, increasing online visibility and converting visitors into repeat customers.</p>
    <p><a href="#" class="contentlinks">View our credentials</a></p>
  </div>
  <div id="contentbox2">
    <h2>Search Engine Optimisation</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ultrices massa vitae magna. Curabitur erat eros, lobortis eu, consequat at, adipiscing vitae, leo. Phasellus eu lectus sit amet urna rutrum pharetra. Donec leo magna, vulputate a, mollis et, lacinia dignissim, enim. Suspendisse pulvinar est consequat enim. Donec ultricies. Nunc mollis, dolor non eleifend lobortis, turpis augue posuere ipsum, vitae imperdiet felis leo sed mauris. Praesent id risus quis risus pulvinar imperdiet. Integer turpis tellus, vulputate quis, vulputate a, aliquet ac, dolor. Aliquam rutrum. Nam lacinia magna quis tortor.</p>
	<p><a href="#" class="contentlinks">Find out more about Search Engine Optimisation</a></p>
  </div>
</div>

<div id="rowwrapper2">
  <div id="contentbox3">
    <h2>Online PR</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ultrices massa vitae magna. Curabitur erat eros, lobortis eu, consequat at, adipiscing vitae, leo. Phasellus eu lectus sit amet urna rutrum pharetra. Donec leo magna, vulputate a, mollis et, lacinia dignissim, enim. Suspendisse pulvinar est consequat enim.</p>
	<p><a href="#" class="contentlinks">Find out more about Online PR</a></p
  ></div>
  <div id="contentbox4">
    <h2>Pay per Click Advertising</h2>
	<p>Nullam mi nisi, molestie ut, faucibus a, laoreet in, nulla. Cras lorem. Nam hendrerit nisl a diam scelerisque vestibulum. Nulla et nulla vel elit malesuada rhoncus. Cras volutpat quam sit amet orci. Nulla lobortis volutpat ipsum. Sed metus. Sed ut elit pharetra massa pulvinar venenatis.</p>
	<p><a href="#" class="contentlinks">Find out more about Pay per Click Advertising</a></p
  ></div>
</div>

<div id="rowwrapper3">
  <div id="contentbox5">
    <h2>Consultancy</h2>
	<p>Suspendisse sed lectus quis libero ornare imperdiet. Praesent adipiscing ultricies augue. Sed nec neque. Sed consectetuer urna ac enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis eu risus eu nisi bibendum volutpat.</p>
	<p><a href="#" class="contentlinks">Find out more about Consultancy</a></p
  ></div>
  <div id="contentbox6">
    <h2>Latest News</h2>
	<p>Duis eleifend rutrum magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla ut sem. Aenean non elit at sapien interdum sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus mollis nisl et elit. Sed quis enim eu lacus elementum ornare.</p>
	<p><a href="#" class="contentlinks">View all news</a></p
  ></div>
</div>

</div>

<div id="sideboxes_main">

<div id="sideboxwrapper">
<form action="#" method="post" name="callback" id="Clientlogin">
<div id="title">Client Login </div>
<div class="row">
  <label class="col1">Username:</label>
<span class="col2"><input name="username" class="input" type="text" id="username" size="15" tabindex="1"  />
</span>
</div>


<div class="row">
  <label class="col1">Password:</label>
<span class="col2"><input name="password" class="input" type="text" id="password" size="15" tabindex="3" />
</span>
</div>

<div align="center" class="submit">
  <label>
  <input type="submit" name="Submit" value="Sign In" />
  </label>
  <div id="bottombox"></div>
  </div>
</form>
</div>


<div id="sideboxwrapper2">
<form action="#" method="post" name="proposal" id="proposal">
<div id="title2">Request a proposal  </div>
<div class="row"><label class="col1">Name:</label>
<span class="col2"><input name="name" class="input" type="text" id="name" size="15" tabindex="1"  />
</span>
</div>
<div class="row">
  <label class="col1">Website:</label>
<span class="col2"><input name="website" class="input" type="text" id="website" value="http://" size="15" tabindex="2" />
</span>
</div>
<div class="row">
  <label class="col1">Keywords:</label>
<span class="col2"><input name="keywords" class="input" type="text" id="keywords" size="15" tabindex="2" />
</span>
</div>
<div class="row"><label class="col1">e-mail:</label>
<span class="col2"><input name="email" class="input" type="text" id="email" size="15" tabindex="2" />
</span>
</div>
<div class="row">
  <label class="col1">Telephone:</label>
<span class="col2"><input name="telephone" class="input" type="text" id="telephone" size="15" tabindex="3" />
</span>
</div>



<div align="center" class="submit">
  <label>
  <input type="submit" name="Submit" value="Request Proposal" />
  </label>
  <div id="bottombox2"></div>
  </div>
</form>
</div>


<div id="sideboxwrapper3">
<form action="#" method="post" name="callback" id="callback">
<div id="title3">Request a call back </div>
<div class="row"><label class="col1">Name:</label>
<span class="col2"><input name="name" class="input" type="text" id="callbackname" size="15" tabindex="1"  />
</span>
</div>


<div class="row">
  <label class="col1">Telephone:</label>
<span class="col2"><input name="telephone" class="input" type="text" id="callbacktelephone" size="15" tabindex="3" />
</span>
</div>

<div align="center" class="submit">
  <label>
  <input type="submit" name="Submit" value="Request Call Back" />
  </label>
  <div id="bottombox3"></div>
  </div>
</form>
</div>




<div id="newslettersignup"><a href="#"><img src="images/newsletter-signup.gif" alt="Sign Up for E-Strategy's e-newsletter" width="202" height="70" border="0" /></a></div>

</div>



<div id="footer">
  <p>Home
    
    News | Search Engine Optimisation | Consultancy | Pay per Click Advertising | Online PR | About Us | Case Studies | Blog | Contact Us</p>
	<p>© E-Strategy Limited 2000 - 2007 Search Engine Optimisation - Pay per Click Advertising - Link Building - Online PR Tel: 0845 838 2396 </p>
	<p><img src="images/icon-print.gif" alt="Print" /><img src="images/icon-digg.gif" alt="Digg It" /><img src="images/icon-fav.gif" alt="Add to favourites" /><img src="images/icon-mail.gif" alt="Email" /><img src="images/icon-blogger.gif" alt="Blog" /><img src="images/icon-delicious.gif" alt="Delicious" /><img src="images/icon-technorati.gif" alt="Technorati" /><img src="images/icon-reddit.gif" alt="Reddit" /></p>
</div>
<div id="bottom"></div>
</div>





</body>

[swillicott]

Hi again,
I have managed to make it a bit better by changing the display: table to block. But I am still having problems with the nav bar not showing at all in IE6 and showing a gap to the float right end item on the menu bar?

does anyone have any ideas? I am pulling my hair out as I can not seem to figure out why this is happening?

[pa007]

Not sure, I've only had a quick look. Is it a margin problem? Try adding margin: 0; to that last_menu class and see what happens.

I'll take a closer look this afternoon if that doesn't work; see if I can sus it.

Pete.

[pa007]

Another thing. WHy is float: right; applied to the last_menu class? I'm sure that is causing your problems now. Unless the width of the ul perfectly matches the combined widths of the li's then it will be slightly out. Remove that float: right; and see waht happens. It should just attach itself to the end if you haven't got any margins set.

Hmm...

Pete.

[Lchad]

Looking at the sites source code instead of what was posted above,
I think you should change .menu li from display block to display: inline;

Also I'm a little confused as to why on the #navigation the background image is repeating-y shouldn't it be repeat-x?

[swillicott]

Hi Guys,

Thanks for your replies.

pas007 - I have added a margin:0; to the last_menu and changed the float to left which seems to have worked in fixing the jumping last menu item in IE7.

Hoever, I am still seeing no improvement in IE6? Any ideas?

Lchad, I have tried display:inline; but that loses the height of the nav bar so the images that make up the backdrop do not work? Block seems to work fine in all browsers except for IE6.

Also, the background image in the navigation nar is repeated y because it is a downward gradient so for the gradient to display it must be repeated y from left to right not from top to bottom - Is this wrong?

Again, Thanks for your replies and any further advice on hpow to get this working in IE6 and below would be much appreciated.

Thanks

Steve

[pa007]

I always thought it was 'y for the sky'. So y is up and down and x is across. I think. Well my backgrounds repeat the way I want them to though I have never really thought about it. Not since I did graph work in maths class when I was 12.

Pete.

[Lchad]

Yes x is left to right
Y is top to bottom.

[moojoo]

Z is front to back.

[swillicott]

Thanks Guys,

I must have got confused - I will change the repeat y to x.

Any ideas on getting this to work in IE6 and below - I am really having problems here and am considering switching the nav to javascript rollovers - but I really want this css bar to work!!

Help me please!!!

Thanks

Steve

[Lchad]

I believe part of your problem is with the repeat-y
Change the navigation css to this.

Code: Select all

#navbar { width : 796px; margin: auto; background-image:url(images/nav-main-bg.gif); background-repeat:repeat-x;}

Test that, if that's still not right, we'll keep trying.

[swillicott]

Hi Lchad,

Thanks again for your reply!

I have changed the repat to X but I am still having problems in IE6 and below - any futher ideas?

Thanks

Steve

[Lchad]

Take a look at this... it's a step by step tutorial which works from IE5 on up.
http://www.456bereastreet.com/archiv...avigation_bar/

I tried to sort through that tutorial and compare it to yours but there were so many differences that I thought it might be worth reconstructing from scratch.
Here is another great tutorial http://www.joe2torials.com/view_tutorial.php?view=38

I still think you need display: inline; added ... Try putting that in .menu

[swillicott]

Hi again Lchad,

Looking at these tutorials, these do not use background images to geneterate the rollover which makes it very different to mine. I have successfully built this sort of nav bar before but the problems I am having with my nav bar is the rounded edges on the two ends which means using a different background image for the first and last menu items - that is what seems to be throw the design out? Any ideas on a tutorial that uses unordered lists but with end classes that generate rounded edges?

Thanks again

Steve

[pa007]

I will try and build your menu the way I usually do them. I'll see what happens.

Pete.

[pa007]

I've built this and it works in all the browsers I have on this computer. That's flock (same as firefox) and ie6. So I assume its fine.

It appears to be doing some flashy thing on hover and I don't know why but this has solved the positioning problem. I'll have a look at it. It seems to be doing this on a lot of sites so I might just have a crappy version of ie on here.

Here is a link.

Heres the html, the same as yours I think:

Code: Select all

<ul id="nav">
          <li><a class="first_menu" href="#" title="Home">Home</a></li>
          <li><a href="#" title="News">News</a></li>
          <li><a href="#" title="Search Engine Optimisation">Search Engine Optimisation</a></li>
          <li><a href="#" title="Consultancy">Consultancy</a></li>
          <li><a href="#" title="Pay per Click Advertising">Pay per Click Advertising</a></li>
          <li><a href="#" title="Online PR">Online PR</a></li>
          <li><a href="#" title="About Us">About Us</a></li>
          <li><a href="#" title="Case Studies">Case Studies</a></li>
          <li><a href="#" title="Blog">Blog</a></li>
          <li class="last_menu"><a href="#" class="last_menu" title="Contact Us">Contact Us</a></li>
      </ul>

And the css:

Code: Select all

* {
    margin: 0;
    padding: 0;
}

ul#nav {
    float: left;   
    margin: 20px 10px; 
}

ul#nav li {
    display: inline;
}

ul#nav li a {
    float: left;
    height: 32px;
    padding: 18px 6px 0 5px;
    background: url('nav-bg.gif') 0 0 repeat-x;
    text-decoration: none;
    color: #fff;
    font-size: 70%;
}

ul#nav li a.first_menu {
    background: url('nav-bg-start.gif') top left no-repeat;
    padding-left:25px; 
}

ul#nav li a.last_menu {
    background: url('nav-bg-end.gif') top right no-repeat;
    padding-right:25px;
}

ul#nav li a:hover {
    background-position: left center;
}

ul#nav li a.last_menu:hover {
    background-position: right center;
}

That should work, someone tell me if it doesn't.

Pete.

[Lchad]

Works in FF2, IE 7 and IE 6

[pa007]

I don't know what was wrong in swillicott's original but there was a lot of css there. There must have been some conflicting properties or something.

Pete.

[Lchad]

That can happen easily. As you try to make it work for all browsers sometimes code just builds up and builds up!

[swillicott]

Sorry for the delay in replying - I have been away for a few days.

pa007 - Thanks so much - I have replaced my code with yours and all works fine in all browsers I have tested. I still can not see what was throwing it out before but this work really well.

I am experiencing one a few small problems still in IE 6 and below:

For some reason, the nav bar sits slightly to the left of the main content when viewed in IE 6 - but again, i can not see what is causing this - any ideas?

Also, When viewed in Safari or FF for mac, the nav bar sits pretty much centrally alligned - but when viewed in IE6 (and I think 7) the menu sits slight more to the left of the white backdrop? Again, I can not seem to get this to display as it does in Safari. I have played around with the padding between the li but this then throws it out in Safari and FF for mac?

You solve one problem and then run in to another!!

Any (more) help would be greatly appreciated!

Thanks again for taking the time to look through this,

Steve

My New css:

Code: Select all

/* Navbar */ 

#nav { width : 796px; height:50px; margin: auto; background-image:url(images/nav-main-bg.gif); background-repeat:no-repeat;}

	
* {
    margin: 0;
    padding: 0;
}

ul#nav {
	float: left;
	padding: 0px 8px;
}

ul#nav li {
    display: inline;
}

ul#nav li a {
    float: left;
    height: 32px;
    padding: 18px 7px 0 6px;
    background: url('images/nav-bg.gif') 0 0 repeat-x;
    text-decoration: none;
    color: #fff;
    font-size: 70%;
}

ul#nav li a.first_menu {
    background: url('images/nav-bg-start.gif') top left no-repeat;
    padding-left:25px; 
}

ul#nav li a.last_menu {
    background: url('images/nav-bg-end.gif') top right no-repeat;
    padding-right:25px;
}

ul#nav li a:hover {
    background-position: left center;
}

ul#nav li a.last_menu:hover {
    background-position: right center;
}

and my html as before:

Code: Select all

<div id="nav">

  <ul id="nav">
          <li><a class="first_menu" href="#" title="Home">Home</a></li>
          <li><a href="#" title="News">News</a></li>
          <li><a href="#" title="Search Engine Optimisation">Search Engine Optimisation</a></li>
          <li><a href="#" title="Consultancy">Consultancy</a></li>
          <li><a href="#" title="Pay per Click Advertising">Pay per Click Advertising</a></li>
          <li><a href="#" title="Online PR">Online PR</a></li>
          <li><a href="#" title="About Us">About Us</a></li>
          <li><a href="#" title="Case Studies">Case Studies</a></li>
          <li><a href="#" title="Blog">Blog</a></li>
          <li class="last_menu"><a href="#" class="last_menu" title="Contact Us">Contact Us</a></li>
  </ul>
</div>