Newbie Question - Why doesnt this HTML code display right? - HTML forum at WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Newbie Question - Why doesnt this HTML code display right?

Trying to use float: left in <ul> but shows rows diagonally.

brand404

9:10 pm on Jun 21, 2010 (gmt 0)

I am trying to display these 4 rows one on top of the other but when i use the "float: left" style (so i can make the accompanying text aligned to the top beside each row's picture) it makes subsequent rows line up in a diagonal pattern...I want it to show in a clean single column.

Here is the code:

birdbrain

11:15 pm on Jun 21, 2010 (gmt 0)

Hi there brand404,

here is your code, simplified somewhat...


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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
#more_stories {
  width:90px;
  padding:0;
  margin:0 auto;
  list-style-type:none;
 }
#more_stories li{
  float:left;
  width:80px;
  margin-left:10px;
 }
#more_stories a {
  display:block;
  line-height:32px;
  padding-left:42px;
  background-image:url(http://tinyurl.com/32cdvz5);
  background-repeat:no-repeat;
  font-family:arial,sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#000;
  text-decoration:none;
 }
</style>

</head>
<body>

<ul id="more_stories">
<li><a href="http://link1" title="Row 1">Row 1</a></li>
<li><a href="http://link2" title="Row 2">Row 2</a></li>
<li><a href="http://link3" title="Row 3">Row 3</a></li>
<li><a href="http://link4" title="Row 4">Row 4</a></li>
<li><a href="http://link5" title="Row 5">Row 5</a></li>
</ul>

</body>
</html>

birdbrain

SEO_Shruti

10:06 am on Aug 4, 2010 (gmt 0)

As birdbrain suggested you the code with Internal CSS. You can also call the css from an external file. It decreases page size and also reduce page load time.