SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post DIv with border incorrect in IE

    I'm currently working on a site, http://www.autoservice-ekkersrijt.nl, and the border around my first div is displaying correctly in Firefox but not in IE.

    The css is:

    Code:
    BODY {
    	font-family: tahoma;
    	font-size:14px;
    	color: #000;
    	width:900px;
    	background-color : #fff;
    	font-weight : bold;
    }
    
    div#wrap {
    	background: #fff;
    	margin:0px;
    	width:900px;
    	border : 1px solid #000;
    }
    
    #header {
    	background: #fff;
    	width:900px;
    	height:180px;
    	background-image : url(../img/header.gif);
    }
    
    #menu {
       background: #fff;
       width:900px;
       height:61px;
    }
    
    #main {
    	width:900px;
    	height:290px;
    }
    
    .plaatje {
    	float : right;
    	padding: 4px;
    	clear : right;
    	margin-right:20px;
    }
    
    #tekst {
    	margin : 2px 10px 5px 10px;
    	float: left;
    }
    
    H1 {
       font-size:16px;	
    }
    
    .formulier {
       font-size:10px;	
    }
    
    INPUT {
    	border : 1px solid #000;
    }
    
    .veld {
    	border : 1px solid #000;
    }
    In Firefox the border is closing exactly around the div, in IE there seems to be a margin at the right.

    Can anyone give me a IE hack to solve this?

  2. #2
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Might be another case of IE's problem with margins on floated elements...

    Try changing...

    Code:
    #tekst {
    	margin : 2px 10px 5px 10px;
    	float: left;
    }
    To this...

    Code:
    #tekst {
    	margin : 2px 5px 5px 5px;
    	float: left;
    }
    html>body #tekst {
    	margin : 2px 10px 5px 10px;
    }
    The first rule sets the margin's for IE (as on floated elements it will double the value for any left/right margin given - send Bill Gates a nasty email).

    The second rule is ignored by IE, but not by Firefox/Safari. This rule buts it back to how it should be.

    Hope this helps.

    Andy
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The generally accepted way to counter IE's double margin bug is not to give IE a different margin value but instead to add display: inline to the floated element.

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Thank you all for your replies.

    Display: inline on the #tekst div solved the problem.

  5. #5
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    The generally accepted way to counter IE's double margin bug is not to give IE a different margin value but instead to add display: inline to the floated element.
    Well theres something I didn't know - Thanks Tyssen.
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.


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
  •