/    Sign up×
Community /Pin to ProfileBookmark

IE clipping, FF isn’t


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.


to post a comment

3 Comments(s)

Copy linkTweet thisAlerts:
@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:
.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; }
.bar { position: relative; }[/b]
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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.


Help @NogDog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 11.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,