Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having troubles with valign; FF vs. IE

    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!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Would you be interested in a page that would require less markup and will work in both IE and FF?

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quite possibly, yes.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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>

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •