SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    The Jellophonic Autobrain CHeeSeBLiND's Avatar
    Join Date
    Jul 2001
    Location
    Bolton, England
    Posts
    584
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another IE/Firefox problem

    OK I'm not the best at CSS but I thought it was about time I attempted to use it for more than text roll overs and whatnot. So anyway this brings me to this:

    http://dinklump.com/v1.0/template.html

    It looks fine in firefox, but shock horror, its all wonky in IE. I was just wondering if anyone had any ideas? I'm assuming its to do with the broken box model which IE so handily uses. But if theres an easy/better solution to the problem, I'm all ears.

    the css file is here: http://dinklump.com/v1.0/styles/default/css/common.css

    Thanks for any help.
    hmm...

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

    The right column is dropped below the rest because you have made content in the middle wider than its parent container. Firefox doesn't expand the parent but ie tries to help by expanding the parent to contain the content.

    This results in there not being enough room left for the right column so it drops below. The 2 main culprits are these following styles where you have added width and padding to make the elements too big.

    Just leave the width out as it is not needed.
    Code:
    .description
    {
    margin: 0px;
    padding: 0px 7px 8px 7px;
    float: left;
    border-bottom: 1px solid #FFF;
    border-right: 1px solid #E7EBED;
    }
     
    #mainContent h2
    {
    background-color: #A9B8C5;
    color: #FFFFFF;
    margin: 0px;
    font-size: 10px;
    font-weight: normal;
    padding: 4px 2px 4px 5px;
    border-bottom: 1px solid #FFF;
    clear: both;
    }
    You do have some box model issues but they won't interfere with ie6 because in standards mode ie6 uses the correct box model. Of course you will to cater for ie5 and 5.5. so go through and rectify where you have added padding/borders and also specified a width. The only place I could see you accounted for it was in the main container and you got that wrong anyway

    Remember that 2px padding (or 2px borders) will add 4px to the total width not 2px. Your hack should have been this.
    Code:
    #container
    {
    margin: 0px auto 0px auto;
    width: 764px;
    border: solid 2px #4F5944;
    background: #FFF; 
    text-align: left;
    overflow: hidden;/* you had hide */
    }
    * html #container
    {
    width: 768px;/*for ie5.x win */
    w\idth: 764px;/*for ie6*/
    }
    I'll leave you to do the rest

    paul

  3. #3
    The Jellophonic Autobrain CHeeSeBLiND's Avatar
    Join Date
    Jul 2001
    Location
    Bolton, England
    Posts
    584
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha it kind of works now. I'm sure i make most of the css up. But I'm trying to do things properly (for once). I am pretty certain that the CSS is far more bloated than it could be so I'll revise it once I've got everything sorted. Thanks for the help
    hmm...


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
  •