Topic: 4px High Div (Page 1 of 1)

Why when I set an empty div tag filled blue to 4px high, that the smallest it seems to be is 20px? This is IE browser. Here's the code:

#MSO_HEADER_STRIPE
{
background-color:#3465A1;
height:4px;
width:650px;
padding:0;
margin:0;
border:0;
}

try 'line-height:0;'

Of course, it would be better to do this with a border or a background image rather than a non-structural tag screwing up your mark-up.

(Edited by DL-44 on 03-07-2006 05:29)

what DL-44 said.

"MSO_..." AAAaaar the horror. Are you creating a webpage with FrontPage or Word ?

What exactly does "non-structural tag" mean? I am striving to do it right! Please explain.
I gather than, that creating a thin blue 4px high by 600 px wide blue filled box as a big blue border is not the right way with a div tag?
You mentioned two alternate ways: background-image (which I'd have to fill a DIV with, or other box object, so this is similar to my approach? Then the other way is the border property, but of which object and does the border property except an attribute of thickness? That was a dumb question, because I know it does. Hmm.. I'm thinking I have some ideas (no comment necessary unless you want)
Thanks,
Karl..

PS. MSO stands for meetscoresonline

A "non-structural tag" is one which doesn't correspond to an element in the content. More commonly, this is called semantics -- don't add an element to your markup that doesn't mean/add anything of substance.

As for your border, take a look here for a variety of ways and shorthands you can denote borders and width. You can even try double/dotted/dashed/etc borders.
http://www.w3schools.com/css/css_border.asp
e.g.

border-color: #000; 
border-style: solid;
border-width: 0 0 2px 0;

border-bottom-color: #000;
border-bottom-style: solid;
border-bottom-width: 2px;

border-bottom: 2px solid #000;

HTH,
DC

This is great input.. (great links) and finally my thick head caught on! Now, this approach might even be questioned, but:
I have a DIV wrapper which makes up my header for the page, within there are just 2 images. I was attempting to add a new DIV below this particular arrangements, when I had the "Ahhh-Haaa" moment, and decided to add a bottom-border to the DIV element containing my header graphics!
Anything wrong with that approach? Eliminate the DIV wrapper altogether?

Karl..

quote:

---

Karl said:

Anything wrong with that approach?

---

Nope, in fact that's exactly what I was suggesting.

To elaborate on the idea of a non-structural tag: you want to keep the mark-up as clean as possible. The HTML should only define the structure of the document - as in header, paragraph, list, etc. Div's are a nice general purpose structural element declaring divisions of the document (this portion of the document is the head, this is the content, this is the navigation, etc).

Any purely presentational elements should be defined soley through the CSS, to the extent to which that is possible.

Adding a div that has no value as markup, and is strictly presentational, should be avoided at (almost) all costs. Epsecially in a case where all you need to do is add a border to an existing structural element.

This is the same reason the style="" attribute should be avoided, and why class and ID names should be given structural significance rather than stylistic (ie; <div id="navigation"> as opposed to <div id="left-menu">, etc).