PDA

View Full Version : Let's Lick This Box Model Once And For all, Shall We?



Doctor_Varney
Jan 20th, 2010, 09:17 PM
This has to be the most likely source of frustration for newcomers to the CF scene. Hell, it's one that's been bugging me for over three years...
That's why I've decided to go right back to basics on this one... I may be different, in that I'm a slow learner.

As far as I can tell, its possibly the most fundamental problem for people trying to closely reproduce their graphic lay-up in code.

We're told it's the way Internet Explorer treats the box model by default... That's useful to know - but what's the fix? The global reset is all very well but, present or not, some form of discrepancy still remains. It may only appear as one or two pixels difference, but when enough of these combine, it adds up to a potential force, capable of blowing your lovingly crafted layout to smithereens.

The following images were taking from direct screenshots and represent, left to right - Mozilla Firefox and Microsoft Internet Explorer (as if I needed to point out which was which!)

http://i183.photobucket.com/albums/x103/Doctor_Varney/css-html_test_001.jpg

These examples were generated using the following code, under a standard strict doctype taken from the W3C's own schooling site:

Mark-up:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Box Model Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style_1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box_1">
<h1>
This is the heading
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen
book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</div>
</body>
</html>

CSS:

*{margin:0;padding:0}

body {
background:#fff;
font-family:Arial Helvetica Sans-serif
}
#box_1 {
border:1px solid red;
margin-top:400px;
width:100%
}
h1 {
background:#ccc;
text-align:center;
width:400px;
padding:0.5em;
font-size:2em
}
p {
width:400px;
font-size:1em;
text-align:justify;
padding:1em;
background:#aaa
}

I have heard of a rule which goes something like: "If Mozilla:...." / "If IE:...." but cannot locate it. Would anyone be kind enough to post it with instructions for use (+/- any limitations) please?

Additionally, any discussion, towards a proper understanding of the CSS box model, must surely be the first port of call for anyone driven into this very forum by the burning frustration inherant in trying to make their code look like their careful design - so I hope this thread will assist others as well.

Kind regards and many thanks for reading

Dr. V

Doctor_Varney
Jan 20th, 2010, 09:38 PM
Stop press...!

One kind member just private messaged me with the following link:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Which I'm currently reading...

_Aerospace_Eng_
Jan 20th, 2010, 11:33 PM
Your h1 and paragraph have a width set to them AND a padding so the h1 width is 400px + 1em. Padding and/or margin counts for overall width. Same with the paragraph. Its 400px but you have a padding of 1em so total width if 400px+2em.

bazz
Jan 21st, 2010, 01:31 AM
I am not such a pro as Aero but, I would start the css with



* {
padding:0;
margin:0;
border:0;
}


And then build from there, testing in FF and IE and others. From the graphcs you showed, the text seems to have differing line heights perhaps caused by default padding of +/- value. So the line height is where I would start to look, with those pages.

bazz

Excavator
Jan 21st, 2010, 01:46 AM
Hello Doc,
Sometimes a visual is much easier than trying to figure out dimensions in your head or on paper. A lot of times I'll put a different background color on each element just to show where they are really placed, but that doesn't show margin/padding and sometimes it would help to be able to see it.

Have you looke at the layout tab in FireBug? Check it out here (http://getfirebug.com/layout.html). Who knows... it may really help you.

Doctor_Varney
Jan 21st, 2010, 05:13 AM
Thanks, excavator. I didn't know anything about Firebug. Quick read was enough to make me reach for the install button. Only thing is, how will it help me with IE?

Dr. V

Doctor_Varney
Jan 21st, 2010, 05:22 AM
Your h1 and paragraph have a width set to them AND a padding so the h1 width is 400px + 1em. Padding and/or margin counts for overall width. Same with the paragraph. Its 400px but you have a padding of 1em so total width if 400px+2em.

Yes, that's definitely worth remembering - but that still doesn't address the difference between Firefox & Internet Explorer.

Dr. V

Doctor_Varney
Jan 21st, 2010, 05:27 AM
I am not such a pro as Aero but, I would start the css with



* {
padding:0;
margin:0;
border:0;
}


And then build from there, testing in FF and IE and others. From the graphcs you showed, the text seems to have differing line heights perhaps caused by default padding of +/- value. So the line height is where I would start to look, with those pages.
bazz

Line heights is worth looking at. I never thought of that, thanks!

The margin/padding reset does bring the two browsers into some sort of unison - that's why I've been using it for ages... That's not really the point. Like I said, a discrepancy still exists, whether you use it or not. But then, just lately, I have noticed Firefox reacts in the same way as IE does, when it is removed. Does this mean FF is now doing what IE has always done, with respect to default margin & padding?

Dr. V

Doctor_Varney
Jan 21st, 2010, 05:54 AM
Look, I've just done this:

#box_1 {margin:0 auto}
and the box has not centered on the page. It remains on the left.

Hell, I can't even get off the ground with the basics here! I must have used margin:0 auto a thousand times and now it's not working?! So what am I missing? :mad:

Dr. V

Doctor_Varney
Jan 21st, 2010, 06:48 AM
Okay, so something needs a width before it can accept a margin...

Put the width of the box back in, managed to get it centered. Now I do this...


* {margin:0;padding:0}

body {background:#fff;font-family:Arial Helvetica Sans-serif}

#box_1 {margin:0 auto;margin-top:60px;width:400px;background:#000;padding:1em}
#box_2 {margin:0 auto;margin-top:25px;width:400px;background:#000;padding:1em}

h1 {background:#ccc;text-align:center;font-size:2em}
p {text-align:justify;background:#aaa;font-size:1em}



<div id="box_1">
<h1>
This is above
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen
book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</div>
<div id="box_ 2">
<h1>
This is below
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen
book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</div>
...only to wind up with this:
http://i183.photobucket.com/albums/x103/Doctor_Varney/css-html_test_002.jpg

So what kind of deal is this?! :mad:

Dr. V

Excavator
Jan 21st, 2010, 07:03 AM
box_ 2
Should be box_2 ...

Validator is your proof reader Doc.

Doctor_Varney
Jan 21st, 2010, 07:25 AM
box_ 2
Should be box_2 ...

Validator is your proof reader Doc.

I must have combed that code a hundred times and never noticed that! I must be going senile. (Thanks!) Now I feel pretty stupid.

The problem with "validating often" is that it means uploading to server every single thing I do. I can't do that. Plus, I have forgotton how to get into my server, using Filezilla. I can't remember any of the settings or passwords.

Dr. V

Excavator
Jan 21st, 2010, 07:31 AM
The problem with "validating often" is that it means uploading to server every single thing I do. I can't do that.


goto http://validator.w3.org/
click on Validate by Direct Input tab
copy/paste your code into the text box
click Check


That way you don't have to upload it, can just copy your code locally and paste it in there.

_Aerospace_Eng_
Jan 21st, 2010, 07:40 AM
I must have combed that code a hundred times and never noticed that! I must be going senile. (Thanks!) Now I feel pretty stupid.

The problem with "validating often" is that it means uploading to server every single thing I do. I can't do that. Plus, I have forgotton how to get into my server, using Filezilla. I can't remember any of the settings or passwords.

Dr. V
You can always upload the files directly to the w3c server as long as they are html files.

Doctor_Varney
Jan 22nd, 2010, 01:17 AM
Thank you for that information. I will validate more often in future then.

I've started a blog for the client preview area that I needed and I can also build a website entirely with images. The text is actually still in there, but styled as font-size:0.

But this still isn't ideal, because it means admitting defeat. I want to be able understand the CSS box model enough to use it, in a practical way.

Maybe I am trying to work with too sophisticated a design? I notice my blog has only one column.

The problems emerge as soon as I insert text. I'm now starting to add together all of the values to arrive at column widths, as Aerospace suggested. However, once column width is set, any font-size increases spoil the layout (rather than destroy it). I'm working with percentages now but even so, it is hard to keep everything together.

abduraooft
Jan 22nd, 2010, 10:47 AM
Thanks, excavator. I didn't know anything about Firebug. Quick read was enough to make me reach for the install button. Only thing is, how will it help me with IE?

Dr. V
There's a similar tool for IE, the web developer toolbar (http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en), which may help to an extend.

Doctor_Varney
Jan 22nd, 2010, 05:46 PM
As far as I can tell, these things pretty much only highlight where you are in a site. Useful when deconstructing someone else's site to try and learn how they made it but, unfortunately, neither of them can tell you how to use code - and neither can the W3C's code validator, either!

Anyway, I am now working to the rule that everything must add up, so that divs can actually contain what I put inside them. I'm still struggling but it seems slightly clearer now.

Now, it leads me to ask questions about conditional style sheets and how I can make them work... Once I know how to call them in, what would should I put in them, or is it still going to be a case of poking each one around with a stick, until something comes right? How many versions will I need to write? Will I have to re-write the entire stylesheet or will I be able to just over-ride the odd thing I need to?

Dr. V

_Aerospace_Eng_
Jan 22nd, 2010, 10:22 PM
You will be able to just over-ride the odd thing you need to, as for how many you need that depends on two things. One if you plan on catering to other IE browsers like IE6 and and two whether or not the over-ride you make fixes the issue in more than one IE browser.

Doctor_Varney
Jan 24th, 2010, 01:53 AM
I see. Thank you again, Aerospace. :thumbsup:

Dr. V