Everything looked fine until I moved Doctype to the very first line., Divs look wrong Options

[embz]

URL: http://www.cloud-walker.org/yupc
CSS: http://www.cloud-walker.org/yupc/yupc.css
Website's appearance, pre-move: http://www.cloud-walker.org/yupc/yupc3.gif

I ran the HTML and CSS validators, fixed all the mistakes with the exception of this line in my css file (didn't know what to do with it):

# Line: 56 Context : div.menu

Parse Error - ( position:absolute;
# Line: 61

Parse Error - :0; left:0; ) table.menu a

[Darin McGrew]

You have parentheses where you should have braces. Change

CODE

div.menu (
    position:absolute;
    top:0;
    left:0;
)

to

CODE

div.menu {
    position:absolute;
    top:0;
    left:0;
}

[embz]

I changed it. It still looks the same.

[jimlongo]

i've found that depending on your development environment case sensitivity can be an issue.
HEADER1 in css, header1 in html, etc.,

http://devedge-temp.mozilla.org/viewsource...1/css-class-id/

hth, jim

[Darin McGrew]

The rendering mode (triggered by the doctype declaration) can affect browsers' case-sensitivity in XHTML, but IIRC it shouldn't be an issue for HTML (which is supposed to be case-insensitive).

[Christian J]

If you combine 100% BODY height with a std mode Doctype, you must also specify the height of the root element. See http://www.quirksmode.org/css/100percheight.html

Also, since you use

CODE

div.menu {
    position:absolute;
    top:0;
    left:0;
}

this will apply to the nearest positioned (absolute or relative) parent element, but since no such parent exists it defaults to the page's top left corner. And I don't see why you want it abs pos in the first place?

The whole HTML structure is a bit untintuitive, this complicates the CSS and is not very semantic:

* Use P for paragraphs rather than DIV.

* Instead of <div id="header1"> and <div id="header2"> you can use a single H1 (but see below).

* "Contest Winner" might be an appropriate H1 content if that's what the page is all about, otherwise use H2. If you do want it as the page's main heading it should be closer to the top in the HTML structure, so the page makes sense when CSS is unused.

* "Random Photos" and "Announcements" shouldn't use more H1s, use H2s.

* Instead of a table inside two DIVs for the menu you might use a list. This can be styled as an inline row of links: http://alistapart.com/articles/taminglists/

You also use onfocus="this.blur()" on the links, but this makes keyboard navigation impossible. If you must get rid of the selection rectangle, try e.g. onmouseup="this.blur" instead. See also http://www.cs.tut.fi/~jkorpela/www/links.html#selrect

[jimlongo]

The rendering mode (triggered by the doctype declaration) can affect browsers' case-sensitivity in XHTML, but IIRC it shouldn't be an issue for HTML (which is supposed to be case-insensitive).

Hi Darin,
I agree it's supposed to be, and it certainly works in the case of properties and descriptors like p OR P, A:link OR a:lInK, WIDTH or width, but what about the case of this perfectly valid css

CODE

#headeR1 {
height : 112px;
width: 100%;
padding : 0px;
margin : 0px;
border-width : 0px;
}

#Header1 {
height : 100px;
width: 50%;
padding : 10px;
margin : 10px;
border-width : 0px;
}

Besides the fact it's just sloppy and confusing

This post has been edited by jimlongo: Sep 7 2006, 08:54 AM

[Christian J]

I just tested, and IE, Opera and FF all ignore the case-insensitive selector in std mode:

CODE

#Header1 {
border: solid blue;
}

<div id="header1">foo</div>

[pandy]

Because, as it says in the devedge article...
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
id = name [CS]
class = cdata-list [CS]