[megasad]

I've just completed a slight redesign of my comic book library, even managed to get rid of the 1px gap beneath the navigation tabs in Firefox in Windows (though Safari in Windows remains fudged)...

Anyway, all is valid and good in every browser except for one thing. The "Enlarge Cover" text beneath a cover image is left-aligned in Internet Explorer 7 where it is meant to be center-aligned.

Here is an example: Chuck Dugan is AWOL - megasad.com/comics

Does anyone know why this might be?

Thanks in advance for any help.

[andi*pandi]

odd, when I turned on the IE7 developer tool, "enlarge cover" centered itself.

I would try not nesting the text in the same paragraph/link as the image. Or consider it an "acceptable degradation".

[megasad]

I tested it in IE6 earlier and have the same problem. As I want the cover and text to be the same link, I guess I'll just have to accept the left-alignedness. It's more confusing than anything else; why does IE do this and no other browser?

[besson3c]

Why is everything wrapped in a table with manually defined attributes? I'm not saying this is your particular problem here, but it seems unnecessary. If you are interested in simplifying your code base, you might solve this particular problem as a bonus

[megasad]

Those last vestigial bits of table-for-layout are because I wasn't happy with how the page behaved at small screen sizes when I used floats. Same reason that the breadcrumbs and the search bar at the very top are in one too. As I am applying the centering to a td, I suppose that could be the problem, but when I've tried applying it to the paragraph around the link, that hasn't helped at all.

[besson3c]

Why not replace the floats with relative CSS positioning?

[megasad]

Relative positioning is nasty; when you make text bigger in the browser, things start overlaying on top of each other. That always makes me sad when I see it on other websites, so I do not use it.

...

Then I did some Googling and realised I was probably thinking of position:absolute, which is what I used long ago, which is the one where things overlap. I am foolish busy for the next couple of weeks, but then I shall look at this. Thanks.

In the meanwhile, does anyone know a simple change I could make to my CSS to make the "Enlarge Cover" text centred? I can't help but think that if I just knew which element to apply the centering to, all would be well.

[andi*pandi]

proper css depends on good markup. You've nested an image and text in one paragraph tag--as I said before, I think breaking the enlarge image part out would help.

you probably need to add centering to the a element.

if your floats break when you increase font size, it is perhaps due to improper font sizing technique. Check out alistapart, search for css text size and there's a great article.

[besson3c]

text-align: center

will center align text within a block. Relative positioning works relative to its parent div block. It works fine for simple two/three column layouts. Tables come in handy for putting actual content into a table, but the vast majority of the time you can count on not using any tables for layout.