div's/margin's

ntlbell

Sorry if this is a stupid question, I haven't done any design in a long long time and all this div/css buisness is all new to me.

I'm wondering if it's possible to put a margin in a div for the text but so it won't affect the background color of the div?

so if I had a div with a 100% width and a grey background

I want to have a 25% for the text but the background color gets cut if I put in a right hand margin.

herya

That's what padding property is for - it gives you padding around the text but still within the div.

Liam Byrne

herya wrote: »

That's what padding property is for - it gives you padding around the text but still within the div.

BEWARE OF THE PADDING!!!!!

Because of the way that different browsers interpret this, it can cause more hassle than it's worth!

Better to set padding to zero and then use an element INSIDE that with a margin.

Basically, the issue is this:

If you asked me for a 3ft shelf unit for an aquarium, there are 2 possibilities:

1) the unit needs to fit into a 3ft alcove - the 3ft INCLUDES the sides (padding)
2) the unit needs to fit the 3ft aquarium - the 3ft EXCLUDES the sides

Different browsers interpret this differently.

Better to set the div or whatever to the EXACT width, and then set the margin of the elements inside to the margin that you want.

e.g.

<div style="width:300px;padding:10px">CONTENT GOES HERE</div>

....might end up as either 300px or 320px wide, whereas

<div style="width:300px;padding:0px"><p style="margin:10px">CONTENT GOES HERE</p></div>

....will ALWAYS be 300px.

Talisman

In the CSS specification, 7 properties determine the width of a containing block.

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

As Liam has stated various browsers interpret the rule differently so you're better using an outer container to determine the width and an inner container for the layout.

mewso

I think it's a little extreme to avoid padding just because of one browser and thats all it really is. No prizes for guessing. Anyway check quirksmode for a good explanation on it. Theres a simple hack to get around it though. The tan hack is the best as far as I know.

ntlbell

mewso wrote: »

I think it's a little extreme to avoid padding just because of one browser and thats all it really is. No prizes for guessing. Anyway check quirksmode for a good explanation on it. Theres a simple hack to get around it though. The tan hack is the best as far as I know.

Aye,

It's just a personal internal site and I'm the only one going to be looking at it so I'm not overly worried about browser compatiability.

css/div's just seem to be one large hack.

briack back frames!!

mewso

ntlbell wrote: »

briack back frames!!

Back Heathen.

Liam Byrne

mewso wrote: »

I think it's a little extreme to avoid padding just because of one browser and thats all it really is. No prizes for guessing. Anyway check quirksmode for a good explanation on it. Theres a simple hack to get around it though. The tan hack is the best as far as I know.

Hacks based on this are OK for someone with some experience (and someone who can get their head around the fact that slashes (and, in some cases hyphens), combined with the mode/DTD can cause some versions of IE to vary their behaviour.

For newbies, the above is a lot more understandable.

mewso

True enough it might avoid confusion. The other option is the IE7 or IE8 library. Anyone used this?