CSS question / TD tags ?

carpeperdiem · #1 08-24-2006, 10:52 AM

Greetings -- would a CSS expert help me sort this one out?

I have generaly used valign and align tags, within a TD, such as:

<TD valign="top" align="right">

AND - this always supercedes any alignment class in the CSS file.

I recently installed a new skin (for 4.1.3), and this skin has a "general settings" section, which includes a TD class:

Code:

/*
	General styles
*/
--snip--
TD { vertical-align: top; }

"vertical-align" and "valign" do not seem to be the same...

By having a top-level TD class that is vertical-align: top - this kills all valign="bottom" local TD tags. I tried using a local TD tag, such as <TD vertical-align="bottom"> but that did not supercede the global TD tag.

My fix was to make a new class:

Code:

.td-valign-bottom { vertical-align: bottom; }

And assign the class to the TD (as opposed to simply using a local tag modifier). Is there a better way?

If this is "advanced W3C XHTML 1.0 compliance" feature? -- I guess I need to learn a bit more... Is it a BAD THING to use local modifiers to css classes?

Thanks for your comments on this.

Jeremy

Zaja · #2 08-24-2006, 12:59 PM

Hi Jeremy,

there is no VALIGN in CSS, use the 'vertical-align' CSS property.

If you need to align something vertically in certain class just add 'vertical-align' property, like this:

Code:

.VertMenuTitle {
   padding: 2px;
   background: #FF8600;
   color: #330000;
   font-weight: bold;
   vertical-align:bottom;
}

or apply the vertical-align property in table cell, like this:

Code:

<td style="vertical-align:bottom;">

Keep in mind that vertical-align property cannot be used to align something vertically in div's.

carpeperdiem · #3 08-24-2006, 04:03 PM

Perfect.

Goran, thanks for clarifying this. So my new favorite code snippet is: style="vertical-align:bottom"

Thanks!

jr

carpeperdiem · #4 08-26-2006, 02:40 PM

Goran,

I am finding more than a few <td valign="top"> tags in some of the .tpl files in a purchased 4.1 skin, including product.tpl -- so I am simply replacing them with style tags. Just thought I'd share...

While we're talking new ways to format tags, since I haven't upgraded my html editor in some time (GolLive CS1 is my latest) - this may be a new thing, but I'm starting to see tags such as:

 
or


these flavors are new to me... the web searches indicate these are closing tags... but I was under the impressiong a or could live out on its own. Can someone enlighten me on this, please? Thanks!

Jeremy

balinor · #5 08-26-2006, 06:58 PM

All depends on what the doctype of the site is. If you are using xhtml transitional, those are required to make it comply. Not necessary with html4.1 transitional.

carpeperdiem · #6 08-26-2006, 07:28 PM

from my 4.1.3's /skin1/home.tpl

Code:

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

What does this mean? "transitional"? I guess I'm living in the dark ages.

Does this mean certain tags in some mods provided by 3rd parties may be out of date? Do you know a utility that I can run the site through and have the tags checked for compatibility?

thanks...

Jeremy

Zaja · #7 08-27-2006, 01:02 AM

Quote:

Originally Posted by carpeperdiem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What does this mean? "transitional"?

Check this page: http://www-128.ibm.com/developerworks/library/w-xhtml.html

balinor · #8 08-27-2006, 03:52 AM

You can validate your site here:

http://validator.w3.org/detailed.html

minorgod · #9 12-11-2006, 01:30 PM

Quote:

Originally Posted by carpeperdiem

from my 4.1.3's /skin1/home.tpl

Code:

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

What does this mean? "transitional"? I guess I'm living in the dark ages.

Does this mean certain tags in some mods provided by 3rd parties may be out of date? Do you know a utility that I can run the site through and have the tags checked for compatibility?

thanks...

Jeremy

Using the Transitional doctype will tell your browser to render the XHTML/CSS in "quirks mode" which fixes many of the browser bugs that keep XHTML/CSS pages from displaying consistently on some browsers and I think it also allows some tags to validate that would not otherwise validate. Using the "Strict" doctype will force your browser to use strict XHTML/CSS standards to render the page and is generally more difficult (but not impossible) to use for multicolumn layouts.

I know BOOMER (CartLabs) is working on an XHTML template for x-cart 4.x that is supposed to be released tomorrow (December 12), but I don't know if it will be strict or transitional. If it's strict, I am considering buying it to use as a starting point for my own XHTML 1.0 Strict template.

FYI, the latest X-Cart release (v4.1.4) is XHTML 1.0 Transitional compliant and I have checked the validation to make sure it validates and it does, but it is not a "tableless" layout. Standards compliance and "tableless" layout are two different things, but they are usually lumped together in discussions on the subject. It is possible (though not advisable) to build a fully XHTML Strict layout using tables, but that sort of defeats the purpose of XHTML, which is to provide proper semantic structure to HTML documents.

Regading your question about tags such as " ", this is the proper XHTML format for any tags that do not have an explicit closing tag (meaning any tags that do not have a separate closing tag). So if you're converting from HTML to XHTML, you will need to find all your ,<img> and <hr> tags and add the closing slash to them. I can't think of any other tags that need this, but there may be some others.

Hope that helps.