Page Looks Screwy In Firefox

**TheMovieman** · March 24, 2008

Ok, I know this is an issue with IE and not Firefox but I actually have it the way I want it in IE and wanted to know if there's some extra code I can put in my css file to straighten things out for Firefox users. If I have to start over, that's fine, though if I could use some of the code I currently have, that would be great.

Here's the page:

http://www.moviemansguide.com/beta

Another question, kind of unrelated: Anyone know how to control the indent on a list? Right now I have just the <li> without the proper <ul>. I want to, but it just indents it too much (though I know that's why the links won't show in Firefox).

I have so many other questions, but I'll leave it there for now, lol.

Here's the page code (yes, it's messy):

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

<head>

<title>Movieman's Guide to the Movies - The Final Words on Movies... and DVDs!</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="style-black.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="navigation">

<h2>main menu</h2>

<li><a href="http://www.moviemansguide.com">Home</a></li>

<li><a href="http://www.moviemansguide.com/reviewindex.php?type=dvd">DVD Reviews Archive</a></li>

<li><a href="http://www.moviemansguide.com/reviewindex.php?type=movie">Movie Reviews Archive</a></li>

<li><a href="http://www.moviemansguide.com/theatricalschedule">Movie Release Schedule</a></li>

<li><a href="http://www.moviemansguide.com/dvdschedule">DVD Release Schedule</a></li>

<li><a href="http://www.moviemansguide.com/forums">Message Board</a></li>

<h2>latest reviews</h2>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=nocountryforoldmen-bd">No Country for Old Men (BD)</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=enchanted">Enchanted</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=atonement">Atonement</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=nocountryforoldmen">No Country for Old Men</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=beemovie-2disc">Bee Movie: 2-Disc Edition</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=daninreallife-bd">Dan in Real Life (BD)</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=gattaca-se">Gattaca: Special Edition</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=30daysofnight">30 Days of Night</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=thingswelostinthefire">Things We Lost in the Fire</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=sleuth">Sleuth</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=spiral">Spiral</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=awake">Awake</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=americangangster-2disc_elyusha">American Gangster</a></li>

<li><a href="http://www.moviemansguide.com/reviews/DVD/read.php?id=beowulf-hddvd">Beowulf (HD DVD)</a></li>

<h2>upcoming dvds @ <font color="e48404">Amazon.com</font></h2>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010X73ZG/moviemsguidet-20" target="_blank">The Mist: Collector's Edition</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010YVCI4/moviemsguidet-20" target="_blank">Bonnie & Clyde: Spec. Edition</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010KHOS0/moviemsguidet-20" target="_blank">Walk the Line: Ext. Edition</li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B00129W6LE/moviemsguidet-20" target="_blank">Battlestar Galactica: Season 3</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0011NVCAC/moviemsguidet-20" target="_blank">Wings: Season 6</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0013D8LOU/moviemsguidet-20" target="_blank">Sweeney Todd: Spec. Edition</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0010KHORG/moviemsguidet-20" target="_blank">That 70s Show: Season 8</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0013FCWUW/moviemsguidet-20" target="_blank">Lions for Lambs</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B00104QSOM/moviemsguidet-20" target="_blank">There Will Be Blood: Collector's Edition</a></li>

<li><a href="http://www.amazon.com/exec/obidos/ASIN/B0012IWNZY/moviemsguidet-20" target="_blank">Walk Hard: Unrated</a></li>

</div>

<div id="header"></div>

<div id="centerDoc">

<div id="home-heading">Feature Review</div>

<div id="home-box2">

<div id="home-dvd"> <a href="reviews/DVD/read.php?id=atonement"><img src="images/posters/dvd/dvdcover_atonement.jpg" width="130" border="1" alt="Atonement"></a></div>

<div id="home-quote">"Although this is not an unblemished movie, I still feel, even after two viewings, this is one of the best movies of 2007. Is it better than No Country for Old Men? Absolutely. Despite the flaws, Atonement works for two fine performances and McGarvey’s cinematography."</div>

</div>

<img src="images/spacer.gif" width="1" height="1" border="0">

<div id="home-heading">Recently Added DVD Reviews</div>

<div id="home-box">

<a href="reviews/DVD/read.php?id=enchanted"><img src="images/homepage/enchanted.jpg" width="80" border="1" alt="Enchanted"></a>

<a href="reviews/DVD/read.php?id=atonement"><img src="images/homepage/atonement.jpg" width="80" border="1" alt="Atonement"></a>

<a href="reviews/DVD/read.php?id=nocountryforoldmen"><img src="images/homepage/nocountry.jpg" width="80" border="1" alt="No Country for Old Men"></a>

<a href="reviews/DVD/read.php?id=beemovie-2disc"><img src="images/homepage/beemovie.jpg" width="80" border="1" alt="Bee Movie (A Very Jerry 2-Disc Edition)"></a>

<a href="reviews/DVD/read.php?id=gattaca-se"><img src="images/homepage/gattaca.jpg" width="80" border="1" alt="Gattaca (Special Edition)"></a>

<a href="reviews/DVD/read.php?id=30daysofnight"><img src="images/homepage/30daysofnight.jpg" width="80" border="1" alt="30 Days of Night"></a>

</div>

<img src="images/spacer.gif" width="1" height="1" border="0">

<div id="home-heading">Recently Added Hi-Def Reviews</div>

<div id="home-box">

<a href="reviews/DVD/read.php?id=nocountryforoldmen-bd"><img src="images/homepage/bd-nocountry.jpg" width="80" height="105" border="1" alt="No Country for Old Men (Blu-Ray)"></a>

<a href="reviews/DVD/read.php?id=daninreallife-bd"><img src="images/homepage/bd-daninreallife.jpg" width="80" height="105" border="1" alt="Dan in Real Life (Blu-Ray)"></a>

<a href="reviews/DVD/read.php?id=beowulf-hddvd"><img src="images/homepage/hd-beowulf.jpg" width="80" height="105" border="1" alt="Beowulf (HD DVD)"></a>

<a href="reviews/DVD/read.php?id=zodiac-directorscut-hddvd"><img src="images/homepage/hd-zodiac.jpg" width="80" height="105" border="1" alt="Zodiac (HD DVD)"></a>

<a href="reviews/DVD/read.php?id=stardust-hd"><img src="images/homepage/hd-stardust.jpg" width="80" height="105" border="1" alt="Stardust (HD DVD)"></a>

</div>

<img src="images/spacer.gif" width="1" height="1" border="0">

<div id="home-heading">New Batman: Gotham Knight Featurette</div>

<div id="home-box">

<center>

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/watch?v=9I5744WCaxA&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param'>http://www.youtube.com/watch?v=9I5744WCaxA&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/watch?v=9I5744WCaxA&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

</center>

</div>

</div>

<div id="rightbox"></div>

</body>

</html>

And here's the css page:

/* Generic Selectors */

body {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #333333;

background-color: #000000;

margin: 5px 0 0 125px;

width: 760px;

}

p {

width: 85%;

}

li {

list-style-type: disc;

line-height: 100%;

}

h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;

}

h2 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 16px;

font-weight: bold;

color: #0000FF;

border-bottom: 2px dashed #68838B;

}

/**************** Pseudo classes ****************/

:link {

color: #000080;

text-decoration: underline;

font-size: 10pt;

}

li :link {

color: #6183A6;

text-decoration: none;

font-size: 8pt;

font-weight: bold;

}

:visited {

color: #33A1DE;

text-decoration: underline;

font-size: 10pt;

font-weight: bold;

}

li :visited {

color: #6183A6;

text-decoration: none;

font-size: 8pt;

font-weight: bold;

}

:hover {

color: #00FFFF;

padding-bottom: 5px;

font-size: 10pt;

text-decoration: underline;

}

li :hover {

color: #37FDFC;

padding-bottom: 0px;

font-size: 10pt;

text-decoration: underline;

}

:active {

color: rgb(255, 0, 102);

}

/************************* ID's *************************/

#navigation {

position: absolute;

z-index: 10;

width: 230px;

height: 1000px;

margin: 0;

margin-top: 0px;

border-right: 1px solid #65909A;

font-weight: normal;

}

#centerDoc {

position: absolute;

z-index: 15;

width: 760px;

padding: 0 0 25px 240px; /*top right bottom left*/

margin-top: 80px;

}

#rightbox {

position: absolute;

right: 16px;

margin-right: -15px;

width: 138px;

padding-top: 5px;

}

#header {

background-image: url(images/header/logo02.jpg);

position: absolute;

z-index: 15;

margin: 0 0 0 240px;

width: 550px;

height: 60px;

}

#menu {

position: absolute;

width: 570px;

height: 20px;

margin: 60px 0 0 240px;

}

#home-heading {

text-align: left;

font-size: 13px;

font-type: Georgia;

font-weight: bold;

color: #E0EEEE;

background-color: #000000;

border-right: 2px solid #3333FF;

border-bottom: 2px solid #3333FF;

text-transform: lowercase;

width: 100%

}

#home-heading2 {

text-align: center;

font-size: 13px;

font-weight: bold;

border-bottom: 1px solid #7F7F7F;

width: 100%;

}

#upcomingdvd {

text-align: left;

font-size: 10px;

font-weight: bold;

width: 100%;

padding: 5px 0 0 0; /*top right bottom left*/

}

#home-box {

text-align: center;

border-right: 2px solid #383838;

border-bottom: 2px solid #383838;

width: 520px;

margin-top: 5px;

}

#home-box2 {

background-image: url(images/header/atonement.jpg);

background-repeat: no-repeat;

border-right: 2px solid #383838;

border-bottom: 2px solid #383838;

width: 520px;

height: 190px;

margin-top: 5px;

}

#home-dvd {

text-align: left;

width: 130px;

height: 185px;

margin: -15px 0 0 5px;

}

#home-quote {

text-align: left;

width: 160px;

height: 185px;

margin: -185px 0 0 145px;

color: #60AFFE;

font-weight: bold;

font-style: italic;

font-size: 10px;

}

#home-quote :link {

color: #00E5EE;

text-decoration: underline;

font-size: 15pt;

font-weight: bold;

}

#spacer {

width: 100%;

height: 2px;

}

Appreciate any help.

Edited March 24, 2008 by TheMovieman

**TheMovieman** · March 24, 2008

BTW, I have fixed a couple things in the css. Doesn't change the look, but thought I should mention it...

When using Firefox's validation tool, I got 51 errors. 19 of them were within the YouTube link and most others were because I didn't have the <ul> tags. The css page did validate (after fixing the 2 issues), however.

**TCH-Bruce** · March 24, 2008

Maybe the CSS list properties will help.

**OJB** · March 24, 2008

edit: sorry jumped the gun only to find out you fixed the <ul> tags being missing!! apologies

Edited March 24, 2008 by OJB

**TheMovieman** · March 24, 2008

Yeah, I know. BUt even with those the page still looks wrong. Anyway, thanks for the replies but I decided to start over with a fresh template. This time I'm doing it piece by piece and checking with IE and Firefox. So far I've completed the left side and both browsers are displaying it properly.

**OJB** · March 24, 2008

sorry yea I realised I had got ahead a bit... what exactly is the difference between IE and FF... the only main difference I notice (IE 7 and FF 2) is that under the headings in FF the blue line extends for further, there is more spacing between headings and their subsequent text and there is very slightly less padding between list item points and the text

**TheMovieman** · March 24, 2008

That's basically it. The whole thing just doesn't look very good in Firefox. Also, check out the links. Only the top 3 are clickable (is that a word?), the rest don't do anything (almost as if they're part of the background).

But I want to do this the right way and not plug in a quick fix to make everything look all nice. And I'm not in a rush as my current design displays fine on both browsers.

**TheMovieman** · March 24, 2008

I've started over and so far, it's fine. I'm having other problems but since it isn't FF or IE related, I'm going to start a new thread.

A mod can delete this thread if they'd like...

Sign In

Page Looks Screwy In Firefox

Recommended Posts

TheMovieman

Link to comment

Share on other sites

TheMovieman

Link to comment

Share on other sites

TCH-Bruce

Link to comment

Share on other sites

OJB

Link to comment

Share on other sites

TheMovieman

Link to comment

Share on other sites

OJB

Link to comment

Share on other sites

TheMovieman

Link to comment

Share on other sites

TheMovieman

Link to comment

Share on other sites

Join the conversation

Hosting