memerot
asked on
CSS width problem - can't seem to force spans to be same size
I have a page where I'm trying to use all CSS divs and span instead of using a table. I can't figure out why applying a style="width:150px;" to the spans isn't doing anything. Any pointers? I tried specifying the value in a class first, then inline. I added a if the database results came back blank for that column. No luck..... I've specified width's for spans before without any problem.... must be missing something but I've been staring at this all morning....
Code for page:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/obs.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/projectList.css" />
</head>
<body>
<form id="frmProjectList" name="frmProjectList" action="projectList.htm" method="post">
<div id="divBRF" class="projectTypeHeader">
BRF
</div>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0001-03 &mode=edit ">BRF-0001 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">White wb </ span>
<span class="projectSynopsis" style="width:300px;">  ;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0002-03 &mode=edit ">BRF-0002 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">White wb </ span>
<span class="projectSynopsis" style="width:300px;">  ;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0003-03 &mode=edit ">BRF-0003 -03</a></s pan>
<span class="projectName" style="width:150px;">test 3 </span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">  ;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0005-03 &mode=edit ">BRF-0005 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0006-03 &mode=edit ">BRF-0006 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0007-03 &mode=edit ">BRF-0007 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0008-03 &mode=edit ">BRF-0008 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0009-03 &mode=edit ">BRF-0009 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0010-03 &mode=edit ">BRF-0010 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0041-03 &mode=edit ">BRF-0041 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">  ;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0039-03 &mode=edit ">BRF-0039 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p rojectID=B RF-0037-03 &mode=edit ">BRF-0037 -03</a></s pan>
<span class="projectName" style="width:150px;">  ;</span>
<span class="projectProducer" style="width:200px;">white wb </ span>
<span class="projectSynopsis" style="width:300px;">
</span>
<input type="hidden" id="status" name="status" value="active">
</form>
</body>
</html>
Code for stylesheet (I just put ugly borders around the blocks to see how they were lining up):
<STYLE>
BODY
{
}
.projectName
{
BORDER-RIGHT: aqua solid;
BORDER-TOP: aqua solid;
BORDER-LEFT: aqua solid;
WIDTH: 200px;
BORDER-BOTTOM: aqua solid
}
.projectProducer
{
BORDER-RIGHT: black thin solid;
BORDER-TOP: black thin solid;
BORDER-LEFT: black thin solid;
WIDTH: 200px;
BORDER-BOTTOM: black thin solid
}
.projectSynopsis
{
BORDER-RIGHT: fuchsia solid;
BORDER-TOP: fuchsia solid;
BORDER-LEFT: fuchsia solid;
WIDTH: 400px;
BORDER-BOTTOM: fuchsia solid
}
.projectLink
{
BORDER-RIGHT: lime solid;
BORDER-TOP: lime solid;
BORDER-LEFT: lime solid;
WIDTH: 150px;
BORDER-BOTTOM: lime solid
}
</STYLE>
Code for page:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/obs.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/projectList.css"
</head>
<body>
<form id="frmProjectList" name="frmProjectList" action="projectList.htm" method="post">
<div id="divBRF" class="projectTypeHeader">
BRF
</div>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">White
<span class="projectSynopsis" style="width:300px;"> 
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">White
<span class="projectSynopsis" style="width:300px;"> 
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;">test 3 </span>
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;"> 
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;"> 
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?p
<span class="projectName" style="width:150px;"> 
<span class="projectProducer" style="width:200px;">white
<span class="projectSynopsis" style="width:300px;">
</span>
<input type="hidden" id="status" name="status" value="active">
</form>
</body>
</html>
Code for stylesheet (I just put ugly borders around the blocks to see how they were lining up):
<STYLE>
BODY
{
}
.projectName
{
BORDER-RIGHT: aqua solid;
BORDER-TOP: aqua solid;
BORDER-LEFT: aqua solid;
WIDTH: 200px;
BORDER-BOTTOM: aqua solid
}
.projectProducer
{
BORDER-RIGHT: black thin solid;
BORDER-TOP: black thin solid;
BORDER-LEFT: black thin solid;
WIDTH: 200px;
BORDER-BOTTOM: black thin solid
}
.projectSynopsis
{
BORDER-RIGHT: fuchsia solid;
BORDER-TOP: fuchsia solid;
BORDER-LEFT: fuchsia solid;
WIDTH: 400px;
BORDER-BOTTOM: fuchsia solid
}
.projectLink
{
BORDER-RIGHT: lime solid;
BORDER-TOP: lime solid;
BORDER-LEFT: lime solid;
WIDTH: 150px;
BORDER-BOTTOM: lime solid
}
</STYLE>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ok... changing to div, float left works. I'm confused on this..... I thought divs where vertical divisions, and spans were horizontal spans. Guess I'll have to do some re-reading. I'm awarding you the points dorward.
ASKER