Please help with XHTML and CSS coding. [Archive]

View Full Version : 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 (http://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. :p

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:

<!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:



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/author/dhtml/overview/ccomment_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:confused:

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:

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

It should be (using HTML 4.01 strict syntax):

<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:

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


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/showthread.php?p=75144#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:

Then create another css style sheet with a set the conditions for IE save as ie_header.css.
(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

jscheuer1

02-23-2007, 06:34 PM

Very close. First off, if you don't already know:

1 ) That conditional comment means that only IE 6 or less will use that stylesheet link.
2 ) The conditionally commented stylesheet link belongs after the one(s) for other browsers.
3 ) The commented stylesheet need not include anything from the main stylesheet that works OK in IE 6 and less.
4 ) It is not an alternate stylesheet, it is additional styles that only IE 6 and less will follow. These styles can cancel or contradict what is in the main sheet or just add to them. Anything in the main sheet not mentioned in the conditional sheet will still be active for IE 6 and less.
5 ) The name of the conditionally commented stylesheet can be whatever you like as long as it agrees with the href attribute in the link tag, IE 6 and less see it as a regular stylesheet link, all others ignore it.

As long as we have all that straight, I think we did. The only problem is with this bit, the red parts do not belong:

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

I am not sure which are editorial on your part and which (if any) you actually used in your stylesheet. In any case, none of it goes in a stylesheet.

tagman2001

02-26-2007, 08:59 PM

I want to thank you guys for all your help.

I have validated my site
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
I have also validated the css style sheets for FF and IE. Server Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)(test site).

I viewed my site on the browser at work (NT 2000) resolution (1280 by 1024 pxs)(1280 by 960pxs) looks fine both on FF& IE. At home the site looks fine (Windows XP Professional) (FF and IE 7.0).

The viewing from different resolution (i.e. 1152 x 864, 1024 x 768, etc.) creates another problem, everything ( i.e. columns and rows) is all over the place. Does anyone know were I can find some source to check the different resolutions, or can someone suggest a fix I can use.

Thanks for any help.

Twey

02-26-2007, 09:04 PM

I have validated my site:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">A pseudo-XHTML document using an outdated DOCTYPE would almost be better off invalid. Like I said above, there's rarely reason to use anything other than HTML 4.01 Strict. There's certainly no call to use XHTML at the moment, when it's unsupported by the biggest browser on the market.
The viewing from different resolution (i.e. 1152 x 864, 1024 x 768, etc.) creates another problem, everything ( i.e. columns and rows) is all over the place. Does anyone know were I can find some source to check the different resolutions, or can someone suggest a fix I can use.Don't use absolute units for positioning.

tagman2001

02-26-2007, 11:08 PM

I have also valided <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. Would you mind giving an example of "absolute units for positioning" . I could put up the css sheet so you can see what I am doing, please let me know if I should?

Thanks

Twey

02-26-2007, 11:27 PM

Absolute units are ones like px, pt, cm, mm. Rather, you should use relative units like em and/or %.

jscheuer1

02-26-2007, 11:37 PM

Absolute positioning only occurs when you have:

position:absolute;

in your stylesheet or inline styles (if any). It isn't the only thing that can lead to things getting 'off' in different resolutions. Using pixels instead of percent to set widths and heights can also have the same effect. You really don't want your page to look the same at all resolutions though, you just want it to look OK in the different resolutions.

If you have a high resolution monitor, you can see how your page would look in lower resolutions by reducing the dimensions of the browser window to what they would be on a smaller/lower res monitor.

On some systems you can check the look of higher resolutions by raising your native resolution. Things will no longer fit on the screen but, you can 'scroll' around (by moving the mouse to the edges of the viewable area) to see what it would look like. Only some systems are capable of doing this.

Twey

02-26-2007, 11:52 PM

There's a difference between absolute positioning and positioning using absolute units.
Using pixels instead of percent to set widths and heights can also have the same effect.As I said.
If you have a high resolution monitor, you can see how your page would look in lower resolutions by reducing the dimensions of the browser window to what they would be on a smaller/lower res monitor.Not necessarily, since on a smaller monitor fonts would be smaller (pixel-wise).

jscheuer1

02-27-2007, 05:29 AM

Adjust your font-size then. But, you have no control over the font-size of the user at any resolution. You can guess but, some folks will use larger or smaller sizes than expected. The point is to get a sense of the space available. It is a design aid to resize the browser window. If, when you do so, your page flows into the space available with a vertical scroll bar only if needed and no horizontal scroll bar, then you are in business.

Stardog

02-27-2007, 02:40 PM

A pseudo-XHTML document using an outdated DOCTYPE would almost be better off invalid. Like I said above, there's rarely reason to use anything other than HTML 4.01 Strict. There's certainly no call to use XHTML at the moment, when it's unsupported by the biggest browser on the market.Don't use absolute units for positioning.
Are you sure it's outdated? I use it all the time and have my CSS/XHTML websites looking perfect in IE6/7/FF/Opera.

And all the heavyweight designers are using it also - http://simplebits.com, http://www.shauninman.com, http://cameronmoll.com.

Twey

02-27-2007, 05:46 PM

Are you sure it's outdated? I use it all the time and have my CSS/XHTML websites looking perfect in IE6/7/FF/Opera.If you can view it with IE, you're not using XHTML. Most likely what you're doing is writing XHTML, then sending it as text/html. That's not XHTML, that's invalid HTML with an unknown DOCTYPE. If you don't care about serving standard code, you should also read Sending XHTML as text/html Considered Harmful (http://www.hixie.ch/advocacy/xhtml), by John Hicks, for some further pragmatic reasons (I've typed out that link so many times now I know it off by heart).
As for it looking fine, even invalid code can look good when rendered, thanks to the error correction that's bloating our browsers (I heard somewhere it made up roughly 50% of the code for most browsers, although I don't know how accurate that is). It's still not the right path.
And all the heavyweight designers are using it alsoThat doesn't mean they should be. See Transitional vs. Strict Markup (http://24ways.org/2005/transitional-vs-strict-markup) for a brief introduction to the reasons for using Strict. From the HTML Strict DTD itself:
This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.Well, style sheets have matured, and the W3C have indeed phased out those elements completely (although only in XHTML 1.1). There are very few presentational elements and attributes remaining that cannot be replaced with CSS. If you're not using them, there's no reason to continue to use Transitional DOCTYPEs; if you are, you should give some thought to modifying your design.

tagman2001

02-27-2007, 08:28 PM

Now, I am totally confused about which DOC to use, but I am sure it will get sorted out. Twey you mentioned using (em, percentages) instead of px. I am wondering a couple things;is there an advantage or disadvantage using (em's or %) and can both be used?

This is a great place to learn from you guys have a wealth of information.

Thanks

Twey

02-27-2007, 08:36 PM

Use HTML 4.01 Strict.
I am wondering a couple things;is there an advantage or disadvantage using (em's or %) and can both be used?Percentages are based on the size of the parent element (for elements) or the font size (for text). Ems are based on the font size in both cases, although IE has problems when applying them to text, so percentages should be used there instead.

You can use them together, although note that this means they will scale at different rates (so mixing them for widths can result in float-drop or horizontal scrollbars if used incorrectly). Generally, I use either all ems or ems for heights and percentages for widths, depending on how fluid I want the page to be.

tagman2001

03-02-2007, 12:48 AM

Hi,

I need some more help I validated my site with strict doc and also validated the ccs. Although the css are validated they have the following warnings which I am not sure how to handle. This style sheet is for IE:

5 body You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
5 body You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
14 table You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
20 a font-family: You are encouraged to offer a generic family as a last alternative
20 a font-family: You are encouraged to offer a generic family as a last alternative
27 h6 font-family: You are encouraged to offer a generic family as a last alternative
27 h6 font-family: You are encouraged to offer a generic family as a last alternative
27 h6 font-family: You are encouraged to offer a generic family as a last alternative
27 h6 font-family: You are encouraged to offer a generic family as a last alternative
27 h6 font-family: You are encouraged to offer a generic family as a last alternative
27 h6 font-family: You are encouraged to offer a generic family as a last alternative
29 h6 You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
29 h6 You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
29 h6 You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
29 h6 You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
29 h6 You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
29 h6 You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
34 .hovermenu ul font-family: You are encouraged to offer a generic family as a last alternative
74 #header You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
79 #header Redefinition of margin-top
86 #leftcol You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
97 #rightcol You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
109 #content You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
112 #content Redefinition of margin-top
125 #footer You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
126 #footer Redefinition of margin-top
Valid CSS information

This Style sheet is for the FF opera.

14 table You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
81 #header Redefinition of margin-top
82 #header Redefinition of background-color
82 #header You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
89 #leftcol You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
100 #rightcol You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
112 #content You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
115 #content Redefinition of margin-top

I tried to follow their instruction but I can't figure out how to fix the warning and also are the warning something to be concerned about I have know clue.

Thanks
Thanks

Twey

03-02-2007, 01:41 AM

Out of those, the only one you need to worry about is:
font-family: You are encouraged to offer a generic family as a last alternativeThis means that, for example, instead of specifying font-family: Arial; you should specify font-family: Arial, sans-serif; where sans-serif is not a font, but a generic font family (one of serif, sans-serif, monospace, fantasy).

tagman2001

03-03-2007, 01:05 AM

Twey:

Thank for all your help. I final got everything validated without any warning. I will now be working on trying to figure out how to make round corner.

Thanks again,

tagman2001

Twey

03-03-2007, 01:07 AM

Note that warnings are not necessarily a problem. For example, a warning that you haven't set a background colour with your foreground colour is meaningless if it's on an inline element whose parent element has a background colour set.

That's why they're warnings, not errors: it's just to let you know that they can be a problem, not that they necessarily are in your page.