HTML Forum

**Traveler001** · 01-22-2010, 11:34 PM

Hello,

I am an occasional web designer and have been making a site for a friend of mine. It is just a 5-page simple site using a template that I have been hacking. It looks great in Firefox and IE8, but I noticed a bug that shows up when people view it with IE7 and earlier IE browsers.

In the masthead, there is supposed to be a Headline, and underneath it, a Byline. For some reason in IE7 the Byline gets pushed over to the right instead of underneath the Headline. I dont understand why. I tried putting a <br> between these two lines but that didnt help.

Ok here is the link to the site: www.ccfeg.com/index1.html

Here is the code for the masthead. Maybe you can see it better this way:

Code:

<body>
<div id="wrapper">
    <div id="header-wrapper">
        <div id="header">
            <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>
            <!-- end #logo -->
        </div>
        <!-- end #header -->
        <div id="menu">
            <ul>
                <li class="first"><a href="/index1.html">Home</a></li>
                <li><a href="/aboutme.htm">About Me</a></li>
                <li><a href="/services.htm">Services</a></li>
                <li><a href="/forms.htm">Forms and Insurance</a></li>
                <li><a href="/appointment.htm">Appointment Request</a></li>
                <li><a href="/contact.htm">Contact</a></li>
            </ul>
        </div>
        <!-- end #menu -->
    </div>
    <!-- end #header-wrapper -->

Anyhow I appreciate any help you can offer. It is just the 'logo' part that has the bug.

thanks again

Traveler001

**LadynRed** · 01-24-2010, 11:47 AM

Why are you floating the h1 and h2 in the #logo div? It's not necessary based on what you appear to be doing. The h1 and h2 will, by default, be left-aligned there so there's no real need to float them.

The problem comes about because you are using the floats and you are not CLEARING the float of the h1.

**Traveler001** · 01-24-2010, 03:00 PM

I tried a few things but get bad results.

I tried closing the <div="logo"> after the </h1> and putting this in:

<div style="clear: both;"> </div>

Then putting another <div="logo"> to do the <h2>

but that didnt work.

Then I tried completely taking out the logo div and that produced bad results also. Im not sure what to do. What do you suggest?

The css for logo is:

/* Logo */

#logo {
float: left;
height: 82px;
margin: 0px auto;
padding: 10px 0px 0px;
}

#logo h1 {
float: left;
margin: 0;
padding: 0px 0px 0px 40px;
letter-spacing: -1px;
text-transform: none;
font: bold 34px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#logo h1 a {
color: #FFFFFF;
}

#logo h2 {
float: left;
padding: 0px 0px 0px 40px;
text-transform: none;
font-size: 14px;
color: #E4EEB3;
}

#logo a {
text-decoration: none;
color: #E4EEB3;

**webhostsea.com** · 01-24-2010, 04:04 PM

Quote:

Originally Posted by LadynRed

Why are you floating the h1 and h2 in the #logo div? It's not necessary based on what you appear to be doing. The h1 and h2 will, by default, be left-aligned there so there's no real need to float them.

The problem comes about because you are using the floats and you are not CLEARING the float of the h1.

You are right. I noticed the same things.

**Traveler001** · 01-24-2010, 05:00 PM

Do I just add a clear: left; in the second div tag? or in the h2 tag?

**LadynRed** · 01-27-2010, 02:16 PM

As I said in the first place, there's no need to float them at all - unless you're going to put something over to the right of the headings.

Read our stickies for more info on methods for clearing floats.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!