SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Margin around floats in Quirks mode

    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,

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Not possible?

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    Ontario Canada
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should fix it:
    Code:
    #header img { float: right; margin=0 -3px; }
    Simon Pieters

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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;

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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
    Last edited by markbrown4; Sep 23, 2007 at 17:01.

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Simon Pieters


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •