list problem

Discussion in 'CSS' started by manilodisan, Jun 8, 2007.

0
  1. #1
    Does anyone has any idea why I have that margin on the left side if the container of almost 30px??? The red li is pushed to the right with 30px or more...

    Thank you.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Welcome</title>
	<style type="text/css">
#liq_container { 
	background-color: violet;
	height: 100px;
	width:540px;
}
#liquids {
	position: relative;
}
 
#liquids .liquid {
	float: left;
	display: block;
	width: 170px;
	height: 100px;
}
#publishers {background-color: red;}
#advertisers {background-color: orange;}
#afilliates {background-color: yellow;}
	</style>

</head>
<body>
		<div id="liq_container">
			<ul id="liquids">
				<li id="publishers" class="liquid"><span>Red</span></li>
				<li id="advertisers" class="liquid"><span>Red</span></li>
				<li id="afilliates" class="liquid"><span>Red</span></li>
			</ul>

		</div>
</body>
</html>
    HTML:

     

    Attached Files:

    manilodisan, Jun 8, 2007 IP
  2. Xabber

    Xabber Active Member

    Messages:
    437
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #2
    <li id="publishers" class="liquid">

    Should be
    <li id="publishers" class="liquids"> I think. Try that and tell if it works :)
     
    Xabber, Jun 8, 2007 IP
  3. manilodisan

    manilodisan Peon

    Messages:
    224
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    nope...liquids is not a class but defined as an ID. liquid is the class.
     
    manilodisan, Jun 8, 2007 IP