Suzanne — Sat, 13 Dec 2003 02:15:08 +0000

Well, no? On any given page, the should be the title of the content of the page. There are no children for your

so they are not what you should have.

If you have a background in your anchor, you can control the background on hover in all browsers that support it. Move the text over with margins or padding (depending on whether you mind extra spans or not, you can do that as well to control the text).

i.e.

Set o' Links

Link Text

Where "span" is

or
or or whatever markup you choose.

Then in the CSS, you can set this:

#whatever a {
background-image: url(someimage.jpg);
width: 100%; /* so it's the same width as the containing element */
padding-left: 100px; /* to move the text off the background */
}

#whatever a:hover {
background-image: url(anotherimage.jpg);
width: 100%; /* so it's the same width as the containing element */
padding-left: 100px; /* to move the text off the background */
}

You're not doing anything earth-shattering here, it's been done quite a lot with much fooferah about it -- see alistapart.com for how they are handling it (the image replacement) and other ways of going about swapping images using anchors as well as other options.

Using :first-letter isn't really working (as you've said repeatedly), and trying to force it to comply with your ideas isn't going to happen. Look at what's been done before, there is quite a lot of precedent for this behaviour.

61Dynamic — Sat, 13 Dec 2003 01:44:45 +0000

The h4 headlines may be semantically meaningless but they aren't meaningless in regards to the content.

But anyway, more on why that doesn't matter later.

I use float so that it is flexible amungst various monitor resolutions. If I designed it all to fit in 800x600 then there would be a bunch of blank space. By floating them, the content dynamicaly fills the space. It's a personal preference. I've never been fond of any site that fills in only a fraction of my monitor (esp. when it's not centered).

I've styled lists before (my main menu is a list) and I've tried the list option you mentioned but it only displays the content horizontally or vertically. Couldn't get it to do what I have it doing right now.

Here's a screenshot of what it looks like on Safari (expires 24hrs). If you open it up in Moz it looks about the same.

I tried the XHTML with the links within the h4 tags but I cannot get the rollovers to work that way. Having the XHTML the way I have it now is the only way those will display properly in any browser.

I did manage to get the :first-letter pseudo-class to work, but as soon as the mouse hovers over it, it dissapears and stays gone even when the mouse is no longer over it. You'll see what I mean in Moz.

I'll tinker with it more later. I have to move on in getting this site up. If I ever figure it out I'll post it here.

Thanks for all the help

Suzanne — Wed, 10 Dec 2003 04:25:10 +0000

The headings are semantically meaningless because they don't head anything. The h4 headings, I'm speaking of. The h3 headings head a list of categories/links.

You don't need to float, you can control it all with margins and padding? Have you ever styled a list before? Do you have a screenshot of what you're seeing? I'm not sure what wrapping effect you're speaking of.

61Dynamic — Wed, 10 Dec 2003 03:25:36 +0000

Thanks, I'll give it a wirl and let ya know if it works.

Quote:
Actually, I'd probably use a list instead of the semantically meaningless headings, too. There has been a lot of work in this regard for navigation lists, so you should be able to find great results.

I wouldn't say the headlines aren't meaningless, as they are the catagory titles to the primary content of my site. How would I accomplish that and maintain the wrapping effect I have now? Setting the li tags to float?

Suzanne — Wed, 10 Dec 2003 02:31:34 +0000

Actually, I'd probably use a list instead of the semantically meaningless headings, too. There has been a lot of work in this regard for navigation lists, so you should be able to find great results.

Suzanne — Wed, 10 Dec 2003 02:27:07 +0000

<div id="content-box">
    <h3>Series</h3>
        <h4 id="preston"><a href="s-preston.php" title="Preston's Pride">Preston's Pride</a></h4>
        <h4 id="dunes"><a href="s-dunes.php" title="Dunes">Dunes</a></h4>
        <h4 id="bass"><a href="s-bass.php" title="Bass">Bass</a></h4>

    <h3>Galleries</h3>

In the CSS:

h4.preston {}
h4.dunes {}
h4.bass {}

h4:first-letter {}

h4 a {whatever undoes whatever problems you have from your default a declarations}

h4+h3 { set margins here, don't use a spacer div }

Contextual CSS *should* solve your problem better than all those spans and badly formed HTML.

:hover is only supported on links (anchors) in IE (it works right in other browsers).

If you're intending on a particular look, try to rethink the look rather than bastardize the HTML in such a way as rendering the markup meaningless and bloated.

For instance, if you used padding and background images instead, you'd have the same effect and better usability and better cross-browser consistency with the same results. Put the background images in the anchor, set the anchor to 100%, use padding, not margin.

61Dynamic — Tue, 09 Dec 2003 23:39:12 +0000

Mabye showing my XHTML will help...

 <div id="content-box">
 	<h3>Series</h3>
		<span class="preston">
				<a href="s-preston.php" title="Preston's Pride"><h4>Preston's Pride</h4></a>
		</span>
 		<span class="dunes">
				<a href="s-dunes.php" title="Dunes"><h4>Dunes</h4></a>
		</span>
		<span class="bass">
				<a href="s-bass.php" title="Bass"><h4>Bass</h4></a>
		</span>
	<div class="spacer">&nbsp;</div>
	<h3>Galleries</h3>
 

'
That's part of it anyway. I know having the links wrap around the h4 tags doesn't validate, but it is the only way it will display the layout properly cross-browser.

The reason my example is a:first-letter is because, like I said before, that's what makes it work- except for where I want it to work- in the #content-box.

If I were to make it h4:first-letter then nothing would happen because the h4 tags are links and thus would be over-written by the link decoration/coloring stuff.

One would think that by putting #content-box a:first-letter the first-letter would work only within the content box. But since it does not work in to content-box even with nothing coming before a, I would have to assume something else is wrong here. Not just the :first-letter pseudo-class on it's own but some conflic it's having with something else.

That's where I'm stumped.

Suzanne — Tue, 09 Dec 2003 18:32:33 +0000

er... in your CSS example you had a:first-letter, not h4:first-letter... ?!?

61Dynamic — Tue, 09 Dec 2003 18:04:22 +0000

Quote: the :first-letter psudo element doesn't work in IE (as far as I know)

I wouldn't doubt it. I've never had it working in IE either nor am I too concerned about it showing in IE.

So I have the :first-letter thing on h4 tags, but by making them hyperlinks, they become anchors?

So... what's the difference between an anchor and a link?

Suzanne — Tue, 09 Dec 2003 15:22:03 +0000

Headlines are. Anchors are not. Support is spotty at best.

so they are not what you should have.

or or or whatever markup you choose.

or
or or whatever markup you choose.