Topic: 4px High Div Pages that link to <a href="https://ozoneasylum.com/backlink?for=27605" title="Pages that link to Topic: 4px High Div" rel="nofollow" >Topic: 4px High Div\

 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-07-2006 03:47 Edit Quote

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;
}

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-07-2006 05:27 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 03-07-2006 09:45 Edit Quote

what DL-44 said.

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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-09-2006 06:45 Edit Quote

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

divinechaos
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 03-09-2006 08:38 Edit Quote

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.

code:
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

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 03-09-2006 15:19 Edit Quote

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..

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-09-2006 18:37 Edit Quote
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).



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu