SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Location
    Henryville, PA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question float blowout problem?

    I am setting up a new web site using Zen Cart. When I look at my site in IE it looks perfect. When I look at it in FireFox the side boxes are all off kilter. I went to the Zen Cart forum and found a post from another Zenner with the same problem. The answer was, you are having a CSS float blowout problem but I can't remember how to fix it. Does any one here know how to fix this problem? My web site address is http://chic-perfumefragrance.com so your can view it in IE and FireFox and see what I mean.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Just messing around with your CSS, changing the padding here keeps the boxes together..
    Code:
    .centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    	padding: 1.8em;
    }

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Location
    Henryville, PA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Half Way There!

    Changing the padding for the .centerColumn code as shown fixed the overlapping of the left side boxes into the center column. Thanks! But my right side boxes are still floating off the page in FireFox. Any idea how to fix that? Everthing still looks good in IE.

  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,

    You need to think about what you are doing here

    Code:
        <td id="navColumnTwo" class="columnRight" style="width: 150px"><div id="navColumnTwoWrapper" style="width: 150px">
                        <!--// bof: shoppingcart //-->
                        <div class="rightBoxContainer" id="shoppingcart" style="width: 150px">
    Code:
    .leftBoxContainer, .rightBoxContainer {
        margin: 1.5em;
        border: 1px solid #9a9a9a;
        border-bottom: 5px solid #990099;
        }
    The parent navColumnTwo is 150px wide only.

    Inside that you have placed elements called navColumnTwoWrapper and rightBoxContainer which you have also given width to of 150px which so far is ok.

    However you have then added a margin of 1.5 em to the rightBoxContainer which will make it 3 em to big to fit inside its parent.

    You need to remove the left and right margins in order for it to actually fit.

    Code:
    .leftBoxContainer, .rightBoxContainer {
        margin: 1.5em 0;
        border: 1px solid #9a9a9a;
        border-bottom: 5px solid #990099;
        }
    It will still be too wide because of any borders set of course but should still fit.

    You must be precise with css and your dimensions must make sense and fit in the space you allocate them and then the browsers will al least have a chance to render it correctly. If a parent has a 150px width hen you cannot make the inner element have a 150px width and then add margins, border and padding because it won't fit and something has to give.

    Also your mix of inline styling makes it very difficult to bug hunt as you have to jump between the html and css and defeats the purpose of using css in the first place as the presentation cannot be managed from the style sheet alone.

    Hope that points you in the right direction

  5. #5
    SitePoint Member
    Join Date
    May 2007
    Location
    Henryville, PA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks so much!

    I am going to pass this along to the other Zenners who are having the same problem.


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
  •