Firefox and IE hate me

[Shiny Grimer]

http://www.theredblimp.com/test.shtml

Switch to Boney Style.

There's a problem with it.

One: it looks weird in the most recent Firefox and IE. In Firefox, these weird blank lines appear in the thing that says 'Mother series' and 'Paper Mario', while in IE a blank line appears beneath those same two things. In addition, in Firefox, hovering over 'Mother' causes the whole box to shift slightly to the right, and removing the cursor makes it return to normal.

This is supposed to be drop-down navigation and it's incredibly annoying right now if it doesn't work in some of the bigger broswers.

In the worst case, I could just tell my Firefox users that that style won't work as well in their browser (since IE doesn't move it to the right), but it would be a little disappointing since I've spent the whole day trying to get this style right. I'd appreciate any help since I have no idea whatsoever what could cause this. :/

body {
color:#000;
font-family:verdana, sans-serif;
font-size:8pt;
background:#efd43f;
margin:5px;
padding:5px;
}

a:link, a:visited {
text-decoration:underline;
color:#bb8041;
}

a:hover {
text-decoartion:underline;
color:#e49d50;
}

img {
border:0px;
}

#header {
text-align:center;
height:60px;
width:399px;
background-image:url(http://i13.photobucket.com/albums/a299/panzeleche/boneybanner.png);
margin:auto;
background-repeat:no-repeat;
}

#header img {
margin:auto;
}


#container {
position:relative;
width:100%;
}


#leftmenu {
clear:both;
width:80%;
margin:auto;
font-size:12pt;
}

#leftmenu h1 {
font-size:12pt;
color:#e49d50;
}

#leftmenu h1 a:hover {
color#84672a;
background:#9a6d37;
}

#leftmenu h2 {
font-size:10pt;
}

#leftmenu ul {
float:left;
margin:0;
padding:0;
list-style-type:none;
}

#leftmenu li {
float:left;
width:200px;
position:relative;
}

#leftmenu li a:link, #leftmenu li a:visited {
display:block;
text-align:center;
padding:0.2em;
background:#735837;
color:#bb8041;
font-weight:bold;
text-decoration:none;
}

#leftmenu li a:hover, #leftmenu li a:active {
background:#ae7837;
color:#735837;
}

#leftmenu li ul {
display:none;
width:100%;
position:absolute;
top:100%;
left:0;
}

#leftmenu li>ul {
top:auto;
}

#leftmenu li:hover ul {
display:block;
}

#leftmenu li ul li {
float:none;
position:static;
display:inline;
}

#content {
margin-left:20%;
width:50%;
height:330px;
overflow:auto;
border:1px solid #735837;
background-color:#efd43f;
}


#rightmenu {
	margin: 2em;
	width: 80%;
	padding: 5px;
	font-family: Verdana, sans-serif;
	}

#rightmenu img {
display:none;
}

#footer {
clear:both;
text-align:center;
margin-left:145px;
}

 

[Sandstone-Shadow]

It looked like there were some extra links on the Mother and Paper Mario sections, so I searched through your code and found this:

<li><a href="/general_earhtbound.shtml"><h1>Mother Series</h1>

<li><a href="/general_papermario.shtml"><h1>Paper mario</h1>

Neither of those links are closed. Not sure if that's what's causing part of the problem, but fix that; maybe it will help. ("Mario" wants to be capitalized too, by the way. =P)

Hovering over "Mother" didn't change anything for me. What's your screen resolution? I'm thinking that your problem there is this: Mother is the longest menu section, and when it opens, the screen needs to have a scrollbar, which shifts everything over. Again, I'm not sure that this is the problem since it's not happening to me, but see if a scrollbar pops up when you hover over it.

 

[Shiny Grimer]

It looked like there were some extra links on the Mother and Paper Mario sections, so I searched through your code and found this:
Neither of those links are closed. Not sure if that's what's causing part of the problem, but fix that; maybe it will help. ("Mario" wants to be capitalized too, by the way. =P)

Thank you so much! This is what caused the problem and the Firefox moving-it thing. It now works perfectly.

Hovering over "Mother" didn't change anything for me. What's your screen resolution? I'm thinking that your problem there is this: Mother is the longest menu section, and when it opens, the screen needs to have a scrollbar, which shifts everything over. Again, I'm not sure that this is the problem since it's not happening to me, but see if a scrollbar pops up when you hover over it.

My resolution is huge and there was no scrollbar. Once again, thank you, this fixed both the IE and Firefox problems. :3

You rock.

 

[Phyro Phantom]

Hmm, yes.... Proper nesting is very important. You might want to try validating your code to help catch errors like these. Glad you got it worked out. =)