Updating old template

Hugorm · Post by **Hugorm** » Thu Nov 08, 2012 3:54 pm

Hello

I'm trying to make an old template from dotcomwebdesign.com validate and work with _XH /3.4.
It is a template with many tables inside each other and automatically resizing the important areas to fit different browser widths.
Heavy use of background allow round cornes (as images) even with images in a table cell.

Trying to validate with W3C I get five errors of which I understand the four.
The fifth error:
>> Line 22, Column 45: there is no attribute "BACKGROUND"

… colspan="2" align="right" background="./templates/cuteal2col/images/template_…

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.<<

I don't understand how to change to CSS.

Can any one help?
Any suggestions of an other template giving roundcorners and a flexible width?
(This forum template has small roundcorners - but is there a version for CMSimple?)

If you want to see a sample, you can have at look at http://www.114pc.dk/ROS - for the time beeing.

Kind regards
Hugo

cmb · Post by **cmb** » Thu Nov 08, 2012 5:19 pm

Hi Hugo,

about valid (X)HTML: it's always good, if (X)HTML is valid, as otherwise the browser has to "correct" it internally, which might lead to unexpected results in some browsers, particularly when JS is used on the site. OTOH: often it's okay, if it just works, and I guess it will in this case.

But you may nevertheless fix the validation errors. The first step is to use a slightly more current doctype: HTML 4.01 transitional. So change line 10 of the template to:

Code: Select all

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

When you check that with the validator, you'll see, that one error already is gone (the name attribute for img elements is allowed in HTML 4.01 transitional).

Regarding the validation error you've mentioned: this is caused by line 29 of your template. There's the background attribute given for a td element, what is not allowed in HTML 4.01 transitional. Change this line to:

Code: Select all

<td colspan="2" align="right" id="header_image_left"><img  src="<?=$pth['folder']['templateimages']?>template_c1_c1rolos.jpg" width="329" height="94" border="0" alt=""></td>

Than insert somewhere (if in doubt, at the bottom) into the stylesheet:

Code: Select all

#header_image_left {background-url: url(./images/template_r1_c1pic2l2.jpg)}

About round corners: there are three different ways to have them. They have different advantages and drawbacks:

with images (as in your template): that works on every (graphical) browser; the disadvantage is a slight overhead in bandwidth and perhaps processing time
with CSS: that doesn't work with some browsers still in widespread use (most notably IE8, which is currently probably the most used browser); furthermore rounded borders are a CSS3 feature, and this feature is currently a Candidate Recommendation, so several browsers do not understand the standard property (border-radius), so additional vendor specifix properties have to be used to make it work
with JS: this won't obviously not work, if JS is disabled in the browser.

There are many other templates available having round corners usings technique 1 or 2. Have a look at the template provider's sites. For the third technique there's a plugin available: Corners_XH.

Christoph

Hugorm · Post by **Hugorm** » Thu Nov 08, 2012 7:33 pm

Hi Christoph

Thank you very much for the answer.
May I ask you to have a look at the result at http://www.114pc.dk/ROS?
I know it is version 3.4, but I'll change the others allso.

I think the url in the stylessheet may be wrong as the left hand uppercorner is now missing.

Kind regards
Hugo

cmb · Post by **cmb** » Thu Nov 08, 2012 7:50 pm

Hi Hugo,

actually the URL is correct, but the name of the property has to be background-image instead of background-url

Christoph

Hugorm · Post by **Hugorm** » Thu Nov 08, 2012 8:10 pm

Hi Christoph

Got it!

Thank you.

One question:
Now I have to make each corner a line in the stylessheet with a uniqe id?
Or is it enough to make an id for each different image?

Kind regards
Hugo

cmb · Post by **cmb** » Thu Nov 08, 2012 8:32 pm

Hi Hugo,

It is not allowed to have the same ID more than once. But you can set a class for each <td>:

Code: Select all

<td colspan="2" align="right" class="header_image_left"><img  src="<?=$pth['folder']['templateimages']?>template_c1_c1rolos.jpg" width="329" height="94" border="0" alt=""></td>

and in the stylesheet:

Code: Select all

.header_image_left {background-image: url(...)}

BTW: it's probably a good idea to name the classes according to the images.

Christoph

CMSimple_XH–Forum

Updating old template

Updating old template

Re: Updating old template

Re: Updating old template

Re: Updating old template

Re: Updating old template

Re: Updating old template