SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS width issue in Netscape/Mozilla/Safari

    I have a CSS site I am working on here: http://visualnotion.com/obc/

    It looks good in IE for Mac and Windows, but the far right column is off by a couple of pixels in width, when viewed in Netscape 7, Mozzila, and Safari. The HTML and the CSS have passed validation.

    I am at a loss here. Any thoughts?

    (The CSS file is located here: http://visualnotion.com/obc/styles.css)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I suspect the problem is that you have used the broken box model of IE5 5.5. (and IE6 in quirks mode). Where you have specified a width/height and used padding or borders at the same time then your design will be out on compliant browsers.

    Have a look here for more information and techniques to avoid this problem.

    http://glish.com/css/hacks.asp

    Hope this helps.

    Paul
    Last edited by Paul O'B; Sep 10, 2003 at 10:51.

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just taking an example from the source:

    Code:
    #back
    {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 1px;
    text-align: center;
    width: 672px;
    height: 498px;
    background: #FFFFFF;
    }
    Here, you set a width and padding at the same time. Don't do that if you want pixel perfection in IE5.

    The same goes for borders: you will have problems if you set a border and a width (or height) at the same time. (This does not apply to images)

    hth,
    Douglas
    Hello World

  4. #4
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies. I have tried the box model hack. IE for Mac seems to add a couple of pixels of white on the right side and NS loses a couple of pixels of white at the bottom. Does the code look right? I just want to make sure I am doing this properly.

    http://visualnotion.com/obc/

    http://visualnotion.com/obc/styles.css

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    #border
    {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    text-align: center;
    border: 1px solid #262726;
    width: 666px;
    height: 492px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 664px;
    background: #D4D3B7;
    }
    html>body #border
    {
    border: 1px solid #262726;
    width: 664px;
    height: 492px;
    }
    If the height is critical then you will need to add that in your calculations as well. You have added into the child selector part but have not changed its size.

    Also any statements after the voice hack will not be read by ie5 5.5. Therefore that background definition will be lost on those browsers. The only code that goes after the voice family hack is the different code you are supplying to compliant browsers only. IE5 will crash out of the style as soon as it meets the hack.

    Your code should be amended as follows:
    Code:
    #border
    {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    text-align: center;
    border: 1px solid #262726;
    width: 666px;
    height: 492px;
    background: #D4D3B7;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 664px;
    height: 490px;
    }
    html>body #border
    {
    width: 664px;
    height: 490px;
    }
    However by careful planning you can avoid using the hack if you use the inner elements to supply your padding/borders.

    A simple example would be something like this:
    Code:
    .outer {
    width:300px;
    height:200px;
    }
    .inner {
    border:1px solid #000;
    padding:10px;
    }
    
    Html:
    
    <div class="outer">
    <div class="inner">
    <p>Hello Hello</p>
    </div>
    </div>
    The above code would not need any hacks as the borders and padding are on the inside of the 500px outer div.

    Obviously in most cases you may have inner elements that you can use already without resorting to an extra nested div.

    e.g.
    Code:
    .outer {
    width:300px;
    height:200px;
    }
    p {
    padding:10px;
    }
    
    Html:
    
    <div class="outer">
    <p>Hello Hello</p>
    </div>
    Of course it does depend on the situation and how you plan ahead. The choice is yours [img]images/smilies/wink.gif[/img] .

    Paul

  6. #6
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you for responding again. I have done what you mentioned above (The first fix). However, when it is viewed in IE 5 for Mac or IE 6 for PC, I still can't seem to get rid of the extra pixels of white on the bottom and right side of the #back div. Am I just not understanding something here or am I just going to have to be content with the extra pixels?

    Again, thank you for your help. It is very appreciated.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to use a full doctype (with uri) to ensure IE6 is not in quirks mode as this confuses the box model hack in ie6 (that is it won't work for ie6 but will work for ie5).

    You will need to take into account any other elements where you have declared width and borders/padding at the same time.

    If the site in the first post is your current site then I notice that you have not made allowances for this.
    Code:
    #navborderstop {
     position: absolute;
     width: 100%;
     height: 3px;
     left: 0px;
     top: 59px;
     border-top: 2px solid #002855;
     background-color: #A29A69;
    }
    #nav {
     position: absolute;
     width: 100%;
     height: 24px;
     left: 0px;
     top: 61px;
     text-align: left;
     border-top: 1px solid #A29A69;
     border-bottom: 1px solid #A29A69;
     background-color: #14553B;
     background-image: url(images/nav_tile.gif);
     background-repeat: repeat-x;
     background-position: left top;
    }
    #navbordersbottom {
     position: absolute;
     width: 100%;
     height: 3px;
     left: 0px;
     top: 84px;
     border-top: 1px solid #A29A69;
     background-color: #002855;
    }
    All these borders may add into the equation if they are in critical positions. I haven't had time to check properly whether they matter or not as you may have absolutley placed elements on top of them anyway.

    If you can confirm that the link in your first post is your current updated site then I'll take another look later on today.

    Paul

  8. #8
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is where I am making updates to the CSS. Your help is very welcome and much appreciated. Thank you so very much.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just had a quick look and if you are talking about the outside white border then that can be fixed by using a full doctype.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    However this will put IE6 in standards mode and you will have a couple of adjustments to sort out.

    The box model hack doesn't work for IE6 when its in quirks mode (partial doctype without uri) because it uses the broken box model but it correctly parses the hack and feeds itself the wrong values.

    Anyway try the doctype out and then you will have to work out your three divs that span the bottom of the page as they don't match up correctly. Check your dimensions thoroughly so that they all add up correctly.

    Paul

  10. #10
    SitePoint Member
    Join Date
    Apr 2003
    Location
    Lubbock, Texas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The doctype fix worked. Thanks again for your help. I also fixed the three divs at the bottom. Everything seems to be working much better. Thanks again for your help.


Bookmarks

Posting Permissions

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