CSS: Border difference in FF compared to I.E.

Hi Guys,

I'm still pretty new to CSS - but the most annoying thing I have not been able to solve at the moment is an issue with borders!!

When I create a border for a div tag and view it in FF or I.E. I get different results. If I give the div tag a background colour it aligns to other div sections (for both FF and I.E.) as I want, But If I chose to give a div tag a border..... FF at times puts the border on the ouside of the div edge area and in I.E. puts the border on the inside of the edge. so if the border is 5px wide , it can at times be 10px difference.... from one another

Here is the css code :

#main {
margin-right: 10%;
margin-left: 10%;
width:80%;
background-color: #FFFBEA;
height: 650px;
position: absolute;
top: 168.5px;
border-top-width: 0px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
border-left-width: 2.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000099;
border-right-color: #000099;
border-bottom-color: #000099;
border-left-color: #000099;
padding-bottom: 0px;
margin-bottom: 0px;
}

I reference this in a php file as </body>
<div id="main"></div>

</body>


The php file is then called in a template php file.

I hope this makes sense...

Any help gladly appreciated!!

Joe

 

Your right - and as far as I am aware there is not much you can do about it apart from create seperate css rules for different browsers and get creative.

If you want to make a style that ie will ignore do something like
div.mystyle {color:red} <-- for ie
body>html div.mystyle {color:blue} <-- for ff

 

Or you can cheat and make a border from another div.

<div style="padding:1px 1px 1px 1px; background-color:#FF0000;width:100px">
<div style="background-color:#00FF00; height:98px;">
Content
</div>
</div>

Code (markup):

ps. Haven't actually tried this but have had the above mentioned problem, this feels like it should solve it.

 

Same result in both ff and IE.

Though both made the square 102 by 100 pixels! I thought that padding were supposed to go on the inside

 

IE and Firefox use a different box model. In Firefox the height and width define the dimensions of the content area. Margins, borders and padding are added on. In IE however the height and width define the max dimensions of the whole box.

So a div specified to be 100px x 100px with a 5px border all round would render as a 110px x 110px box in FireFox but as a 100px x 100px box in IE.

In order to render the same in both browsers you need Perrow's nested div solution. However you need to define the height and width on the inner div and the padding, borders and margins on the outer div, this simulates FF behaviour in IE. Switch the divs round and you simulate IE behaviour in FF.

The box model used in FireFox is the W3C standard. Expect IE to switch to that in some future version.

Therefore the divs as stated are prefered. This also ensures that the inner div completely fills the outer div.

 

Cheers everyone - for confirming the problem. In the end I used I.E. conditions and this seems to be working fine!! Are there any drawbacks to that?

 

Quick question. Why is their so much difference between browsers for HTML and CSS? I'm just not understanding???

 

IE6 uses the w3 box model if it is in standards mode. For that, you must use a complete and proper DTD.

Since there is no sane reason to use deprecated elements or attributes, there is no reason to use any but a strict doctype. Use html4.01 strict, and validate your markup as you go.

cheers,

gary

 

The difference is largely historical. IE when it was first introduced had to compete with netscape. Netscape had bugs and quirks, IE replicated them so that it rendered pages the same way. All browsers have there own bugs also.

Firefox conforms pretty much to the W3C standards. It was written after the standards were introduced, as was Opera. IE6 however was written before the current standards were released. It therefore did not have the standards to define how it should behave, only the recommendations. IE also has to be backward compatible with older versions or people would consider that the new version had bugs. Firefox doesn't have this problem. Opera has only ever implemented W3C standards and therefore has no problems with backwards compatability.

In addition the W3C standards do not specify all things. So there will always be differences between browsers. I.e. default fonts and sizes are not specified and how lists are implemented are not specified.

With constantly changing standards, varying needs to be backwards compatible, the inevitable bugs and different release schedules, it is unlikely that there will ever be a time when all browsers render the same page in exactly the same way. At least not until the web has matured to a state were it doesn't need to improve.

As a friend of mine is fond of saying "I love standards, there are so many to choose from".

 

This is true for IE6, but not for previous versions. If you want to render the same in IE versions before IE6 then you still need the nested div solution.

 

Although I agree in principle, there are some very good reasons to use deprecated markup.

A website with thousands of pages riddled with poor coding can take a year or more to change to current standards. Many companies wiil not invest in this if the current site still "works". Thus changes are made on a peacemeal basis. That is the reason for the transitional doctypes.

Finally HTML 4.01 is an outdated standard. If you want to be fussy about such things (I am) use XHTML 1.1.

 

True. I should have, and usually do, further added 'for new documents'. I assumed, maybe wrongly, that the OP was talking about a new document.

Not quite factual. HTML 4.01 is the current html recommendation. XHTML is html refactored as xml. XHTML 1.0 may be served as text/html. In that case the browser will treat it as html. XHTML 1.1 should be served as application/xhtml+xml, which IE does not support. IE7 will also fail to support it. Modern browsers do support xhtml 1.1 just fine.

I use xhtml1.0 simply because I also use it in intranets where obsolete browsers are not in use. I can use the eXtensible part of xhtml to create new elements and attributes when served as application/xhtml+xml. Rather than risk syntax errors, I use the same DTD and serve as html to the internet.

For a demonstration, see XHTML Doc for an application/xhtml+xml MIMEType. View source for the DTD extension. View the server response header for content-type (MIME).

XML allows zero tolerance for faults. A single syntax error will cause the browser not to render the doc at all.

An example, Broken XHTML Doc.

View in a modern browser such as Firefox or Opera. Then, view in an obsolete browser such as IE.

To sum up: Use a strict DTD, either html4.01 or xhtml1.0 for new documents. If you don't have the resources, time, eg., to refactor older docs, a transitional or loose DTD is ok. There are syntax differences. Don't use xhtml if you're not solid on the diffs. On older docs, you may not want to redo as xhtml, so stay with html.

Do not use xhtml1.1. You are not valid if the MIME type is wrong, and if the MIME type is correct, IE can't render it.

cheers,

gary

 

my brain just exploded. uterus too

 

Thanks kk5st I wasn't aware of the mime type differences. We live and learn. I think there are a few websites I run that need a DOCTYPE change, backtracking to XHTML 1.0.

On a different theme, for some reason Yahoo has decided that digitalpoint emails are spam. Weird.