[SOLVED] IE6 is not rendering my columns correctly

IE6 is not rendering my columns correctly.

I had this problem before, it was solved by adding some code. It is now a problem again and the code aint fixing it?

www.capoeiracanal.co.uk

This is the reply to my last call for help:

IE6 is not rendering the columns correctly, this is most likely due to the IE 6 float margin bug. Fix it by applying

Code:

display: inline; to the floated divs. If this still does not solve the problem, try tweaking the widths.


Thanks People

IE6 isn't liking your margin-left: 25px on the div called background-wrapper.

You could try reducing that amount of pixels to allow room for the other div to come up.

Also on the #about, float that right and see if that helps.

But I think you are going to have to reduce the margin-left. You simply do not have enough room for two columns.

Hi


Thanks, will give it a go.

Is the way of adding IE6 to my computer while I have IE7 running so I can do the test from home?

I tried removing IE7 but it don't want to go.. other programmes will be affected.

You can install multiple IE's. Follow this link!

True gold dust!

Well getting IE6 set up on my computer from that link was about the easiest thing I have done all day!

Ok, I can get the columns to set up fine in IE6 now by reducing Margin- left, but then it's out of place in FF.

#about
{
float: left;
position: relative;
margin-left: 5px; (was 25px)
margin-right: 1px;
top: 0px;
width: 435px;
text-align: left;
overflow: visible;
text-decoration: none;


This is strange, the margin says 5px, clearly it is more than that when viewed in IE6. FF displays it as a true Margin-5px.

Try adding:

Code: Select all

padding: 0;

Or have a look at this: my site will not display properly in certain browsers.

__________________

No, that did not work.

Yes! this works, thought I am having trouble adding the conditional comment to my page.

I cant seem to stop the first part of the comment ([if IE 6])appearing on the web page.

Should I just sit the comment on the page as it is?

[if IE 6]><link rel="stylesheet" type="text/css"
href="IE6styles.css"/><![endif]

Oak as a last resort try adding this to the beginning of your css

Code: Select all

*{
margin: 0;
padding:0;
}

That will set all margins and padding to zero. Each browser seems to have it's very own default set so this will erase all of those.

Another solution for you is to make a wrap div that is the same width as your header.
INSIDE that div, you place the #about div and the #background-wrapper divs.
Whatever padding you need in order to get the columns off of each border is added to the wrap div. Then you won't need any left-margin on the background-wrapper.

Did I confuse you? If so, I can try to find the time to give you a working example.

Lchad everything goes back to zero, does this mean I have to then reset all margins, paddings again?

I don't know the code for wrapping two divs inside another.

I almost seem to have the problem solved with the conditional comment, just this code [if IE 6]) is visual on the webpage.

Jack, adding to my last reply to your link.

FF is also reading the IE6 CSS file over the original ?

Wow, that's weird. Double check you have the code correct. It really should not do that!

__________________

Yes I do? should it sit in the page like so:

<link href=[if IE 6]><link rel="stylesheet" type="text/css"
href="capoeira-canal-classses-IE6.css"/><![endif]/>

or like this?

[if IE 6]><link rel="stylesheet" type="text/css"
href="capoeira-canal-classses-IE6.css"/><![endif]

Wrong both times!

Code: Select all

<!--[if IE 6]><link rel="stylesheet" type="text/css" 
href="IE6styles.css"/><![endif]-->

Try that.

__________________

Well I already did try that, but neither FF or IE6 read it.

Hmm. It might be something to do with using Multiple IE instead of the actual IE6? Anyone else got any ideas here?

__________________

This is the code I place in between the head tags

Code: Select all

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="capoeira-canal-classses-IE6.css" />

<![endif]-->

Make sure you have that link correct. ex. capoera-canal-classses-IE6.css
Classes is spelled wrong.

Excuse the spelling, it is the same though!

The code is inside the head tags. IE6 is still not using the new CSS file.

Can I see your entire <head> code please?

__________________