Unwanted gap under navbar in IE6 for windows

Treo · #1 Mar 5th, 2006, 08:27

I am developing the following site on a Mac and the navbar renders fine in Safari, Firefox etc, but not in IE6, according to screenshots I've seen through Browsershots. In IE6 the navbar has a gap at the bottom.

The test site (and html) can be viewed here:

http://homepage.mac.com/mischa4/troika2/index.html

If you don't have Safari thenI have attached a screenshot of what it should look like!

The relevant CSS is as follows:

Code: Select all

body {margin: 0; padding: 0; 
font-family: Trebuchet, Helvetica, Arial, sans-serif; 
line-height: 1.4em; 
font-size: 100%; 
text-align: center; 
background-color: #9e092f; 
} 

a:link { 
color: #9e092f; 
text-decoration: none; 
} 

a:visited { 
color: #9e092f; 
text-decoration: none; 
} 

a:hover { 
color: #9e092f; 
text-decoration: underline; 
} 

div#mainwrap { 
background-color: #9e092f; 
width: 650px; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
margin-top: 5px; 
} 

div#header { 
margin:0px; 
width: 650px; 
text-align: left; 
margin-bottom:5px; 
clear: both; 
float: left; 
background-color: #9e092f; 
} 

div#header img { 
border: none; 
margin-top: 0px; 
clear:both; 
float:left; 
} 

div#navbar { 
font-family: Helvetica, Arial; 
background-color: #000; 
border:none; 
width: 650px; 
float:left; 
padding-top:5px; 
margin-bottom:0px; 
text-align:center; 
} 

#navbar ul { 
margin-left:15px; 
padding:0; 
list-style:none; 
color: #dfdfdf; 
} 

#navbar li { 
float:left; 
margin:0; 
padding:0; 
width:102px; 
height:25px; 
background-image: url(images/tab_current.png); 
background-repeat: no-repeat; 
background-position: 102px 0px; 
background-color: #000000; 
} 

#navbar a{ 
display:block; 
padding-top: 3px; 
width:102px; 
height:25px; 
} 


#navbar a:link{ 
text-decoration: none; 
color: #dfdfdf; 
} 

#navbar a:visited{ 
text-decoration: none; 
color: #dfdfdf; 
} 
#navbar a:hover{ 
background-image: url(images/tab_current.png); 
background-repeat: no-repeat; 
background-position: 0px 0px; 
color: #000000; 
} 

#navbar #current { 
background-image: url(images/tab_current.png); 
background-repeat: no-repeat; 
background-position: 0px 0px; 
} 

#navbar #current a { 
color: #000000; 
} 

div#maincontent { 
padding:0px; 
float:left; 
text-align: left; 
margin-left: auto; 
margin-right:auto; 
margin-top:0px; 
margin-bottom: 0px; 
width: 648px; 
font-size: 95%; 
background-color: #dfdfdf; 
clear: both; 
border-left: 1px #000 solid; 
border-right: 1px #000 solid; 
} 

div#maincontent img { 
float:left; 
padding-top:0px; 
border: none; 
margin-top: 15px; 
margin-right: 15px; 
margin-left: 15px; 
margin-bottom: 0px; 
} 


h1 { 
margin-top:10px; 
padding-left: 10px; 
padding-top: 0px; 
font-size: 150%; 
} 

h2 { 
margin-top:10px; 
padding-left: 10px; 
margin-bottom: 0px; 
font-size: 125%; 
} 

html>body h1 { 
padding-left: 10px; 
margin-bottom: 0px; 
font-size: 125%; 
} 

p { 
padding-top: 0px; 
padding-left: 15px; 
padding-right:10px; 
} 

#maincontent ul { 
font-size: 90%; 
padding-left: 10px; 
margin-left:10px; 
font-family: Helvetica, Arial, sans-serif; 
line-height: 1.5em; 
list-style-position: inside; 
} 

/* 1st level of client list*/ 
#maincontent ul li { 
/*list-style-image: url(images/dot.gif); 
background-image: url(images/dot.gif); 
background-repeat: no-repeat; 
background-position: 0px 5px;*/ 
} 

/* second level of client list */ 
#maincontent ul li ul li { 
/*list-style-image: url(images/blankdot.gif); 
list-style: none;*/ 
list-style-type: circle; 
line-height: 1.2em; 
} 

#maincontent ul a:link { 
text-decoration: none; 
color: #9e092f; 
} 

#maincontent ul a:hover { 
font-size: inherit; 
color: #9e092f; 
text-decoration: underline; 
} 

#maincontent ul a:visited { 
font-size: inherit; 
color: #9e092f; 
text-decoration: none; 
} 

div#strapline { 
text-align: center; 
color: #ffffff; 
width: 650px; 
float: left; 
padding-top:8px; 
padding-bottom: 8px; 
background-color: #000; 
} 

div#strapline p { 
padding: 0px; 
font-size: 1.1em; 
margin-top: 5px; 
margin-bottom: 5px; 
} 
div#footer{ 
font-size: 75%; 
color: #000; 
font-weight: lighter; 
text-align: center; 
}

Thanks for your help.

Legacy_Staff · #2 Mar 5th, 2006, 11:08

I viewed it in IE6 and Maxthon (IE engine based browser) and it looked fine.
Maybe it's your viewer's browser that's at fault(?), or I've misunderstood your complaint.
http://i20.photobucket.com/albums/b2...ell/Troika.jpg

Treo · #3 Mar 5th, 2006, 11:39

Quote:

Originally Posted by RedSkwirrell

I viewed it in IE6 and Maxthon (IE engine based browser) and it looked fine.
Maybe it's your viewer's browser that's at fault(?), or I've misunderstood your complaint.
http://i20.photobucket.com/albums/b2...ell/Troika.jpg

You'll see from your snapshot that there is a gap or border under the 'home' tab.

Legacy_Staff · #4 Mar 5th, 2006, 13:46

Ahhh gotcha.
So the grey nav tabs should be joined to the rest of the grey page immediately below.
Is difficult to say what's at fault without knowing the names of the slices but I'm guessing it's a cell margin in the navbar table.
The margin responses are different in FF to those of IE.
The rest ur prolly not goin to like..... http://www.w3schools.com/css/css_margin.asp.
Good luck

p.s. You'd think this would be from one of the 'bottom margin' values, but it could just as easily be caused by a margin value from before this point compounding the expansion of the cell margin values beneath.
IE:- It could just as easily be one of the width values.

Treo · #5 Mar 5th, 2006, 16:04

Thanks

you'll see from the CSS there are no tables, just a horizontal list. There are no margins set on the navbar except a left margin on the 'ul' div.

I'll fiddle with the width of the width of the 'li' div although that is set to the width of the tab graphic.

Incidentally, your screenshot does not shoe the non-current dark grey tabs, although these show up in IE6?

Legacy_Staff · #6 Mar 7th, 2006, 10:41

Quote:

Originally Posted by Treo

Incidentally, your screenshot does not shoe the non-current dark grey tabs, although these show up in IE6?

It was taken using IE6, but it appears the same in Maxthon as well on my system.

Rob · #7 Mar 7th, 2006, 12:36

Here's a fix...

In your head section AFTER your styles are declared, insert the following code:-

HTML: Select all

<!--[if IE]>
  <style type="text/css" media="screen">
    DIV#maincontent {margin-top:-3px;}
  </style>
<![endif]-->

This uses an Internet Explorer Conditional comment and as such will issue a fix for IE only.
You need all the code above... even those comments.

Treo · #8 Mar 7th, 2006, 15:06

This works perfectly. I have this problem up in four forums for over a week and you are the first to fix it!

Thanks

craig · #9 Mar 7th, 2006, 16:05

Its still not fixed??? Have you uploaded the new files???

Treo · #10 Mar 7th, 2006, 16:22

It is in the browsershot screenshot. Try http://www.troika.org.uk/index.html?
The question mark seems to clear the server cache.

craig · #11 Mar 7th, 2006, 16:42

Sorry, it does work.
I was looking at the site you initially posted
http://homepage.mac.com/mischa4/troika2/index.html
Which isn't your new one.
It works well now, and i like the site, good job.
Craig

Legacy_Staff · #12 Mar 7th, 2006, 22:40

I can see the darker grey tabs as well now, if that helps.

Treo · #13 Mar 8th, 2006, 09:30

Yes it does. thanks

Rob · #14 Mar 8th, 2006, 12:34

just call me CSS-Wiz

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
unwanted space between 2 images	Craigj1303	Web Page Design	1	Apr 6th, 2008 12:04
unwanted horizontal scroll	mykl	Web Page Design	11	Sep 30th, 2007 02:05
unwanted space under image in IE	Craigj1303	Web Page Design	2	Sep 5th, 2007 20:47
unwanted space between li elements in IE	ant.eater	Web Page Design	3	Nov 7th, 2005 13:14
help with navbar	bruno89	Web Page Design	7	Aug 18th, 2005 01:01

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Unwanted gap under navbar in IE6 for windows