|
|
A little CSS help?
|
|
|
|
Grizzled Veteran
Join Date: Oct 2002
Status:
Offline
|
|
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.
|
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
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".
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Oct 2002
Status:
Offline
|
|
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?
|
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Oct 2002
Status:
Offline
|
|
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.
|
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Why not replace the floats with relative CSS positioning?
|
|
|
|
|
|
|
|
|
Grizzled Veteran
Join Date: Oct 2002
Status:
Offline
|
|
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.
|
BayBook (13" MacBook Pro, 2.4GHz Core 2 Duo, 4GB RAM, 1TB HD) // BayPhone (iPhone 4, 32GB, black)
|
|
|
|
|
|
|
|
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|