Poisition Problem

Sorry for double post, but would I need to create layers?

There is no such thing as a "layer" in CSS or HTML. That's just Dreamweaver talk for using absolute positioning to place everything. It is generally accepted that this is a bad way to do things, leading to all sorts of difficulties for non geniuses like, say, me.

We get a lot of posts from frustrated people who tried to position everything absolutely and got themselves into a whole lot of trouble. AP is tricky and complicated and their may be some geniuses out there who understand it and can handle it, but there sure aren't many.

What you should be doing instead is coding up your content based on it's meaning, and not even thinking about layout or presentation until that is virtually done (POSH). Then look at the result and decide how things can be positioned to make them most accessible and useful, and add a few strategic DIVs and floats to achieve that.

But that was my question. I tried float, it just moves left or right and it doesn't position itself correctly. It's always under the "gradient".

yes I think "layers" would be a good choice here

As Ed Says "layers" are a DW/Netscape term for Absolutely Positioned divs (or any element). It's not right to say don't use them ever, or be scared of them, they have their uses, just use them sparingly as they were meant, don't try to create entire layouts out of them, (like some editors sometimes try to do)

What 'confuses' most though is that they think once they start with AP in a layout they need to use it for all elements to get them to slot in.. but you don't.

Going by your basic code above and not knowing what widths or if centering is involved, it's simply a case of giving your "main" div a top margin enough to clear some space for your AP divs to sit in/on top of.. AP divs are removed from the flow so they don't take up any space, so you need to create some space in the flow for them if you then want the rest of the document to keep flowing

If centering is involved I would actually wrap the the AP elements inside a wrapper, then size and position the single wrapper instead - this way you can provide a single containing block for your 2 x floats without having to calculate left right offsets on each individual element.

example code with comments where you might need more/less space:

DivnX :: Home

html, body {margin: 0; padding: 0;}

body {
background-image: url('/images/Tile.png');
}

#main {
/* adjust top margin to suit gap required */
margin: 160px auto 0 auto; /* top right bottom left */;
width: 835px; /* adjust to suit but change the #aptop measurements to suit too */
}

#gradient {
height: 120px;
background: #ffc url('/images/Gradient.png') repeat-x left top;
}

/* aptop divs BELOW HERE! */
#aptop {
position: absolute;
top: 0;

/* center AP block to match #main width if required */
left: 50%;
width: 835px;
margin-left: -418px;

/* or if 100% width */
/*
left: 0;
width: 100%;
margin: 0;
*/
}

#banner {
float: left;
width: 550px;
height: 60px; /* height of banner image */
border: 1px solid #000000;
}

#login {
float: right;
width: 280px;
height: 154px;
border: 1px solid #000000;
background: url('/images/Login.png');
}

Thanks Suzy and Ed Seedhouse.

@Suzy: I didn't exactly follow your layout, but I got a general idea of what I should do. I took away all AP and used relative and floats. It came out pretty neat, if I say so myself . But I still have 1 tiny problem.

As you will see in the code, the "#content" overlaps "#main", which can be fixed if I just set "top" for "#content" to around 6% and above. but that means I have to remove the top border from it and some space is left on the bottom which I can't use. Help again would be awesome. Here's the code:

HTML:

DivnX :: Home

CSS:
body
{
margin: 0;
padding: 0;
background-image: url('/images/Tile.png');
}

/* HEADER CODE HERE */
#gradient
{
height: 120px;
background-image: url('/images/Gradient.png');
background-position: top left;
background-repeat: repeat-x;
}

#main
{
position: relative;
margin-right: auto;
margin-left: auto;
top: 2%;
height: 100%;
width: 832px;
}

/* HEADER CONTENT HERE */
#banner
{
float: left;
border: 1px solid #000000;
border-bottom: 0;
border-right: 0;
}

#logon
{
float: right;
width: 280px;
height: 150px;
border: 1px solid #000000;
border-bottom: 0;
border-left: 0;
background: url('/images/Login.png');
}

/* CONTENT CODE HERE */

#content
{
position: relative;
margin-left: auto;
margin-right: auto;
height: 100%;
top: 7%;
width: 832px;
}

#stuff
{
float: left;
width: 830px;
height: 300px;
border: 1px solid #000000;
border-top: 0;
}

Also if you want to see the website: http://www.divnx.net/divndex.php It's a gaming/programming website.

Thanks Again.

Well, your HTML doesn't validate. If you would read the sticky messages in every forum you'd know we insist on valid html. Without valid HTML the CSS rules don't exist. You must have valid HTML to succeed with CSS.

We know from experience that invalid HTML can cause all sorts of weird problems to pop up just about anywhere on the page, and trying to debug why is virtually an impossible task. Few of us even try anymore, we consider valid HTML a prerequisite for getting any help.

Fix up the HTML and then come on back if the problems still persist.

Why are you using the FONT tag? Good heavens! FONT is not allowed in HTML 4.01 STRICT, which is your chosen doctype. STRICT is what you should be using, but you have to get rid of all the old presentational tags in your HTML if you do that. There are much better ways to set your fonts!

Ed chill.. what does non-validating font tags have to do with CSS positioning? - it's fair enough quoting the 'Valid' mantra if that is this forums' policy, but how about a little education about which Doctype to use instead. Surely those who are new to CSS positioning would benefit far more from that than writing them off until the code matches your ideal?

I'm into promoting CSS and that can be done without picking on "wrong Doctypes" do you remember the days when the mantra was necessary to at least ensure people used one/any.. and I take it that you know that some editors/CMS software now put in a default one. Drupal (my favourite CMS) makes me use an XHTML one, whereas ideally I would like to use an HTML one.. it would take far too much work for me to recode Drupal so I bite my principles, it makes no difference to my CSS coding though!! - Good grief how can education continue on behalf of CSS when people have valid questions but an "imperfect" Doctype?

@Ne.onz

Invalid code that makes CSS more difficult to get is more related to improperly nested elements, it's hard to position/color things that are not closed in the right place.. your code does not exhibit that. The CSS validator is not "the standard" it's open to interpretation as are the specs, yes it will warn about deprecated elements, but all warnings are not fatal!

What I would advise here is that you move to a "transitional" Doctype.. and possibly to an HTML one instead of an XHTML (there is generally no need for XHTML in normal web page coding) - this is not a climb down it simply means the UA knows which particular variety of code to match to as far as the blinking 'validator' goes - you should not choose "strict" until you are aware of the differences or unless you don't care about non-fatal warnings when someone hits the validate button.

BTW it makes no difference at all to this question, I just felt you deserved an explanation.

----
Your code:
OK, you don't need the layers/AP according to your second lot of code - I see you are not interested in Source Ordering the code? You now have the the banner and login divs first in the source code whereas before you didn't and is why I thought you would benefit from the AP divs to the top.

no matter, floats is your second learning curve and now it's more simple, your second lot of code is good..

some suggestions
1. the gradient div does not need a height, the background image should be set to repeat-x as you have, it's sitting on top of the body background and there's no need to restrict it.

2. because both your banner and login are floated you need to tell the gradient div to contain its floated children.. you do this by setting overflow: hidden on it.. parent elements do not automatically stretch to contain their floated children you have to find some method of "clearing floats" (search the term) - in your code the width will do it for IE6 and below, overflow: hidden; will do it for everyone else.

3. the form element has default margins so zero them to help control the gap/height of top div you can't make your form 120px high, well you can but

4. I don't see that you need to use relative or absolute positioning at all with the code that's here so far, spacing can be done naturally or using margins/padding which is basic CSS.

to wit here's some CSS code where I've removed what I *think* is unnecessary, it should fit your HTML nicely, if you then want spacing between content and top you should margins, either positive or negative..

html, body {margin: 0; padding: 0;}

body {
background-image: url('/images/Tile.png');
}

/* HEADER CODE HERE */
#gradient {
/*height: 120px;*/
background: #ff0 url('/images/Gradient.png') repeat-x top left;
overflow: hidden;
}

#main {
/* position: relative; */
margin-right: auto;
margin-left: auto;
/* top: 2%; */
/* height: 100%;*/
width: 832px;
background: #cfc;
}

/* HEADER CONTENT HERE */
#banner
{
float: left;
border: 1px solid #000000;
border-bottom: 0;
border-right: 0;
}

#logon
{
float: right;
width: 280px;
height: 150px;
border: 1px solid #000000;
border-bottom: 0;
border-left: 0;
background: url('/images/Login.png');
}

/* CONTENT CODE HERE */

#content
{
/* position: relative; */
margin-left: auto;
margin-right: auto;
height: 100%;
/* top: 7%;*/
width: 832px;
background: #fcf;
}

#stuff
{
/* float: left;
width: 830px;
height: 300px;*/
border: 1px solid #000000;
border-top: 0;
}

#main form {margin: 0; padding: 0;}

He has many other HTML errors, some of which can easily cause the kind of problem he describes. Even if he switches to a doctype where FONT is still valid he should never ever use it anyway.

There's nothing wrong with his doctype. But having chosen a correct doctype you then need to write your code the way the doctype specifies.

It's not my ideal. I didn't invent CSS or HTML, but the folks who did gave us rules to follow and a nice convenient online validator to make it fairly easy. I didn't invent the fact that there is no CSS standard for invalid HTML, either, but it is indeed a fact nevertheless.

I didn't do that, so I'm not sure what your point is. His doctype is perfectly fine and I said so.

It's not as if validating one's html is even very hard. You can get free extensions for Firefox that will automatically fix up your code for you for gosh sakes! What could be more convenient than that?

No I'm sorry. Learning to write valid HTML is not an option, it is a necessary skill if you want to succeed with CSS. That's not my choice, but it is the way things happen to be.

Sorry for not validating it. I just included the login script and forgot it wasn't w3 standard compliant. Well I validated both the html and css. If you want to check:

HTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fdivnx.net%2Fdivndex.php&charset=%28detect+automatically%29&doctype=Inline&group=0
CSS:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdivnx.net%2Fcss%2FdivStyle.css&profile=css21&usermedium=all&warning=1&lang=en

I ran into another problem after I validated it. My login script appears fine in Firefox, but when I view it in IE8(beta), the whole script is offset. Any ideas as to why this may be? Code:

Login:

Welcome Guest! Please login or register!

Username:

Password:

CSS: You will find Login stuff under /* LOGIN CODE HERE */
html, body
{
margin: 0;
padding: 0;
}

body
{
background-image: url('/images/Tile.png');
}

/* HEADER CODE HERE */
#gradient
{
overflow: hidden;
background-image: url('/images/Gradient.png');
background-position: top left;
background-repeat: repeat-x;
}

#main
{
position: relative;
margin-right: auto;
margin-left: auto;
top: 2%;
height: 100%;
width: 832px;
}

/* HEADER CONTENT HERE */
#banner
{
float: left;
border: 1px solid #000000;
border-bottom: 0;
border-right: 0;
}

#logon
{
float: right;
width: 280px;
height: 150px;
border: 1px solid #000000;
border-bottom: 0;
border-left: 0;
background: url('/images/Login.png');
}

/* LOGIN CODE HERE */

p.welcome
{
font-size: 12px;
font-weight: bold;
color: #000000;
line-height: 0;
text-align: center;
font-family: arial, helvetica, sans-serif;
}
p.username
{
font-size: 10px;
color: #FFFFFF;
line-height: 0;
text-align: center;
font-family: arial, helvetica, sans-serif;
}
p.password
{
font-size: 10px;
color: #FFFFFF;
line-height: 0;
text-align: center;
font-family: arial, helvetica, sans-serif;
}

input
{
background: #FFFFFF;
font-size: 8pt;
color: #003399;
border: 1px solid #003399;
line-height: 0;
}

/* CONTENT CODE HERE */

#content
{
position: relative;
margin-left: auto;
margin-right: auto;
height: 100%;
top: 7%;
width: 832px;
}

#stuff
{
float: left;
width: 830px;
height: 300px;
border: 1px solid #000000;
border-top: 0;
}

I didn't get back into positioning because I wanted this fixed first, so most of the code you told me to take out Suzy is still in there. Thanks again.

IE8 is a BETA! version; DO NOT start stressing over how it renders layouts at this stage, wait until it has settled down before cheerfully adding to our workload of browser testing.

In advance of that ensure that you haven't provided any fixes for IE6/7 that might be picked up by IE8 as it should be a whole lot more compliant with CSS specs

Oh and by the by although you have a valadating page your DTD is not strictly a correct one; perhaps due to earlier advice to drop to a 'Trans' DTD (not the best advice!) you appear now to have a strict DTD with 'Trans' system identifier. Take it back to a full strict DTD you shouldn't have any major problems (the sgml parser does appear to recognize the document as a 'strict' one) but if you do we can help you resolve them - hopefully!

Even if it is beta. My friend has IE7 and he says it's offset as well. BTW, is there any way to uninstall IE8, so I can degrade to IE7.

There should be check out the MSDN IE blogs or google you'll find instructions somewhere.

Thanks, still trying to fix this offset in IE.

On the matter of your login form It doesn't really render that well in FF and I'm afraid that this is more to do with your handling of the markup than browser rendering as such.

The initial issue you should really address is that of using a form and it's child elements correctly and fully; you should have in use 'fieldset' 'legend' 'label' tags rather than the paragraph tags at present you should also then be able to drop the use of the 'div'. Rework the markup if you can and we'll help you style it along the lines that you wish.

Never heard of those fields. Guess I'll go learn.

Thanks

This link may help get you up to speed:

http://www.htmldog.com/guides/htmladvanced/forms/

ignore both the fact that the words 'Accessible' and 'advanced' are used this is basic form markup, of course you don't have to use it but it's better to.

So I made the login form with label. I saw no need for fieldset or legend, unless it is needed, please do tell me so I can them back.

About the positioning. Ed Seedhouse might have been right. After validating and fixing the login form, the position problem is gone.

I still have one little problem though. If you check the website out and view the the message "Welcome Guest! Please Login or Register!". If you view it in FireFox, there is a "< p >" right before that message. In IE7, it completly ignores it. I'll post the css and login codes.

Login:

Username:

Password:

CSS: The login css is under /* LOGIN CODE HERE */
html, body
{
margin: 0;
padding: 0;
}

body
{
background-image: url('/images/Tile.png');
}

a:link { color: #FFFFFF; text-decoration: none; }
a:hover { color: #003366; }
a:active { color: #FFFFFF; }
a:visited { color: #FFFFFF; text-decoration: none; }

/* HEADER CODE HERE */
#gradient
{
overflow: hidden;
background-image: url('/images/Gradient.png');
background-position: top left;
background-repeat: repeat-x;
}

#main
{
margin-right: auto;
margin-left: auto;
width: 832px;
}

/* HEADER CONTENT HERE */
#banner
{
float: left;
border: 1px solid #000000;
border-bottom: 0;
border-right: 0;
}

#logon
{
float: right;
width: 280px;
height: 155px;
border: 1px solid #000000;
border-bottom: 0;
border-left: 0;
background: url('/images/Login.png');
}

/* LOGIN CODE HERE */

#message
{
font-size: 10pt;
color: #000000;
text-align: center;
}

input
{
background: #FFFFFF;
font-size: 8pt;
color: #003399;
width: 70px;
border: 1px solid #003399;
}

input.user { width: 40px; }
input.clear { width: 40px; }

label
{
color: #FFFFFF;
font-size: 10pt;
cursor: pointer;
}

/* CONTENT CODE HERE */

#content
{
margin-left: auto;
margin-right: auto;
height: 100%;
width: 832px;
}

#stuff
{
border: 1px solid #000000;
}

Thank You once again.

Hmmm, you're using p's because you've noticed somewheres that it makes a space : ) However, it actualy means"paragraph" and that's why it makes a (default, you can remove them) space. Now, I've seen some people use a p inside a form because that was their own personal thing, but it's not really semantic (meaning,nothing inside your form is a paragraph, but you're using a tag which is saying, everything inside is a paragraph!).

Some things to know:

Most stuff we use as tags are by default either blocks or inlines (there are others, but we'll stick with those 2 things). Blocks act like the p, where they will try to be 100% width of whatever their container is, and they make a break before and after them (things which come before them stack on top and things which come afterwards sit underneath). A div is also a block.. so wrapping your div in a p is just extra bloataceous markup (though I wouldn't use a div for that little bit of text... you could also use a p all by itself).
Inline things DON'T make a break before or after them, and will line up against each other like you've seen floats do (spans, images, and inputs are naturally inlines, labels are flows which are kinda neither... ah skip that part : ).

So, here's how I would have done your markup (and by the way, a form is a block, so no need for the p, however the rules say it's one of those special blocks which cannot have inlines as direct children... thus the fieldset/legend suggestion as fieldset is a block):



Welcome Guest! Please Login or Register!

The divs are doing the same job as you were using the p's for, wrapping each label-input pair, but "div" simply means "division" while p means "paragraph" and it's just my opinion on semantics but I'd switch to div.

There's a single div wrapping everything else although since each label-input pair is already in a div it's not strictly necessary (but it gives you a bit more flexibility in styling I think).

Now, I dunno what's up with IE7, but I'd stick some margins on our new p called message:

#message
{
font-size: 10pt;
color: #000;
text-align: center;
margin-top: 10px;
}

Or something. It should make a top margin on that message, unless the margins are collapsing... in that case, when I see margins not showing up, I stick padding: 1px on the thing because that forces margins not to collapse, at least most of the time.

I didn't really follow all the code of this thread but if you can get Multiple IE's from Tredosoft (oh wait, do you have Vista? They only work with XP) it's a good idea to have IE6 for checking too. At least on an XP machine you can have IE7 as the default browser and 6,5,3 as extras. Sorry you downloaded IE8, my husband did the same thing at work and I yelled at him : ) because he kept saying my sites looked like crapola in IE and I know my sites are super-tested in all browsers and semantic and all that, and then he's like, well, IE8. Bleh! IE8 is out so people can test IE8 against web sites (to find the bugs IE8 still has so we can tell the MS development team so when IE8 really does come out it works), not the other way around. I'm pretty sure there is an "IE7 standalone" version you can download. it might not override IE8, but as a Standalone it should be okay.
I've heard though that IE8 will not have a standalone version so I dunno if that means those of us building websites will be forced to buy a new Windows machine just to test a browser or what. Sux0rs.

Oh a note on the fieldset thing, I see XHTML endings on your inputs, so you're using XHTML now? In XHTML, IF you use a fieldset, legend in required (although you can move it out of site with CSS). Usually a form as large as yours should have one anyway, maybe the text in message would be perfect for it, and put the top margin on the form itself. I normally do the div thing for something like single submit forms (the kind where all it is is a submit) or a search bar. Neither have labels, and they sure as heck don't have legends... I'll use other things for accessibility then.

glad you got some of it sorted,

though it's not the labels that that helped your positioning, you still have <p> elements surrounding your text/now labels and inputs.. though they no longer have a zero line-height according to your CSS.

p.welcome { font-size: 12px; font-weight: bold; color: #000000; line-height: 0; text-align: center; font-family: arial, helvetica, sans-serif; } p.username { font-size: 10px; color: #FFFFFF; line-height: 0; text-align: center; font-family: arial, helvetica, sans-serif; } p.password { font-size: 10px; color: #FFFFFF; line-height: 0; text-align: center; font-family: arial, helvetica, sans-serif; }

using the right tool for the job often helps, before you "could've" used the p elements but you were rightly guided to labels for inputs however let the fun begin .. what should one semantically wrap a label and input in

as for using a fieldset and legend, that's entirely up to you.. but as you have the whole form wrapped in a div.. would it make more sense to wrap it in a fieldset instead.. i.e. use the element for the job instead of creating a div?

I'm a huge fan of fieldset and legend, and if I can find it I'll post the closet to best simple form I've seen..

btw I don't see the IE7, do you mean the margin or the text.. text is showing just fine in IE7 here

everyone has their own ideas, but the best thing you can do IMHO.. is look at them in a separate page with no CSS applied, what you will then see is the easiest way to navigate them, that is user friendly, and how they look.. try it in a mobile phone one day then you'll really see why br's and p elements get so so much stick

IMHO your form looks just fine and is accessible and as stomme says it can be done with p elements (and though you will read arguments about this.. I think they hold up just fine for want of another element with default spacing).. you just need to remember that p elements have default margins as do headings, forms etc.. as so if you want the visual styling to be different then zero the default margins first and then apply your own, then you're just treating them like any other block level element - however don't wrap elements in a <p> just to get space, that's not good form when it comes to CSS.. you can manipulate any element to have margins just like the paragraph element.

now in saying that, as you asked about fieldset and legend here's one vision of your form semantically speaking.. take a look at it with and without the css applied.

Login Form

Welcome Guest! Please Login or Register!

Username:

Password:

CSS:
html, body {
margin: 0;
padding: 0;
}

body {
background-image: url('/images/Tile.png');
}

a:link { color: #FFFFFF; text-decoration: none; }
a:hover { color: #003366; }
a:active { color: #FFFFFF; }
a:visited { color: #FFFFFF; text-decoration: none; }

/* HEADER CODE HERE */
#gradient {
overflow: hidden;
background-color: #008;
background-image: url('/images/Gradient.png');
background-position: top left;
background-repeat: repeat-x;
}

#main {
margin: 0 auto;
width: 832px;
}

/* HEADER CONTENT HERE */
#banner {
float: left;
border: 1px solid #000000;
border-bottom: 0;
border-right: 0;
width: 550px; /* add the image width here */
}

/* CONTENT CODE HERE */

#content {
margin: 0 auto;
width: 832px;
}

#stuff {border: 1px solid #000;}

/* login form here, note ID changed just to separate - you can use your logon ID if you want */

fieldset#login {
/* you won't need to float this if you give the banner div a width of 550px to hold the image */
/*
float: right;
width: 280px;
*/
height: 155px;
border: 1px solid #000000;
border-bottom: 0;
border-left: 0;
background: url('/images/Login.png');
padding: 0;
margin: 0;
text-align: center;
}

#login legend {display: none;} /* only appears when CSS is off - accessibility */
#login br {display: none;} /* only appears when CSS is off - accessibility */

#login h3 { /* a form should have a heading not just a div */
margin: 10px 0;
color: #000;
font-size: 14px;
}

#login label { /* make the labels display: block; with margins like the 'p' elements were doing */
display: block;
margin: 15px 0;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}

#login label input {/*space the input visually from the label using a left margin */
margin-left: 10px;
background: #FFFFFF;
font-size: 12px;
color: #003399;
width: 70px;
border: 1px solid #003399;
}

/* inputs which are not nested in label elements */
#login input {width: 45px;}

like I said your code looks fine now, so this is not meant as howto but an alternative view if you like-- more importantly it has no positioning which was your original question, it didn't need it it just needs to flow - as you see I've said in the code above that there is no need to float both 'banner' divs, the left one has a fixed width to contain the banner image.. the right (fieldset in my code) will automatically take up the space that's left.

PS: nice touch with the cursor on the labels, indicating the label click functionality

Thank You Stomme and Suzy. Learning so much from this . By the way, is there any reason why my hover link doesn't work in IE? If you never click it, you can see the hover, once you click it, it stays the same color and no hover effect. Works fine under Firefox.

EDIT: I tried to validate, and I get 4 errors, and I'm stumped as to why.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.divnx.net%2Fdivndex.php&charset=%28detect+automatically%29&doctype=Inline&group=0

You need to learn about what each kind of element is for and where you can use it. There are strict rules you have to follow - for instance you can't put a P element inside a SPAN elememt because P is a "block" element and SPAN is "inline" and inline elements cannot contain block elements. That's just one simple example. HTML is a computer language and has rules which you have to follow just like with other computer languages.

Perhaps you should work through the HTML Dog tutorials.

Thank You, it validates now. Since I had fieldset and legend before form, it was messing up. Though even after reading the content from htmldog, I don't understand why form has to be before fieldset and legend. I do understand what you said about inline and block elements. But htmldog never said anything about fieldset or form being any of those, unless I overlooked.

Thanks Again.

No, but it gives you a basic idea of how html is structured. Then you can visit the W3C sites and start reading the specs with a chance of understanding them.

If I recall rightly, FIELDSET and LEGEND are designed for use in forms and thus have to go inside a FORM element.

You might have missed it in my ramblings but I said that a Form was a special block... while most blocks like Div can have anything inside them, there are some blocks like Form and Blockquote (thx Gary) are only allowed other blocks as direct children. So, with Form, you need
Form
another block
other stuff, inlines or blocks, whatever you want
end block
end form

Fieldset is a block, and is perfect for being that containing block inside a form. The validator bites a lot of people for doing this:

See the validator sees that input and it like, hey wait that's an inline, it can't be a direct child of a form!

And second, as I said if you are using XHTML then every fieldset needs Legend. Tyssen has a nice page somewheres showing how to style the legend as they are not easily controlled cross-browser... and many times you will not want a legend to show visually, but only when CSS is off (screen readers, googliebots, whoever), so you have a legend and move it offscreen.

What you probably want to do as you roll into HTML and CSS is give things background colours. Ugly ones. Bright primary colours. You will see a lot of things you expected and a lot of things you didn't (esp with floats). Give form a background colour, fieldset another colour and the labels and inputs more colours. It's a nice tool I use to check out what's going on (mostly when things don't look right cross-browser). They're fugly but they work, and you just remove them when you're done.

You asked why, after a link was clicked, that it stayed that colour and didn't :hover anymore. Easy one : )

a:link { color: #FFFFFF; text-decoration: none; } a:hover { color: #003366; } a:active { color: #FFFFFF; } a:visited { color: #FFFFFF; text-decoration: none; }

This is the latest code I saw you post for links. CSS is cascading style sheets. Cascade means things in the sheet affect each other and one of the ways they do that is by source order. Two things that are at the same level, the second one overrides. This is why, with links, we tend to use a certain order in listing link properties. Your last property listed is :visited. So it's overriding everything else. Before something is visited (a fresh link), then active (the clicking) can override hover, which can override normal (link).

Try it this way and look at it:

a { color: #FFFFFF; text-decoration: none; }
a:hover { color: #003366; }


I started with a because if you don't mention the others, they will act the same as "a" which is nice-- less code. But let's say you wanted something to happen on active and visited that was different from both normal AND hover. You do this:

a { color: #fff; text-decoration: none; } a:visited { color: #0f0; } a:focus, a:hover { color:#036; } a:active { color: #00f; }

So the first is normal "a" which will give text-decoration: none to all sorts of links because none of the other versions mention it, so they'll inherit it. They can't inherit it from a:link, which is why I never use a:link, it's rather useless in my opinion : )

If the link is visited, it will change to that colour and stay that way... until you focus (with keyboard) or :hover (with mouse). Since those come after :visited declaration, they will override. Take hover or focus off and the link goes back to :visited. Clicking on the link (active) will override :hover or :focus because it comes last. If you always want something to happen different while people are actually clicking, :active needs to be last in CSS source.

Later, you have a menu somewhere and want that menu to act differently than the links on the rest of the page. What to do? You can override not only by coming later in source (which in this case you don't want to change the other links on your page, so you're not going to just have different "a" declarations later in the sheet), but also with being more specific. So you do like this:

#menu a {
color: #000;
}
#menu a:visited {
whatever : )
}
#menu a:hover, #menu a:focus {
something awesome here;
}
#menu a:active {
clickie!;
}


Only list the ones you want to act different from "a"-- it'll save you code.