| 11:16 pm on Apr 27, 2003 (gmt 0)|
Mozilla is doing it right.
width property controls the width of the content.
padding controls the distance from the content to the border. And
margin controls the distance of the border from other borders.
Older versions of IE got this wrong (its known as the IE box model bug). But it is fixed in the new versions.
I'm guessing your not using a full doctype because it sounds like your browsers are in 'quirks' mode. To make them render in 'standard compliant' mode use a full doctype. Like this..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(all on one line, as the very first line in the code)
See AListApart using the DOCTYPE [alistapart.com] for more details.
| 11:31 pm on Apr 27, 2003 (gmt 0)|
Thanks for the help Graham :)
Ooops, you got me there - it was just an idea I was working so I hadn't put in a doctype.
|Mozilla is doing it right. |
So Opera and IE are doing it wrong? I'm still struggling because is doesn't display the same in different browsers.
| 11:43 pm on Apr 27, 2003 (gmt 0)|
Yup Opera and IE will do it wrong till you put the doctype in.
| 11:58 pm on Apr 27, 2003 (gmt 0)|
Ah OK, I was using the HTML 4.01 Transitional doctype which still shows browser differences.
| 12:04 am on Apr 28, 2003 (gmt 0)|
Ah, that would explian it.
I always try to stick with the Strict doctypes because it keeps my code cleaner and stops me slipping into old (bad)habits. :)
| 12:09 am on Apr 28, 2003 (gmt 0)|
I'm actually having another problem related to the above not displaying the same in Mozilla, which I really can't figure out.
There is another div above 'middle' in my initial example with a table in it. In IE this appears above the middle section as I expected. In Moz it's within the middle div. Why might this be? I'm hopeless at tracking down CSS problems because I tend to use a little more than I understand ;)
| 12:13 am on Apr 28, 2003 (gmt 0)|
Odd.. sounds like mismatched tags. Try validating your html [validator.w3.org].
| 12:23 am on Apr 28, 2003 (gmt 0)|
Thanks, can't believe I didn't think of that myself. Next time I being slow just tell me to go figure it out myself or something ;)
W3.org don't appear to be too impressed with my code - bad habits perhaps? ;) What, no div align in 4.01 strict? That'll be why I've been using transitional so much then...
Plus my Mozilla headers appear to be screwed up as I get an error trying to upload a file:
|Sorry, I am unable to validate this document because its content type is application/octet-stream, which is not currently supported by this service. |
Anyway, I fixed all the validation errors and the problem just melted away. Thanks again :)
| 12:44 am on Apr 28, 2003 (gmt 0)|
I have to admit that <div align="center"> was one of the harder habits to break. :) But it makes sense - the alignment is a style issue and should be specified in the CSS.
If you set the left and right margins to auto then the element will be centered. If you want to be nice to older browsers then also set the parent element to text-align:center to make them center it too.
| 1:27 am on Apr 28, 2003 (gmt 0)|
Hmm, now I switched to strict it appears that I cannot put a <form> tag just straight into a div. Where should I be putting it then lol?
| 1:43 am on Apr 28, 2003 (gmt 0)|
<form> should be okay within a div.
What you might have problems with is the <input> tags whcih can't just be children of a form, they should be within a <p>,<div> or other block level element.
So you could just put a <div> or <p> after the <form> and then close it just before the </form>
However I usually use divs to 'group' elements of the form together.
Here's my valid strict markup of a typical login form..
<form method="post" action="/login.php">
<input name="user" id="luser" type="text" maxlength="20">
<input name="pass" id="lpass" type="password" maxlength="20">
<input type="submit" value="Login">
| 2:21 am on Apr 28, 2003 (gmt 0)|
Got it in one again Graham. You've been a great help :)