SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page elements not lining up correctly

    I've divided this page up into 3 sections http://homepage.ntlworld.com/julian....Addresses.html - the first starting "Council Members 2003 -2004, the second starting with "Members of Council" and the third "Ex-Officio members". Immediately below these lines, the first line of the first two addresses on the left and right sides of the page respectively should line up with each other. They only do this in IE Mac, IE5.5 and IE6 PC. As far as I can see it doesn't line up in IE5 PC and Netscape in Mac

    I have used 2 div's, one for each column. Within each of these div's, I have nested 3 further div's and these correspond to the 3 sections mentioned above. To separate these sections, I have used 'margin-top'.

    I'd very much appreciate any help, as I have no idea what to do!
    Philippa

    body { background-color: #9cf;
    font-size: 80%;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px }

    #header{ margin: 0px 0px 0px 2%;
    padding: 15px 0 0 }



    /* Below is the div wrapper for the contents on the left hand side. This encloses the 3 left div's below it */

    #left { list-style-type: none;
    margin: 10px 1% 20px 2%;
    padding: 0px;
    position: absolute; top: 140px; left: 20px; width: 45% }



    ul#topleft { list-style-type: none;
    margin: 0px;
    padding: 0px }
    ul#midleft { list-style-type: none;
    margin: 50px 0px 0px;
    padding: 0px }
    ul#bottleft { list-style-type: none;
    margin: 50px 0px 0px;
    padding: 0px }


    /* Below is the div wrapper for the contents on the right hand side. This encloses the 3 right div's below it */

    #right { list-style-type: none;
    margin: 10px 1% 20px 10%;
    padding: 0px;
    position: absolute; top: 140px; left: 350px }


    ul#topright { list-style-type: none;
    margin: 0px;
    padding: 0px }
    ul#midright { list-style-type: none;
    margin: 150px 0px 0px;
    padding: 0px }
    ul#bottright { list-style-type: none; margin: 75px 0px 0px; padding: 0px }

    .title { position: absolute; top: 60px; left: 150px }

    .bold { font-weight: bold; font-size: 100% }

    .italic { font-style: italic }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd be inclined to simplify it and just float the items left and right and then use clear to start on a new line. Then you don't have to bother with trying to place everything absolutely.

    Also use classes in your lists as all those <p> and <br> in the middle of your lists are unsightly and invalid.

    Heres a quick (valid) example using floats. You can adjust the psoitioning to suit but should give you the idea and uses about half as much css as your version.
    [code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta name="generator" content="Adobe GoLive 6">
    <title>Council Members</title>
    <style type="text/css" media="screen">
    body { background-color: #9cf;
    font-size: 80%;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px }

    #header{ margin: 0px 0px 0px 2%;
    padding: 15px 0 0 }
    ul#topleft, ul#midleft,ul#bottleft, ul#topright,ul#midright, ul#bottright { list-style-type: none;
    margin: 0 0 50px 5%;
    padding: 0px;
    float:left;
    width:40%;
    }
    ul#topright,ul#midright, ul#bottright {float:right}

    h3.title { margin-left: 15%;clear:both }
    .name { font-weight: bold; font-size: 100%;margin-top:20px; }
    .italic { font-style: italic;margin-bottom:15px; }
    .spacer {margin-bottom:15px}
    </style>
    </head>
    <body>
    <div id="header">
    <p><img src="CSMS-logo_on_99CCFF.jpg" alt="" height="100" width="117" border="0">
    <h3 class="title">COUNCIL MEMBERS 2003-2004</h3>
    </div>
    <ul id="topleft">
    <li class="name">PRESIDENT</li>
    <li>Mr Richard Burt</li>
    <li>Chelsea Technologies Group</li>
    <li>55 Central Avenue</li>
    <li>West Molesey</li>
    <li class="spacer">Surrey KT8 2QZ</li>
    <li>email:RBurt@chelsea.co.uk</li>
    <li class="name">PRESIDENT ELECT</li>
    <li>Mrs Nichola Lane</li>
    <li>PO Box 2341</li>
    <li>Weymouth</li>
    <li class="spacer">Dorset DT4 9YX</li>


    <li>email:

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you very much! I'll take a look at it now and get back to you later.

    Regards,
    Philippa

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Arghhhh what's happened to my post???

    3/4 of it is missing!!

    I've deleted my local version as well - I'll have to do it all again.

    You won't be able to work it out from the above!

    I'll get back to you

    Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here it is again:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    <meta name="generator" content="Adobe GoLive 6">
    <title>Council Members</title>
    <style type="text/css" media="screen">
    body { background-color: #9cf; 
    font-size: 80%; 
    font-family: Verdana, Helvetica, Arial, sans-serif; 
    margin: 0px; 
    padding: 0px }
    #header{ margin: 0px 0px 0px 2%; 
    padding: 15px 0 0 }
    ul#topleft, ul#midleft,ul#bottleft, ul#topright,ul#midright, ul#bottright { list-style-type: none; 
    margin: 0 0 50px 5%; 
    padding: 0px;
    float:left;
    width:40%;
    }
    ul#topright,ul#midright, ul#bottright {float:right}
    h3.title { margin-left: 15%;clear:both }
    .name { font-weight: bold; font-size: 100%;margin-top:20px; }
    .italic { font-style: italic;margin-bottom:15px; }
    .spacer {margin-bottom:15px}
    </style>
    </head>
    <body>
    <div id="header"> 
      <p><img src="CSMS-logo_on_99CCFF.jpg" alt="" height="100" width="117" border="0"> 
      <h3 class="title">COUNCIL MEMBERS 2003-2004</h3>
    </div>
    <ul id="topleft">
      <li class="name">PRESIDENT</li>
      <li>Mr Richard Burt</li>
      <li>Chelsea Technologies Group</li>
      <li>55 Central Avenue</li>
      <li>West Molesey</li>
      <li class="spacer">Surrey KT8 2QZ</li>
      <li>email:RBurt@chelsea.co.uk</li>
      
      <li class="name">PRESIDENT ELECT</li>
      <li>Mrs Nichola Lane</li>
      <li>PO Box 2341</li>
      <li>Weymouth</li>
      <li class="spacer">Dorset DT4 9YX</li>
      <li>email: nichola@timbo.ltd.uk</li>
      
      <li class="name">TREASURER</li>
      <li>Dr Sarah Cornell</li>
      <li>School of Environmental Sciences</li>
      <li>University of East Anglia</li>
      <li class="spacer">Norwich NR4 7TJ</li>
      <li>email: s.cornell@uea.ac.uk</li>
    </ul>
    <ul id="topright">
      <li class="name">SECRETARY</li>
      <li>Ms Jane Read</li>
      <li>Room 256/21</li>
      <li>Southampton Oceanography Centre</li>
      <li>University of Southampton</li>
      <li>Waterfront Campus</li>
      <li>European Way</li>
      <li class="spacer">Southampton SO14 3ZH</li>
      <li>email: J.Read@soc.soton.ac.uk</li>
      <li class="name">EXECUTIVE SECRETARY & MEMBERSHIP</li>
      <li>Mrs Jennifer Jones</li>
      <li>Room 251/20</li>
      <li>Southampton Oceanography Centre</li>
      <li>University of Southampton</li>
      <li>Waterfront Campus</li>
      <li>European Way</li>
      <li class="spacer">Southampton SO14 3ZH</li>
      <li>email: jxj@soc.soton.ac.uk</li>
    </ul>
      
       <h3 class="title">MEMBERS OF COUNCIL</h3>
    <ul id="midleft">
      <li class="name">Dr Eric Achterberg</li>
      <li>Dept of Environmental Sciences</li>
      <li>University of Plymouth</li>
      <li class="spacer">Plymouth PL4 8AA</li>
      <li>email: eachterberg@plymouth.ac.uk</li>
      <li class="italic">(responsible for travel awards and meetings funding)</li>
      
      <li class="name">Dr Julian Priddle</li>
      <li>Science Training & Education Partnership</li>
      <li>Scolt House</li>
      <li>59 High Street</li>
      <li class="spacer">Barrington CB2 5QX</li>
      <li>email: julian.priddle@ntlworld.com</li>
      <li class="italic">(responsible for communications)</li>
      
      <li class="name">Paul Ridout</li>
      <li>OSIL</li>
      <li>South Downs House</li>
      <li>Station Road</li>
      <li class="spacer">Petersfield GU32 3ET</li>
      <li>email: paul.ridout@osil.co.uk</li>
      
      <li class="name">Dr Jonathan Sharples</li>
      <li>Proudman Oceanographic Laboratory</li>
      <li>Bidston Observatory</li>
      <li class="spacer">Birkenhead CH43 7RA</li>
      <li>email: j.sharples@pol.ac.uk</li>
      <li class="name">Dr William Wilson</li>
      <li>The Marine Biological Association</li>
      <li>The Laboratory</li>
      <li>Citadel Hill 
      <li class="spacer">Plymouth PL1 2PB</li>
      <li>email: whw@mba.ac.uk</li>
    </ul>
    <ul id="midright">
      <li class="name">Dr Hilary Kennedy</li>
      <li>School of Ocean Sciences</li>
      <li>University of Wales, Bangor</li>
      <li>Menai Bridge</li>
      <li class="spacer">Anglesey LL59 5EY</li>
      <li>email: h.a.kennedy@bangor.ac.uk</li>
      <li class="italic">(responsible for meetings and special interest groups)</li>
      
      <li class="name">Dr Duncan Purdie</li>
      <li>Room 566/18</li>
      <li>School of Ocean and Earth Science</li>
      <li>Southampton Oceanography Centre</li>
      <li>University of Southampton</li>
      <li>Waterfront Campus</li>
      <li>European Way</li>
      <li class="spacer">Southampton SO14 3ZH</li>
      <li>email: dap1@soc.soton.ac.uk</li>
      <li class="italic">(responsible for education, and jointly with the Executive 
    	Secretary for membership services)</li>
      
      <li class="name">Mr Roland Rogers</li>
      <li>QinetiQ</li>
      <li>Room 251/31</li>
      <li>Southampton Oceanography Centre</li>
      <li>University of Southampton</li>
      <li>Waterfront Campus</li>
      <li>European Way</li>
      <li class="spacer">Southampton SO14 3ZH</li>
      <li>email: RJROGERS1@qinetiq.com</li>
      <li class="italic">(jointly responsible with the Executive Secretary for 
    	marketing, publicity and external affairs)</li>
      
      <li class="name">Dr Rachael Shreeve</li>
      <li>British Antarctic Survey</li>
      <li>High Cross</li>
      <li>Madingley Road</li>
      <li class="spacer">Cambridge CB3 0ET</li>
      <li>email: rssh@bas.ac.uk</li>
      <li class="italic">(responsible for the young scientists network)</li>
    </ul>
      
       <h3 class="title">EX-OFFICIO MEMBERS</h3>
    <ul id="bottleft">
      <li class="italic">Editor of Ocean Challenge</li>
      <li class="name">Angela M Colling</li>
      <li>Department of Earth Sciences</li>
      <li>The Open University</li>
      <li>Walton Hall</li>
      <li class="spacer">Milton Keynes MK7 6AA</li>
      <li>email: A.M.Colling@open.ac.uk</li>
     
      <li class="italic">Chair of Ocean Challenge Editorial Board</li>
      <li class="name">Professor Tim Jickells</li>
      <li>School of Environmental Sciences</li>
      <li>University of East Anglia</li>
      <li class="spacer">Norwich NR4 7TJ</li> 
      <li>email: T.Jickells@uea.ac.uk</li>
    </ul>
    <ul id=bottright>
      <li class="italic">Associate Editor of Ocean Challenge</li>
      <li class="name">John B Wright</li>
      <li>Department of Earth Sciences</li>
      <li>The Open University</li>
      <li>Walton Hall</li>
      <li class="spacer">Milton Keynes MK7 6AA</li> 
      <li>email: J.B.Wright@open.ac.uk</li>
      
      <li class="italic">Editor Challenger Wave</li>
      <li class="name">Dr Louisa Watts</li>
      <li>Atmospheric Sciences Team</li>
      <li>Natural Environment Research Council</li>
      <li>Polaris House</li>
      <li>North Star Avenue</li>
      <li class="spacer">Swindon SN2 1EU</li>
      <li>email: lw@nerc.ac.uk</li>
    </ul>
    <div style="clear:both"></div>
    </body>
    </html>
    Paul

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thank's very much for your help. The page now works very well in PC and in Netscape for Mac, but there still seems to be problems in IE5 Mac. The sections 'topright' and 'topleft' work perfectly. The title "Members of council' also displays correctly. However, the section, 'midleft' doesn't appear at all. 'Midright' appears in the correct place on the right hand side, but much further down the page. The last section, 'bottleft' and 'bottright' display correctly and in the right place. I've checked and re-checked the code, but have no ideas as to why the middle section isn't displaying correctly.

    A quick question, why have you put <div style="clear:both"></div> at the end, when you have used 'h3.title{margin-left: 15%;clear:both} at the beginning of each section?

    Once again, very many thank's for your time. I've uploaded the file again,

    Philippa

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    A quick question, why have you put <div style="clear:both"></div> at the end, when you have used 'h3.title{margin-left: 15%;clear:both} at the beginning of each section?
    That was just in case you wanted to add something below.

    I don't have ie5 mac to test but I notice you have introduced 2 errors which may have some effect on the display (although I doubt it).
    Quote Originally Posted by w3c validator
    Line 178, column 130: end tag for element "SPAN" which is not open (explain...).
    ...publicity and external affairs)</span></li>
    ^
    Line 186, column 10: document type does not allow element "P" here; assuming missing "LI" start-tag
    <p>
    ^
    You need to get rid of the closing span and also the <p> tag. Try deleting them and see if that makes any difference to ie5 mac. There seems to be no reason why the top and bottom work but the middle doesn't unless it is the errors above.

    If it still doesn't work try the code I pasted just in case a typing error has been introduced that wasn't picked up by the validator.

    If it still doesn't display then try adding position:relative to all the (ul).

    If that doesn't work delete topleft and topright and see if midleft now displays.

    If that doesn't work delete everything except midleft and see if it works on its own. If not then theres obviously a mistake somewhere in the css. Delete the style and add one line at atime back in until it either works or doesn't work etc.

    Hopefully you should find what's causing the problem this way. (If I had ie5 mac I'd do it for you .

    Paul

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Cambridge, England
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    I added position:relative to all the (ul). 'Midleft' now appears and in the right place, but there is still a large gap between the end of the first section and the beginning of the first. I'll try out your other suggestions
    later today.

    Thank's,
    Philippa


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
  •