Css Q's

First question:

What the hell is goin on with padding in opera??? It completely blows out the dimensions of my div.....whether there is actually content or not inside of it??? Why is it changing the size..... if padding is suppose to be between the border and the content?? I could see if there was too much content and it didnt wrap properly or something.

Padding 10px

ex: here

It displays fine in IE, too bad the rest of my site doesnt lol.

Which is my next question. I know IE is a piece of garbage....but it seems to ignore any measurement i give it. I want my nav 16 pixels in height...with a 1 px border (so 18 total pixels) and it's given me boxes from 17 to 21 pixels in height??? Ive tried changing the font size (even though the div was empty) and it changed the height.....but still didnt obey the original height i gave it. How is it IE is unable to display pixels properly??

Another example...... same page as above the nav and content are supposed to be sperated by 3 pixels. Opera displays it as 3 pixels and IE has them right up against each other....again ignoring the measurements i gave it. Stupid IE!!

Third question

look here same page as above ........ how should i go about doing the gray borders on the bottom left??? Right now i have it as a 19px border top and bottom, but i need to put a title in there so a border wont work. Do i nest a div with a white bg and have the orig. div the gray bg? Or do i make a seperate div for the border and align it to a seperate div for the content? or make a div for the title and position it over the border?? ugh.

IE's box model is ass backwards. It's supposed to add any padding and borders to the box size, but IE just displays them outside of the origial dimensions.

Box model hack is one way around it: http://www.google.com/search?q=ie+box+model&ie=UTF-8&oe=UTF-8

But hacks are never a good idea if you can avoid them.

If you're just going to have a title in the top border, I'd make a div with a white background and 1px gray border (19px on the bottom border), then put an < h3> or something in there with the gray background.

< div id="whitewithgrayborder">
< h3>Title of Box< /h3>
< p>Content here< /p>
< /div>

#whitewithgrayborder {
background-color: #fff;
border: 1px solid gray;
border-bottom: 19px solid gray;
}

#whitewithgrayborder h3 {
width: 100%;
padding: 3px;
background-color: gray;
color: #fff;
}

#whitewithgrayborder p {
margin: 8px; /*This takes care of the box model problem by not applying padding to the containing div, and applying it to the contained item instead. And it doesn't require a hack. */
}

Nice!! It totally went over my head that i could style the heading like that. Im still in "table" mode....thinking i need a cell for content...and then a header cell etc.