CSS help please!

Hey Guys

A complete newbie here! Just worked my way through the sitepoint website design book, using a Mac, Safari, Textedit, and CSS. Uploaded website to host. It’s simple but my 1st site. My site is:

Modern British Art Collective-The Best Modern British Art delivered to your door

I have 2 problems:

  1. Using my Mac at home, and Safari my website looks just as it should. It does also when using my mobile phone. But when I tested it using IE and Firefox at work it is only showing the HTML i.e. text of the website and none of the CSS colours, layout, logo etc. I do not understand what is wrong. Why is it working in Safari but not using IE or Firefox on my work PC? What do I need to do to fix the CSS?

  2. When I tried validating the website using the site recommended by the book it was unable to be validated even though I think the !Doctype reference looks the same as in the example. Have I made some type of typing error?

Any suggestions as to how to resolve these issues gratefully received! (in simple terms!!)

Kind Regards

jamesg:)

I suspect it’s this line:

<link href="style2.css" rel="stylesheet" type="test/css"/>

The “type” is “text/css,” not “test/css.”

Hi jamesg1234. Welcome to SitePoint. :slight_smile:

Yes, EarlyOut is right. Just for the heck of it, you might as well fix the urls in your doctype too, as that is giving the validation problem:

<!DOCTYPE html PUBLIC [COLOR="Red"]" - //[/COLOR]W3C//DTD XHMTL 1.0 Strict//EN"
	"htt[COLOR="Red"]p: //[/COLOR]www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="ht[COLOR="Red"]tp: //w[/COLOR]ww.w3.org/1999/xhtml">

Notice the highlighted gaps.

And the DOCTYPE isn’t quite right, though I’m having trouble spotting exactly what the problem is (it’s not just the stray spaces, as I first suspected). Copy and paste this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Edit: Ah, yes, more stray spaces than I noticed at first. Syntax, syntax, syntax! :slight_smile:

Firstly thanks guys for coming back to me so quickly, much appreciated.:slight_smile:

Both solutions worked, but have lead to another problem…

At home on my Imac,(27" screen) the website looks fine whether using Safari, Chrome, or Firefox. When I say fine I mean that the beige part of all of the pages is about 2/3rds of the screen across from left to right, and the red dress drawing the right hand side 1/3.

At work on PC’s the CSS is working… but whether I look at the website on Firefox, Chrome or IE, the red dress drawing has become a much bigger part of the screen taking up from right to left about 80% of the screen rendering much of the font unreadable and reducing the beige part of the screen to about 20%. Its like the red dress drawing has enlarged, and needs fitting back to size/screen?

Is this a Mac/PC problem? And what can I do so that the website looks the same i.e. as it does at home on my Mac wherever it is viewed??

Any suggestions gratefully received…!

jamesg

Oh OK that makes sense. I’m guessing the work monitors here are 4:3 monitors then.

Obviously I would hope more people than not would be using 16:9 monitors, but is there any advice I should follow to minimise the likelihood of this type of thing happening?

i.e. using smaller images than as here with the ‘red dress drawing’? or possibly putting images at a certain section of the page?

jamesg

It’s just a question of the aspect ratio and resolution of the monitor. The “red dress” image is always the same size, no matter how wide the monitor is. On an old 4:3 monitor, it takes up over the half the screen. On a 16:9 monitor, it’s more like one-third.

See the two attached screenshots (once they’re “approved” by the forum gods).

On my 27" iMac the lady is right behind the text, because I don’t like the browser to be gigantically wide. It’s best not to have striking images like that behind text. (Just stick to softer, transparent images for that … or perhaps better still, none at all.)

I would say either reduce the opacity of that background image drastically, or reduce its size, place it in the HTML and float it to one side so the text wraps around it.

That would get my vote, too. Images behind text often produce readability problems, especially on monitors that are set too “hot” (as most are, straight out of the box).

Cheers Guys

I have floated a smaller version of the red dress drawing to the right of the text, solely on the Homepage and whatever version of monitor I have tried at work it is all now appearing more in proportion.

Obviously I now need to do the same on the other pages (or in the gallery possibly remove it altogether), and tidy up the text on the homepage which I deliberately left to sort out the layout. I will also probably use a sharper cleaner image of the red dress drawing than currently.

Will also need to do something with the Contact Us box as well, as the Us appears right on the bottom line of its menu box for some reason and which I will need to tinker with.

I’ll let you know when finished but thankyou for your all your help to date and which is most appreciated!

jamesg1

I’m not seeing that.

I’ll let you know when finished but thankyou for your all your help to date and which is most appreciated!

No worries, James. Do keep in touch. :slight_smile: