IE clipping, FF isn’t

@NogDogJan 28.2005

~~[url]~~www.charles-reace.com/test/new.html[/url]

This is displaying more-or-less as desired in Firefox, but in IE6 all content to the right of the left (tan) column is not displaying. Any ideas why (and more important, how to fix it)? I’ve tried all sorts of “overflow: visible;” and messing around with z-index, but to no avail.

Thanks.

to post a comment

CSS

@toicontienJan 28.2005 — #It was a pretty easy fix. IE doesn't like to show an element outside its containing box unless it's positioned relatively. I added position: relative to .bar and .text. Then the .bar elements weren't the correct width, so I gave the .bar declaration a set width in pixels. A relative width didn't work. Then IE5.x-Win wouldn't float the nav on the left of .text, so I added float: left; to .text and used a voice-family hack to reset the float for IE6 and the rest.

The CSS I changed is below in bold:

<i>
 </i>
 .text {
 width: 565px;
 margin: 0 -620px 0 auto;
 padding: 10px;
 [b]float: left;
 voice-family: ""}"";
 voice-family: inherit;
 float: none;[/b]
 }
 
 .fixIE501 {}
 
 .bar {
 margin-right: -630px;
 background-color: #369;
 color: white;
 padding: 10px;
 clear: both;
 [b]width: 730px;[/b]
 }
 .nav {
 float: left;
 }
 p,li { line-height: 1.3em; }
 [b]
 .text,
 .bar { position: relative; }[/b]

@NogDogauthorJan 28.2005 — #Thanks a bunch, Toicontien. ?

What is the purpose of the voice-family parameters? It looks like it's being used as some sort of kludge so that only IE reads the following lines? (Ugh! Hate having to do that kind of thing, but if it works....?)

Thanks again for taking the time to come up with this "easy" :rolleyes: solution.

@toicontienJan 28.2005 — #? I've had to hack things worse to get IE-Win to see straight.

The voice-family hack is there so .text can be floated because IE 5.x placed .text below the nav, and the negative margin didn't work. IE6 and all other browsers choked on that and didn't need .text floated, so the voice-family hack was used to feed float: left to IE 5.x and float: none to IE6 and all the rest.

I've also found that IE 5.01 sometimes ignores the style declaration after a voice-family hack, in which case it will ignore .fixIE501 {}, which is an empty declaration just so IE 5.01 will ignore it and not a vital declaration to your layout.

If you want, remove the voice-family lines and the float: left|none lines to see what it looks like in IE 5.5 and 5.01.

IE clipping, FF isn’t

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IE clipping, FF isn’t

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴