Forum Moderators: not2easy
I've checked the site in IE 5.5, IE6 and IE7 and also latest Firefox version, all looks OK. Also the xhtml and CSS verify under the W3C verification thingie.
Basically I'm just looking for anything that might cause problems in more obscure browsers or for people with unusual browser settings, that type of thing. Also anything that can be simplified. I'd be very grateful for any suggestions.
My Doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Here's the CSS file (I've left out the code for things like h1, h2 etc as I'm pretty sure they're OK):
html {height: 100%; margin: 0px;}
body {margin: 0px; padding: 0px; text-align: center }
div#container{position:relative;text-align:left;background: url('images/border.gif') repeat-y 0 0}
div#headerlinks{position:absolute;top:41px;left:718px}
div#splash{background:#617192}
div#links{background:#000000;text-align:center;padding-top:6px}
div#links p{font-family:Verdana;font-size:11px;color:#FFFFFF;margin-bottom:5px}
div#links a{color:#FFFFFF;text-decoration:none}
div#navigation{position:absolute;left:0%;background:#617192;padding:10px;border-left-style:solid;border-left-width:1px}
div#navigation p{color:#FFFFFF}
div#navigation h1{color:#FFFFFF;margin:0}
div#content{position:relative;left:180px;padding:10px;background: #FFFFFF url('images/shadow.gif') repeat-y 738px 0px;
border-left-style:solid;border-left-width:1px}
div#footer {background:#FFFFFF;text-align:center;border-top-style:solid;border-top-width:1px}
div#footer p{font-size:11px}
div#container{width:920px;margin:0 auto}
div#headerlinks{width:200px;height:10px}
div#splash{width:100%;height:140px}
div#links{width:920px;height:22px}
div#navigation{width:160px}
div#content{width:720px}
div#footer{width:920px;height:30px}
The only thing I would do is change this:
url('images/border.gif')
to this:
url('/images/border.gif')
I added a forward slash. It is more good programing practice then anything.
Other then that it looks good although I don't know much about the 'repeat - y' stuff. There may be other ways of doing what you are accomplishing there..... the only reason I bring it up is it is unfamiliar to me.
[edited by: Demaestro at 7:38 pm (utc) on May 10, 2007]
#containerinstead of
div#container).
0are always
0, regardless of unit, so we can dump them (e.g.
0instead of
0px).
#abcinstead of
#aabbcc).
font: 11px Verdana;instead of
font-family:Verdana;font-size:11px;).
font: 11px Verdana;should be
font: 11px Verdana, sans-serif;.
[edited by: Robin_reala at 9:41 pm (utc) on May 10, 2007]
The only thing I would do is change this:
url('images/border.gif')to this:
url('/images/border.gif')
I added a forward slash. It is more good programing practice then anything.
To change the image path from one that is relative to the CSS file, to one that is relative to the webroot (or an absolute path). Just to note that this is obviously very much dependant on the directory structure of your website, so you may not be able to simply 'add a forward slash'.
Also, the single (or double) quotes around the path/filename are very much optional. I would tend to avoid them, unless you have some strange characters in your filenames (but then they are to be avoided anyway).
div#container{position:relative;text-align:left;background: #RGB url('images/border.gif') repeat-y 0 0}You're not specifying a background-color for your #container element. It is always good practise to set a colour as well as an image for the background, incase the image doesn't show - the user may be browsing with images disabled?!
div#navigation h1{color:#FFFFFF;margin:0}
div#content{position:relative;left:180px;padding:10px;background: #FFFFFF url('images/shadow.gif') repeat-y 738px 0px;
border-left-style:solid;border-left-width:1px}You have the same foreground and background colours set in a few places. This may be perfectly OK, depending on your mark-up, but what if that 'shadow.gif' doesn't show?!
Robin - thanks for those tips, I'll have a look at making those changes, and they all seem easy to understand.
Penders - the gif files which are coded as background images are, first of all, badly named, sorry about that.
I have now changed border.gif to fauxshadow.gif - it's not a background image for the whole container area, it's just a rectangle of colour to match my lefthand column, and make it appear as if the column always matches the height of the right-hand column. The coding should be correct cause I followed the instructions at A List Apart. Hopefully I wouldn't need a background colour instruction, because white would be the default?
The other image, shadow.gif, I am less certain of in terms of whether it is the best way to do things...Again, it's not a backround for the whole "content" area, in fact it's just a one-pixel width vertical line which is repeated down the page to provide a right-hand border line for my content area.
This is becase when I tried used the border-right-width: 1px command on the content div, it added a border fine, but it was pushed one pixel to the right...couldn't figure out why so I've used the image instead...any ideas as to why the border would show up one pixel too far to the right?
