vertical alignment of ul all the way to the top inside a div - no img, just text

1.5k Views Asked by At

This seems SO simple,(and I feel pretty stupid and toasted) but I've tried all I can find (spent 6 hours digging on the web, w3schools, etc.), and I can't get a simple text ul to go ALL THE WAY to the top of a div it is inside of? It is as if there is a "margin" or a "pad" inside the DIV. I've looked at it with firebug and dreamweaver and I see the same thing. THe real page I am concerned about is at the bottom of this post.. Thnks Everybody

Here's a link to the stripped down HTML shown here:

http://www.abscomputersouthbay.com//CC_Website/one_ul_in_a_div.html

there is also another link to this code at jsfiddle in the link above, - I don't have "10 reputation" yet, so I can't have more than 2 links in a post.. :)

  <head>

    <style type="text/css">
    body {
      color:#000000;
      background-color:#FFFFFF;
      margin: 0;
      padding: 0;
    }
    </style>
</head>
<body>
the ul should be right below this line of text, right up to the top of the DIV it
is inside of, with no empty "white space" the looks like a "empty line"
<div style="">
<ul >
<li >PC World News (external news feed)</li>
<li >PC Mag - New products (external news feed)</li>
<li >Site Map</li>
</ul>
</div>
  </body>
</html>

Here's the actual page I was working on that got me on this tangent... starting with "PC & IT SERVICE, SUPPORT, DEVELOPMENT"

http://www.abscomputersouthbay.com/index.php/services-and-support

THANK YOU

Craig

1

There are 1 best solutions below

2
On

ul does not get its margin from body, you can see it clearly in firebug; it works if you give it its own margin as shown in this fiddle

body, ul {
  color:#000000;
  background-color:#FFFFFF;
  margin: 0;
  padding: 0;
}

obviously, there are more elegant ways of assigning the correct css, just done that way for demonstration purposes