CSS -- Doctype -- wierd stuff

[plasma800]

Hey everybody,
I'm having a bit of a strange CSS problem that I'm hoping someone might be able to help me with.

I run a kinda largish site that has a 150 px wide navigation bar on the left hand side. Standard. That navigation is held in a 150 wide td of the overall layout table. Inside that td, i used to run the nav inside of a nested table so that I could format different sections of the nav with different background colors and some css border stuff.

Recently, I redesigned, and took the nav out of the nested table and used css to create the background color and any borders (sometimes i will split nav up using a single border (top of a new block of nav) to seperate sections.

So lets say that my first bit in that TD is actually a "nav header", just some text that defines to the user what nav falls below it. (by the way, site is located at http://www.2k911.com (http://www.2k911.com ) ) So I used this bit of css code to make it centered, bold and with a grey background.

.navBlock3 {
width: 150px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
margin: 0px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
color: #000000;
background-color: #B6B6B6;
text-align: center;
}

Now here's my big question.
In IE 6, with NO doctype at the top of the page, this works great. It's makes a box, 150 wide, text centered, grey goes allllll the way across. works fine.

Well I noticed in nutscrape, that the background color of this box would ONLY cover the actual type, not go all the way across. AND the first line of any navblock is indented....??

Now, I put a doctype (loose) in the top of the page, and when I do, IE does the same thing as netscape (as well as a few other silly things, like centering a td that should be left justified) however, I wanna figure out this css thing first.

Anyone have any ideas? This particular style was created by the wsi of Dreamweaver MX, and I would love to use css to make it instead of a table cell. Less table = less mess= less weight = better site is you ask me. Will the box css stuff work?

[pyro]

When you don't specify a doctype, IE runs in quirks mode, and thus will fix up incorrect coding. Netscape has better CSS support and will interpret it much more correctly. If you notice a problem with you CSS in Netscape (or better, Mozilla) odds are real good that it is a coding problem, and not a browser problem.

Anyway, a good place to start would be changing you <span>'s to <div>'s.

quote from http://www.w3.org/TR/REC-html40/struct/global.html#edef-SPAN
These elements define content to be inline (SPAN) or block-level (DIV)Thus, spans flow with the text, and this is why your background is only displayed around the text.

[plasma800]

Cool, I will certainly try that right away!!

[plasma800]

OK, I tried the DIV tag and that worked well....almost.

Basically I have 5 nav blocks setup. Now, for some reason, 2 of them are coming out to be 159 pixels wide, even though...they are defined at 150px. I treid changing it to 100% and putting it in a 150 wide table, and it bleeds over the edge of the table. but other nav blocks...also defined at 150 wide...work great. here's what I have...

.navBlock {
background-color: #D5DBE1;
width: 150px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;

}

.navBlock2 {
width: 150px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
padding-left: 10px;
margin: 0px;
padding-top: 2px;
padding-bottom: 2px;
}
.navBlock3 {
width: 150px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
margin: 0px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
color: #000000;
background-color: #B6B6B6;
text-align: center;
}

.navBlock4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
margin: 4px 0px 10px 4px;
color: #000000;
width: 100%;
}

.navBlock5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
width: 150px;
padding-left: 10px;
margin: 0px;
padding-top: 2px;
padding-bottom: 2px;
border-top: 2px dashed #CCCCCC;
}

Here's what I notice, Only navblock3 is coming out to actually be 150 pixels. I put a background color on 2 to see if it was doing it as well and it is. Also, 5 does the same, yet 3 is perfectly 150 wide???!!!???

Any further ideas? Even putting in a table..as so:

<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="navBlock">NAVBLOCKdiv in table</div></td>
</tr>
</table>

Table come out with an overhang on the right of the color from .navblock. Pulled a screenshot into PS and it's 159 pixels wide. I set it to 100%, and it did the same..

[plasma800]

OK, check this out.

http://www.2k911.com/index2.asp

This is my test page. It has the loose doctype at the top and is using a test css that can dl's from 2k911.com/teletest.css

I lined out a couple of test between the header and the content. and it does different things in each browser.

Also, if you will notice, in the yellow header bar, vor some reason, with the doctype in the document, the class ta10bold will just not work. It's just text arial 10pt bold applied to the TD, but for some reason it won't work either. but the nav is my main concern. Can anyone gimme a pointer here on what's going on?

[plasma800]

K, ive figured out that it has something to do with the padding on the left or right. If i put in padding, it gets bigger... if i put padding on top and bottom, no problem, works just fine.

Anyone have a way of writing in some padding on the left side without it doing that?

[plasma800]

duh....

right here "padding picks up the background image or color of it's element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size"

would anyone take that to mean that it's going to increase the visible size of the box...

maybe if i need to pad by 10 on the left, I should tell the content box to be 10 less that what i need...like 140 instead of 150, but that crops off some room that I may need for links. More experiments coming.

any ideas?

[plasma800]

for anyone who cares, that worked like a charm.

the new class read as follows:

.navBlock {
background-color: #D5DBE1;
width: 140px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;

}

and it does not limit the text to 140 in the background, it will still go out to 150...dunno why...but hey..it works!!!

[toicontien]

Depending on whether you use a DOCTYPE at all, or a correct W3C DOCTYPE, IE will run in quirks mode, as mentioned above, or in standards compliance mode. You may be running into a problem with the CSS Box Model.

W3C Standard:

Total width of an element equals:

Width set in CSS +
Total width of padding +
Total width of border +
Total width of margin.

It looks like you've found a fix, except for IE 5 and 5.5/PC. It interprets the box model incorrectly no matter what DOCTYPE is specified. It absorbs padding and borders into the width set in CSS.

The best thing to do is place the DIV inside an element with a set width, but no padding, borders or margins. Then the child DIV will have the desired borders, padding and margins, but no set width for the DIV. An inherent property of all unfloated, relative or static positioned DIVs that do not have a width set in CSS is that it will take up as much width as it's parent will allow.

IN CSS:

.nav {
/* place borders, padding, and margins in here, but no width */
}

.navBox {
width: 150px;
/* no padding, borders, or margins */
}


IN HTML

<td class="navBox">
<div class="nav">LINK HERE</div>
</td>

[plasma800]

That's a good point AND a good idea. I'll retrofit accordingly and thanks so much for the info!!!