PING: CSS/HTML Gurus

flere-imsaho · 09-21-2007, 08:16 AM

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....

Simms · 09-21-2007, 09:36 AM

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 · 09-21-2007, 09:42 AM

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.

Simms · 09-21-2007, 09:49 AM

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/listamat...t-boxmodel.htm

cuervo72 · 09-21-2007, 10:18 AM

Boooooooo IE!!!

Coffee Warlord · 09-21-2007, 10:58 AM

Boo CSS!

lordscarlet · 09-22-2007, 02:01 AM

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

Code:

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 */

09-21-2007, 09:36 AM	#2
Simms FOBL Commish Join Date: Oct 2000 Location: Team Radii	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. __________________ FOBL Commissioner 34 Productions Web Design Last edited by Simms : 09-21-2007 at 09:37 AM.

09-21-2007, 09:49 AM	#4
Simms FOBL Commish Join Date: Oct 2000 Location: Team Radii	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/listamat...t-boxmodel.htm __________________ FOBL Commissioner 34 Productions Web Design

09-21-2007, 10:18 AM	#5
cuervo72 Head Coach Join Date: Dec 2002 Location: Maryland	Boooooooo IE!!! __________________ null

09-22-2007, 02:01 AM	#7
lordscarlet Pro Starter Join Date: Oct 2005 Location: Washington, DC	I don't have time to look at what others have said, but to overcome the IE box model issue I do this: Code: 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 */ __________________ Sixteen Colors ANSI/ASCII Art Archive "...the better half of the Moores..." -cthomer5000

09-21-2007, 09:42 AM	#3
flere-imsaho Coordinator Join Date: Sep 2004 Location: Chicagoland	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.

09-21-2007, 10:58 AM	#6
Coffee Warlord Head Coach Join Date: Oct 2002 Location: Colorado Springs	Boo CSS!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)