Not worked on sites for a while - got a page display problem, can someone help?

Get Started
1

Hi there,

Ive not really done any major site work for a while (and at best in the past I only dabbled).

I made a simple site last year and went to finish it off now that Ive been given all the info but it doesnt display properly at all.

Driving Lessons Falkirk from On Board Training

In IE9 and Chrome it just shows a page as if the CSS hasnt loaded up, in IE8 (or IE9 in 8 mode) it displays as I’d expect it to.

I tried playing around with bits and pieces and couldnt fathom it out so was hoping someone with a bit more web skills could point me in the right direction with this one.

Many thanks and apologies for the bozo question :slight_smile:

Rik

2

You’re missing the <html> start tag, which should come between the <!DOCTYPE> and <head>.

Handy hint - if you’re not getting the results you expect, run your site through The W3C Markup Validation Service and it will pick up any errors in the code. If you don’t understand them, come back here and ask for help!

3

Thanks Stevie, will get my morning cuppa and get cracking on things.

Simon’s cat says Meow by the way :wink:

4

[ot]

Simon’s cat says Meow by the way

and then points at his mouth (food)[/ot]

5

Hi guys, worked more on the site - added the dopey missing tags and still cant get it to fire up properly in Chrome or IE9 :S

In quirks mode it works in IE9 but for some reason sits over to the left of the screen.
In IE8 mode under IE9 it displays as it should in the centre of the screen.
And in Chrome it just displays as if the CSS hasnt loaded at all.

Its going to be something so small and silly Im going to kick myself but I think its a not seeing the wood from the trees thing at the moment. Could someone have a quick look and let me know where Ive gone wrong.

Many thanks :slight_smile:

6

In quirks mode it works in IE9 but for some reason sits over to the left of the screen.

Yeah that’s expected. Quirks Mode even in modern IE should make the browser act like it’s IE5, and IE5 couldn’t center pages with normal centering code (automargins on blocks).

And in Chrome it just displays as if the CSS hasnt loaded at all.

I found something weird when looking at your page (oh, you still have some errors, which you should fix (remember XHTML is casse-sensitive) but have nothing to do with this CSS issue):
When I look at style.css, when I check the page info, I’m told the browser sees it as
text/html
rather than
text/css

even though you’ve correctly referenced the MIME type in the <link> tag as text/css, and the file is named with .css file extention… something has saved that file (or your server is set up to send that file out) as type text/html.

Change that, and your styles should work. Why some browsers are ignoring the type sent out by the server, I dunno, but that’s surely the cause of the issue here.

You could check your text editor to see if it saves documents as a particulat MIME type, but I’m actually not sure how to check your server (I’ve never had to check types on my server).

7

That was puzzling me, as well. Firebug was telling me that it wasn’t loading the style.css, yet I could look at the source code, and pull it up without any problem.

Once you’ve sorted out the MIME type problem, there is one typo in your CSS that’s likely to cause all sorts of mischief:

#menu {
	float: left;
	width: 700x;
	height: 51px;
}

That “700x” is a non-starter! :wink:

8

From PHP.net :

I recently had a hair-threatening problem with Firefox and XHTML 1.0 transitional.

It worked fine with other browsers, and also with HTML 4.1.

To cut a long story short, PHP-generated JS and CSS files were still being reported by the headers as text/html, while in the HTML they were text/css and application/javascript; Firefox having been told the page was XHTML 1.0 became anal-retentive and refused to style the page. (I think the JS still worked but I fixed it anyway.)

Solution:

header(‘Content-type: text/css’);
and
header(‘Content-type: application/javascript’);

9

Thanks Stomme poes and EarlyOut - as I quoted above you both hit the nail right on the head!

The style.css file is being generated by a PHP script fed from the backend for various things like colours, fonts etc.

I never knew that a browser would barf when it gets sent a file with the extension CSS but missing the header.

That was the missing link thats fixed the puzzle and by using the header text/css mentioned in the quote above its fixed it!

Now time to turn to the wee errors and get things 100% on the site.

Thank you both very much for your help, theres no way on Earth Id have figured that one out by myself. :slight_smile:

10