34 users online (1 members and 33 guests)  


  Results 1 to 8 of 8

Related

  1. Display Table based on selection in the Combo Box    Forum: Javascript Forum
    Replies: 0
  2. Not sure why my page doesn't scroll    Forum: CSS Forum
    Replies: 8
  3. Site doesn't work properly on IE5    Forum: CSS Forum
    Replies: 3
  4. Wont display properly in Firefox    Forum: HTML Forum
    Replies: 2
  5. Replies: 5
  1. #1
    worchyld's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4

    Angry Table-less page doesn't display properly in IE

    The following code works, more or less - but in IE notice that the text moves a little to the right on the first few lines, I've checked the code a billion times but can't find out why it does this - anyone got any ideas?

    Thanks.

    <style type="text/css">
    <!--
    #all {
    margin: 1em;
    background: #eee;
    border: 1px solid #000;
    }
    #hdr {
    background: red;
    }
    #leftbar {
    float: left;
    text-align: right;
    width: 175px;
    padding-right: 5px;
    }
    #rightbar {
    background: #fff;
    margin-left: 180px;
    padding-left: 1em;
    }
    p {
    margin: 0px;
    padding: 0px;
    }
    -->
    </style>
    </head>
    <body>

    <div id="all">

    <div id="hdr">Logo</div>
    <div id="leftbar">
    <p>Left bit</p>
    <p>Left bit</p>
    </div>
    <div id="rightbar">
    <p>Right Bar</p>
    <p>Right Bar</p>
    <p>Right Bar</p>
    <p>Right Bar</p>
    <p>Right Bar</p>
    <p>Right Bar</p>
    <p>Right Bar</p>
    <p>Right Bar</p>
    </div>
    </div>

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    I have had a bit of a play. Looks to me as if you have found another IE box-model bug. I cannot see anything wrong with your code. it works fine in Mozilla.

    it looks as if the <p>tags on the left are 'pushing' the <p>tags on the right. maybe try it without using paragraphs as a workaround.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    Actually, I've spent a good part of the day just doing that. Changing margins, using classes rather than IDs, taking out all the p tags. Sure looks like a bug to me. Strange though.

  4. #4
    worchyld's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4
    Thanks to you all for having a go - it is a real puzzeller - it does work (more or less) in other browsers, but not in IE...someone mentioned to me it might be the DOCTYPE, but that doesn't seem to resolve the problem.

    So instead I've decided to use a table to hold the left bit and right bit for the moment until I can find an appropirate fix.

    Thanks again.

  5. #5
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    One thing I did notice was the shifting was happening when there was content in the .left div directly beside any content in the .right div.
    A workaround that might be easier to deal with would be some non-breaking spaces on the lines that weren't affected making the rest of the right div line up. Or (I didn't try it) but maybe even an invisible gif stretched for the remainder of the visible left div would do the same thing. It's a hack, but maybe a lot simpler to deal with, as well as maintaining a true CSS positioned page.
    Any help?

  6. #6
    worchyld's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4
    When you say stretched do you mean vertically or horizontally?

  7. #7
    worchyld's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2003
    Posts
    4
    Someone told me I can set up a 1x1 div in between the left and right div's - but it has one problem - it can't be set to the height of the content dyanamically.

    As far as I'm concerned I'll stick to a table and enforce CSS inside of it - thanks anyway for all your help

  8. #8
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    Originally posted by worchyld
    When you say stretched do you mean vertically or horizontally?
    What I meant was if you put
    Code:
    <img src="" width=1px height="100px" border="0">
    immediately after the last p tag and adjust the height to accommodate the layout, It might be a bit simpler to deal with.
    It's not dynamic, and it's remenicent of using invisible gifs for Netscape, but it's a cludge.



Tags for this Thread