PING: CSS/HTML Gurus

[flere-imsaho]

Hopefully a simple question here.

When you add a border to an element, does the border go on the outside of the element, or on the inside?

To explain, let's say I'm talking about a DIV element. I've set the width for 600px and then added a 1px border. Is the effective width now 602px (borders left & right) or have I lost 1px worth of padding on each side?

I ask specifically to help determine how to accurately measure the exact width of content on a webpage (i.e. putting 2/3 horizontal elements in there but still keeping it at 800px wide). On a related note, if anyone knows of a tool that can "check" this for you (i.e. a pixel ruler for webpages), I'd be all for it.

I have to say, this was all a lot easier when you could just use frames or tables.... :D

[Simms]

An explicitly stated width for a block-level element includes only the content inside that element. Padding, borders, and margins are applied afterward. So in your example, it would effectively be 602px. If you're trying to place a box of text to fill exactly 600px of space, you'd want to make the content div something like 590px wide with 4px of padding and 1px borders.

That said, there's bug in IE that includes the padding and borders in the total width, which results in the box being displayed narrower. It's mainly a problem in IE5 ... 6 and 7 are generally ok, as long as the doctype is declared properly.

As for the ruler, I'd highly recommend two Firefox extensions: Firebug, and the Web Developer Toolbar. Neither will help you with previewing in IE mind you, but the latter, especially, has some great tools -- including an on-screen ruler. Firebug will let you edit any HTML/CSS/javascript inline on any page and preview it automatically.

[flere-imsaho]

Thanks, that's very helpful, although that ends up being a bit more complex than I had hoped, I should be able to cope for the site I'm trying to put together. :D

[Simms]

There are plenty of hacks and workarounds out there to deal with the IE issue, but yeah, some of them can be fairly complex.

There's a good writeup on the problem (and a link to some hacks) here: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

[cuervo72]

Boooooooo IE!!!

[Coffee Warlord]

Boo CSS!

[lordscarlet]

I don't have time to look at what others have said, but to overcome the IE box model issue I do this:

margin: 10px 5px 10px 5px !important; /* for NON-IE browsers */
margin: 5px 0px 5px 0px; /* IE doesn't know what !important means, so it does this */