Works in IE not in Mozilla [Archive]

eyecrave

12-21-2003, 11:00 PM

I just started learning CSS last week so please bear with me. I've been working on converting my site to a CSS based theme.

After putting in a whack of hours I decided to check it out in Mozilla 1.5 and as you can see from the screenshots below it looks nothing like the IE one. Can anyone make any suggestions?

eyecrave

12-21-2003, 11:03 PM

I guess I should mention that there is one table surrounding the whole thing to make it the size I want. I found it easier for my programming purposes.

eyecrave

12-23-2003, 12:34 AM

Looks like the problem is the padding and margin issue. I've used the hack that's posted in another thread to clear parts of it up, but I'm still running into issues.

I'll post more screen shots later, but the lists in the middle bar don't go to their width and forces the bottom links to appear through the border while the blue bar appears behind the left and right middle bars. I hope that makes sense.

toicontien

12-23-2003, 01:08 AM

We really can't help you unless you either post the code or give us a link to the page. But a couple of quick suggestions without really knowing how you coded your pages:

1. Make sure you have a valid doctype tag at the very beginning of your HTML document, and then also a meta tag declaring the character set for the web page.

Doctypes:
http://www.w3schools.com/tags/tag_doctype.asp

I use the following character set declaration:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> for HTML 4.01 Loose, Strict, and Frameset, and even XHTML 1.x.

OR

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> for XHTML 1.x.

2. Validate your HTML at http://validator.w3.org/ once you have a valid doctype tag and character set declaration. In addition, most any browser released after 2001 will render the page in standards compliance mode. IE 5.x/PC and older will not. The biggest difference is that IE6 gets the CSS box model correct in standards compliance mode, but not in quirks mode. Browsers render pages in quirks mode if an incorrect doctype is specified.

You can validate your CSS at http://jigsaw.w3.org/css-validator/

3. Test your designs in Mozilla 1.5 or Opera 7.2 first because they have the best support for CSS. Once you have the design working in those browsers, look at it in IE6. Hack your stylesheets to get it to work in IE6. Then look at the pages in IE5.x/PC. Do more hacking.

Internet Explorer for the PC and Mac has lackluster support for CSS, though IE5.x/Mac has the best.

If you alread knew this, my apologies :)

eyecrave

12-23-2003, 01:13 AM

Here's the code. If it's sloppy I'm sorry I'm new to CSS :D

Code removed. Resolved issue.

eyecrave

12-23-2003, 01:23 AM

I validated the code and it's fine. I've resolved the Mozilla issue above, sorta. I still get that blue bar showing up behind the darker gray one.

Also, now my links #menu_control overlap each other in Mozilla, but only two of the titles. It's strange.

eyecrave

12-23-2003, 04:53 AM

Well, after working on it for nearly 10hrs straight I figure it out. Don't ask what I did, I just kept pluging away until it worked in both.

Cheers

gizmo

12-23-2003, 11:39 AM

It would have been nice to keep the code for future reference, the thread is pointless without it.:(

eyecrave

12-23-2003, 02:15 PM

Sorry I never thought of that. Here's the code... I've discovered another flaw though. The machine I was hacking away on last night was running IE5.5 and my home machine is running IE6 and the logo isn't lined up where it is in Mozilla.

Here's the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="keywords" CONTENT="DVD DVDs review reviews easter eggs egg information info movie movies news studio studios store stores links release date releases dates motion picture pictures lists list discs previews cinema disney mgm new line universal fox criterion elite live entertainment live warner columbia tristar sony polygram image warner images">
<META NAME="description" CONTENT="EyeCraveDVD.com provides daily update of news, reviews, forums, easter eggs, release dates, and much more for DVD's and Movies.">
<META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">


<title>{page_title}</title>


<style type="text/css">

BODY {
margin-left: 0px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 10px;
background-color: #ACACAC;
font-size: 11px;
font-family: verdana, tahoma, arial, sans-serif;
}

a {
font-family: verdana, tahoma, arial, sans-serif;
font-size: 11px;
color: #4C4C4D;
text-decoration : none;
}

a:active {
font-family: verdana, tahoma, helvetica, arial, sans-serif;
font-size: 11px;
color: #666666;
text-decoration : none;
}

a:hover {
font-family: verdana, tahoma, helvetica, arial, sans-serif;
font-size: 11px;
color: #3A4F7A;
text-decoration : none;
}

#spacer {
height: 10px;
}

/*
=======================
HEADER LAYOUT OPTIONS
=======================
*/

#headerblock {
height: 75px;
background-color: #124C8D;
width: 780px;
border: solid black 1px;
height: 75px;
}

#header_datestamp {
height: 19px;
font-size: 11px;
font-weight: bold;
font-family: verdana, tahoma, arial, sans-serif;
text-align: right;
white-space: nowrap;
}

#header_left {
background-color: #124C8D;
width: 292px;
float: left;
white-space: nowrap;
}

#header_right {
float: right;
width: 468px;
padding: 10px;
white-space: nowrap;
}

/*
=======================
USER/DVD HEADER BAR
=======================
*/

#DVDbar_left {
background-color: #F6F6F6;
height: 148px;
float: left;
padding: 0;
margin: 0;
font-size: 11px;
font-family: verdana, tahoma, arial, sans-serif;
width: 546px;
}

#DVDbar_left UL {
list-style-type: none;
margin: 0px;
padding: 0px;
border: none;
}

#DVDbar_left UL LI {
display: block;
margin: 0px;
padding: 0px;
float: left;
width: 180px;
}

#DVDbar_right {
background-color: #D5D5D5;
height: 148px;
float: right;
border-left-style: inset;
border-left-color: #000000;
border-left-width: 1px;
padding: 0px;
text-align: center;
font-size: 11px;
font-family: verdana, tahoma, arial, sans-serif;
width: 231px;
}

/*
========================
HEADER MENU CONTROLS
========================
*/

#menu_box {
height: 186px;
width: auto;
padding: 0px;
border: solid black 1px;
background-color: #F6F6F6;
}

#menubar_top {
background-color: #124C8D;
width: 100%;
height: 18px;
border-bottom: solid 1px #000000;
vertical-align: middle;
white-space: nowrap;
padding: 0;
margin: 0;
float: left;
}

#menubar_bottom {
background-color: #124C8D;
height: 18px;
width: 100%;
border-top: solid 1px #000000;
padding: 0;
margin: 0;
vertical-align: middle;
float: left;
}

#menu_control
{
background-color: #124C8D;
color: #FFFFFF;
font: bold 10px verdana, tahoma, arial, sans-serif;
padding: 0;
margin: 0;
white-space: nowrap;
}

#menu_control UL {
list-style-type: none;
margin: 0;
padding: 0;
border: none;
white-space: nowrap;
float: left;
text-align: center;
}

#menu_control UL LI {
display: inline;
text-align: center;
margin: 0;
padding: 0px 7px 0px 7px;
width: auto;
height: auto;
vertical-align: middle;
}

#menu_control a:link {
color: #FFFFFF;
text-decoration: none;
}
#menu_control a:visited {
color: #FFFFFF;
text-decoration: none;
}
#menu_control UL LI a:hover, #menu_control UL LI a:active {
color: #FFFFFF;
text-decoration: overline underline;
}

/*
===============================
LOGO
===============================
*/

#logo {
position: absolute;
top: 3px;
}

</style>

</head>

<body>

<div align="center">
<table width="780" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<DIV id="header_datestamp">December 18, 2003</DIV>
<DIV id="headerblock">
<DIV id="header_left"><DIV id="logo"><img border="0" src="logo_ecdvd5.gif" width="275" height="100"></DIV></DIV>
<DIV id="header_right">
<script type="text/javascript"></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></DIV>
</DIV>
<DIV id="spacer"></DIV>

<DIV id="menu_box">
<DIV id="menubar_top">
<DIV id="menu_control">
<UL>
<li><a href="{site_url}" alt="EyeCraveDVD.com" Title="EyeCraveDVD.com - Feed Your DVD Hunger!">Home</a></li>
<li>::</li>
<li><a href="{site_url}/dvd/index.php?display=review" alt="DVD Reviews" Title="DVD Reviews">DVD Reviews</a></li>
<li>::</li>
<li><a href="{site_url}/dvd/index.php?display=easteregg" alt="Easter Eggs" title="Easter Eggs">Easter Eggs</a></li>
<li>::</li>
<li><a href="{site_url}/calendar.php" alt="DVD & Movie Release Dates" title="DVD & Movie Release Dates">Release Dates</a></li>
<li>::</li>
<li><a href="{site_url}/movies/" alt="Movie Reviews" title="Movie Reviews">Movie Reviews</a></li>
<li>::</li>
<li><a href="http://forums.eyecravedvd.com" alt="Message Boards - DVD Talk - DVD Forums" title="Forums">Forums</a></li>
<li>::</li>
<li><a href="{site_url}/contest.php" alt="DVD Contests" title="DVD Contests">Contests</a></li>
</UL>
</DIV>
</DIV>

<DIV id="DVDbar_left">
<UL>
<li><center>Image here<br /><br /> Link Here</center></li>
</UL>
<UL>
<li><b>Reviews (In Store)</b><br/>
<?php phpblock_getReviews(); ?>
</li>
</UL>
<UL>
<li><b>Previews</b><br />
» <A href="http://www.eyecravedvd.com/dvd/dvdReview.php?dvdID=608">Sweetest Thing, The...</A><br />
</li>
</UL>
</DIV>

<DIV id="DVDbar_right"><p>What's up with that? home boy. Does a snake eat a snake if the snake is yummy</p></DIV>

<DIV id="menubar_bottom">
<DIV id="menu_control">
<UL>
<li><a href="{site_url}/webcomic/" alt="Movie Comics" Title="EyeCraveDVD.com Comic Strip">The Strip</a></li>
<li>::</li>
<li><a href="{site_url/store.php" alt="EyeCraveDVD.com Gear" title="Buy your EyeCraveDVD.com Gear Today">EyeCraveDVD Store</a></li>
<li>::</li>
<li><a href="{site_url/store.php" alt="Evil Axel's Store" title="Get your Evil Axel Gear Today">E.A's Store</a></li>
<li>::</li>
<li><a href="{site_url}/filemgmt" alt="Movie Wallpapers" title="Movie Wallpapers">Dowloads</a></li>
<li>::</li>
<li><a href="{site_url}/links.php" alt="Links" title="Links">Links</a></li>
<li>::</li>
<li><a href="{site_url}/faqman/" alt="DVD FAQ" title="EyeCraveDVD.com F.A.Q.">F.A.Q.</a></li>
<li>::</li>
<li><a href="{site_url}/search.php" alt="Search" title="Search EyeCraveDVD.com">Search</a></li>
<li>::</li>
<li><a href="{site_url}/staff.php" alt="EyeCraveDVD.com Staff" title="EyeCraveDVD.com Staff">Staff</a></li>
</UL>
</DIV>
</DIV>

</DIV>

</td>
</tr>
</table>
</div>

</body>

</html>

You can see it in action at http://test.eyecravedvd.com. Please keep in mind I'm still working on it, and it's not even close to being completed.

Cheers