Text alignment in submenu
Hi!
I'm having some trouble aligning some of the text in the submenues on my webpage. In google chrome it's aligned to the left (as it should be). But when i open internet explorer, all the text is centered. Can enyone help?? www.familietid.com
My stylesheet
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(three_0a.gif);}
.preload2 {background: url(three_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top; padding-bottom:3px;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #F0F0F0; padding:3px; border:1px solid #909090 ; white-space:nowrap; width:140px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:135px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #F0F0F0;}
#nav li ul.sub li a.fly
{background:#F0F0F0 url(arrow.gif) 115px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#909090; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#909090 url(arrow_over.gif) 115px 6px no-repeat; color:#fff;}
#nav li b {display:block; font-size:11px; height:18px; width:125px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#000; border-bottom:1px solid #000; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:125px; top:-4px; background: #F0F0F0; padding:3px; border:1px solid #909090; white-space:nowrap; width:140px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#C8C8C8 url(arrow_over.gif) 115px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#C8C8C8 url(arrow.gif) 115px 6px no-repeat; color:#000; border-color:#fff;}
body, p, td{
font-family:verdana;
font-size: 8pt;
font-weight:normal;
color:#000000;
margin: 0px;
}
h1{
font-family:verdana;
font-size: 18pt;
font-weight:normal;
color:#000000;
margin: 0px;
}
h2{
font-weight: normal;
font-size: 18pt;
margin: 0px;
}
h3{
font-weight: normal;
font-size: 16pt;
margin: 0px;
}
h4{
font-weight: normal;
font-size: 14pt;
margin: 0px;
}
pre{
margin: 0px;
}
a{
color:#cc9966;
text-decoration: none;
}
#pic {
background-color: #FFFFFF;
position: relative;
width: 65px;
}
#pic a .large {
z-index:999;
border: 0px;
display: block;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}
#pic a img {
border: 0;
}
#pic a.p1, #pic a.p1:visited {
background: #FFFFFF;
border: 1px solid #fffff;
display: block;
height: 51px;
left: 0;
text-decoration: none;
top: 0;
width: 72px;
}
#pic a.p1:hover {
background-color:transparent;
color: #000000;
text-decoration: none;
}
#pic a.p1:hover .large {
border: 1px solid #fffff;
display: block;
height: 233px;
left: 150px;
position: absolute;
top: -60px;
width: 300px;
padding-left:-350px
}
#pic a.p2, #pic a.p1:visited {
background: #FFFFFF;
border: 1px solid #fffff;
display: block;
height: 51px;
left: 0;
text-decoration: none;
top: 0;
width: 72px;
}
#pic a.p2:hover {
background-color:transparent;
color: #000000;
text-decoration: none;
}
#pic a.p2:hover .large {
border: 1px solid #fffff;
display: block;
height: 233px;
left: -370px;
position: absolute;
top: -60px;
width: 300px;
padding-left:-350px
}
a.rollover img {
width: 155px;
height: 115px;
}
a.rollover:hover > img {
height: 330px;
width: 500px;
z-index:998;
display:block;
}
greg posted this at 20:11 — 24th August 2009.
He has: 1,581 posts
Joined: Nov 2005
At first glance I can't see why it's doing that. I'll have another look shortly (or someone else might spot it)
Which Internet Explorer are you viewing it in? As Stu states he has it sorted for all but IE8:
EDIT:
I'm not exactly sure what's going on in your code either. You seem to have THREE heads and all manner of other weird stuff.
Incidentally, you don't seem to have the Javascript Stu provides for this menu. Might want to take another look at his menu page...
/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/pro_dropdown_3/stuHover.js */
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") >= 0)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
familietid posted this at 20:53 — 24th August 2009.
They have: 3 posts
Joined: Aug 2009
Thanks for your reply.
It's IE8 i'm having trouble with...
greg posted this at 23:52 — 24th August 2009.
He has: 1,581 posts
Joined: Nov 2005
Sorry, I don't have access to IE8.
Someone else will though.
But you should have a look at fixing the errors in your HTML. It may or may not be the cause, but often errors can cause all sorts of problems, and the errors you have are known to cause display issues.
Such as duplicated IDs etc.
Also, if you're going to explicitly choose to use XHTML you might as well at least have it somewhere near validated, or you might as well just use old HTML.
With XHTML 1.0 Transitional you have 271 errors
With HTML 4.01 Transitional you have only 48 errors
familietid posted this at 20:38 — 27th August 2009.
They have: 3 posts
Joined: Aug 2009
Hi again. I tried out my website in IE7 also. And I got the same problem... :/
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.