smerny Posted April 22, 2009 Share Posted April 22, 2009 dallasnicol.comWhy does IE give me a gap (the menu images on the left side), and how can I make it go away? Link to comment Share on other sites More sharing options...
Ingolme Posted April 22, 2009 Share Posted April 22, 2009 Can you post a screenshot? I don't have Internet Explorer 6 to test with. Link to comment Share on other sites More sharing options...
smerny Posted April 22, 2009 Author Share Posted April 22, 2009 Link to comment Share on other sites More sharing options...
jesh Posted April 22, 2009 Share Posted April 22, 2009 It might be because your background image has a gap in it:http://www.dallasnicol.com/images/menu/vMenu.png Link to comment Share on other sites More sharing options...
Ingolme Posted April 22, 2009 Share Posted April 22, 2009 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 comment Share on other sites More sharing options...
smerny Posted April 23, 2009 Author Share Posted April 23, 2009 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 imageThe 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 comment Share on other sites More sharing options...
Ingolme Posted April 23, 2009 Share Posted April 23, 2009 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 comment Share on other sites More sharing options...
smerny Posted April 23, 2009 Author Share Posted April 23, 2009 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. Link to comment Share on other sites More sharing options...
Ingolme Posted April 23, 2009 Share Posted April 23, 2009 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> Link to comment Share on other sites More sharing options...
smerny Posted April 24, 2009 Author Share Posted April 24, 2009 used your code, but still have the same problem. Link to comment Share on other sites More sharing options...
SpOrTsDuDe.Reese Posted April 24, 2009 Share Posted April 24, 2009 <!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 Link to comment Share on other sites More sharing options...
smerny Posted April 24, 2009 Author Share Posted April 24, 2009 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? Link to comment Share on other sites More sharing options...
smerny Posted April 25, 2009 Author Share Posted April 25, 2009 no one? =[ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.