Fri, 2008-10-24 23:42
I've been trying to modify the following menu to make it look indentical in IE, Firefox, and Safari/Chrome but I can't seem to get it to look right in Safari/Chrome.
Could anyone tell me how to fix it? When viewed in Safari or Chrome, notice that the menu is ignoring the padding.
Thanks in advance!
Sat, 2008-10-25 00:03
#1
Try floating the spans left
Try floating the spans left and then adjusting the padding.
Sat, 2008-10-25 00:41
#2
Brilliant! You made my day.
Brilliant! You made my day. Thank you very much.
This isn't tested in all browsers but I believe it works with Windows XP when using:
-- IE 7
-- Firefox 3
-- Safari
-- Chrome
Here is the revised CSS:
body{font-family:Arial, Helvetica, sans-serif; font-size:13px; background:#FFFFFF;} ul, li{margin:0;margin-bottom:5px; border:0; list-style:none; padding:0;height:200px;} ul{height:21px;} h1 { font-size:18px; } p { line-height:18px; } #info { margin:auto; width:800px; color:#333333; padding:10px; background:#f4f4f4; border:1px solid #DDD; } #nicemenu { margin:0 auto; width:800px; margin-top:20px; border-bottom:dotted 1px #E5E5E5; } #nicemenu a { color:#0066CC; text-decoration:none; } #nicemenu a:hover { text-decoration:underline; } #nicemenu li { display:inline; position:relative; float:left;} #nicemenu span {float:left;} #nicemenu li span { position:relative; z-index:10; padding:4px 4px 4px 6px; border-bottom:none; line-height:18px; } #nicemenu li span a { font-weight:bold; padding:0 6px 0px 2px; } #nicemenu li span.over { padding:3px 3px 4px 5px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #fff; } *+html #nicemenu li span.over { border-top:solid 1px #E5E5E5; padding-bottom:4px; } /* IE6 */ #nicemenu li span.over a { } #nicemenu li span.over a:hover { text-decoration:none; } #nicemenu li span.active { padding:3px 3px 4px 5px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #fff; } *+html #nicemenu li span.active { border-top:solid 1px #E5E5E5; padding-bottom:4px; } #nicemenu li span.active a { } #nicemenu li span.active a:hover { text-decoration:none; } #nicemenu img.arrow { /*margin-left:4px;*/ cursor:pointer; } #nicemenu div.sub_menu { display:none; position:absolute; left:0; top:0px; margin-top:24px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #999999; padding:4px; top:2px; width:160px; background:#FFFFFF;float:left; } * html #nicemenu div.sub_menu { margin-top:24px; } /* IE6 */ *+html #nicemenu div.sub_menu { margin-top:24px; } /* IE7 */ #nicemenu div.sub_menu a:link, #nicemenu div.sub_menu a:visited, #nicemenu div.sub_menu a:hover{ display:block; font-size:11px; padding:4px;} #nicemenu a.item_line { border-top:solid 1px #E5E5E5; padding-top:6px !important; margin-top:3px; }
Sat, 2008-10-25 20:07
#3
Again, the menu now works
Again, the menu now works great with the revision above. But, when I changed the span font-size to 16px, it went crazy in IE. All the floats were off and the padding as well. I then decided to float the ul element as well and everything shifted into place. But, the big problem that still didn't go away was the alignment and the menu causing the content below it to shift down by one pixel when it's hovered.
I've spent hours on this and would really love some help with this. How can I make this work in IE?
#nicemenu ul, #nicemenu li{margin:0;margin-bottom:5px; border:0; list-style:none; padding:0;height:21px;float:left;} #nicemenu ul{height:21px;} #nicemenu { font-family:arial,helvetica,sans-serif;margin:0 auto; width:95%; margin-top:5px; border-bottom:dotted 1px #E5E5E5; float:left;clear:both;} #nicemenu a { color:#a84b9a; text-decoration:none; } #nicemenu a:hover { text-decoration:underline; } #nicemenu li { display:inline; position:relative;} #nicemenu span {float:left;font-size:16px;} #nicemenu li span { position:relative; z-index:100; padding:4px 4px 4px 6px; border-bottom:none; line-height:18px; } #nicemenu li span a { font-weight:bold; padding:0 6px 0px 2px; } #nicemenu li span.over { padding:3px 3px 4px 5px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #fff;clear:both; } *+html #nicemenu li span.over { border-top:solid 1px #E5E5E5; padding-bottom:0px;} /* IE6 */ #nicemenu li span.over a { } #nicemenu li span.over a:hover { text-decoration:none;border:0; } #nicemenu li span.active { padding:3px 3px 4px 5px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #fff; } *+html #nicemenu li span.active { border-top:solid 1px #E5E5E5; padding-bottom:0px; } /* IE6 */ #nicemenu li span.active a { } #nicemenu li span.active a:hover { text-decoration:none; } #nicemenu img.arrow { /*margin-left:4px;*/ cursor:pointer; } #nicemenu div.sub_menu { display:none; position:absolute; left:0; top:0px; margin-top:24px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #999999; padding:4px; top:2px; width:160px; background:#FFFFFF;float:left; } * html #nicemenu div.sub_menu { margin-top:25px; } /* IE6 */ *+html #nicemenu div.sub_menu { margin-top:25px; } /* IE7 */ #nicemenu div.sub_menu a:link, #nicemenu div.sub_menu a:visited, #nicemenu div.sub_menu a:hover{ display:block; font-size:11px; padding:4px;} #nicemenu a.item_line { border-top:solid 1px #E5E5E5; padding-top:6px !important; margin-top:3px; }
Sat, 2008-10-25 20:15
#4
astralis wrote:Again, the
Again, the menu now works great with the revision above. But, when I changed the span font-size to 16px,
You shouldn't be setting font size in pixels in your CSS. Causes too many cross browser problems. IE6 can't resize text set in pixels, either, a major usability drawback for some of the, er, elders among us.
Sat, 2008-10-25 20:25
#5
I agree. But, the
I agree. But, the application that I am using for this already set the body text in pixels and so I was stuck with it. The body font was set at 12 pixels yet the menu still generated the font at 16px. I'm still trying to understand why. To be safe, I set the font-size for the span at 16px because it did look good and tried to design around it. I can't really change the body text size at this point. I know it's hacky.
Sat, 2008-10-25 20:33
#6
Not understanding too much
Try setting your text size to 1em this is usually the same in all browsers. Or you could always use percentages witch usually works better.
Sat, 2008-10-25 20:39
#7
I tried both 1em and 100%,
I tried both 1em and 100%, and experimented, but nothing changed.
Sat, 2008-10-25 20:41
#8
What block are you setting
What block are you setting the font size for the anchor or the list?
Sat, 2008-10-25 20:46
#9
I'm setting it on the
I'm setting it on the span.
#nicemenu span {float:left;font-size:100%;}
Sat, 2008-10-25 20:53
#10
Ahh this is were your
Ahh this is were your problem lies the text your trying to resize is in an anchor tag (from what i can gather) therefore if you change the text size in anything other than the anchor tag then it will not work. Also please validate your page at http://validator.w3.org/ I'm pretty sure you can't have an unordered list directly inside a span tag.
Sat, 2008-10-25 21:25
#11
Okay...so that means it's
Okay...so that means it's getting resized somehow even when I don't try to force it. I'll figure out what's happening with that.
BTW, the ul is not within the span.
If you have any other ideas, please advise. I'll post what I figure out...
Sat, 2008-10-25 21:56
#12
Yes change this
Yes change this line:
#nicemenu li span a { font-weight:bold; padding:0 6px 0px 2px; }
to
#nicemenu li span a { font-weight:bold; padding:0 6px 0px 2px; font-size: 1em; }
Sat, 2008-10-25 22:28
#13
Josh Connerty wrote:Ahh this
Ahh this is were your problem lies the text your trying to resize is in an anchor tag (from what i can gather) therefore if you change the text size in anything other than the anchor tag then it will not work.
What are you talking about? :?
astralis if you're having troubles with vertical padding, then you may be better off setting a height and line-height = to the height and remove the vertical padding.
Sat, 2008-10-25 22:32
#14
Am I missing something I
Am I missing something I thought we were trying to resize the text. I thought we had resized the menu buttons.
Sat, 2008-10-25 22:36
#15
Even if the discussion were
Even if the discussion were actually about resizing text (read the thread again, it's only a side issue introduced by Ed), what you said makes no sense.
Sat, 2008-10-25 22:42
#16
Ok I have well and truly
Ok I have well and truly confused myself so I'm going to stay out of this one 
Sun, 2008-10-26 00:56
#17
astralis wrote:I tried both
I tried both 1em and 100%, and experimented, but nothing changed.
Right, That's to be expected. If you had text at 16px and then after resetting it to 100% it will not change at all if your browser is set to have it's default text to 16px, which is the usual default.
But if you are old like me and change your browser to use a default font size of 20px, you would have seen a change. In general people will either be satisfied with the default font size of their browser or at least not annoyed enough to change it. But a few will reset the default text size bigger or even smaller. Using 100% on the body honors their choice. 1em will also work in theory but I understand IE6 has a bug with this so 100% avoids that.