Forum Moderators: not2easy

Message Too Old, No Replies

IE6 and problem floating right

         

Siler007A

5:07 pm on Mar 18, 2009 (gmt 0)

10+ Year Member



Hi,

I am new to html and CSS and am having a problem understanding the IE& problem with floating columns or images. My site looks great in FF and other versions of IE but not in version 6.

I have seen lots of info about this problem but can't make head or tail of it. If anyone can shed some light I would be a happy bunny :-)

Here is some code that I hope is relevant
<snip>

HTML-

<img src="img/Telephone.jpg" alt="Telephone Number 0123 456 7890" title="Telephone example 0123 456 7890" />
</div>

<div id="email">
<a href="http://www.example.com/Contact-Us.html"><img src= "img/email.jpg" alt="email example" title="click to email example" /></a>
</div>
<div id="upload">
<a href="http://example.com/login.php?referrer=/index.php"><img src="img/upload_file.jpg" alt="Upload folder" title="upload folder"/></a>
</div>
<div id="navcontainer1">

CSS-

/*NAVIGATION RIGHT*/

#tele {
width : 160px;
margin :15px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}
#email {
width : 160px;
margin :0px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}
#upload {
width : 160px;
margin :0px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}
#star {
width : 160px;
margin :15px 0px 0px 0px;
float : right;
border-bottom: 2px solid #ffffff;
}

#navcontainer1 {
width : 160px;
margin :15px 0px 0px 0px;
float : right;

border-color: #fff;
background-color: #E6F6F4;
}
#navcontainer1 ul {
margin-right : 0px;

list-style-type : none;

}
#navcontainer1 a {
display : block;
padding: 5px 0px 5px 0px;
width : 160px;
border-bottom: 2px solid #ffffff;
text-decoration : none;
color : #369;
font-size : 90%;
background : inherit;
}

Thanks for any help

[edited by: swa66 at 5:21 pm (utc) on Mar. 18, 2009]
[edit reason] NO personal URLs, use example.com and no specifics, plase see ToS [/edit]

Siler007A

5:14 pm on Mar 20, 2009 (gmt 0)

10+ Year Member



Hi Guys,

Am I forgetting to add something to this post? If I need to add anything can someone tell me please. I have searched for the IE6 float problem, but am new to this and cant get it to work.

Any help would be great.

swa66

2:19 am on Mar 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Being a bit more specific (describe it in words) about what's wrong in IE6 would speed up our understanding of the problem a lot (that or far less code).

Siler007A

9:08 am on Mar 21, 2009 (gmt 0)

10+ Year Member



Hmm, sorry about that. I guess the moderators and contributors on this forum are good, but cant read peoples minds! lol

(I hope I am correct in what I say)
I have a 3 column layout. The column I have on the right side drops down below the content in IE6.

I have a sidebar_right div that I set up but amd not using. Maybe this would help?

#sidebar_right {
float : right;
width : 150px;
padding : 0;
margin : 0;
border-top : 1px solid #fff;
font-size : 100%;
line-height : 1.8em;
background : #E6F6F4;
color : #333;
list-style-type: disc; color: blue;
}

Maybe I should add my doc type-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The html and css have been validated too :-)

swa66

1:36 pm on Mar 21, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Legacy IE versions (IE6 mostly) have a broken box model where the width of the box you set isn't really applied how and where it should (or will in a standards compliant browser) If you experience floats going to the next line instead of you expecting them to sit next to one another, they to make either the parent a bit larger, or the floated children a bit narrower. IE does this when it think it wont fit.

Sometimes just having an italic font that's text-aligned justified can make IE6 go all wonky and move a paragraph so it sits below a float while there really is no need for it to do that. Simple things as setting the width of the paragraph can be enough to work around the IE bug.

In many cases there's no easy to spot logic in the bugs, so just use a conditional comment and throw in things that fix it in IE6 so it looks ok. I have no need to try to understand IE bugs that Microsoft has no intention of ever fixing.