IE Bug Issue a bit confused.

  • khaled

    (@khaled)


    19 years, 2 months ago

    Okay so I’ve got two columns. One I float left and the other I give a margin of the size of the previous div. All is nice and well in FF, but as you can imagine it breaks in IE.

    The problem first had the 3px bug coming in, and that is documented in detail here:

    http://www.positioniseverything.net/explorer/threepxtest.html

    The next problem is that the second column now appears to the right as you would expect, but below the actual left div. That’s what I can’t sort out. Anyone got any suggestions?

    Here’s the code:

    .masthead {
    background: url(images/title.jpg) no-repeat;
    margin: 0;
    width:440px;
    height: 153px;
    border-top: 1px solid #FFFFFF;
    }

    #LEFTcontainer {
    width: 434px;
    font-family: Verdana, “Lucida Sans Unicode”, Arial, sans-serif;
    font-size: .7em;
    line-height: 16px;
    text-align: left;
    margin:0;
    float: left;
    padding:0;
    }

    #INNERLEFTcontainer {
    border-left: 1px solid #fff;
    width: 434px;
    margin: 0;
    padding: 0;
    }

    There’s a Div at the top of the right column for an image as the background as well:

    #RightImage {

    height: 338px;
    padding: 0;
    width: 261px;
    background: url(images/image.jpg) no-repeat;
    border-top: solid #fff 1px;
    }

    #RIGHTcolumn {
    margin-left: 438px;
    margin-right:0;
    font-family: Verdana, “Lucida Sans Unicode”, Arial, sans-serif;;
    font-size: .7em;
    line-height: 16px;
    text-align: left;
    padding:0;
    }

    To deal with the 3px (in this case 2px ) bug I used:

    * html #sidecolumn {
    margin: 0 0 0 440px;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Lorelle

    (@lorelle)

    19 years, 2 months ago

    I assume you made the “fix” for the 3px bug wrapped in the comment codes as show by Positioniseverything. I would look at the Holy Hack to fix this at Positioniseverything’s Holy Hack. I’d also put borders around each of your sections to actually “see” them and see where the push and shove comes. Look for anything that is extending out and shoving the container down.

    Also, I’m confused. You have a leftcontainer and an INNERleftcontainer that are exactly the same width. Why? Do you have to have the two? And why not changing the width of the second one to be slightly inside of the other, by 10px all around, to see if this changes things. As you know, Explorer handles container margins and paddings differently and it could be adding up things that should be exact and putting additional pixels around it. Your gutter between the two sections is really tiny and I bet that might be causing the problem. Try increasing that among the different problem solution ideas I’ve mentioned.

    Thread Starter khaled

    (@khaled)

    19 years, 2 months ago

    Thanks for the response Lorelle, truely appreciate it. The reasons I’ve got an inner div is just from a style pov, I intend to differ the margins etc.

    So I put the borders around, and it did give me a bit extra as I found out from the masthead image. Sorted that out and checked the other divs on the left hand side, no problems, perfect alignment.

    But the border around the actual rightside image, again didn’t have a problem.

    When I put a border around the rightcolumn, it starts right at the top, gives me a break in the border, then continues it’s wrap around the rest of the column. Any ideas what might be causing this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘IE Bug Issue a bit confused.’ is closed to new replies.