SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast demonDESIGN's Avatar
    Join Date
    Dec 2003
    Location
    Perth, WA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unknown glitch with IE & float

    Hi Guys,

    I have a very weird problem that I haven't seen before.

    I have a containing DIV enclosing a content DIV which contains a fixed width DIV.

    It works fine in FFox, suprise suprise.
    But in IE, at a certain browser width, the left margin breaks.

    It's easier to understand looking at these images.


    This is how it SHOULD look.


    This is how is renders in IE in a browser width of about 400px.


    This is what happens when I increase the size of the browser window.
    The margin on the left hand side disappears.

    You can see the live site here.
    http://www.waitalianclub.com/pretemplate.htm

    Here's the CSS.
    body {
    font: 97% "Trebuchet MS", Arial, "Lucida Console";
    background: #FFFFFF url(../images/italianclub-background.gif) no-repeat;
    margin: 0px;
    padding: 0px;
    }
    #navigation {
    background: #29713A url(/images/navigation-background.jpg) repeat-x;
    height: 115px;
    margin: 25px 25px 25px 180px;
    border-right: 3px solid #CCCCCC;
    border-bottom: 3px solid #CCCCCC;
    overflow: hidden;
    }



    #navigation ul {
    margin: 0px;
    padding: 4px 0px 0px;
    border-bottom: 3px solid #B5200D;
    height: 23px;
    overflow: hidden;
    }
    #navigation a {
    display: block;
    float: left;
    text-decoration: none;
    color: #29713A;
    font-size: 0.9em;
    padding: 2px 10px;
    margin: 0px;
    }

    #navigation p {
    font-size: .8em;
    color: #FFFFFF;
    padding-left: 10px;
    display: block;
    border-top: 2px solid #FFFFFF;
    margin-top: 58px;
    padding-top: 3px;
    }

    #navigation li {
    list-style: none;
    display: inline;
    margin: 0px;
    padding: 0px;
    }
    #navigation a:hover {
    display: block;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration: none;
    color: #FFFFFF;
    background: #B5200D;
    }
    #contentHolder #content #eventsHolder {

    background: #AB1C0A;
    font-size: 0.8em;
    color: #FFFFFF;
    float: right;
    width: 200px;
    }
    #contentHolder #content {
    font-size: 0.9em;
    background: #FFFFCC;
    border: medium solid #00FFFF;
    }
    #contentHolder{
    margin-left: 50px;
    margin-right: 50px;
    background: #FF33FF;
    width: 1%;
    width: auto;
    }


    Hope you can help
    --N

  2. #2
    SitePoint Enthusiast demonDESIGN's Avatar
    Join Date
    Dec 2003
    Location
    Perth, WA
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha, God bless IE!!!

    Thanks for that.
    Who would have thunk it!

    --N


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
  •