IE6 Problem...stupid browser

1840dsgn · #1 Jul 12th, 2007, 07:38

Hi all,

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

This is the HTML:

                <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 · #2 Jul 12th, 2007, 07:57

FIXED

Mike

matelot · #3 Jul 12th, 2007, 08:15

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 · #4 Jul 12th, 2007, 09:48

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!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Browser Compatibility Problem (Major)	Hyroz	Web Page Design	3	Feb 29th, 2008 11:27
IE Browser Creates Problem	sakibonline	Web Page Design	1	Aug 8th, 2007 12:57
Browser css problem	saltedm8	Web Page Design	8	Aug 17th, 2006 13:04
HTML/Browser Problem	Rconsole	Web Page Design	6	Dec 20th, 2005 23:35
Stupid little TD size problem	theotherlight	Web Page Design	2	Aug 5th, 2005 10:17

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
IE6 Problem...stupid browser