problem getting started with layout

**peterkp** · May 13, 2009, 12:48

I have a problem even getting started with a web page.

I found a 3 column design I liked with a step by step tutorial. Step 1 is the 3 columns basic layout. I copied the code. It displays correctly as columns in IE but not Firefox. I validated my html and css before coming here.

Details...

HTML Code:

<?xml version='1.0' encoding='utf-8'?>
<!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">

<head>
	<title>
		Peter's guitar studio - Home page
	</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="Peter Kirkpatrick is an experienced and friendly guitar teacher based in West Auckland. I teach acoustic, electric and classical guitar to students of all ages and backgrounds." />
	<meta name="keywords" content="guitar teachers, student, guitar lessons, Auckland, Henderson" />

	<link href="D:\UserFiles\Peter\My Documents\My Music\Web site\Development\Global\petersguitars2.css" rel="stylesheet" />
</head>

<body>
<div id="col1">c1</div>
<div id="col2">c2</div>
<div id="col3">c3</div>
</body> 
</html>

Code CSS:

#col1
{
float: left;
width: 48%;
margin-left: 3%;
display: inline;
background-color:blue; /*temporary*/
}
 
#col2
{
float: left;
width: 20%;
margin-left: 3%;
}
 
#col3
{
float: left;
width: 20%;
margin-left: 3%;
background-color:gray; /*temporary*/
}

**Black Max** · May 13, 2009, 19:33

I'm not code warrior enough to debug your specific code, but I can make some observations.

One, Tommy and the other guys in here have made compelling arguments for using HTML 4.01 Strict and not using XHTML, even when you use the XML pseudo-attribute as you do (and many do not).

Two, if it works in IE but not in Firefox, that's a sure sign of problems, whether the code validates or not (it does, I checked

).

Third, I tried it on my machine in FF3, put some "lorem ipsum" content in the columns, and it displayed fine. The columns aren't equal, but they're not going to be unless you use any of a number of methods to equalize them. Replace the c1, c2, and c3 with this and see what you think:

Code:

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

Edit: It looks fine in Opera and IE6, too, with the obvious default font differences. I'm not sure what you're seeing that's causing you distress...?

**peterkp** · May 13, 2009, 20:37

I wondered if xhtml versus html would be raised. If that is the problem I might just give up, because I've just finished polishing my xhtml based on my last thread on this site...

I'm aware there's a lot of formatting to be done. But I've taken the advice of regular cross browser testing, rather than leaving it till later.

Specifically, what I see is:

In IE...
c1, c2, and c3 all on the same row, with the temporary column colors showing - consistent with what I was aiming for.

In FF3...
c1
c2
c3
in the top left corner as if they are a list without the bullets ... and no column colors showing anywhere.

Edit: I've just added in your <p> tag and mock text, and the result is that IE shows the same columns, and FF displays as if the <p> tag is all that it's reading - text flows 100% across the screen.

**AlexDawson** · May 14, 2009, 03:04

Well currently as it stands, your website is not valid XHTML, though the correct mime-type will be interpreted by Opera and Firefox (Et al) IE will see that application/xhtml+xml and throw up on you, it will either trigger a "start download" dialog or just render as text/html and your doctype and all your code along with it will be invalidated. Essentially the only way to even use XHTML properly (with the correct mime-type) is to use serverside scripting and the HTTP accept header to determine if XHTML is supported, if so it uses XHTML, if not it triggers HTML 4.01 (with doctype).

**peterkp** · May 14, 2009, 10:13

Originally Posted by AlexDawson

Well currently as it stands, your website is not valid XHTML...

Question 1: so why was my page validated?

Question 2: so what specifically and step by step would I need to do to make it valid?

Question 3: is it worth it? The reason I chose xhtml was very simple - the first book I read was "Build Your Own Web Site The Right Way Using HTML & CSS" from Sitepoint, and that used xhtml. I've since read stuff about the issues between html and xhtml, but most of it is still difficult for me as a novice to get a handle on. All I want is for a simple 4-5 page web site which I maintain to work reliably without hours of technical hassle every time I add or change content. What's the best option at that level?

**snaskit** · May 14, 2009, 10:49

your website is not valid XHTML sorry pall

**peterkp** · May 14, 2009, 11:45

Well I've tried something different. I've created a new page with different content to see what happens...

This time I tried html strict.
This time I have made the page as simple as possible. I have set the background color to red and inserted an image.
The page validates.
IE has a red background and a picture.
FF has a red background and no picture. The alt text is displayed.

Is it possible that there are browser settings which are in play? (I know my way round IE but am new to FF)

If I can't manage something this simple...

Code below...

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
	<title>Title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<style type="text/css">
		body {background-color:red}
	</style>
</head>

<body>
	<p>
		<img src="D:/UserFiles/Peter/My Documents/My Music/Web site/Development/Global/guitar1.jpg" alt="Guitar1" >
	</p>
</body>

</html>

**AlexDawson** · May 14, 2009, 15:22

The simple reason why it was not valid was that even though you served browsers that could handle XHTML the correct MIME type (application/xhtml-xml), browsers which could not understand it (such as IE) would see XHTML, see content-type and throw a hissy fit while throwing up lunch all over your living room

Generally speaking unless you are going to be doing XML work which will interact with the website (XSLT for example), there is no genuine reason why you would need to use XHTML. People seem to think XHTML is some kind of upgrade... it isn't, its an entirely different thing to HTML and for the Sitepoint book to be mentioning it for a basic website introduction is simply wrong. My advice would be to use HTML 4.01 and leave XHTML until you find you need to use it.

PS: As for the above code, you forgot to close the IMG tag, which is why it isn't showing properly

**Black Max** · May 14, 2009, 19:26

Better to recode the site for HTML Strict now, instead of dealing with the long-term hassles down the road. Sorry, but there it is. A 4-5 page site shouldn't be too bad....

And I apologize for not recognizing the invalidity of your site. It passed the validator check, and that was good enough for me. But that's why I'm not a SP guru!

**peterkp** · May 14, 2009, 21:37

Originally Posted by AlexDawson

...for the Sitepoint book to be mentioning xhtml for a basic website introduction is simply wrong. My advice would be to use HTML 4.01 and leave XHTML until you find you need to use it.

I will take the advice - thanks. I'm sure SitePoint will value the endorsement

Originally Posted by AlexDawson

PS: As for the above code, you forgot to close the IMG tag, which is why it isn't showing properly

It's not that simple from my end. I assume you mean the IMG tag needs to finish with />. I made that change and FF still doesn't display the picture. Also when I tried to validate the file with the / inserted, I got this warning:

"The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML."

So I'm still not sure what to do.

Edit: I've also in the last 15 minutes altered the test web page that started this thread to HTML 4 Strict. I validated it. Exactly the same issue with the closing tags. And exactly the same problem with IE displaying the columns and not FF.

**peterkp** · May 14, 2009, 21:39

Originally Posted by Black Max

I apologize for not recognizing the invalidity of your site. It passed the validator check, and that was good enough for me. But that's why I'm not a SP guru!

No worries. I totally appreciate everyone who gives their time to help out other people. Keep up the good work.

**AlexDawson** · May 15, 2009, 01:31

Originally Posted by peterkp

I will take the advice - thanks. I'm sure SitePoint will value the endorsement

Well it is a very common mistake

they say their using XHTML but 99.9% of all websites claiming XHTML either declare it wrong (through MIME and doctype making all their code invalid by default) or they don't actually make use of the functionality it offers, making the use of it pointless

The SitePoint Forums have moved.

User Tag List

Thread: problem getting started with layout

Thread Tools

Display

problem getting started with layout

Bookmarks

Bookmarks

Posting Permissions