this is getting right up my bum! damn lists!

[bruno89]

ok take a look at this www.bruno89.co.uk/thefreeway/ im FF it looks how i want it BUT! iv cheated ! i used <br /> to get them down... but then in IE6 its not working! can anyone tell me whats rong??

you will see if u look at it in IE6

[karinne]

What if you add

Code: Select all

#list ul li {

    clear: both;

}

?

[bruno89]

i tryed that and it moved the hole thing to the bottom of the page

[bruno89]

ok i fixed it but is this right ?

Code: Select all

<div id="list">

            <ul>
                <li><img src="tutimg/timemessage/time_thumb.gif"><a href="timedmessage.html" title=" How To Put Timed Messages Into Your Web Site">Timed Messages</a><br />
This tutorial show you how to make timed messages for your website.<br />
This tutorial was created by <a href="#" title="Website Not Provided">Alex Crichton-Stuart</a></li><br />
            </ul><br />

            <ul>
                <li><img src="tutimg/alpha/alpha_thumb.gif"><a href="alphatransparency.html" title="How To Use Alpha Transparency">Alpha Transparency</a><br />
this tutorial show you how to use alpha transparensy in flash8.<br />
this tutorial was created by <a href="http://www.jacobhaug.com">Jacob Haug</a></li><br />
            </ul><br />

            <ul>    
                <li><img src="tutimg/basicheader/header_thumb.gif"><a href="basicheader.html">Basic Header</a><br />
this tutorial show you how to make a basic yet attractive header for your website using photoshop.<br />
This tutorial was created by <a href="#" title="Website Not Provided">Alex Crichton-Stuart</a></li>
            </ul>
            </div>

[stuarttodd]

Hey hey,

Getting stuff looking the same in Firefox and IE is hard.

Its all about the margins and padding tho... FF and IE represent them differently. My trick is to use all of the following which gives you complete control.

margin:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;

Setting everything to 0px should put an item in the same position in both browsers, so just adjust the settings until you get the desired position.

Hope this helps.

[bruno89]

ok thanks

[pa007]

Shouldn't li's by default stack rather than float alongside each other? Check to make sure that float left isn't applied to the uls.

You really shouldn't be using <br>'s for that. You can just use css. But the titles should be hx (whichever one comes next) which are block level and will go on their own line, so no need for a br there.

Pete.

[bruno89]

i dun get what u mean :S im thick you know that

[pa007]

I'll have a look and explain again.

One sec.

Pete.

[pa007]

It's doing strange things. That margin-left on the #conetent div is what is causing the problem with those images. Float the content div right and then remove the br's and see what happens when you float the images left. Its still doing some strange things for me but it better than it was.

Try that and tell me what happens.

Pete.

[bruno89]

ok that worked fine for that page but on the other pages it just messed them up completely.. any other ideas?

[aboutpaula]

Sorry to be kind of off topic but this idea is fantastic. Thanks for suggesting it.

Originally Posted by stuarttodd

Its all about the margins and padding tho... FF and IE represent them differently. My trick is to use all of the following which gives you complete control.

margin:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;

Setting everything to 0px should put an item in the same position in both browsers, so just adjust the settings until you get the desired position.

[MikeHopley]

Originally Posted by stuarttodd

margin:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;

You can write the same thing more efficiently as:

margin: 0;
padding: 0;