View Full Version : First CSS site - any suggestions?..

02-02-2005, 12:01 PM
Hi there,
I just had my first go at using CSS to make the beginnings of a site and I figure it's good to get some feedback.

Can you tell me anyways I should improve on my CSS/html here: http://www.jamesmawdsley.com/ . You can view the style sheet here: http://www.jamesmawdsley.com/layout1c.css.

In particular I'm not sure about text sizing. I have gathered what I can from tutorials etc...but things still seem weird. For example, my text doesn't seem to scale up and down in small increments when increasing the text size in browsers (notably Mac Safari)...?. Instead it seems to jump alot, unlike this site for example.

All suggestions will be greatly appreciated.

Many thanks.


02-02-2005, 01:37 PM
The whole text sizing issue still is a bit of a minefield since different browsers treat different techniques of text sizing, well, differently.

I find Owen Briggs' method (http://www.thenoodleincident.com/tutorials/typography/incremental_differences.html) of combining a percentage with an em size still one of the most compelling and kind-of-predictable approaches; I have no idea how this works in more recent browsers like Safari since he hasn't updated his pages to reflect those. You might want to give it a try, though (by the way: I use the percentage on the html element and em sizes on anything else).

Other remarks:

Why do you use a ful external style sheet and still keep a number of style rules internal? Trying something out, perhaps?

I'd recommend removing the xml prolog; it throws IE6.0/win back in quirks mode. Instead, use a meta element to set the character encoding (I know, the xml prolog is the "proper" way, and it would be in a world where everybody uses "proper" browsers, but not everybody does (http://www.w3schools.com/browsers/browsers_stats.asp) -yet).

I noticed a couple of hx elements inside a p; this is not correct use of p elements. Instead, place the hx's separate before starting a p, or leave off the p altogether (like in: "<p><h5>This website will be completed shortly</h5></p>").

02-02-2005, 04:14 PM
Thanks Ronald. Much appreciated.
The Owen Briggs method is the one I have used. I will have another tinker with it...

There are some internal style rules because...well, yes, because I'm just figuring out what does what and how to do it...and because I'm not so sure on the content of the rest of the site so I guess I'll be able to put most styling into external sheet once thats sorted.

XML prolog. Got it. Thanks. Didn't know that. Have removed it. But being an amatuer...what do I put, if anything in it's place? ... can you tell what I should do here?

Cheers for the heads up on the proper way with H and P tags....will do.

Thanks alot.


02-02-2005, 04:47 PM
Greetings DimFish,

I like the overall layout. Nice and clean. The color scheme and font choices seem appropriate for the context.

One consideration is making sure you're adhering to what's valid for your declared DOCTYPE.

Stick to lower case, this:

<IMG STYLE="position:relative; Top:0px; Left:0px; WIDTH:200px; HEIGHT:171px" ; SRC="images/james1.jpg" alt="James Mawdsley"></img>
...should be this:

<img style="position:relative; top:0px; left:0px; width:200px; height:171px;" src="images/james1.jpg" alt="James Mawdsley" />

Note also you don't need the </img> tag. Just add the closing slash prior to the closing bracket. This also applies to your <br> tags, code them as <br />. Or better yet, get rid of them completely, by using semantic mark-up. Search google for 'semantic xhtml'.

Here's a link to your page's validation report: http://validator.w3.org/check?verbose=1&uri=http%3A//www.jamesmawdsley.com/

02-02-2005, 04:51 PM
The usual way would be to use a meta element:

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
I must say I'm no expert in this field and I'm sure there are some who would cheerfully bite my head off; as I understand, the server should be configured to send out content type and character set information in a HTTP header, and said meta data serves as a sort of backup.
Sending an XHTML document as "text/html" is not perfect, but since your page is typed as XHTML 1.0, it will do. Other content types again cause trouble for the same browser the xml prolog causes trouble for (yeah, that one again).

02-03-2005, 11:53 AM
Thanks people. Great stuff.
I'll be back with more questions soon as you've been top help.