17 replies [Last post]
astralis
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-24
Posts: 7
Points: 0

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.

View flickr-like menu

Thanks in advance!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try floating the spans left

Try floating the spans left and then adjusting the padding.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

astralis
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-24
Posts: 7
Points: 0

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; }

astralis
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-24
Posts: 7
Points: 0

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; }

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

astralis wrote:Again, the

astralis wrote:

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

astralis
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-24
Posts: 7
Points: 0

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.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 49 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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.

astralis
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-24
Posts: 7
Points: 0

I tried both 1em and 100%,

I tried both 1em and 100%, and experimented, but nothing changed.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 49 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

What block are you setting

What block are you setting the font size for the anchor or the list?

astralis
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-24
Posts: 7
Points: 0

I'm setting it on the

I'm setting it on the span.

#nicemenu span {float:left;font-size:100%;}

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 49 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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.

astralis
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-24
Posts: 7
Points: 0

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...

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 49 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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;  }

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Josh Connerty wrote:Ahh this

Josh Connerty wrote:

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 49 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 11 years 49 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Ok I have well and truly

Ok I have well and truly confused myself so I'm going to stay out of this one Laughing out loud

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

astralis wrote:I tried both

astralis wrote:

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.