...

View Full Version : Borders in IE vs. Mozilla



HappyDude
10-06-2004, 11:42 PM
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?

gsnedders
10-06-2004, 11:48 PM
Neither is technically correct conserning the specs... and there isn't anyway to correct this...

HappyDude
10-06-2004, 11:50 PM
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.

gsnedders
10-07-2004, 12:03 AM
There are many things which the specs don't cover, eg. how thick the border should be if not specified :p

hemebond
10-07-2004, 12:55 AM
http://www.yourhtmlsource.com/stylesheets/cssspacing.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">

gohankid77
10-07-2004, 02:53 AM
Not even this will work in many cases, hence your "(ha!)". (That was funny, BTW) If this doesn't work, then please tell us.

lalo
10-07-2004, 04:31 AM
You can do it with a hack, lets say you have this:

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 (http://tantek.com/CSS/Examples/boxmodelhack.html), since that's were I copied the hack from.

There is also this other hack (can't remember were I got it from btw):

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

]|V|[agnus
10-07-2004, 05:02 AM
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.

HappyDude
10-07-2004, 05:06 AM
http://www.yourhtmlsource.com/stylesheets/cssspacing.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.

hemebond
10-07-2004, 05:54 AM
just change the width there, if there were margings as well, I think you should also "decrease" them in the ie hackA better way is to use IE condition statements
<!--[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.

lalo
10-07-2004, 07:41 AM
hemebond: could you please show an example?

hemebond
10-07-2004, 07:57 AM
<!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>

gohankid77
10-07-2004, 03:18 PM
So many spaces (or tabs)!! :p

lalo
10-08-2004, 03:41 AM
So many spaces (or tabs)!! :p

in deed :eek:

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 :p 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 ?

HappyDude
10-08-2004, 04:07 AM
A better way is to use IE condition statements
<!--[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?

gohankid77
10-08-2004, 04:48 AM
Yes actually, the IE/Win conditional comments are a hack when used this way! Microsoft openly states that type of markup, and Web authors simply take advantage of it for CSS!

There isn't an equivalent for Gecko (Moz, NN, FF) browsers as far as I know, but I don't really feel like Googling for it either!

I found out something quite mysterious about IE5/Mac hacks (/* \*/). They are weird! I helped someone fix their page for IE5/Mac (on another site). He was already using the IE5/Mac commented backslash hack. The problem was that it made every other browser mess up! Once I figured out that it was the problem, I Googled it and found this (http://www.stopdesign.com/log/2004/07/06/filtering-css.html). (Read the article!) It had a weird look, but once it was explained I nearly knocked myself out (literally)! Here it is:



/*\*//*
@import "ie5mac.css";
/**/


That is ignored by every browser EXCEPT IE5/Mac! It only took the author (read the article!) about five (5) minutes! To find out how it works, (yep, you guessed it!) read the article! You can then put the REAL @import rule before the commented section.

Also, the IE/Win conditional comments must be before the REAL code:



<!--[if gte IE 5]>
<style type="text/css">
/* <![CDATA[ */
@import "iewinstyles.css";
/* ]]> */
</style>
<![endif]-->


<style type="text/css">
/* <![CDATA[ */

@import "styles.css";

/*\*//*
@import "iemacstyles.css";
/**/

/* ]]> */
</style>


Wow! I combined all three AND made it all XHTML compliant! That's nutz! I wonder if that works... Too bad I don't have a Mac!

hemebond
10-08-2004, 06:02 AM
Yes actually, the IE/Win conditional comments are a hack when used this way!It's not really a hack. It's taking advantage of a proprietry browser feature.

Those CSS hacks are exploiting problems in current parsers. As a result, if the parser is later fixed, your method ceases to work.

Mine works as intended. Yours relies on the browser doing something wrong.

gohankid77
10-08-2004, 06:31 AM
Not really. It just makes it easier to code for multiple browsers. Though I love challenges, there is a point where I nearly break my monitor (that can be taken literally sometimes...) If I do code for cross-browser compatibility, I try my best to not use hacks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum