SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Float drop issues with IE6.. again..

    Hello,

    Okay. A few of you may be familiar with the numerous occasions I've had float drop issues recently. Once again, I'm having an entire division of my layout drop in IE6.

    Please view http://dev.cisp.com/astanford/cisp2/ and compare FF3 to IE6. I would like IE6 to display exactly as FF3 currently does without any conditional stylesheets or hacks.

    Any assistance would be very helpful and appreciated.

    Thank you in advance,
    Alex
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    You have it equal EXACTLY what the parent width is which could lead to a rounding error. On #side add margin-left:-1px;

    Hi Alex.

    PS: Just to be safe you can set teh padding on #side to 15px; (your being so complicated about it on AIM lol)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You have it equal EXACTLY what the parent width is which could lead to a rounding error. On #side add margin-left:-1px;

    Hi Alex.

    PS: Just to be safe you can set teh padding on #side to 15px; (your being so complicated about it on AIM lol)
    #side contains elements such as images that are exactly the current with, so narrowing it is not an option.

    I'm going to try to narrow the content division by a pixel or two.

    P.S. Thanks Ryan, and jump on IM when you can. I'm running to a meeting but I'll be back around 10-10:30 AM EST (it is 9:30 now).
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Your welcome . Remember the rule of thumb-if content is dropping it is overexceeding the width. Most likely padding is causing an element to overexpand beyond the parents width.

    PS: I'll be on tonight (5 eastern). Tennis after school so I won't be home until then.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

    The problem is that your .livechat element is 211px wide but the #side container is only 210px wide and therefore it gets pushed wide and breaks the layout.

    Reduce the padding on livechat and the column should appear correctly.

    Code:
    #side a.livechat {
    margin: 25px 0 0;
    height: 28px;
    width: 148px;
    display: block;
    background: url(../img/livechat.png) no-repeat;
    padding: 12px 7px 0 55px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    }

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    He doesn't like changing padding size (I tried multiple times on aim) so Just try to bear with him (lol).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  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)
    Quote Originally Posted by RyanReese View Post
    He doesn't like changing padding size (I tried multiple times on aim) so Just try to bear with him (lol).

    You miss the point

    The inner element is bigger than its parent and cannot exist in that form. Either the padding on the inner element needs to be reduced or the width of the inner element needs to be reduced. It has nothing to do with the padding on the parent but on the inner element called .livechat.

    You can't re-invent the laws of physics

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I'm not trying to but I'd have im change something else then apdding because he gets antsy with that. I understand you perfect but on AIM he wouldn't even think about messing width the padding.

    PS: Did I ever say it had to do with the padding of the parent element??
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  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)
    I understand you perfect but on AIM he wouldn't even think about messing width the padding.
    Sorry but this is utter nonsense.

    Either something fits or it doesn't. There are no ifs or buts it either has to fit or it doesn't fit at all.

    The only reason it works in other browsers is because they do not stretch the parent's width to accommodate the larger child. He is not getting the exact padding he specified on that element in any browser except IE6 because that's the only one that stretches the parent. All other browsers show it with one pixel less padding because they ignore the overflow.

    The answer is as I have given above and the padding and width on the .livechat element exceed the width of the parent container.

    It's as simple as that and so is the solution


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
  •