Help with space between floated divs

<html><head>

<style type="text/css">
li {
padding-left: 5px;
list-style: none;
border: 1px solid #000;
font-family: arial;
font-size: 12px;
height: 20px;
width: 150px;
line-height: 20px;
}

.score { border: 0px; }

.bye {background-color:#000;color: #fff; font-size: 9px;}

#r1 li {
margin-top: 20px;
}
#r2 li {
margin-top: 80px;
}
#r3 li {
margin-top: 200px;
}
#r4 li {
margin-top: 470px;
}
#r5 li {
margin-top: 1000px;
}

input {
height: 18px;
}

		</style>

</head>
<body>

<h4><a href="index.php?page=ladders&event=1"><< Back to Standings Page</a></h1><div style="float: left; position: relative; top: 0px;"><ul id="r1">
<li style="margin-top: 0px;" title="test">M Branham</li>
<li class="score" style="margin-top: 0px;">6.641 @ 104.40</li>
<li class="Bye">Bye</li>

<li class="score" style="margin-top: 0px;">&nbsp;</li>
<li class="H Gosnell">H Gosnell</li>
<li class="score" style="margin-top: 0px;">7.342 @ 101.02</li>

<li class="C Kennedy">C Kennedy</li>
<li class="score" style="margin-top: 0px;">7.271 @ 103.31</li>

<li class="R Rodgers">R Rodgers</li>
<li class="score" style="margin-top: 0px;">6.408 @ 99.92</li>

<li class="K Gipson">K Gipson</li>

<li class="score" style="margin-top: 0px;">9.326 @ 80.86</li>

<li class="Bye">Bye</li>
<li class="score" style="margin-top: 0px;">&nbsp;</li>

<li class="Bye">Bye</li>
<li class="score" style="margin-top: 0px;">&nbsp;</li>

</ul></div><div style="float: left; width: 61px;">
<img src="images/round1.jpg"><br />
<img src="images/round1.jpg"><br />
<img src="images/round1.jpg"><br />
<img src="images/round1.jpg"></div><div style="float: left; position: relative; top: 30px;">
<ul id="r2">

<li style="margin-top: 0px;" title="test">M Branham</li>
<li class="score" style="margin-top: 0px;">6.641 @ 104.40</li>

<li class="C Kennedy">C Kennedy</li>
<li class="score" style="margin-top: 0px;">7.135 @ 104.46</li>

<li class="R Rodgers">R Rodgers</li>
<li class="score" style="margin-top: 0px;">6.207 @ 115.94</li>

<li class="Bye">Bye</li>

<li class="score" style="margin-top: 0px;">&nbsp;</li>

</ul></div><div style="float: left; position: relative; top: 90px;">
<ul id="r3">
<li style="margin-top: 0px;" title="test">M Branham</li>
<li class="score" style="margin-top: 0px;">10.0 @ 0</li>

<li class="R Rodgers">R Rodgers</li>
<li class="score" style="margin-top: 0px;">6.184 @ 116.27</li>
</ul></div><div style="float: left; position: relative; top: 190px;">
<ul id="r4">
<li style="margin-top: 0px;" title="test">R Rodgers</li>

<li class="score" style="margin-top: 0px;">6.184 @ 116.27</li>
</ul></div>
</body>
</html>

There is no space between the first and second div, but a space between the second and third. Any noticeable reason of why?

I’ve tried a few ideas and haven’t come up with anything yet :frowning:

add this to your css

#r1, #r2 {
   padding:0;
}

If you use Firefox get the add-on called firebug so you can see all the styling for each element. You will see that there is default left padding pushing the list to the right.

Remove that padding and it will all line up

Also you have no doctype, though you might know that :).

and also you need to replace < with <

For firefox, what about IE now?

The space is still there =[

That is a dead link

I viewed your original code in IE after my suggestion and the gap has gone. Just need to vertically align it but it looks ok to me

Sorry, the file is back up. I’m working on the backend and having a issue that isn’t giving an error so I just left it down when I left yesterday. May be up and down today. I’m looking at it in IE7 and it’s spaced terribly.

Link is still not working :(.

Sorry, was having server problems. I’m with a new host, you can use this for now:
http://174.132.165.162/~orsca/pairings.php?event=1&class=Outlaw&#37;2010.5

Parse error: syntax error, unexpected T_CASE in /home/orsca/public_html/pairings.php on line 466

:slight_smile:

Now? lol I’ll make sure when I leave today there aren’t any errors since you seem to be showing up after I leave work for the day. I got tired of working on it yesterday and just left it with the error forgetting about the css help I asked for lol.

http://www.outlawracing.com/pairings.php?event=1&class=Outlaw&#37;2010.5
bump
All styling is inclusive so everything needed will be at that url. It is good in firefox, not so much in IE. I have IE7 installed on the computer and tested the rest with IE Tester and they appear to all be messed up just the same. shrug
Oh, I’m basically done working on the file so it won’t be going down anymore and it’s on the final host. :wink:

If you are still open for fixing of the page then I’d be glad to help (I just don’t want to spend time debugging it only to find out it won’t be updated on the page ;))

Off Topic:

I must have missed this thread before…? Sorry :slight_smile:

No, I mean it will be fixed, and I need it fixed. I meant that I won’t be doing anything on the backend that would cause it to be down like before. Sorry for wording that awkward!

You don’t have a doctype on your page, add this before <html> (I mentioned this before)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

Now it’s a level playing field, now just remove hte defaults on elements and it should be good to go (you will have to tweak your other settings you have to get it matching up now, that’s little work and I know you can do that yourself :slight_smile:

*{margin:0;padding:0;}

Thank you sir :wink:

You’re welcome :). Glad it worked :wink: (and sorry it took so long to get this simple issue sorted out)