SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE adding 10px to sidebar

    www.jonhehir.com
    I can't figure out why, but IE is adding 10px to my sidebar. Is there anyway to fix it without hacks?

    My brain is a little fried out right now from stupid PHP errors.

    BTW, I've outlined #content and #sidebar in red to make it easier to see the problem.

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could it be your outer container isn't wide enough for the inner? Looking at it with FF the red box in the sidebar is a px or two left of center. In IE it is flush to the left as you have discribed.
    Bill Rosa


  3. #3
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The outer is 530px wide including padding, 510 without padding. #content is 305px wide floated left. #sidebar is 150px wide floated right. 305+150=455. So, I don't think that's the problem.

    EDIT: Okay, it's something weird like that. If I make #sidebar 146px wide, it will be 146px wide. If I bump it up to 147px, it jumps to 160px again.

  4. #4
    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,

    Its ie's double margin bug on floats/ (See the FAQ on floats for more details and explanation)

    Heres the fix
    Code:
    a.colorbutton {
     text-indent: -9999px;
     text-decoration: none;
     display: block;
     float: left;
     height: 12px;
     width: 12px;
     overflow: hidden;
     margin: 0 11px;
     border-width: 0;
     display:inline;/* ie double margin fix */
    }
    Paul

  5. #5
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Its ie's double margin bug on floats/ (See the FAQ on floats for more details and explanation)

    Heres the fix
    Code:
    a.colorbutton {
     text-indent: -9999px;
     text-decoration: none;
     display: block;
     float: left;
     height: 12px;
     width: 12px;
     overflow: hidden;
     margin: 0 11px;
     border-width: 0;
     display:inline;/* ie double margin fix */
    }
    Paul
    Thank you, Paul. You are a genius.


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
  •