Nested links using display:block; - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Nested links using display:block;

Is this legitimate CSS?

HarryM

1:22 pm on Jul 25, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Is this is legitimate use of CSS? The Doctype is XHTML 1.0 Transitional, so browsers will be in quirks mode.

The idea is to present what appears to be two links to the user, but is in fact only one, leading to the same page.

It validates with W3C, works OK in IE7 and Firefox 2.0.0.5, but Opera 9.21 shows the links as underlined. I haven't been able to test it with legacy browsers as I lost all mine with a PC rebuild.

The HTML contains two examples, the last is an extreme case just for testing the principle.

HTML

<!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" xml:lang="en" lang="en">

<a href="/">
<img src="images/logo.gif" class="logogif" alt="Home" />
<span class="link">Main Index</span>
</a>

<a href="page.php">
<span class="head">Theme</span>
<span class="link">Index</span>
<span class="head">Sub Theme</span>
<span class="link">Introduction</span>
</a>

CSS

.link {
display:block;
font:8pt "Arial",sans-serif;
text-decoration:none;
margin:1px 1px 2px 1px;
padding:0 2px 0 4px;
color:#000000;
background-color:#fefcf2;
border:1px solid #000000;
}

.link:hover {
color:#ffffff;
background-color:#ff000a;
}

.head {
display:block;
font:bold 8pt "Arial",sans-serif;
margin-bottom:4px;
padding:0 0 1px 3px;
color:#ffffff;
background-color:#1e0a0c;
}

.logogif {
width:120px;
height:40px;
}

HarryM

4:49 pm on Jul 25, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Opera 9.21 shows the links correctly if I add a specific style to the <a> tag.

.no-ul {
text-decoration:none;
}

HTML

<a class="no-ul" href="/">
<img src="images/logo.gif" class="logogif" alt="Home" />
<span class="link">Main Index</span>
</a>

<a class="no-ul" href="page.php">
<span class="head">Theme</span>
<span class="link">Index</span>
<span class="head">Sub Theme</span>
<span class="link">Introduction</span>
</a>

SuzyUK

7:22 pm on Jul 25, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Yes it's perfectly fine, the elements themselves are all inline elements so they can be nested, You are only using CSS to suggest a different way of displaying them, which is the right thing to do.. display: block; does not make an HTML element into a block level element it just makes it display like one ;)

The Doctype is XHTML 1.0 Transitional, so browsers will be in quirks mode.

No, the Doctype in the code you gave triggers "Standards Compliance Mode", and browsers should render it so, (providing there's no whitespace above it for IE).

Just because the word "Strict" is not in the Doctype does not mean it's not a Strict Compliant one..

If the URL portion was missing: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" then it would no longer be a FULL Doctype and would become a back compatible (or Quirks Mode) one.. see encyclo's post for more info [webmasterworld.com],

quick and dirty summary:

Half versions are quirky,
Full versions with XML prolog or whitespace before it are Quirky in IE, Strict in others
Full versions without prolog or whitespace are Strict for all

HarryM

10:11 am on Jul 26, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Thanks SusyUK,

There have been so many threads about the inadvisability of using XHTML that I must have been confused. I'll have to read them again. :(

HarryM

10:37 am on Jul 26, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I have just upgraded to Opera 9.22, and this still shows the links as underlined when using the original HTML and CSS. Unfortunately I lost all my legacy browsers when I did a PC upgrade, so testing is limited. Is there anything that you can spot that may give other browsers problems? (I ignore IE4 and NS4.)

On the XHTML question. I use: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

My understanding is that it's the "text/html" that throws browsers into quirks mode.

[edited by: HarryM at 11:13 am (utc) on July 26, 2007]