Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Borders in IE vs. Mozilla

    It seems that IE draws borders inside elements (making their usable area smaller), whereas Mozilla-based browsers draw them outside the elements, making their total size larger. Is there any way to change this behaviour in either browser?

    And as a side note, anyone know which one is technically correct according to specs?

  • #2
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Neither is technically correct conserning the specs... and there isn't anyway to correct this...

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How could neither be correct? Does that mean the specs don't cover where the border is to be drawn?

    Oh well, that's somewhat disappointing.

  • #4
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    There are many things which the specs don't cover, eg. how thick the border should be if not specified

  • #5
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    http://www.yourhtmlsource.com/styles...ssspacing.html

    Internet Explorer is wrong. I believe you can correct this behaviour by including a DOCTYPE definition at the top of your pages. This will put the browser into standards-compliant mode (ha!) instead of the default quirks-mode.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not even this will work in many cases, hence your "(ha!)". (That was funny, BTW) If this doesn't work, then please tell us.

  • #7
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can do it with a hack, lets say you have this:
    Code:
    div.content {
      border:20px solid;
      padding:30px;
      background-color: red;
    }
    /* here starts the hack */
    div.content {
      width:400px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:300px;
    }
    html>body .content {
      width:300px;
    }
    the width for the div its supposed to be 300 without borders and padding and it turns into 400 px with them, but as you kinow in IE is 300px no mater what... you use the hack to make it work in ie as 400

    but for a way better explanation check out this website: boxmodelhack, since that's were I copied the hack from.

    There is also this other hack (can't remember were I got it from btw):
    Code:
    div.content {
      border:20px solid;
      padding:30px;
      background-color: red;
      width:300px;
    }
    /* IE Hack */
    *html div.content {
      border:20px solid;
      padding:30px;
      background-color: red;
      width:400px;
    }
    just change the width there, if there were margings as well, I think you should also "decrease" them in the ie hack

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It should be noted that only IE6 goes into "standards" mode with a DOCTYPE declaration. IE<6 still suffers from the incorrect implementation of the box model.

  • #9
    New Coder
    Join Date
    Jul 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    http://www.yourhtmlsource.com/styles...ssspacing.html

    Internet Explorer is wrong. I believe you can correct this behaviour by including a DOCTYPE definition at the top of your pages. This will put the browser into standards-compliant mode (ha!) instead of the default quirks-mode.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Wow, that's nice to know, thanks. That works for me. Although, from the website I take it that IE5 will still render it wrong... but oh well.

  • #10
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by lalo
    just change the width there, if there were margings as well, I think you should also "decrease" them in the ie hack
    A better way is to use IE condition statements
    Code:
    <!--[if IE]>IE only code here<![endif]-->
    to include an IE-only stylesheet. It's contained within a comment, so no other user-agent will parse the contents, and you keep ugly hacks out of your stylesheets.

  • #11
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hemebond: could you please show an example?

  • #12
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>240165</title>
    		<!--[if IE]>
    			<style type="text/css">
    				p	{border:1px solid #000;}
    			</style>
    		<![endif]-->
    	</head>
    	<body>
    		<p>This text will have a border in Internet Explorer only.</p>
    	</body>
    </html>

  • #13
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So many spaces (or tabs)!!

  • #14
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gohankid77
    So many spaces (or tabs)!!
    in deed

    btw how should I put it in the extrenal css file, like on top the one for the other user agents and below that, this thing, and .... isn't this a hack as well?

    also, i dont mean to start a fight here but I've seen tons of tutorial sites that uses the hacks that I mentioned above, so are you positive that this one is better, even if you dont call it a hack ?
    Last edited by lalo; 10-08-2004 at 05:04 AM.

  • #15
    New Coder
    Join Date
    Jul 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hemebond
    A better way is to use IE condition statements
    Code:
    <!--[if IE]>IE only code here<![endif]-->
    to include an IE-only stylesheet. It's contained within a comment, so no other user-agent will parse the contents, and you keep ugly hacks out of your stylesheets.
    Another new thing for me... I had no idea IE condition statements existed. Are there equivalents for Mozilla-based browsers? Any links to information on these things, such as what version it was introduced in?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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