/    Sign up×
Community /Pin to ProfileBookmark

floated images won’t clear in IE7

Copy linkTweet thisAlerts:
May 15.2008

Hi

i’m having trouble with [URL=”http://www.groupestylhabitat.fr/maisons-pourtous/nos-modeles.php”]this page[/URL] in IE7

in FF the images of the houses stay in their respective div boxes but in IE7 they don’t

I put <br clear=”all” /> to clear the floats but that doesn’t work

here’s the html block

[CODE] <div class=”modeles”>
<a href=”images/OPALE 2-77-R-A_800.jpg” rel=”lightbox” title=”Opale 2-77 A”><img src=”images/OPALE 2-77-R_250.jpg” alt=”” /></a>
<h2>Opale 2-77 A</h2>
<a href=”images/OPALE 2-77-R-A-plan_800.jpg” rel=”lightbox” title=”le plan de Opale 2-77 A”>Voir le plan de cette maison</a>
<br clear=”all” />
</div>[/CODE]

and here’s the relevant css

[CODE].modeles{
padding:8px 0px 8px 0px;
border-bottom:#666666 1px solid;
}

.modeles a{
color:#999999;
text-decoration:none;
}

.modeles a:hover{
color:#999999;
text-decoration:underline;
}

.modeles img{
float:right;
margin:0px 0px 0px 30px;
border:none;
}[/CODE]

can anyone see what i’m doing wrong ?

thanks

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelMay 15.2008 — <br clear="all" />[/QUOTE] invalid I think. Try:

clear:[B]both[/B];

Also:
[B]OPALE 2-77-R-A_800[/B].jpg[/QUOTE] -Can an image be so-named? I know that my image-editer would permit it, but my FTP won't properly upload nor will my host display an image so-named... Whitespaces in image-names, -not so good?
Copy linkTweet thisAlerts:
@steamPunkauthorMay 16.2008 — ok i've removed the whitespace from the image names and put

<br style="clear:both" />

to clear the images but that doesn't seem to have any effect in IE7

I'm completely at a loss - this is something very simple that i've done zillions of times before

has anyone got any other ideas ?
Copy linkTweet thisAlerts:
@steamPunkauthorMay 16.2008 — I put an empty div after the clear which i suppose you could say has solved the problem but it's an ugly solution and I wish i knew why it wasn't working in the normal way
Copy linkTweet thisAlerts:
@CentauriMay 16.2008 — Shouldn't be any need for the div or the <br> - set the overflow on the container :[CODE].modeles{
position:relative;
padding:8px 0px 8px 0px;
border-bottom:#666666 1px solid;
[COLOR="red"]overflow: hidden;[/COLOR]
}[/CODE]
and to keep IE6 happy, also add :[CODE]* html .modeles{
overflow: visible;
height: 1%;
}[/CODE]
Copy linkTweet thisAlerts:
@steamPunkauthorMay 16.2008 — that seems to work fine - but i must admit i really don't know how that works and why changing the overflow to hidden should make the div stretch down to contain the image

but what matters is that it DOES work

thank you ?)
Copy linkTweet thisAlerts:
@CentauriMay 16.2008 — That is a common method for clearing floats - it is not appropriate for [B]all [/B]situations, but can work well for most without extra markup. Either hidden or auto can be used (as long as it is something other than the default of "visible"), but sometimes auto can cause unexpected scrollbars. Basically, the div expands around the floats while it is looking to see whether any overflow needs to be processed. This method doesn't work in IE6 though - hence the extra rule to feed IE6 a small height to trigger "HasLayout".
Copy linkTweet thisAlerts:
@steamPunkauthorMay 16.2008 — ok i see now : in FF it assumes that if you don't specify a height on the div then it expands to encompass all content - whereas IE needs to have a height specified or it doesn't know what to do, lol


thanks again - I've learned something today ?
Copy linkTweet thisAlerts:
@CentauriMay 16.2008 — IE6 just doesn't know what to do with the overflow setting. The height setting for IE6 makes use of two bugs in IE6 - it will incorrectly enclose floats when "HasLayout" is triggered, and it will incorrectly expand beyond a set height if the content is greater.
Copy linkTweet thisAlerts:
@WebJoelMay 19.2008 — IE = "[B]I[/B][I]nfernally[/I] [B]E[/B][I]xaserbating[/I]".
×

Success!

Help @steamPunk 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...