Bringing up-to-date an archaic table'd design

[zonkd]

Almost every page of the website of the Independent newspaper (co.uk) has a panel called Editor's Choice. They use an archaic table to carry the mixture of pix and ads for stories.

The pix are neatly on the left side and the text wraps one line above, to the right and below.

It is an attractive design, and effective, and I'd like to copy it.

How would a Forum expert manage that in css please?

[Longhaired Genius]

That would be very easy. The markup is not so bad as it stands. I would make the headings actual html headings (h1 or h2 or whatever), float the pictures, wrap the whole thing in a div of the required width rather than the current table and then style the elements as required. Just dive in, you shouldn't have too much difficulty.

[zonkd]

Thanks very much, LHG. I was trying it that way and found the pix stuck to each other. I assumed that meant it would have to be done differently.

But if you think that's the way, I'll go back and persist. All the best

[jetboy_70]

I don't think it's that straightforward, at least if you want to maintain some level of semantic markup. The main issue is that each block of heading/copy/picture is a link. So each:

<h2>Heading for first story</h2>
<img src = "/path-to/picture-1.gif" />
<p>Copy for first story</p>

needs to be made into a link. Choices seem to be:

. Put an <a href> inside each of the three elements. This means duplicating the link, and you'll still have gaps between them.

. Wrap an <a href> around the whole lot. Except an inline <a> element around block level elements will fail validation. It's not correct HTML.

. Use inline elements to replace the <h2> and <p> elements. This is what The Independent has done, intentionally or unintentionally. Say bye bye to semantics and any search engine weighting for your headings:

<a class="story" href="/path-to-story-2/">
<span class="story-h2">Heading for first story</span>
<img src = "/path-to/picture-2.gif" />
<span class="story-p">Copy for first story</span>
</a>

There is a fourth way, but it needs IE conditionals to make it work cross-browser. I'll post it up when I've done a bit of testing.

In the meantime, does anyone else have a better way to achieve the same result?

[edited by: jetboy_70 at 2:05 pm (utc) on Oct. 20, 2004]

[Longhaired Genius]

Perhaps you need a clear: both on the headings to firmly separate the sections, 'tho I'm not sure if this is really necessary. (I'm a bit busy at the moment to actually try it out.)

[Longhaired Genius]

I don't think it can be taken as read that, "The main issue is that each block of heading/copy/picture is a link". I think the main issue is the layout. I would link just the headline and maybe the picture, but it wouldn't be out of the question to link heading, picture and copy separately.

[jetboy_70]

Okay. I'll clarify. The main issue *preventing the use of straightforward semantic markup* is that each block of heading/copy/picture is a link.

[zonkd]

For a number of reasons, I only want one link. So I'll take two appropriate words and link them for each story. Does that improve the chances, do you think?

[jetboy_70]

Damn. There is no fourth way ... unless you're in a position to specify the height of the containing element. IE bugs strike again.

Okay, if you only want a couple of words as links, try:

<div id="editors-choice">

<h1>Editor's Choice</h1>

<div class="story">
<h2>Heading for first story</h2>
<img src = "/path-to/picture-1.gif" />
<p>Copy for <a href="/path-to-story-1/">first story ...</a></p>
</div><!-- story -->

<div class="story">
<h2>Heading for second story</h2>
<img src = "/path-to/picture-2.gif" />
<p>Copy for <a href="/path-to-story-2/">second story ...</a></p>
</div><!-- story -->

<div class="story">
<h2>Heading for third story</h2>
<img src = "/path-to/picture-3.gif" />
<p>Copy for <a href="/path-to-story-23/">third story ...</a></p>
</div><!-- story -->

</div>

with CSS like this:

html * {
margin: 0;
padding: 0;
}

#editors-choice {
width: 180px;
background: #CCC;
position: relative;
}

#editors-choice h1 {
font-size: 18px;
margin-bottom: 20px;
}

.story {
width: 100%;
margin-bottom: 20px;
position: relative;
}

.story h2 {
color: #000;
font-size: 12px;
margin-bottom: 5px;
}

.story img {
float: left;
width: 60px;
height: 60px;
margin: 0 10px 10px 0;
}

.story p {
color: #444;
font-size: 10px;
}

[zonkd]

Jetboy_70

Looks good. I've been manipulating it about to fit the requirements and it finishes with really just one problem. The gap between <h2> and <p> for the brief copy for the story.

The h2 head should sit flush on top of the small image and the copy. Even if I set the bottom margin to minus 10, there is still a gap. Any thoughts here?

Very grateful for the trouble you have gone to. Cheers

[jetboy_70]

I'd take a look at line-height on the <h2> element for starters.

[zonkd]

No, nothing there - but of course I have been through all the normal possibilities. But when I get another chance, I'll search further. Many thanks

[SuzyUK]

jetboy has it..

I (personal choice) in this case would use 2 x links, the heading (bold text) is one link, the copy and image as another, but only becuase I don't actually like the use of non-fluid <br>'s These pre-suppose you know the width of your line as you're typing it!

but otherwise their code is fine.. ish ;) ~ I don't like classes named "red", "grey" or "black12px" either.. but that's another thread.. hee he

e.g. of their code...
<tr><td align="left" valign="top" bgcolor="F5F5F5">
<p class="red" id="sectionheadline">Editor's Choice</p>

<p><a href="#" class="black12px">
<b class="grey">Two tough cookies</b><br>
<img src="image.gif" width="40" height="44" align="left" border="0" vspace="2">
Hobnobbing <br>with the <br>leaders' wives</a></p>

<p><a href="#" class="black12px">
<b class="grey">Next heading</b><br>
<img src="image.gif" width="40" height="44" align="left" border="0" vspace="2">
Hobnobbing <br>with the <br>leaders' wives</a></p>

etc....

[zonkd]

Hi SuzyUK

If they set the width of the panel and the margins, there wouldn't be a need for those <br>s, surely.(?) Sometimes you might use a <br> for aesthetic reasons, but aren't those there because the width hasn't been set in css?

Or are you saying it is because the text is a link?

I find it amazing that so many of these big sites never get out of bottom gear with css - here and across the pond.

Many thanks for your advice. You have me thinking about changing the links now to include headings et al. Cheers

[jetboy_70]

Okay, if you follow Suzy's (and Longhaired Genius's)advice, change each story section to be more like:

<div class="story">
<h2><a href="/path-to-story-1/">Heading for first story</a></h2>
<p><a href="/path-to-story-1/"><img src = "/path-to/picture-1.gif" />Copy for first story ...</a></p>
</div><!-- story -->

You're adding another <A> inside the <H2> element, moving the <IMG> inside the <P> element, and expanding the original <A> to cover all your copy and your thumbnail.

You can alter the vertical position of the image in relation to the copy by adjusting its top margin, and adjust the position of the *image and the copy* in relation to the <H2> by adjusting the top margin of the <P> element.

I've taken a look at the original code I posted, and there is no gap between the <H2> and image in IE or Firefox if the bottom margin on the <H2> is removed. Putting in a negative value on either the <H2>'s bottom margin or the image's top margin overlaps the elements (as would be expected). So whatever's causing the gap it's somewhere else in your code - most likely a margin or padding setting.

While I was there, add:

clear: both;

to the .story h2 CSS. This will force each story to clear the floated image of the one above. This is only an issue if there's not enough copy to wrap under the thumbnail image.

Also add:

<div class="clear">&nbsp;</div>

after the last story section, and the corresponding CSS:

.clear {
height: 0;
font-size: 1px;
line-height: 0;
clear: both;
}

Again, if there's not enough copy on the last story, the last thumbnail will poke through the bottom of the containing 'editors-choice' div. If you're only previewing in IE you won't have picked up on this being a problem, but it will be in a standards compliant browser.

Edit: And add border: 0; to the .story img CSS now that the image is a link.

[jetboy_70]

The 'fourth way' I was working on was:

<div class="story">
<h2>Heading for third story</h2>
<img src = "/path-to/picture-3.gif" />
<p>Copy for third story ...</p>
<a href="/path-to-story-3/"><span>anchor text</span></a>
</div><!-- story -->

If you set the following CSS for the <a> element:

a {
height: 100%
width: 100%
top: 0;
left: 0;
position: absolute;
display: block;
}

it fills the story div without displacing any of the contents, and turns the whole div into a link. Hide the anchor text (which of course is only there for accessibility reasons and not search engine spamming at all m'lud) with:

a span {
display: none;
}

and we're game on! Except in IE, which insists that the text and picture sit on top of the link, regardless of z-index ...

* Warning: Thinking outside of the box starts here *

Well, I know that the link is really on top even if IE doesn't ... what happens if I give the link a background colour? It covers all the contents up, even in IE! And it seems that giving the link a background colour fixes IE's behaviour problems.

What if I use background: transparent;? No, that doesn't work. A transparent gif? Yes, but you get that annoying hourglass flicker in IE when you mouse over the link. How about a broken link to a background image that doesn't exist? No. Same flicker. Grrr.

How about using a conditional comment to set the background colour only for IE, and then use an IE-specific opacity filter to make the whole lot transparent?! It works!

But ... and it's a big but ... it only works in IE if the height of the containing div is set. The <a> element doesn't expand its height to fill the space otherwise. And there seems to be an annoying intermittent bug where the link expands beyond its boundaries when you refresh the page, but only sometimes.

I'm out of my depth here, but if anyone thinks they can get this working in IE (particularly without knowing the height of the containing element) then by all means take the ball and run with it ...

[zonkd]

Hi Jetboy_70

Yes, you were right about the gap under the h2 line, and I had adjusted that with the margin settings. There was no criticism, by the way. It's a great little job, and I am grateful.

I'll take away the next suggestions and ponder on them over the weekend. It's great of you to go such trouble. Thanks vey much. Cheers

[zonkd]

Hi Jetboy
Bit busy so sorry to be so long getting back again. Just to let you know that I've borrowed some of this and it is working well. (Jet)Boy, you certainly know your stuff. Very grateful for the trouble you have gone to.
Cheers

[jetboy_70]

Cool. Glad it's working out for you. Truth be told, I learned a lot of what I know from SuzyUK! I'm sure I'm not the only one here either ... ;)

[kiwibrit]

zonkd wrote: "They use an archaic table to carry the mixture of pix and ads for stories. "

I really am curious. .....

[edit reason] : discussion split to Div or Nested Table... [webmasterworld.com]

[edited by: SuzyUK at 1:04 am (utc) on Nov. 4, 2004]
[edit reason] split to new discussion [/edit]