Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer Ie7 NavBar problem CSS, works in Ie8+

    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:


    Pic in IE8 Standards Mode:



    Any help is appreciated!
    Attached Files Attached Files

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    LordJashin32 (04-27-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by LordJashin32 View Post
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •