CSS Horizontal Menu Bar - IE Problems!!

swillicott · #1 Jul 2nd, 2007, 11:53

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 · #2 Jul 6th, 2007, 12:24

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 · #3 Jul 6th, 2007, 12:56

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 · #4 Jul 6th, 2007, 12:59

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 · #5 Jul 6th, 2007, 14:25

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 · #6 Jul 9th, 2007, 13:49

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 · #7 Jul 9th, 2007, 13:54

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 · #8 Jul 9th, 2007, 14:05

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

moojoo · #9 Jul 10th, 2007, 19:51

Z is front to back.

swillicott · #10 Jul 11th, 2007, 09:19

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 · #11 Jul 11th, 2007, 12:15

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 · #12 Jul 12th, 2007, 11:55

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 · #13 Jul 12th, 2007, 12:47

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 · #14 Jul 12th, 2007, 13:45

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 · #15 Jul 12th, 2007, 13:56

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

Pete.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Horizontal Menu Bar - IE Problems!!