Forum Moderators: not2easy
I have a div with some text inside. Inside the same div I have an image that is floated to the right so that the text wraps around it. Everything works just fine except for in IE6 where the image gets an unwanted margin under itself.
There shouldn't be any space between the border of the image and the border of the parent div.
Can't find any solution for this... do you have one? Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
/* RESET AND MAIN STYLING */
blockquote,body,caption,div,dl,dt,dd,form,fieldset,h1,h2,h3,h4,h5,h6,html,li,ul,ol,p,pre,textarea,table,td,th {
margin:0;
padding:0;
}
body {
font:0.6875em/1.5em verdana,sans-serif; /* 11 px */
background:#e2e2e2;
color:#000000;
}
input,select,textarea,button{
font-size:100%;
font-family:verdana,sans-serif;
}
p,ul,ol,dl,blockquote,form,fieldset {
margin:1em 0;
}
img {
border:0;
display:block;
}
/* COMMON CLASSES */
.clearfix:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content:".";
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
</style>
</head>
<body>
<div class="clearfix" style="border:1px solid #000;">
<img src="http://www.example.com/badtant/test/pic_butterfly.jpg" alt="" style="float:right;border:1px solid #000;" />
<h1>Utvecklingsprocessen</h1>
<p>Hur går det till när en idé blir ett projekt som sen kanske blir en del av vår verksamhet? Här kan du översiktsversionen av utvecklingsprocessen. Här kan du titta på den fullständiga versionen.</p>
</div>
</body>
</html>
[edited by: badtant at 3:04 pm (utc) on Nov. 6, 2008]
[edited by: swa66 at 8:40 pm (utc) on Nov. 6, 2008]
[edit reason] no URLS please, use example.com, see forum charter [/edit]
On that note: inline images go on the text baseline, that might be your problem.
I don't typically use strict xhtml myself (I do need iframes for advertising, so I can't). Hence I don't know how to work around the IE problems in this case.
On the provided code the issue can only be seen if the image has a height taller than the total height of the paragraph. (Best practise is to always give images a height and width.)
If that is when the issues arises, remove the unwanted space below the image in ie6&7 by removing the bottom margin applied to the <p>aragraph.
(On a side note, if the multiple rules for div.clearfix are to force the div to expand to contain the image, another option is to remove all the existing rules and just use
display:inline-block
alt131:
Yes, that is when the problem occurs. Setting a height and width on the image doesn't solve anything. display:inline-block instead of clearfix doesn't change anything either.
Removing the bottom margin applied to the <p>aragraph does work. I'm not quite happy with the solution though. I need that margin so it would be great with another solution that doesn't interfere with my <p>aragraphs.
Per my post, removing the margin from the <p>aragraph fixes the stated issue. Feel free to ask for more information if you are not sure why I made the other suggestions.
I'm not quite happy with the solution though. I need that margin so it would be great with another solution that doesn't interfere with my <p>aragraphs.
When I tested your code before posting the fix for the stated question,
paddingpadding-bottom
mercedes:
Didn't work. Would have been great if id did :)
