IE6 Problem...stupid browser

[1840dsgn]

Hi all,

I've got a problem I can seem to get rid of in IE6.

This is the HTML:

Code: Select all

                <div class="purple_top"> </div>
                <!--END purple_top-->
                <div class="purple_navlist">
                  <ul class="navlist">
                    <li><a href="training_intro.html">Training</a></li>
                    <li><a href="consultancy_intro.html">Consultancy</a></li>
                    <li><a href="partners.html">Partners</a></li>
                  </ul>
                </div>
                <!--END purple_navlist-->
                <div class="purple_bottom"> </div>
                <!--END purple_bottom-->
                <div class="spacer">&nbsp; </div>
                <!--END spacer-->
                <div class="blue_top"> </div>
                <!--END blue_top-->
                <div class="blue_navlist">
                  <ul class="navlist">
                    <li><a href="index.html" class="current">Home</a></li>
                    <li><a href="about_intro.html">About Us</a></li>
                    <li><a href="testimonials.html">Testimonials</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                  </ul>
                </div>
                <!--END blue_navlist-->
                <div class="blue_bottom"> </div>

Basically what happens is in between the "purple_top" and "purple_navlist" there is a 3mm gap, same with all the divs.

The CSS is:

Code: Select all

.purple_navlist    {
    width: 100%;
    background: #893394;
    margin: 0px auto;
    padding: 0px;
}

.purple_top    {
    background: url(../images/purple_top.gif) top left no-repeat #ffffff;
    height: 12px;
    width:175px;
    padding: 0px;
    margin: 0px;
}

.purple_bottom    {
    background: url(../images/purple_bottom.gif) bottom left no-repeat #ffffff;
    height: 12px;
    width:175px;
    padding: 0px;
    margin: 0px;
}

It displays fine in FF2 and IE7. The only problem is IE6. I hate that bloody browser. grrrrrr!

I've tried putting the "purple_top" and "purple_bottom" inside "purple_navlist", that didn't work. I've taken all padding and margin of img, of div nothing seems to hack it.

Any ideas?

edit: you can see the site at http://www.mesh4safety.co.uk

Mike

[1840dsgn]

FIXED

Mike

[matelot]

Most of us have had that problem at some time or other, and there are different resolutions for it.

For the benefit of newcomers to CSS and the quirkiness of IE, could you share how you resolved it, rather than just 'FIXED'?

Cheers

[1840dsgn]

Yea sure. I have just come back onto Webforumz to do just that lol!

All i had to do was change the CSS.

In the background attribute for the purple_top and purple_bottom I had to change the top and bototm around.

So instead of this:

Code: Select all

.purple_top    {
    background: url(../images/purple_top.gif) top left no-repeat #ffffff;
    height: 12px;
    width:175px;
    padding: 0px;
    margin: 0px;
}

.purple_bottom    {
    background: url(../images/purple_bottom.gif) bottom left no-repeat #ffffff;
    height: 12px;
    width:175px;
    padding: 0px;
    margin: 0px;
}

it is this:

Code: Select all

.purple_top    {
    background: url(../images/purple_top.gif) bottom left no-repeat #ffffff;
    height: 12px;
    width:175px;
    padding: 0px;
    margin: 0px;
}

.purple_bottom    {
    background: url(../images/purple_bottom.gif) top left no-repeat #ffffff;
    height: 12px;
    width:175px;
    padding: 0px;
    margin: 0px;
}

Sorted it out. Stupid browser. sooner it goes extinct the better.

While I'm here...I also fixed some unwanted space between a nested list nested like this:

Code: Select all

<ul>
   <li></li>
   <li>
      <ul>
         <li></li>
      </ul>
</ul>

There was unwanted space between the first li and the nested li.

Sorted by adding this to the css code:

li {_height: 0;}

Done!