PDA

View Full Version : Please check my CSS and tell me what's wrong!



whammy
Jan 9th, 2007, 04:21 PM
Hi,

Some of you may remember me as the former administrator of the ASP forum.

I haven't been coding in awhile due to real life issues, but I'm trying to get my hand back into it using XHTML/CSS instead of the old crappy way of doing things with tables.

Now to the issue, hopefully some of you can help me out with it:

http://www.varsityomaha.com/

This is just a template of the site I'm getting ready to do. The graphics are super simple but it's what the client wants pretty much, including the background, with pictures to be added to the text later.

The issue I'm running into is on some computers in my house, with the same IE browser, the menu going across the top wraps to the next line although I have the <li> width set to 20%.

Am I going about this wrong? It looks fine on Firefox and IE on my computer and on most computers. Please help!

Thank you,

Whammy

whammy
Jan 9th, 2007, 04:23 PM
Oh, I also wanted to add I changed screen resolutions on my computer and that didn't affect the appearance at all. This is somewhat confusing to me as I'm a CSS newbie. :)

rmedek
Jan 9th, 2007, 05:15 PM
Whammy, you're setting a bad example with your post title! :eek: :D

Looks like it's the percentage that's throwing things off. Even though 20% x 5 = 100% percent, sometimes in certain browsers it renders more like 20.0001% x 5 = 100.0005%, which will wrap because it's greater than the available width.

Since the total width is fixed, you can just use a solid unit for width, like pixels. Hope this helps…

whammy
Jan 9th, 2007, 06:39 PM
I updated the site with fixed pixel width for the menu, but still see the same problem. >.<

And yeah, sorry about the title... it's been awhile since I've been involved in this kind of forum. I should have made it 'menu wraps inexplicably in some versions of IE' or something to that effect.

koyama
Jan 9th, 2007, 07:31 PM
It seems you still haven't removed the hack:


* html #nav li {
/** IE/PC hack due to haphazard line breaks when combined widths = 100% **/
\width:24.9%;
}

shouldn't it have been set to something like 19.9% in any case? Perhaps I misunderstand? I'm not an expert in CSS hacks anyway.

whammy
Jan 9th, 2007, 08:24 PM
It seems you still haven't removed the hack:


* html #nav li {
/** IE/PC hack due to haphazard line breaks when combined widths = 100% **/
\width:24.9%;
}

shouldn't it have been set to something like 19.9% in any case? Perhaps I misunderstand? I'm not an expert in CSS hacks anyway.

Wow how did I overlook that. I'm such a noob! Thanks, that did it lol.