Everything looked fine until I moved Doctype to the very first line., Divs look wrong |
Everything looked fine until I moved Doctype to the very first line., Divs look wrong |
embz |
Sep 6 2006, 12:47 AM
Post
#1
|
Group: Members Posts: 3 Joined: 6-September 06 Member No.: 75 |
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 |
Sep 6 2006, 02:56 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
You have parentheses where you should have braces. Change
CODE div.menu ( to position:absolute; top:0; left:0; ) CODE div.menu { position:absolute; top:0; left:0; } |
embz |
Sep 6 2006, 07:15 PM
Post
#3
|
Group: Members Posts: 3 Joined: 6-September 06 Member No.: 75 |
I changed it. It still looks the same.
|
jimlongo |
Sep 6 2006, 07:40 PM
Post
#4
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
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 |
Sep 7 2006, 01:52 AM
Post
#5
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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 |
Sep 7 2006, 05:29 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
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 |
Sep 7 2006, 08:53 AM
Post
#7
|
This is My Life Group: Members Posts: 1,128 Joined: 24-August 06 From: t-dot Member No.: 16 |
QUOTE 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 |
Sep 7 2006, 10:02 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
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 |
Sep 7 2006, 10:27 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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] |
Lo-Fi Version | Time is now: 18th April 2024 - 03:28 AM |