...

View Full Version : Having troubles with valign; FF vs. IE



strugglepoo
12-20-2005, 10:01 PM
http://members.shaw.ca/hopesfall/vga/game/ct1.html

On the left hand side, where it lists "Composer, System, etc." it's meant to be aligned at the top of the cell, just below the image. It looks perfectly fine in Firefox, but when I go to view it in IE, it doesn't work at all.

Any help would be great. Thanks!

_Aerospace_Eng_
12-20-2005, 11:04 PM
Would you be interested in a page that would require less markup and will work in both IE and FF?

strugglepoo
12-20-2005, 11:14 PM
Quite possibly, yes. :)

_Aerospace_Eng_
12-21-2005, 12:10 AM
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chrono Trigger</title>
<style type="text/css">
body {
margin:0;
padding:15px;
background:#000;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
a, a:link, a:visited {
text-decoration:none;
color:#FFF;
background:none;
}
a:hover, a:active, a:focus {
text-decoration:underline;
}
a.wip, a.wip:link, a.wip:visited, a.wip:hover, a.wip:active, a.wip:focus {
font-style:italic;
text-decoration:none;
}
#listcontainer {
position:relative;
}
#leftCol {
width:258px;
float:left;
}
.back {
font-weight:normal;
position:absolute;
bottom:0;
left:0;
}
* html .back {
left:-258px;
bottom:30px;
}
* html #leftCol {
margin-left:-3px;
}
#leftCol img {
margin-bottom:3px;
}
#leftCol span {
font-weight:bold;
}
#list {
margin-left:261px;
}
* html #list {
margin-left:0;
}
* html #list {
height:1px;
}
#list ul {
margin:0;
padding:0;
list-style-type:none;
}
#list ul li {
color:#FFF;
background:#7A5353;
padding:1px 0 1px 8px;
}
#list ul li h1 {
margin:0;
padding:0;
font-size:18px;
}
#list ul li.a {
background:#9C6C6C;
color:#FFF;
}
.clear {
clear:both;
font-size:1px;
line-height:0px;
}
</style>
</head>

<body>
<div id="listcontainer">
<div id="leftCol">
<div><img src="../images/ts_ct.gif" width="258" height="226" alt="Super Metroid" /></div>
<span>Composer(s):</span> <a class="com" href="#">Yasunori Mitsuda</a>, <a class="com" href="#">Nobuo Uematsu</a>, <a class="com" href="#">Noriko Matsueda</a><br />
<span>System:</span> <acronym title="Super Nintendo Entertainment System">SNES</acronym><br />
<span>Released By:</span> Square<br />
<span>Released:</span> 1994
<div class="back"><a href="../tabs.html">&lt;&lt; Back</a></div>
</div>
<div id="list">
<ul>
<li class="a"><h1>Chrono Trigger</h1></li>
<li>&#187; <a class="wip" href="#">A Shot of Crisis</a></li>
<li class="a">&#187; <a href="#">Battle Theme I</a></li>
<li>&#187; <a class="wip" href="#">Bike Chase</a></li>
<li class="a">&#187; <a href="#">Boss Battle I</a></li>
<li>&#187; <a class="wip" href="#">Boss Battle II</a></li>
<li class="a">&#187; <a href="#">Black Dream</a></li>
<li>&#187; <a class="wip" href="#">Lab 16's Ruins</a></li>
<li class="a">&#187; <a class="wip" href="#">Last Battle</a></li>
<li>&#187; <a href="#">Manoria Cathedral</a></li>
<li class="a">&#187; <a class="wip" href="#">Memories of Green</a></li>
<li>&#187; <a href="#">Morning Sunlight</a></li>
<li class="a">&#187; <a href="#">People Who Threw Away the Will to Live</a></li>
<li>&#187; <a href="#">Primitive Mountain</a></li>
<li class="a">&#187; <a class="wip" href="#">Remains of Factory</a></li>
<li>&#187; <a class="wip" href="#">Robo Gang Johnny</a></li>
<li class="a">&#187; <a class="wip" href="#">Robo's Theme</a></li>
<li>&#187; <a href="#">Ruined World</a></li>
<li class="a">&#187; <a href="#">Schala's Theme</a></li>
<li>&#187; <a href="#">Sealed Door</a></li>
<li class="a">&#187; <a href="#">Secret of the Forest</a></li>
<li>&#187; <a href="#">Silent Light</a></li>
<li class="a">&#187; <a href="#">The Brink of Time</a></li>
<li>&#187; <a href="#">The Day the World Revived</a></li>
<li class="a">&#187; <a href="#">Underground Sewer</a></li>
</ul>
</div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>

strugglepoo
12-21-2005, 12:41 AM
Wow, thank you very kindly, sir. :)

I've never used div tags before. I'll have to give it a whirl. I'm guessing they are more optimal than using tables?

_Aerospace_Eng_
12-21-2005, 01:22 AM
Tables were never meant for page layout, they are meant to display data. Using divs will allow your pages to load faster, due to less markup being used.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum