Jump to content

Image Gap In Ie6, Not Firefox


Recommended Posts

The text size in your <li> elements is not set, so it will take the browser's default, making their height change depending on the browser, so they exceed the height of the <ul> element they're in in Internet Explorer 6.Attempting to make things perfect to the pixel is not a good idea.I'd recommend using a vertically repeating background on the #container object and just put an image of the logo in the header, without the background.Don't use height on any elements, just let them expand as they like, and design other elements to expand with them. Flexible designs are far more likely to work on all browsers than designs measured by pixels.

Link to post
Share on other sites
It might be because your background image has a gap in it:http://www.dallasnicol.com/images/menu/vMenu.png
no, it's fine in other browsers besides ie6, there is a gap between the images themselves... not within the image
The text size in your <li> elements is not set, so it will take the browser's default, making their height change depending on the browser, so they exceed the height of the <ul> element they're in in Internet Explorer 6.Attempting to make things perfect to the pixel is not a good idea.I'd recommend using a vertically repeating background on the #container object and just put an image of the logo in the header, without the background.Don't use height on any elements, just let them expand as they like, and design other elements to expand with them. Flexible designs are far more likely to work on all browsers than designs measured by pixels.
I'm sorry, I'm not really sure what you mean... you're saying that the header image is responsible for the gaps between the button images?
Link to post
Share on other sites

The only difference between your Internet Explorer 6 screenshot and what I see in the browsers is that the menu is sticking out the bottom of the blue rectangle. I see the gaps in all browsers. Again, it's likely because the portion of your background image isn't big enough to occupy all the space of the variable-height list item.

Link to post
Share on other sites

ok i should have been more clear, if you look real close at the screen shot there is an actual gap between the images of a couple pixels (not just the darker part of the image at the bottom)... and if you look closer yet (view it full size) you can see the background color underneath the separating lines (which are dark blue on the right-hand side)... one thing you cant see in the screenshot is that if i put my mouse between the images in IE6, my pointed changes back from the finger to a normal pointer... you can see the difference between the top lines and the bottom one, that's because the bottom line is actually in the middle of the image rather than being at the end of one image... the size of those gaps add up and make for the amount of space that the menu sticks out.in other browsers, all these images are nice and snug.

Edited by smerny
Link to post
Share on other sites

I believe it has to do with the line breaks between <li> elements. See if this code works better:

<ul><li class="navTopItem"><a href="../walser">Home Page</a></li><liclass="navItem"><a href="#">Item1</a></li><liclass="navItem"><a href="#">Item2</a></li><liclass="navItem"><a href="#">Item3</a></li><liclass="navBottomItem"><a href="#">Item4</a></li></ul>

Edited by Ingolme
Link to post
Share on other sites
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>dNik</title><base href='http://dallasnicol.com/" /><link rel="icon" href="http://www.dallasnicol.com/images/favicon.ico" type="image/ico" /><style type="text/css">body { background-color:#262722; margin:20px 0; }#container { width:900px; margin:0 auto; padding:0; }.clear { clear:both; }.code { background-color:#FFFFFF; }.highlight { background-color:#FF6666; }.header { background: url(http://www.dallasnicol.com/images/header/dNikHeader.png) no-repeat; zoom:1; text-indent:-9999px;}#header { width:650px; height:150px; float:right; margin:0; padding:0; }#head h1 a { display:block; width:650px; height:150px; }* html #nav, * html #nav ul{height:150px;}* html #nav ul li, * html #nav ul li a{height:25px;}/* ============= MENU STYLING ================= */#nav { width:250px; min-height:150px; float:left; }#nav ul { width:250px; min-height:150px; list-style:none; margin:0; padding:0; }#nav ul li { width:250px;min-height:25px margin:0; padding:0; }#nav ul li a { display:block; width:250px; min-height:25px; text-indent:25px; text-decoration:none; color:#FFFFFF; font: 18px arial; background-repeat:no-repeat; }#nav ul li.navTopItem a { height:37px; }#nav ul li.navBottomItem a { height:38px; }#nav ul li.navTopItem a { padding-top: 13px; height: 24px; }#nav ul li.navItem a { background-image:url(http://www.dallasnicol.com/images/menu/vMenu.png); background-position:0 -100px; }#nav ul li.navTopItem a { background-image:url(http://www.dallasnicol.com/images/menu/vMenu.png); background-position:0 -88px;}#nav ul li.navBottomItem a { background-image:url(http://www.dallasnicol.com/images/menu/vMenu.png); background-position:0 -100px; }#nav ul li a:hover { color:#3399FF; }#nav ul li.navTopItem a:hover { background-position:0 -32px; }#nav ul li.navItem a:hover { background-position:0 -44px; }#nav ul li.navBottomItem a:hover { background-position:0 -44px; }/* ============== END MENU STYLING ============ */#instructions { float:left; background-color:#999999; margin:0; padding: 0px 15px 15px 15px; }</style></head><body><div id="container"> <div id="head"> <h1 id="header" class="header"><a href="http://dallasnicol.com">Header</a></h1> <div id="nav"> <ul><li class="navTopItem"><a href="../walser">Home Page</a></li><li class="navItem"><a href="#">Item1</a></li><li class="navItem"><a href="#">Item2</a></li><li class="navItem"><a href="#">Item3</a></li><li class="navBottomItem"><a href="#">Item4</a></li> </ul> </div> </div> <div class="clear"></div> </div></body></html>
Made all the heights min-height and fed IE6 the ability to read min-height. I see no difference in IE6 and Opera 10 Edited by SpOrTsDuDe.Reese
Link to post
Share on other sites

still have the same problem =\added this:

* html #nav, * html #nav ul{height:150px;}* html #nav ul li, * html #nav ul li a{height:25px;}

what is the * for btw?

Edited by smerny
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...