Advanced Search

Results 1 to 2 of 2

Thread: CSS alignment problem with IE (scroll box -NOT a scrollbar question)

  1. #1
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS alignment problem with IE (scroll box -NOT a scrollbar question)

    Hi everyone,
    I'm being driven insane by IE (sound familiar?) and am running out of ideas.

    DTD XHTML 1.0 Transitional, 2 column CSS
    Left column contains an image on each page (sizes vary).
    Right column has a headline, a couple of lines text, and then a scroll box for more text.

    Everything works beautifully in Firefox (of course). IE, however, moves the scrollbox down the page, for it to be aligned to the bottom of the image used in the left column.
    This means the right column will look like: headline, text, blank space as high as picture in left column, scrollbox.
    Code:
    #col-left {
    float: left;
    width: auto;
    height: auto;
    margin-top: 72px;
    margin-right: 5px;
    margin-left: 3px;
    padding: 3px;
    background-color: #444446;
    border: 2px outset #2655CC;
    font-family: "Times New Roman", Ariel, Helvetica, sans-serif;
    font-size: 12px;
    color: #E0E0E0;
    }
    
    
    
    #col-right {
    padding: 3px;
    margin-top: 77px;
    margin-left: 320px;
    margin-right: 5px;
    background-image: none;
    background-repeat:no-repeat;
    background-color: #444446;
    height: auto;
    border: 2px outset #2655CC;
    font-family: "Times New Roman", Ariel, Helvetica, sans-serif;
    font-size: 12px;
    color: #E0E0E0;
    text-align: left;
    }
    
    #scroll {
    padding: 3px;
    margin-right: 5px;
    height: 350px;
    width: 400px;
    overflow: auto;
    border: 2px outset #2655CC;
    }

    The HTML for that section:
    Code:
    <div id="col-left">
    <img src="image" width="xy" height="xy" />
    </div>
    
    
    <div id="col-right">
    <h3>Headline</h3>
    <p>
    Text text text
    </p>
    <div id="scroll">
    text text text
    </div></div>
    I'm running out of ideas. As usual, it might well be something blatantly obvious, but I was up 'til dawn trying to fix this, and right now I'm just

    Thanks!

  2. #2
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Problem solved

    I've solved it myself.
    Margin-left (right column) was 5px too wide. Duh.

    IE sucks.



    Moderator, feel free to close or delete this topic.

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
  •