[RESOLVED] Problem w/ Lists & Tables [Archive]

banksworld1986

12-01-2007, 04:47 PM

Hello everyone.

I posted a thread on here recently about having problems with viewing my site in Firefox/Mozilla and I was told to validate my code. I did that and corrected the errors. One of the main errors I had were placing block-level elements within inline-elements: like <p> inside <span> or <a>. So that was corrected. Well, now for some strange reason my lists inside of a table won't view as bulleted lists. Here is the code and stylesheet.

<?xml version='1.0'?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="JRStudios Fashion" content="My First Site" />
<title>JR Studio Fashion</title>

<link rel="stylesheet" href="C:\Documents and Settings\Owner\Desktop\JR Studios Website (Final)\Our Style Stylesheet.css">

<style type="text/css">

body {background-color:black; background-position: 0px; }

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:100%; padding-bottom: 0px;}

a {text-decoration:none;}
a {cursor: hand;}

.bold-Italic a:hover {font-weight:bold; font-style:italic;}

</style></head>

<div id="container">

<div class="frame1">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Frame.gif" height="584" />
</div>

<div class="frame2">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Frame.gif" height="584" />
</div>

<div class= "foreground1">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Site-Background.jpg" width="700" height="584" alt="Foreground Graphic 1" />
<span class="pageline"><hr width="350" size="1%" color="white"/></span>
<span class="pageline3"><hr width="400" color="blue"></span>
<p>
<a href="C:\Documents and Settings\Owner\Desktop\JR Studios Website (Final)\Home Page.html">
<span class="return">Return</span> <span class="home">Home</span></a>
</p>

<div class="picgrphic">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Our-Style-Link-Rect-Grph-2.gif" width= "600" height="175" />

<p>
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\The Pimp.jpg" width="190" height="140" />
</p>

<div class="StWrLg">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\StWrLg.png">
</div>

<div class="clothinglist">

<table border="0">

<tr>
<td align="left"> <ul>
<li>Headgear Inc.</li>
<li>Cole Haan</li>
<li>Icedoutgear</li>
<li>Nike Town Products</li>
<li>Burberry</li>
<li>Sketchers</li>
<li>Phat Farm</li>
</ul></td>
<td align="left"> <ul>
<li>Baby Phat</li>
<li>Nautica</li>
<li>Ralph Lauren</li>
<li>Avirex</li>
<li>Enyce</li>
<li>LRG</li>
<li>Nordstrom</li>
</ul></td>
</tr>
</table>
</div>

</div>

<div class="picgrphic2">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Our-Style-Link-Rect-Grph-2.gif" width= "600" height="175" />
<p>
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\The Dudes.jpg" width="190" height="140" />
</p>

<div class="CsWrLg">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\CsWrLg.png">
</div>

<div class="clothinglist">

<table border="0">

<tr>
<td align="left"> <ul>
<li>Biondo Fashions</li>
<li>Athleta</li>
<li>Buckel Inc.</li>
<li>Campus Crew</li>
<li>Edgewear</li>
<li>Dolce & Gabanna</li>
<li>Brooks Brothers</li>
</ul></td>
<td align="left"> <ul>
<li>Tommy Hilfiger</li>
<li>Chap</li>
<li>Christian Brothers</li>
<li>J Wiggins</li>
<li>Guess</li>
<li>Forever 21</li>
<li>Eddie Bauer</li>
</ul></td>
</tr>
</table>
</div>

</div>

<div class="pagelogo">
<p>Our <font color="white">Style</font></p>
</div>

</div>

<div class="foreground2">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Foreground-Graphic4.gif" width="697.5" height="140" />
</div>

<div class="linkbkgd">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Link-Background.gif" width="700" height="13.7"/>
<div class="linkgraphic2">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Link-Graphic-2.gif" height="16"/>
</div>
</div>

<div class="link1">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Link-Bkgd.gif" alt="" />
<div class="bold-Italic">
<p>
<a href="C:\Documents and Settings\Owner\Desktop\JR Studios Website (Final)\Our Style Page.html">
<span class="our">Our</span> <span class="style">Style</span></a>
</p>
</div>
</div>

<div class="link2">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Link-Bkgd.gif" alt="" />
<div class="bold-Italic">
<p>
<a href="C:\Documents and Settings\Owner\Desktop\JR Studios Website (Final)\Our Look Page.html">
<span class="our2">Our</span> <span class="look">Look</span></a>
</p>
</div>
</div>

<div class="link3">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Link-Bkgd.gif" alt="" />
<div class="bold-Italic">
<p>
<a href="C:\Documents and Settings\Owner\Desktop\JR Studios Website (Final)\Men Apparel Page.html">
<span class="men">Men</span> <span class="apparel">Apparel</span></a>
</p>
</div>
</div>

<div class="link4">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Link-Bkgd.gif" alt="" />
<div class="bold-Italic">
<p>
<a href="C:\Documents and Settings\Owner\Desktop\JR Studios Website (Final)\Women Apparel Page.html">
<span class="women">Women</span> <span class="apparel2">Apparel</span></a>
</p>
</div>
</div>

<div class="link5">
<img src="C:\Documents and Settings\Owner\Desktop\JR Studios Website\Link-Bkgd.gif" alt="" />
<div class="bold-Italic">
<p>
<a href="C:\Documents and Settings\Owner\Desktop\JR Studios Website (Final)\Sign Up Page.html">
<span class="sign">Sign</span> <span class="up">Up</span></a>
</p>
</div>
</div>

</div>
</body>
</html>

#container {position:relative; margin-left: .5px; width:100%; height:100%; border:none;}

.foreground1 {position:absolute; left: 139px; top: 0px;}
.foreground2 {position:absolute; left: 138.5px; top: 0px;}
.frame1 {position:absolute; left: 75px; top: 0px;}
.frame2 {position:absolute; left: 900px; top: 0px;}
.linkbkgd {position:absolute; left: 138.5px; top: 160px;}
.link1 {position:absolute; left: 260px; top:160px;}
.link2 {position:absolute; left: 375px; top:160px;}
.link3 {position:absolute; left: 490px; top:160px;}
.link4 {position:absolute; left: 605px; top:160px;}
.link5 {position:absolute; left: 720px; top:160px;}
.pageline {position:absolute; left: 0px; top: 185px;}
.pageline hr {color: white;}
.pageline3 {position:absolute; left: 0px; top: 143px;}
.pageline3 hr {color: #073ee1;}
.pageline4 {position:absolute; left: 139px; top: 136px;}
.pageline5 {position:absolute; left: 139px; top: 151px;}
.pagelogo {position:absolute; left: 360px; top: 184px;}
.pagelogo p{color:#ffcc66; font-size: 80%; font-family: Arial;}
.linkgraphic2 {position: absolute; left: 0px; top: 1px;}
.linkgraphic2 {position: absolute; left: 0px; top: 1px;}
.our {position:absolute; left: 30px; top: 0px; color:white; font-size: 80%; font-family:Arial;}
.our2 {position:absolute; left: 30px; top: 0px; color:white; font-size: 80%; font-family:Arial;}
.style {position:absolute; left: 55px; top: 0px; color:#ffcc66; font-size: 80%; font-family:Arial;}
.look {position:absolute; left: 55px; top: 0px; color:#ffcc66; font-size: 80%; font-family:Arial;}
.men {position:absolute; left: 25px; top: 0px; color:white; font-size: 80%; font-family:Arial;}
.women {position:absolute; left: 14px; top: 0px; color:white; font-size: 80%; font-family:Arial;}
.apparel {position:absolute; left: 53px; top: 0px; color:#ffcc66; font-size: 80%; font-family:Arial;}
.apparel2 {position:absolute; left: 61px; top: 0px; color:#ffcc66; font-size: 80%; font-family:Arial;}
.sign {position:absolute; left: 32px; top: 0px; color:white; font-size: 80%; font-family:Arial;}
.up {position:absolute; left: 61px; top: 0px; color:white; font-size: 80%; font-family:Arial;}
.return {position:absolute; left: 614px; top: 140px; color:white; font-size: 110% font-family: Courier; font-style: normal;}
.home {position:absolute; left: 660px; top: 140px; color:#6699ff; font-size: 110% font-family: Courier; font-style: normal;}
.picgrphic {position:absolute; left: 45px; top: 215px;}
.picgrphic2 {position:absolute; left: 45px; top: 400px;}
.picgrphic p {position:absolute; left: 5px; top: 9px; border: thin ridge #ffcc66; padding: 5px;}
.picgrphic2 p {position:absolute; left: 5px; top: 9px; border: thin ridge #ffcc66; padding: 5px;}
.clothinglist {position:absolute; right:5px; bottom: -11px;}
.clothinglist ul li{color:white; font-size: 80%; font-family:Arial;}
.StWrLg {position:absolute; right: 82px; bottom: 138px;}
.CsWrLg {position:absolute; right: 56px; bottom: 124px;}

Please let me know if you find the list/table problem. And if you see anyway this can be done better please let me know. Thanks:)

banksworld1986

12-01-2007, 06:21 PM

Well, attempted to attach a file but having troubles.

WebGeek1126

12-01-2007, 10:20 PM

To start with, a major problem is that you're listing your files' locations on your hard drive. It looks like you're using one directory for your site, so all you need to specify is the file name (e.g. Frame.gif instead of C:\Documents and Settings\Owner\Desktop\JR Studios Website\Frame.gif). Doing this appears to solve the CSS problem, assuming it's in the same directory as the rest of your files.

Also, it's good practice to not have spaces in file names.

banksworld1986

12-02-2007, 01:28 AM

I just tried shortening my <img> tags and for some reason using "whatever.gif" or "whatever.jpg" didn't work. It erased the image.

But I think your suggestion may have something to do with why my page isn't appearing in Firefox but only IE.

ray326

12-02-2007, 03:29 PM

All the absolutes set off red lights with me. At any rate, you're probably experiencing list item margin problems. The bullets are there but they are shoved left of the left side of the border.