XHTML & CSS: Browser doesnt even attempt to use css.

**<ABX** · Sep 11th, 2004, 02:48 PM

Im trying to implement a basic 3 Column Layout w/ XHTML+CSS

I cant figure out why but the browser doesnt even make an attempt to request 'Default.css' (i know via IIS Logs)

I tried both IE6 and FireFox 0.9.3

HTML:

Code:

<?xml-stylesheet href="Default.css" type="text/css"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<HEAD>
		<title>Default</title>
	</HEAD>
	<body>
		<div id="container">
			<form id="main" runat="server">
				<div id="pageheader">Header</div>
				<div id="pageleftcolumn">Left Column</div>
				<div id="pagerightcolumn">Right Column</div>
				<div id="pagecentercolumn">Center Column</div>
				<div id="pagefooter"></div>
			</form>
		</div>
	</body>
</HTML>

CSS:

Code:

#container{
width:750px;
margin-left:auto;
margin-right:auto;
background:yellow;
border:1px solid #fff000;
}
#pageheader {
background:red;
border:1px solid #000;
margin:10px 0;
}
#pageleftcolumn, #pagecentercolumn, #pagerightcolumn {
float:left;
width:248px;
background:green;
border:1px solid #000;
margin-bottom:10px;
}
#pagecentercolumn {background:blue;}
#pagerightcolumn {background:pink;}
#pagefooter{
clear:both;
background:#ffffcc;
border:1px solid #000;
margin-bottom:10px;
}

**Acidic** · Sep 11th, 2004, 05:52 PM

This is the normal way to add CSS files:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href='blue.css' rel='alternate stylesheet' type='text/css' title='blue' />
<link href='orange.css' rel="stylesheet" type='text/css' title='default' />
</head>

**techgnome** · Sep 11th, 2004, 06:54 PM

The big key in getting the CSS to load it to have the CSS link in the HTML / HEAD section.... not ouside it.

TG

**CornedBee** · Sep 13th, 2004, 03:03 AM

You have various interesting problems.

First, you probably serve this page with a text/html MIME type. Otherwise, IE wouldn't even load it. My homepage, for example, gets served as the application/xhtml+xml MIME type that is correct for XHTML, and IE won't load it, but rather attempt to download it. Two more XML doctypes would be possible: application/xml and text/xml. In both cases, IE won't display the pages as it is supposed to, but rather as a plain XML tree.

Now, since you serve this thing as text/html, both Firefox and IE don't treat it as XHTML, but as slightly misformed HTML. (Weird, huh?) As such, the xmlns attribute is ignored, as is the xml-stylesheet directive. That's why the stylesheet is not loading. If you served this as application/xhtml+xml, FireFox would load the stylesheet.

Provided that your server is configured correctly. Another thing you have to watch out for is that FireFox, in standards compliance mode (and the XHTML 1.0 Strict doctype triggers it), requires a correct MIME type for stylesheets from the server. The type attribute of the <link> or <?xml-stylesheet?> is overridden by the Content-type header of the HTTP request. Many servers, especially IIS, are often not configured to serve .css files as text/css, but instead serve it as text/plain. FireFox will refuse to load these files.

Remember also that IE will activate quirks mode if the doctype declaration is not the first thing in the file. Any kind of <?xml stuff at the top can't be used in IE.

Another point: XHTML is case-sensitive. HTML is not, so you can mix upper- and lowercase tags. In XHTML, every tag and attribute must be lowercase, so <HTML> is invalid XHTML.

Getting nitpicky now. The idea of XHTML+CSS is to separate content and presentation. You probably think you have done that, but you have not. Not completely. Your XHTML still contains a little presentation information. To be precise, the IDs. "leftcolumn", "centercolumn" and such contain presentation information. Better names would be "menu", "content", "hotlinks" and such.

And finally, just to be annoying, Acidic's code is invalid, too, strictly speaking. It's lacking the namespace

And since the XHTML 1.1 specification lacks the Appendix C, you may not serve XHTML 1.1 as text/html, unlike XHTML 1.0. Thus, you would have to serve XHTML 1.1 as text/xml, application/xml or application/xhtml+xml, all of which IE will misinterpret.

**Acidic** · Sep 13th, 2004, 05:52 AM

Originally posted by CornedBee
And finally, just to be annoying, Acidic's code is invalid, too, strictly speaking.

Yep, that was annoying, but good point, I didn't see that.

**<ABX** · Sep 17th, 2004, 11:22 AM

meh... i guess i will have to stick with plain html then. I need IE to beable to view the site properly. damned M$. IE7 better support xhtml.

about content separation:

Is there another way to do it, w/o the divs?

**Jop** · Sep 17th, 2004, 11:30 AM

No you can use xhtml now, although it's still served as html/text for now.
Please do you use divs, no need for tables.
Use Acidics code and you'll be able to show it in all major browsers:

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<HEAD>
		<title>Default</title>
                <link href='Default.css' rel='stylesheet' type='text/css' />
	</HEAD>
	<body>
		<div id="container">
			<form id="main" runat="server">
				<div id="pageheader">Header</div>
				<div id="pageleftcolumn">Left Column</div>
				<div id="pagerightcolumn">Right Column</div>
				<div id="pagecentercolumn">Center Column</div>
				<div id="pagefooter"></div>
			</form>
		</div>
	</body>
</HTML>

That should do the trick.

As Cornedbee pointed out, it's a good idea to give your elements non-presentional names. Name them for what they are, not after how they're going to show up in the browser, so if you decide that the leftcolumn should show up on the right your names will still make sense. (so name it menu, content, etc). But at the end this doesn't really matter for the end user, only people who will look at your code (if you work in a team this makes even more sense)

**CornedBee** · Sep 17th, 2004, 01:42 PM

What's the runat attribute for, anyway? It's not valid in any version of (X)HTML.

**Acidic** · Sep 17th, 2004, 02:33 PM

Originally posted by CornedBee
What's the runat attribute for, anyway? It's not valid in any version of (X)HTML.

DW has runat attribute in the auto-pop-up list. but nothing about it in the help section. And when I gogole for it all the pages talk about .NET. Furthermore, I can't seem to find out what it actually does.

**CornedBee** · Sep 17th, 2004, 03:45 PM

Apparently it's part of the Internet Explorer WebControls. Just reading the descriptions gives me the creeps:

The WebControls provide an authoring solution with widespread reach, by delivering HTML 3.2 compatible content to downlevel browsers (Internet Explorer 5.01 or earlier or a browser other than Internet Explorer)

HTML 3.2? Hellloooooooo!!! We're not in the stone age, you know...

That's my main issue with ASP.Net. In it's very base it's written to serve the good stuff only to IE.

However, on this form element, the attribute is completely out of place. It should be removed, if possible.

**nemaroller** · Sep 21st, 2004, 08:31 PM

Well, ASP.NET 2.0 will supposedly generate XHTML... so I can wait about 9 months to support FireFox and Opera lol...

Thread: XHTML & CSS: Browser doesnt even attempt to use css.

Thread Tools

Display

XHTML & CSS: Browser doesnt even attempt to use css.

Posting Permissions