...

View Full Version : Ie7 NavBar problem CSS, works in Ie8+



LordJashin32
04-27-2011, 03:38 AM
I've looked at a compatibility list for selectors for IE7, and researched this problem somewhat but couldn't find anything.

I'll attached the CSS, and XHTML files

The Problem: I have padding:0.5% for ul li a, but in IE7 standards mode on IE9 It doesn't show the padding, or doesn't expand the background color to fit the padding. The Navigation buttons are fine in IE8+, but in IE7 they are smaller, and it looks like the padding is gone.

Pic in IE7 Standards Mode:

http://i1198.photobucket.com/albums/aa442/SmartTristan32/ie7.png
Pic in IE8 Standards Mode:

http://i1198.photobucket.com/albums/aa442/SmartTristan32/ie8.png

Any help is appreciated!

Kor
04-27-2011, 02:05 PM
Give your A element (nested within the list) display:block, float:left and, maybe, certain margin-right

But there is another problem. The % padding values are relative to the container element width. But if no container has a certain width, what do you think padding:0.5% might be? 0.5% from what?

This is why not only IE7 which gives you different padding, but all the browsers (IE9, FF, Chrome, Opera...) will show different padding, according to what they believe there might be "the container width", as the container has no firm, absolute, width set.

My belief is that you should not use percent padding in this situation.

LordJashin32
04-28-2011, 12:00 AM
Thank you, I understand.

Is there any fluid layouts you can recommend for me that will accommodate all screen resolutions, and browsers, or the highly used screen resolutions, and the rest I'd have to make a separate CSS file for.

New to CSS layouts, any help is appreciated if not there's always google.

Kor
04-28-2011, 12:39 PM
Thank you, I understand.

Is there any fluid layouts you can recommend for me that will accommodate all screen resolutions, and browsers, or the highly used screen resolutions, and the rest I'd have to make a separate CSS file for.

New to CSS layouts, any help is appreciated if not there's always google.
It is not recommended to modify the size of the elements according to the resolutions. Fluid layouts should merely preserve the position, relative and absolute, of the elements. Almost all the users (about 95%) have displays set between 1024x768 px and 1680x1050. As you can see, the height range (768 to 1050) is not so big, so that you don't have to be worry that some elements would be too small or too big in different resolution. Just make them at an average fixed size.


First you should define a minimum resolution for which your document will cover almost the whole window's width. That is, usually (so far) 1024x768 px. That means your container should have the width no greater than 980, 990 px. Most of the time, you would like to center horizontally your content, thus your container should have margin-left:auto and margin-right:auto. That will keep the content centered no matter the resolution.

These are the only 2 rules for a simple fluid development. You may, further play with min-width or position:fixed, etc.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum