Please help with XHTML and CSS coding.

**tagman2001** · 02-20-2007, 03:32 PM

Hello everyone,

As a recent retiree with nothing to do I found an interesting hobby that I have become passionate about building a web site. I started reading books on XHTML, CSS, PHP, Javscript and basically anything on the Internet that has to do with coding. Very confusing stuff.

Here is the problem that I was hoping someone might help me with: I have been trying to hand code the following site www.crazydollarsaver.com. I used XHTML DOC TYPE and CSS style. I know this is a simple site with header, three column fluid,(I think?) and footer. The pages have yet to validated which I will do as soon as I can figure out what DOC to use. I tested the pages on my browser which operates on Window XP Professional. I viewed the site on IE 7.0, Fire Fox, and Opera from my browser and they pages looked fine. I ask my daughter to view the site from her office she told me that on Fire Fox it looked fine but on IE 6.0 the center column was being pushed down. The office uses Windows NT 2000.

Would someone please help me with the hack code so it can be displayed in most browser correct? Can anyone tell me which DOC TYPE should be used? The XHTML and CSS viewed through view source page or I can post the links or code if needed.

I would like to thank you in advance for any help.

Thanks

**jscheuer1** · 02-20-2007, 03:38 PM

I wouldn't even load that page in IE 6 because, in that browser, it pops an alert during loading that might be for the purposes of downloading malware.

**tagman2001** · 02-20-2007, 04:32 PM

Thanks for your reply, and I am sorry that I am such a novice I am not sure what you mean? I am wondering, would it be better to post the code for the site? Are there codes that I might be able to use so most visitors will see the same site no matter which browser is used? What type of DOCTYPE should be used? This is very confusing, I would like to eventually build a site to help other beginners and offer tools and codes once I learn myself. Right now I am satisfied building a simple basic site. I need feedback to know if others are viewing basically the same site that I am. My goal is to learn as much as I can, even if I started the game late in life (in my fifties). I do believe you are never to old to learn.

Thanks

**Twey** · 02-20-2007, 06:03 PM

The pages have yet to validated which I will do as soon as I can figure out what DOC to use.

There's rarely any reason to use anything but HTML 4.01 Strict.

Good design -- full marks in Konqueror.

I do believe you are never to old to learn.

I'm going to use you as an example to all the "I'm too old for this 'technology' stuff" types out there.

**jscheuer1** · 02-20-2007, 06:19 PM

You know what an alert is right? It's that standard box that a browser can pop up that says something in it and has an OK button on it. In this case IE 6 popped one up that asked if I wanted to continue loading the page. This is almost always due to javascript code on or linked to the page specifically designed to pop up the alert. However, it can sometimes be generated by the browser in response to something it considers merits popping up an alert. I think this one is due to javascript but I'm not sure which one is responsible. There are several on and linked to the page. You should probably find out why this is happening and put a stop to it.

DOCTYPEs can vary depending upon exactly what you want to do but, generally a strict HTML 4.01 DOCTYPE with no xml is best:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>

</body>
</html>

Validating the HTML and the css is good too. Once you have that, you probably will only need perhaps to make a few style adjustments in IE 6 and less and possibly for IE 7. These are best done via conditional comments. A simple example:

Code:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_styles.css">
<![endif]-->

This would go after your ordinary stylesheet link(s) in the head of the page and would contain only those styles that need to be added/changed for IE. These conditional comments can be IE version specific and can be hidden from other browsers or seen by them. For more on how this works see:

http://www.quirksmode.org/css/condcom.html

and in detail:

http://msdn.microsoft.com/workshop/a...omment_ovw.asp

**tagman2001** · 02-20-2007, 08:12 PM

Thanks you jscheuer1 and Twey for your response. I believe you’re right about DOCTYPE strict 4.01 I mark-up.

My mark is <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Would you mind explaining the different between the two? I’ll read about the comments later tonight. Right now I need to take my grand-daughter to the movies.

If it is alright I would like to ask about the pop up alert, it must be from the advertiser on the site? I’m not quite sure how to solve the problem.

One other thing if you would please, do all the columns line up at the top equally? Also would you be able to tell me what fix I would need to put in my code and were. In case I missed it, is this the code I need to fix the column problem in IE;



Thanks

**Twey** · 02-20-2007, 09:58 PM

My mark is <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Would you mind explaining the different between the two?

The issue centres around MIME-types, which are strings sent with the page to identify the type of content it holds. The MIME-type for HTML is text/html. However, since XHTML is completely different from HTML (in its workings, at least) the correct MIME-type is application/xhtml+xml. The problem with this is that Internet Explorer, at the time of writing, does not support XHTML, and if sent a page as application/xhtml+xml, will ask the user where he or she wants said page saved, as it does with any file whose type it doesn't recognise. The common solution to this is to write the page using XHTML, but send it as text/html. This works because modern browsers have extensive error-correction code, and because XHTML is syntactically very similar to HTML: the browser simply treats it as badly-written HTML, and corrects it before parsing it. However, this completely defeats the point of keeping a valid page, since to all intents and purposes, it isn't a valid page at all.

HTML 4.x Transitional (and XHTML 1.0 Transitional, which is based upon it) is a DOCTYPE intended to allow authors to move to HTML 4 without breaking compatibility with HTML 3, which was considered to have become truly obsolete at least seven years ago. Because of this, XHTML 1.0 Transitional is in reality only a little better than HTML 3, and certainly outdated in this day and age.

One other thing if you would please, do all the columns line up at the top equally? Also would you be able to tell me what fix I would need to put in my code and were. In case I missed it, is this the code I need to fix the column problem in IE;

No, it was a simplistic example of how to apply styles only to Internet Explorer, not a fix specific to your case. The extra k on "link" was a typo.

**jscheuer1** · 02-21-2007, 04:46 AM

Yep, 'linkk' was just a typo, fixed in the original post now. I might also point out that it is a bad habit to get into removing the line breaks in that code. It could trip you up.

Everything Twey said about DOCTYPE was spot on, I wish I had as firm a grasp of the details on that as he does. I just know that HTML 4.01 is for you in this case.

Now, getting back to the conditionals, it will take a little bit of learning but, it is the way to go when you need to whip an IE version into shape. I see you have this in your source code:

HTML Code:

<link rel="stylesheet" type="text/css" media="screen" href="header.css" />

It should be (using HTML 4.01 strict syntax):

HTML Code:

<link rel="stylesheet" type="text/css" media="screen" href="header.css">

I'm sure you have all kinds of rules in there. What you should do is (after validating your markup and style) figure out how these need to be modified to take care of any remaining problems in IE 6 and place those rules in another stylesheet file - say ie_header.css - then you could do this:

HTML Code:

<link rel="stylesheet" type="text/css" media="screen" href="header.css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie_header.css">
<![endif]-->

IE 6 will follow all of the rules that it recognises in header.css plus those in ie_header.css - if any style in the second file contradicts one in the first file, in IE 6 the second style will prevail. IE 7 and all other non-IE browsers will ignore ie_header.css because of the conditional.

To get a thorough understanding of how these conditionals work, follow the links in my previous post on the topic.

**jscheuer1** · 02-22-2007, 06:25 AM

Have a look at this thread, you will probably find it instructive:

http://www.dynamicdrive.com/forums/s...5144#post75144

**tagman2001** · 02-23-2007, 05:22 PM

Thanks for everyones help.

If I understand it correctly I should insert this markup in the header part of the site:

Code:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie_header.css">
<![endif]-->

Then create another css style sheet with a set the conditions for IE save as ie_header.css.

Code:

(i.e. #content { margin-top: 100px; border: 1em; etc. }.

If this what you mean I have tried the above and nothing changed with the site. The center column is still showing at the bottom of the site. I will be changing the DOCTYPE to strict and start validating the page for HTML and CSS compliance.

Right now I need make sure the my templates are correct before I can considerate content and tools. I am not sure what to do? Hope these you can give me a example code so I can duplicate on my own. Sorry but I am more of a visual person, I am not familiar with the terminology and learning new terms everyday.

This is a great forum for new coder to learn, you guys have great info.

Thanks

Thread: Please help with XHTML and CSS coding.

Thread Tools

Search Thread

Please help with XHTML and CSS coding.

Bookmarks

Bookmarks

Posting Permissions