PDA

View Full Version : Main Div Tag Extends to far to the right in IE 6



nickHiebert
Apr 2nd, 2010, 06:48 PM
Here is the website:
http://nickhiebert.com/thewriteimpression/write.impression.ca/.

I'm not sure why it is extending to the right so much. But I set the main-home div tag to go only 1200px in width.

The css file:
http://nickhiebert.com/thewriteimpression/css/styleie6.css

I used Conditional comments to build this.

Any help at all would be great!

Thanks!

SB65
Apr 2nd, 2010, 08:27 PM
You have:

#container set at 1200px wide
#sidebar with a 950px right margin - leaving 250px available
and #sidebar contains
#navigation-home set at 250px with a 10px right margin

so #navigation-home plus its margin is too wide to fit into #sidebar. IE6 will automatically expand a div to include all its contents - hence your problem.

I think you need to reduce the width of #navigation-home to 240px and also the width of #navigatiion a to 220px. Have a try with those.

You might also have a look at http://bonrouge.com/2c-hf-fixed.php for a good way of making a two column layout and avoiding having to mess about with negative margins.

nickHiebert
Apr 2nd, 2010, 08:31 PM
You have:

#container set at 1200px wide
#sidebar with a 950px right margin - leaving 250px available
and #sidebar contains
#navigation-home set at 250px with a 10px right margin

so #navigation-home plus its margin is too wide to fit into #sidebar. IE6 will automatically expand a div to include all its contents - hence your problem.

I think you need to reduce the width of #navigation-home to 240px and also the width of #navigatiion a to 220px. Have a try with those.

You might also have a look at http://bonrouge.com/2c-hf-fixed.php for a good way of making a two column layout and avoiding having to mess about with negative margins.

Thanks, I can't believe I didn't notice that before.

nickHiebert
Apr 4th, 2010, 03:45 AM
You have:

#container set at 1200px wide
#sidebar with a 950px right margin - leaving 250px available
and #sidebar contains
#navigation-home set at 250px with a 10px right margin

so #navigation-home plus its margin is too wide to fit into #sidebar. IE6 will automatically expand a div to include all its contents - hence your problem.

I think you need to reduce the width of #navigation-home to 240px and also the width of #navigatiion a to 220px. Have a try with those.

You might also have a look at http://bonrouge.com/2c-hf-fixed.php for a good way of making a two column layout and avoiding having to mess about with negative margins.

It doesn't seem to work. My theory is that the #main-home has something to do with it. If you use firebug over it.

The #main covers the flash banner until you hit the bottom of the body. Just before the footer.

I fixed the #navigation-home a:link, #navigation-home a:active and #navigation-home a:visited which sort of made a difference in how far it was going over the container. Making the width of all 3 to 210px.

What do you think?

nickHiebert
Apr 9th, 2010, 06:40 PM
I'm not sure how to get this working still...

Excavator
Apr 9th, 2010, 07:32 PM
I'm not sure how to get this working still...

That is some odd margining you have.
If you use floats to let the elements go beside each other it works better.

Try these changes -


#sidebar {
/*margin-right: 950px;*/
width: 260px;
float: left;
}
#wrapper {
margin: 0 0 0 260px;
}
#content-home {
margin: 0 50px 0 300px;
background: #f00;
}

gavinblair
Apr 9th, 2010, 08:00 PM
Hi Nick,

It looks like you're attempting to create a two-column layout using negative margins. Two-column layouts are very common, and there are many ways to go about it. Negative margins may seem to work, but the result is very inconsistent across different browsers, especially IE6!

Take a look at this tutorial: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

It lays out the basics of using floating elements to create cross-browser friendly columns.

Kor
Apr 9th, 2010, 08:34 PM
This is an old bug of IE6: for unknown reasons, the floated elements, which have also set certain margins, double their margins in IE6. The solution is somehow unexpected: give your floated elements a display:inline. According to W3C, display type should be ignored (except for "none" value) in case of floated elements. All the browsers will respect that, apart of IE6, which needs this weird workaround :)

IE6 = the worst browser ever

gavinblair
Apr 9th, 2010, 08:40 PM
@Kor actually this is not the problem in this case. Nick is not using floats at all. His problems stem from the use of negative margins.

Excavator
Apr 9th, 2010, 08:43 PM
Skip the "workaround" by not invoking the bug at all.
Whenever the layout allows doing this, I like to give a width and float one column then margin the other over without a width. The other column will take all remaining space.
No bug, no float drop.

Here is a simple 2-column (http://nopeople.com/CSS/simple_2-column/index.html) layout based on that method.

nickHiebert
Apr 9th, 2010, 08:57 PM
That is some odd margining you have.
If you use floats to let the elements go beside each other it works better.

Try these changes -


#sidebar {
/*margin-right: 950px;*/
width: 260px;
float: left;
}
#wrapper {
margin: 0 0 0 260px;
}
#content-home {
margin: 0 50px 0 300px;
background: #f00;
}



This works. I'm just adjusting the alignments for #classifieds and #navigation h2. Once that's done I'll put #content-home in the right place.

Kor
Apr 9th, 2010, 09:05 PM
@Kor actually this is not the problem in this case. Nick is not using floats at all
and what is this?:


#sidebar {
margin-right: 950px;
width: 260px;
float: left;
}

Moreover: do you think a negative value skips that bug, in case of?:rolleyes:

Maybe Excavator is right. Most of the time you don't need margins for floated elements. But if there is no other way, there is no other way in IE6 either, except for what I have told you. A bug is a bug. Whenever you can, avoid the cause of the bug. When not, use the simpler workaround.

Anyway, let's keep our fingers crossed: maybe starting from next year we will not hear about IE6 anymore. ;)

gavinblair
Apr 9th, 2010, 09:51 PM
that's so weird, I don't see that float in firebug at http://nickhiebert.com/thewriteimpression/write.impression.ca/

regardless, you're on the right track if you're avoiding the negative margin issue :)

cheers

nickHiebert
Apr 9th, 2010, 10:10 PM
that's so weird, I don't see that float in firebug at http://nickhiebert.com/thewriteimpression/write.impression.ca/

regardless, you're on the right track if you're avoiding the negative margin issue :)

cheers

Thanks. Did you find my post on Twitter by chance? Because I'm following you on twitter. I did post this link on there.

That`s becuase it`s here - http://nickhiebert.com/thewriteimpression/css/styleie6.css

Kor
Apr 9th, 2010, 10:25 PM
that's so weird, I don't see that float in firebug at http://nickhiebert.com/thewriteimpression/write.impression.ca/

regardless, you're on the right track if you're avoiding the negative margin issue :)

cheers
Some of my agree.:) Negative margin would not be a proper way to solve a page display. :)

Let's bring the things to a new base: nickHiebert: how does your page look now, and what other problems do you have?

nickHiebert
Apr 9th, 2010, 10:32 PM
Some of my agree.:) Negative margin would not be a proper way to solve a page display. :)

Let's bring the things to a new base: nickHiebert: how does your page look now, and what other problems do you have?

Well If you look at the html you`ll see <wrapper> which contains the #classifieds (ad) and that's not appearing at the moment. Same with h2 which is Navigation which is suppose to appear about the nav links in the sidebar. Just having issues with an internet connection with my other comp to view the updates.

#navigation-home h2

Excavator
Apr 10th, 2010, 12:02 AM
This is why we're all seeing different things -
<link href="http://nickhiebert.com/thewriteimpression/css/style.css" rel="stylesheet" type="text/css" /> <!-- For Firefox-->
<!--[if IE 6]>
<link rel="stylesheet" href="http://nickhiebert.com/thewriteimpression/css/styleie6.css" media="screen" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="http://nickhiebert.com/thewriteimpression/css/styleie7.css" media="screen" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="http://nickhiebert.com/thewriteimpression/css/styleie8.css" media="screen" />
<![endif]-->


I still insist that a well laid out, semantic, and valid document has NO need for conditional comments like that. Separate style sheets for different browsers do not fix the problem, they only correct the symptom.

nickHiebert
Apr 10th, 2010, 12:11 AM
This is why we're all seeing different things -
<link href="http://nickhiebert.com/thewriteimpression/css/style.css" rel="stylesheet" type="text/css" /> <!-- For Firefox-->
<!--[if IE 6]>
<link rel="stylesheet" href="http://nickhiebert.com/thewriteimpression/css/styleie6.css" media="screen" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="http://nickhiebert.com/thewriteimpression/css/styleie7.css" media="screen" />
<![endif]-->

<!--[if IE 8]>
<link rel="stylesheet" href="http://nickhiebert.com/thewriteimpression/css/styleie8.css" media="screen" />
<![endif]-->


I still insist that a well laid out, semantic, and valid document has NO need for conditional comments like that. Separate style sheets for different browsers do not fix the problem, they only correct the symptom.

What would I have to do instead of using condition comments? For future reference. So I can make sure IE 6/7/8 will display properly like Firefox.

Excavator
Apr 10th, 2010, 12:24 AM
What would I have to do instead of using condition comments? For future reference. So I can make sure IE 6/7/8 will display properly like Firefox.

You would write a "well laid out, semantic, and valid document."
Seriously, the one or two IE6 bugs you might encounter could either be hacked from your regular CSS or, as happens many times, the code could be written in such a way that you avoid those bugs in the first place.

As an example, I have never used a conditional comment to correct anything. I do use one regularly to serve an upgrade notice to IE6 users but that's the only use I've ever found for them.

nickHiebert
Apr 10th, 2010, 12:41 AM
You would write a "well laid out, semantic, and valid document."
Seriously, the one or two IE6 bugs you might encounter could either be hacked from your regular CSS or, as happens many times, the code could be written in such a way that you avoid those bugs in the first place.

As an example, I have never used a conditional comment to correct anything. I do use one regularly to serve an upgrade notice to IE6 users but that's the only use I've ever found for them.

Okay I understand. So errors that you would see in IE8 and IE7 you just determine widths and heights or certain measurements so they display properly in thoughts browsers.

Correct?

nickHiebert
Apr 11th, 2010, 10:27 PM
Hi Nick,

It looks like you're attempting to create a two-column layout using negative margins. Two-column layouts are very common, and there are many ways to go about it. Negative margins may seem to work, but the result is very inconsistent across different browsers, especially IE6!

Take a look at this tutorial: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

It lays out the basics of using floating elements to create cross-browser friendly columns.

Thanks. I'll see what I can do with this and apply it.

nickHiebert
Apr 16th, 2010, 06:15 PM
In Opera!

I can't figure it out. If you look at the HTML the #navigation-home is on top of #content-home.

I did the float left on nav and float right on content and clear on footer and i can make the nav look right but not the content.

But if I move the content above the nav in the HTML it looks right by doing:

margin: 0 50px 0 300px;

But then I can't move the nav in properly. It seems like If the nav is ontop in the HTML and I use the
margin: 0 50px 0 300px; for the content-home it is way down there and only negative margins work to make it move up.

(Also put in widths with the floats for the content and nav)

Sorry for reposting but I simply CAN NOT FIGURE it out. It's getting on my nerves. Any suggestions?