SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with space between floated divs

    Code:
    <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?

    http://outlawracing.com/pairings.php...=Real%20Street

    I've tried a few ideas and haven't come up with anything yet

  2. #2
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    add this to your css

    Code Cpp:
    #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

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also you have no doctype, though you might know that .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and also you need to replace < with &lt;

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AdRock952 View Post
    add this to your css

    Code Cpp:
    #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
    For firefox, what about IE now?
    http://www.outlawracing.com/pairings...=Outlaw%2010.5
    The space is still there =[

  6. #6
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Link is still not working .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, was having server problems. I'm with a new host, you can use this for now:
    http://174.132.165.162/~orsca/pairin...law&#37;2010.5

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Parse error: syntax error, unexpected T_CASE in /home/orsca/public_html/pairings.php on line 466
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.outlawracing.com/pairings...law&#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.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You don't have a doctype on your page, add this before <html> (I mentioned this before)
    Code:
    <!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
    Code:
    *{margin:0;padding:0;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sir

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . Glad it worked (and sorry it took so long to get this simple issue sorted out)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •