Margin around floats in Quirks mode

**markbrown4** · Sep 20, 2007 19:09

Hello,

I need to write CSS that works in quirks mode and standards mode and in all browsers - Is there a way to fix the margin / padding problem around these floated images in IE while staying in quirks mode?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#header {
	overflow: hidden;
	width: 100%;
	border-bottom: 1px solid #FFF;
}
#header img { float: right; margin: 0; padding: 0; }
#header img.left { float: left }
</style>
</head>
<body>
<div id="header" style="background: rgb(163, 163, 163)">
	<img class="left" alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="385">
	<img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="57">
	<img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="328">
</div>
</body>
</html>

A search and replace to fix the doctypes globally will soon be implemented - it should make my job much easier.

Thanks,

**markbrown4** · Sep 22, 2007 16:26

Not possible?

**Pepper** · Sep 22, 2007 21:14

This should do the trick:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

#header {
    overflow: hidden;
    width: 100&#37;;
    border-bottom: 1px solid #FFF;
    height: 113px;
    background: rgb(163, 163, 163)
}

#header .right { float: right; margin-left: -6px; padding: 0; }

#header .right img { margin-left: -4px; }


</style>
</head>
<body>
<div id="header">
    
    <div class="right">
        <img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="328">
        <img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="57">
    </div>
    
    <img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="385">

</div>
</body>
</html>

I took out the float left on the logo, it wasnt necessary.

I usually dont like using negative margins... but hey, your stuck using XHTML Transitional.

**zcorpan** · Sep 23, 2007 04:07

This should fix it:

Code:

#header img { float: right; margin=0 -3px; }

**markbrown4** · Sep 23, 2007 16:13

Thanks for the responses,

Yes both of those solutions do fix the issue in quirks mode as there's 3px margin to the left and right of the images, but I was hoping for a solution that would work in both standards mode and quirks mode(and not lose the edges of the images), so the same content / css needs to look the same with the incomplete and complete doctypes.

Not sure if it's possible.. I thought there might be a magic property that would fix the issue like display: inline;

**markbrown4** · Sep 23, 2007 16:25

Sorry, Pepper your solution is great

I just changed it slightly to prevent float drop and removed white space so a change to font size doesn't move the images.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#header {
	height: 113px;
	overflow: hidden;
	border-bottom: 1px solid #FFF;
}
#header .left { float: left; width: 385px; margin-right: -385px }
#header .right img { float: none; margin-left: -4px; }
#header .right { float: right; width: 385px; margin-right: -5px; }
</style>
</head>
<body>
<div id="header" style="background: rgb(163, 163, 163)">
	<div class="left">
		<img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="385">
	</div>
	<div class="right"><img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="57"><img alt="" src="http://www.5star-shareware.com/images/topoflist/firefox.gif" height="113" width="328"></div>
</div>
</body>
</html>

Avoiding the floats on the images altogether - good thinking

Thanks for your help

**zcorpan** · Sep 24, 2007 04:22

The suggestion I posted works in both quirks mode and standards mode. Note that there's an equals sign instead of a colon -- another bug in IE, only in quirks mode.

User Tag List

Thread: Margin around floats in Quirks mode

Thread Tools

Display

Margin around floats in Quirks mode

Bookmarks

Bookmarks

Posting Permissions