Jump to content

Menu Errors In Ie6 But Not Firefox.


mp99
 Share

Recommended Posts

Hello everyone. I'm completely at a loss as to explain why the following page works in Firefox and not IE(6). I know different browsers handle code differently. Is this what I'm facing? Note: I started learning CSS/scripting a few days ago so please forgive any newbie errors it could possibly (probably) be. Here's the URL and ill post the style sheet code at the end:http://www.warmachineonline.com/html/Blankpage.htmlTo start, the menu has some sort of forced "break" in IE but not in Firefox. If it was simply wrapping around then only the last image would be on the bottom row. Also the menu is off by one or two pixels to the left in IE. What can I do to have alignments work properly in all browsers?Am I using the correct Doc Type?Also is it possible to build the menu in either the style sheet or in another file add it to any page I create? I tried using an iframe but it didn't align properly... and from what I read frames are frowned upon now lol.Another thing I've noticed is if the window is smaller than the actual width of the layout then the menu won't be aligned in Firefox but seems to stay in position correctly in IE. Like the menu won't break the left edge of the browser even if the bg does. I was thinking that the position property would solve it but either it's being used incorrectly or I'm just wrong.Thanks for taking the time to read over my post!

.title {	font-weight:bold; 	padding-top:7px; 	font-family:Arial, Helvetica, sans-serif; 	font-size:24px; 	color:#d1d1d1	}.news {	text-align:justify; 	padding:10px; margin-bottom:5px; 	border-top:2px solid #c61818; 	font-family:Arial, Helvetica, sans-serif; 	font-size:14px; 	color:#d1d1d1;	}.poster {	font-family:Arial, Helvetica, sans-serif; 	font-size:10px; 	font-weight:bold; 	color:#d1d1d1; 	padding-bottom:2px;	}.footer {	text-align:center; 	height:15px; 	font-family:Arial, Helvetica, sans-serif; 	font-size:10px; 	color:#ddd; 	font-weight:bold; 	margin:2px auto; 	border-top:2px solid #89ad16;	width:760px;	}.red {	color:#c61818	}a:link {	font-family:Arial, Helvetica, sans-serif; 	color:#a3ca39;	border:0px;	}	a:visited {	font-family:Arial, Helvetica, sans-serif; 	color:#c61818;	border:0px;	}body.main {	background-image:url(../graphics/bg-skull.jpg); 	background-repeat:no-repeat; 	background-color: #000; 	background-position:top;	margin:0 auto;	scrollbar-3dlight-color:#5E697E; 	scrollbar-arrow-color:#E77C28;	scrollbar-base-color:#4D5667;	scrollbar-darkshadow-color:#4D5667;	scrollbar-face-color:#5E697E;	scrollbar-highlight-color:#FFFFFF;	scrollbar-shadow-color:#black;	scrollbar-track-color: #CCCCCC; 	}div.banner {	height:142px	}div.contentContainer {	width:800px; 	min-height:900px;	}div.menuContainer {	height:42px;	width:800px;	margin:0px auto;	}img {	border:0px;	}ul.menu  {	width:100%;	padding:0;	margin:0px auto;	list-style-type:none;	}	li 	{ 	display:inline;	}a.menu {	float:left;	}

Link to comment
Share on other sites

the first thing I noticed is that you are using the wrong dtd, try using the string dtd, grab it from the W3C schools, it's almost identical to the frameset dtd. you are also missing an opening <html> tag, which should come immediately after the dtd. On the menu, try floating the list items rather than the anchor elements, and just as a suggestion add display:block to the anchor.I don't have ie6 at the moment, but the problems you are facing probably have a lot to do with your dtd, which will be rendering your page in quirks mode, which I believe makes even ie7 render the page using the old ie box model, which means any padding and border is included in the total width/height of a box, rather than expanding.Also try giving the ul.menu a width of 800px to match the .menuContainer, but you don't really need a div.menuContainer, because the ul is a block level element and will do the job, unless you want to nest borders or include several background images on the menu. I hope this helps. I'm no expert, just trying to help.

Link to comment
Share on other sites

try using the string dtd
I think roundedcorners means the strict dtd. It looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">

The strict dtd is essential for alignments to match in all environments. The wrong dtd, no dtd, or a transitional dtd will cause IE to construct all "box" elements incorrectly if they have any sort of padding, margins, or borders. And this will throw off your look, drastically in some cases.May I also suggest that you compress your images more. It took forever for your page to load on my high-speed DSL. Watching the menu images pop in was especially painful.

Link to comment
Share on other sites

Thanks for the replies guys! I applied all of your suggestions and corrections and it turns out moving the float property to li was the answer. Thanks roundcorners! That solved the break in the menu. I also removed div.menuContainer. I'm still left with an alignment issue in IE that I can't figure out. If you notice, the menu is sitting a few pixels to the lefts. I had hoped the strict dtd would solve it but I'm guessing the problem lies with IE? Or more likely me? lol Is there some bit of code that I'm using that IE doesn't like?And sorry about the load times Deirdre's Dad! I compressed the images so it should be faster load times.Here's the updated style sheet and I updated the pages online.Thanks again guys!

.title {	font-weight:bold; 	padding-top:7px; 	font-family:Arial, Helvetica, sans-serif; 	font-size:24px; 	color:#d1d1d1	}.news {	text-align:justify; 	padding:10px; margin-bottom:5px; 	border-top:2px solid #c61818; 	font-family:Arial, Helvetica, sans-serif; 	font-size:14px; 	color:#d1d1d1;	}.poster {	font-family:Arial, Helvetica, sans-serif; 	font-size:10px; 	font-weight:bold; 	color:#d1d1d1; 	padding-bottom:2px;	}.footer {	text-align:center; 	height:15px; 	font-family:Arial, Helvetica, sans-serif; 	font-size:10px; 	color:#ddd; 	font-weight:bold; 	margin:2px auto; 	border-top:2px solid #89ad16;	width:760px;	}.red {	color:#c61818	}a:link {	font-family:Arial, Helvetica, sans-serif; 	color:#a3ca39;	border:0px;	}	a:visited {	font-family:Arial, Helvetica, sans-serif; 	color:#c61818;	border:0px;	}body.main {	background-image:url(../graphics/bg-skull.jpg); 	background-repeat:no-repeat; 	background-color: #000; 	background-position:top;	margin:0 auto;	scrollbar-3dlight-color:#5E697E; 	scrollbar-arrow-color:#E77C28;	scrollbar-base-color:#4D5667;	scrollbar-darkshadow-color:#4D5667;	scrollbar-face-color:#5E697E;	scrollbar-highlight-color:#FFFFFF;	scrollbar-shadow-color:#black;	scrollbar-track-color: #CCCCCC; 	}div.banner {	height:142px	}div.contentContainer {	width:800px; 	min-height:900px;	}img {	border:0px;	}ul.menu  {	width:800px;	padding:0px;	margin:0px auto;	list-style-type:none;	}	li 	{ 	display:inline;	float:left;	}

Link to comment
Share on other sites

Thanks for the replies guys! I applied all of your suggestions and corrections and it turns out moving the float property to li was the answer. Thanks roundcorners! That solved the break in the menu. I also removed div.menuContainer. I'm still left with an alignment issue in IE that I can't figure out. If you notice, the menu is sitting a few pixels to the lefts. I had hoped the strict dtd would solve it but I'm guessing the problem lies with IE? Or more likely me? lol Is there some bit of code that I'm using that IE doesn't like?And sorry about the load times Deirdre's Dad! I compressed the images so it should be faster load times.Here's the updated style sheet and I updated the pages online.Thanks again guys!
I don't see the pixels in FF3 and IE6. But as a suggestion - ditch the white spacer to the left of the first menu choice.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...