CSS Weirdness

HTML & CSS
1

Hey there,

A client is wanting to put in a newletter archive to their site. So I created a page and added the HTML CODE from the newsletter (from constant contact) in a new page on their site.

When I load it everything looks fine.

EXCEPT in IE and CHROME (not FF) when you mouse over any of the text, it bolds. I’m not sure why this is happening. Any ideas?

http://www.alliedcomponents.com/email-archive.php

Edit to add: Here is the url of the newsletter archive in case it is helpful, but the text doesn’t bold in there

http://archive.constantcontact.com/fs075/1102083551880/archive/1105910958254.html

Thanks,
Daniel

2

It looks like you have some unclosed DIV tags. I ran your code through the validator and copied and pasted the Tidy source, and when I previewed it, the problem went away. You have about 38 errors on the page. Fix those up and see if you still have those issues.

3

I think I found the problem. At various points in your HTML, you have self-closing anchors; here’s an example at line 185:


<a name="LETTER.BLOCK9" />

But it looks like the browsers don’t like self-closing anchors, so that just turn them into anchors that enclose everything that comes after them. So you have HTML that looks like this…


<a name="LETTER.BLOCK9" />
<table>
    <!-- table stuff -->
</table>

…and Chrome is turning it into this:


<a name="LETTER.BLOCK9">
    <table>
        <!-- table stuff -->
    </table>
</a>

My guess is that you also have a CSS rule somewhere that says something like this:


a:hover { font-weight:bold }

If I’m right, then the (quick) fix would be to hunt down all of those self-closing <a> tags and actually close them:


<a name="LETTER.BLOCK9"></a>
4

Thanks sdleihssirhc,

That was it. I just removed those a tags all together. Constant Contact put those in and I don’t need them. I’ll see about those unclosed divs as well.

Thanks guys!

Daniel