phatkodi

I have created a css menu and I am having trouble with it. Seems like a simply menu to create. I am using the <li> technique and I have defined a background to seperate each menu item. The problem I am having is that IE 7 is cutting off the bottom of the seperator image. I can't get it to extend down past the text. However in Firefox and Safari it looks great. Whats the deal, can someone point me in the right direction. The website url is bokoocovers.com All I have is a header and menu so far. Here is the CSS I am using for the menu. .navlinks { background-image: url(/images/nav-list-back.jpg); background-repeat: repeat-x; margin: 0px; width: 850px; padding: 21px 0 0 0; height: 80px; margin:0 auto; } .navlinks li { display: inline; padding-left: 5px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; margin: 0px; background-image: url(/images/nav-back.jpg); background-repeat: repeat-y; background-position: bottom right; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size:10px; } .navlinks li.last { border-right: 0; background-image: none; } .navlinks a{ color: #333; text-decoration: none; } .navlinks a:hover { text-decoration: none; } Any help would really be appreciated. Thanks

Ok, the more I problem solve this issue the weirder it gets. I have figured out that the problem is with the list its self. To be more specific it is the number of lines or items in the list. If I limit the list to somewhere around 17 the problem does not happen. Over that and you start seeing the random loading anomoly. What the *&^%. Maybe a height issue??? Am I missing something somewhere. Here is the exact div code I am using <div id="featured_charter_list"> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Private-Jet-Charter-flights-to-London-England.php">Private Jet Charter flights to London, England</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Private-Jet-Charters-to-Salt-Lake-City-Utah.php">Private Jet Charters to Salt Lake City Utah</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Jet-Charter-Flights-to-Napa-Valley-California.php">Jet Charter Flights to Napa Valley California</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Jet-Charter-Flights---Tampa-Florida.php">Jet Charter Flights - Tampa, Florida</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Private-Jet-charter-Flights-to-Denver-Colorado.php">Private Jet charter Flights to Denver Colorado</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Jet-Charter-Flights-in-Los-Angeles.php">Jet Charter Flights in Los Angeles</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Jet-Charter-Flights-to-Florida.php">Jet Charter Flights to Florida</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Private-Jet-Charters-to-Orlando-Florida.php">Private Jet Charters to Orlando, Florida</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Luxury-Yacht-and-Jet-Charters-in-Florida-Keys.php">Luxury Yacht and Jet Charters in Florida Keys</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Charter-a-Jet-to-Boston-Massachusetts.php">Charter a Jet to Boston Massachusetts</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Jet-Charter-Flights-to-Cabo-San-Lucas-Mexico.php">Jet Charter Flights to Cabo San Lucas Mexico</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Private-Jet-Charter-Flights-in-Dallas-Fort-Worth.php">Private Jet Charter Flights in Dallas Fort Worth</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Charter-Flights-and-Yacht-Charters-in-the-Bahamas.php">Charter Flights and Yacht Charters in the Bahamas</a></h1></div> <div class="featured_charter_column"><h1><a href="/featured-jet-charter/Jet-Charter-Flights--Yacht-Charters---Virgin-Islands.php">Jet Charter Flights & Yacht Charters - Virgin Islands</a></h1></div> </div> Here is the CSS as it pertains to the HTML code above #featured_charter_list { width: 780px; margin: 0px; padding: 0px; clear: both; } .featured_charter_column { /* float: right; */ height: 25px; margin-left: 10px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding: 0px; width: 230px; } .featured_charter_column h1{ font-family: Arial, Helvetica, sans-serif; margin-left: 20px; font-size: 9px; font-weight: lighter; color: #527c95; } .featured_charter_column h1 a{ font-size: 9px; font-weight: bolder; color: #527c95; border-bottom: 1px dotted; text-decoration: none; } As you can see I have removed the float attribute but that doesn't seem to be the cause anyway. This has got me thrown.

Thanks for your response. I having been looking for the width possibility but I don't see anything that is too wide. Thats sure what it looks like but I don't see a cause. Also why then does it work most of the time and only sometimes does it look like this with seemingly no reason. It almost seems like a loading problem with IE. Again it started doing this when I added the Featured Charter list towards the bottom. If I completely remove the float: left; attribute it becomes just a list with no columns but still causes this layout issue (again randomly). Visit the site with an IE7 browser and you will see that it looks normal, then hit refresh, keep hitting refresh it will eventually load weird. If I remove the list all together it will stop loading weird. I tried float: right; as you suggested but that did solve it either.

Thanks for pointing out those errors. I have fixed the errors you are refering to, there are a few errors left but they shouldn't be effecting the page layout. I have attacted an image of the way the page looks. Again this is only randomly and if you refresh the screen you will eventually see it. I am currently testing it in IE6 I was hoping someone could point me in the right direction.

I have made some updates to my index page and now the layout changes (badly) on me randomly. If I remove the the changes I made then it stops. Seems like the solution would be simple to find. The changes I have made include a three column list using a float: "left" technique. I thought this was the cause however if I take away the float: left; attribute (which turns it into just a list) it still causes this layout anomoly. Also it only seems to happen in IE not FireFox. You can see the site if you like. You have to hit refresh a bunch of times for the layout problem to show up. Sometimes it does it after only couple of refreshes and sometimes it takes alot but you should eventually see it. I have not tested it on IE6 only IE7. You will see the list I added below the initial test labeled Featured Charter List. http://www.stratosjets.com Normally I wouldn't post a link but for this it kind of necessary to see how random the issue is. Any help would be great. As anyone seen anything like this before?