SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange White Bar

    My client is reviewing the page linked below and says that a strange white bar is showing across the entire page and is located right above the video area. I am using Firefox on a Mac and the client is using Explorer on a PC. I do not see this "white bar". Can anyone on a PC using Explorer see it? Any thoughts on why it is showing up and how to fix the problem?


    LINK-
    http://www.allergyasc.com/071408/


    Thanks in advance.
    Todd Temple
    Todd Temple > T2 Design

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding vertical-align: bottom to your picture should fix it.
    Code:
    #body2 img { vertical-align: bottom;}

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added the CSS rule.
    Can you try refreshing the link and see if it is working properly?

    And any idea why it did not look that way in Firefox on a Mac?
    Todd Temple > T2 Design

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks fine in IE 7 but IE 6 has a little trouble with it.
    By the way why are you using padding-left: 50% and margin-left: -380px?
    Code:
    #wrapper {
    	width: 760px;
    	margin-left: -380px;
    	padding-left: 50%;
    	margin-top: 5px;
    }
    If you're trying to center it I would just write it like this instead:
    Code:
    #wrapper {
    	width: 760px;
    	margin: 5px auto 0 auto; 
    }

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How does it look in IE6?

    I am using the padding left and margin left that you quoted because I had found it in a tutorial somewhere. I will make a note of your suggestion and work it into my next site. Thanks!
    Todd Temple > T2 Design

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry don't have time right now to look closer at it. Hopefully someone else can . Going out a couple of hours, if its not fixed when I get back I'll take a look.

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

    I can't see a white bar in IE7 but I have to tell you that IE6 is pretty broken.

    Code:
    And any idea why it did not look that way in Firefox on a Mac?
    images are inline elements and are placed on the baseline which will leave room underneath for descenders - hence the little gap. Aligning the image to the bottom or setting the image to display:block will cure the problem. Some browsers treat this differently than others and it also depends on what mode the browser is in.

    IE also has a white space bug and a space after the image but before the closing tag of a parent will also result in a little gap. Therefore always make sure your images have no white space in the html after them and the parent tag closes immediatley.

    The centering method you are using is bad for accessibility because at small screens widths the page slides off to the left and cannot be reached with a scrollbar. margin:auto is a better solution as mentioned above unless you were trying for some other effect.

  8. #8
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I can't see a white bar in IE7 but I have to tell you that IE6 is pretty broken.
    Can you provide any quick fixes or hacks to add to my stylesheet so that it would support IE6? I really appreciate your input and advice!

    Todd Temple > T2 Design
    Todd Temple > T2 Design

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

    Can you provide any quick fixes or hacks to add to my stylesheet so that it would support IE6? I really appreciate your input and advice!
    First of all remove the gap between the img closing tags and the div closing tag or you will get a white space in the layout.

    e.g.

    Code:
    ></a><img id="gfx_nav_right" src="http://www.allergyasc.com/071408/i/gfx_nav_right.jpg" width="73" height="45" alt="" /></div>
    Then float the images in the masthead to kill all other whitespace bugs.

    Code:
    #masthead img{float:left}
    Then use auto margins to center your layout.

    Code:
    #wrapper {
        width: 760px;
        margin:5px auto 0;
    }
    You have the double margin bug here so add this fix:

    Code:
    #contentLeft {
        margin: 0px 0px 20px 50px;
        font-family: Arial, Helvetica, sans-serif;
        color: #666666;
        font-size: 12px;
        width: 327px;
        vertical-align: top;
        float: left;
        display:inline;
    }
    #contentRight {
        font-family: Arial, Helvetica, sans-serif;
        color: #666666;
        font-size: 12px;
        width: 295px;
        vertical-align: top;
        float: left;
        margin: 0 0 20px 25px;
    display:inline;
    }
    #footer2 {
        width: 725px;
        float: left;
        margin: 0px 0px 30px 20px;
        background-image: url(http://www.allergyasc.com/071408/i/gfx_green_stroke.gif);
        background-repeat: no-repeat;
        display:inline;
    }
    You would also be better off using css rollovers rather than that mass of javascript rollovers.

  10. #10
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You have the double margin bug here so add this fix:

    [code]
    #contentLeft {
    margin: 0px 0px 20px 50px;
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    font-size: 12px;
    width: 327px;
    vertical-align: top;
    float: left;
    display:inline;
    }
    #contentRight {
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    font-size: 12px;
    width: 295px;
    vertical-align: top;
    float: left;
    margin: 0 0 20px 25px;
    display:inline;
    }
    Paul O'B,

    Your fixes worked like a charm! Thank you so much.
    I wanted to learn from this fix instead of simply copying and pasting your corrections so I am curious where I can find more info about what you meant by the "double margin bug". Can you point me to some info on that? Again, thanks for your help!

    Todd
    Todd Temple > T2 Design

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Can you point me to some info on that? Again, thanks for your help!
    Yes, see the FAQ on floats at the top of the forum.

    The double margin bug applies to the side of floated elements on the side that is closest to its containing block's edge. On this edge the margin is doubled in error.Inner floats are not affected.

    The fix is to display:inline to the floated element which miraculously cures the bug for no other reason than it does. It's just a happy co-incidence that one bug cures anther. Floats are display:block by default and display:inline should be ignored by the user agent. For some odd reason it cures the double margin bug in IE and it won't have any other ill effect on other browsers because they ignore it.


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
  •