Need help debugging one line of code so it works as intended in IE 7

[Traveler001]

Hello

I am writing for advice. I am in the middle of finishing this website and there is one crazy bug that ruins the layout in IE 7 of the text in the masthead of all the pages of the site. It looks fine in later versions of IE and in Firefox, just as I intend, but I am wondering what I need to debug to make it look right.

The link to the site is http:www.ccfeg.com/index1.html

In the masthead, there is a title to the site, and a byline. For some reason in IE7, the byline is off to the right of the Headline, but what I want is the byline underneath the Headline. I thought just putting a simple <br> between the two lines would do it but it doesnt. It just drops the byline down one line.

Here is the code:


<div id="logo">

<h1><a href="/index1.html">Counseling Center for Emotional Growth</a></h1>
<h2><b>Georgette Le Page, M. S., L.C.P.C., Licensed Clinical Professional
Counselor<br>
Psychotherapy with Individuals, Couples, Families and Adolescents</b></h2>
</div>

I admit that I am a hack. So I hope that you can help me figure this one out.

Thanks very much!

[djlebarron]

I don't have time to look through the style code, but my best guess is that IE7 is putting it's extra "default" margin or padding on the div, <h?> or text in it's processing of your code. That will leave the <h2></h2> content less space than it needs. Instead of overlapping (it doesn't work that way), IE7 will push it to the next default position in the container, which is to the right side of the Headline.

Once you've found the culprit, and calculated how many px to take away, this (with your modification of the style in place of my text in caps) would go in the head of your document.

<!--[if ie 7]>...THE CSS STYLE YOU NEED TO APPLY TO THE "PROBLEM OBJECT" IN IE7 TO MAKE THAT OBJECT FIT AND DISPLAY THE SAME AS IT DOES IN THE OTHER BROWSERS/VERSIONS...<![endif]--> As in: #logo {padding: 0px;} or even #logo {padding: -1px;}

This needs to be placed in the head of your document AFTER your stylesheet link. We all deal with these "bugs". If you're in development for the long run, it pays to make a study of the differences between browsers and why they do what they do. It works to treat it as a whole separate subject, and approach it the same way you approached learning html, php, javascript, etc.

Or...

Try setting the padding to 0px; in the body style.
Here's that logic in the extreme: http://meyerweb.com/eric/tools/css/reset/

EDIT: After visually looking comparing where my curser turns into a hand below the headline in IE7 and FF, IE7 might even be putting an extra px of height between your headline text and the bottom of your <a> anchor area. Or it could be any combination of that and the above.