Hi, and thanks in advance for any help I can get.
I am building a site in css, I have a links page where i want two columns of links so I have chosen to use two lists that will sit next to each other.
They are aligned ok in ie7, FF, Opera but not so good in IE5.5 IE6 you can view below.
http://www.webfroot.co.uk/design/layout
website http://www.webfroot.co.uk/design/philosophy.html

I have isolated the html here

    <h1 id="philosophyTitle">Philosophy of Garden Design</h1>
    <ul class="links">
     <li>
         <h3>The Beach Factory</h3>
            <span class="linkInfo">The place for bespoke water features in Stainless Steel, Copper and Aluminium.  From design to installation.</span>
            <a href="#">www.testemailaddress.com</a>
        </li>
        <li>
         <h3>The Beach Factory</h3>
            <span class="linkInfo">The place for bespoke water features in Stainless Steel, Copper and Aluminium.  From design to installation.</span>
            <a href="#">www.testemailaddress.com</a>
        </li>
        <li>
         <h3>The Beach Factory</h3>
            <span class="linkInfo">The place for bespoke water features in Stainless Steel, Copper and Aluminium.  From design to installation.</span>
            <a href="#">www.testemailaddress.com</a>
        </li>
 </ul>
 
        <ul class="links">
     <li>
         <h3>The Beach Factory</h3>
            <span class="linkInfo">The place for bespoke water features in Stainless Steel, Copper and Aluminium.  From design to installation.</span>
            <a href="#">www.testemailaddress.com</a>
        </li>
        <li>
         <h3>The Beach Factory</h3>
            <span class="linkInfo">The place for bespoke water features in Stainless Steel, Copper and Aluminium.  From design to installation.</span>
            <a href="#">www.testemailaddress.com</a>
        </li>
        <li>
         <h3>The Beach Factory</h3>
            <span class="linkInfo">The place for bespoke water features in Stainless Steel, Copper and Aluminium.  From design to installation.</span>
            <a href="#">www.testemailaddress.com</a>
        </li>
 </ul>
    <div class="spacer"></div>

#contactTitle {
 text-indent: -9999px;
 height: 15px;
 background-image: url(../../images/garden-design-titles/garden-design-contact.gif);
 width: 150px;
}
div.spacer {
 width: 550px;
 clear: both;
}
ul.links {
 list-style-type: none;
 width: 230px;
 margin-bottom: 20px;
 display: block;
 float: left;
 margin-left: 30px;
}
ul.links li {
 margin-bottom: 10px;
}
.linkInfo {
 display: block;
}

anyhelp would be great, or better solutions allthough i would like one for this method.
thankshttp://www.webfroot.co.uk/design/scripts/css/layout.css http://www.webfroot.co.uk/design/scripts/css/global.css

First off, I wouldn't even bother with IE 5.5, it's pretty dead. IE 6 presents some challenges though.

I can tell you, that spacer div is unnecessary, you're not working with tables.

I don't see anything wrong with the formatting in IE 6, except needing some padding on the right side.

On your 'philosophy' heading, the image is repeating, add a no-repeat on that and it will stop that.

Thanks you, I appreciate your input, but my only concern was the margin issue. I am looking for a pixel perfect solution related to having two UL lists being able to sit next to each other at the moment, and clearing the containing div if possible now i know it is bad practice to use another div to help create the desired effect.

Originally Posted by ninja2001k

Thanks you, I appreciate your input, but my only concern was the margin issue. I am looking for a pixel perfect solution related to having two UL lists being able to sit next to each other at the moment, and clearing the containing div if possible now i know it is bad practice to use another div to help create the desired effect.

yes i am sure it is possible and worthit!

I found a solution, w3c compliant and browser friendly using divs around the UL’s left and right! really simple, surely someone could have told me sooner or does this website only consist of likeminded people looking for an answer and they end up working out themselves lol =) anyhow it works also for the 1.5% of the world who uses IE 5.5 still! (but still taken into consideration by some of us) and every browser up to date. I am still using my spacer div for aesthetical reasons to clear the content wrapper, show me a better fix please, just as simple.

I am looking for a pixel perfect solution

Not gonna happen and you will drive yourself around the bend by continuing to expect that kind of 'perfection'. Every browser has tiny differences and you just have to learn to live with it -- or live on ulcer meds.

It is possible to float two UL's side by side without the need for extra divs, I've done it. If you want to kill yourself over 1.5% of the world using IE 5.5, knock yourself out. I build sites for a living and as long as it degrades gracefully on obsolete browsers, I'm not going to kill myself for 1.5%, sorry.

There are several ways to clear floats -pick one:
http://css-discuss.incutio.com/?page=ClearingSpace

LadynRed I like your input, and you are so right, I spend allot of time, too much time trying to make my life a bit harder and I shouldn't. It just bugs me though. All my stats show from sites I have developed there are minimul hits from people using 5.5IE. I think for visual, web designers should still be aware that 15% still accept 800 x 600 display. I am sure these people just may not understand they have the wrong resolution settings. But, that is easy for us to point out. From our discussion I have decided not to be too concerned about IE5.5, if you can read the content in a IE 5.5 browser with a semantic structure then that will do. It’s a simple download for the user to get a richer experience at the end of the day with an up to date browser. Any computer with a broadband connetion where by the user works with their preffered browser, the browser should be updated simultaneously, not as an option.

Any computer with a broadband connetion where by the user works with their preffered browser, the browser should be updated simultaneously, not as an option.

I'm not sure I understand you're point here, but I disagree-- what goes on your own computer should ALWAYS be an option. I don't care to be forced into anything, especially when my work depends on my system remaining stable.