Browser Compatibility Problem (Major)

Hyroz · #1 Feb 28th, 2008, 22:59

Ok so my page looks fine in Internet Explore but in Firefox it looks horrible. I want my page to work fine in both browsers. I have tried validators and everything, I can't figure out what is wrong. Your help would be greatly appreciated guys.

Ok so heres the pages html.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/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>Computer Maintance</title>
<link href="cm1.css" rel="stylesheet" type="text/css" />
<link href="nav/mainnav.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="nav/mainnav.css" />
<script type="text/javascript" src="nav/javascript/dropdown.js">
</script>
</head>
<body>
<noscript>To display this page correctly, javascript must be enabled in your browser.</noscript>
<img src="cmbanner.jpg" class="topbanner" alt="Banner" /> 
<div class="chromestyle" id="chromemenu" style="padding-bottom: 10px;">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Computer/Hardware</a></li>
<li><a href="#" rel="dropmenu2">Internet</a></li>
<li><a href="#" rel="dropmenu3">Software</a></li>    
<li><a href="#" rel="dropmenu4">Sources</a></li>
<li><a href="#" rel="dropmenu5">About</a></li>    
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Increase Computer Speed</a>
<a href="http://www.cssdrive.com">Replacing Ram</a>
<a href="http://www.javascriptkit.com">Replacing Harddrive</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">Browsers</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
<!--4rd drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Images</a>
<a href="http://www.yahoo.com">Information</a>
<a href="http://www.msn.com">Content</a>
</div>
<!--5rd drop down menu -->                                                   
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Test</a>
<a href="http://www.yahoo.com">Test</a>
<a href="http://www.msn.com">Test</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
<table border="0" cellspacing="0" class="wlctbl" align="center" width="700" >
<tr>
<td width="100%" bgcolor="#999999" class="wlc" style="background:url('images/bghead.gif');">Welcome to Synthetic Drive!</td>
<td bgcolor="#999999" class="topbutton" style="float: right; background:url('images/bghead.gif'); border-left: 1px solid #000; border-bottom: 1px solid 

#000;"><a href="#top">^</a></td>
</tr>
<tr>
<td>Welcome to Synthetic Drive!  Synthetic drive is a website that teaches computer maintence broken down into four different categories:
<ul>
<li>Hardware</li>
<li>Computer</li>
<li>Internet</li>
<li>Software</li>
</ul>
Not only does Synthetic Drive teach those categories it also has interactivity to keep your brain pumping!
</td>
</tr>
</table>
<br />
<table border="0" cellspacing="0" cellpadding="0" class="wlctbl" align="center" width="700" >
<tr>
<td width="100%" bgcolor="#999999" class="wlc" style="background:url('images/bghead.gif');">Member Preferences</td>
<td bgcolor="#999999" class="topbutton" style="float: right; background:url('images/bghead.gif'); border-left: 1px solid #000; border-bottom: 1px solid 

#000;"><a href="#top">^</a></td>
</tr>
</table>
<br />

</body>
</html>

Here is the pages css for the navigation.

Code: Select all

.chromestyle{
font-weight: bold;

}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url('chromebg.gif') center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
background: url('chromebg-over.gif') center center repeat-x; /*THEME CHANGE HERE*/
color: #000;
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url('downimage.gif'); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position: absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #FFF;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #000;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;

and here is the css for just the page

Code: Select all

body {
margin : auto;
background-color : #f4f1f1;
font-family : Times New Roman, Verdana, Arial, Sans-Serif;
border-bottom : 1px solid #000000;
}
.topbanner {
display : block;
float : left;
}
.wlctbl {
border-right : 1px solid #000;
border-left : 1px solid #000;
border-top : 1px solid #000;
border-bottom : 1px solid #000;
}
.wlc {
font-size : 16px;
font-weight : bold;
border-bottom : 1px solid #000;
color : #000;
}
.topbutton a {
color : #000;
text-decoration : none;
}
.topbutton a:visited {
color : #000;
text-decoration : none;
}
.topbutton a:hover {
color : #000;
text-decoration : none;
}
.topbutton a:active {
color : #000;
text-decoration : none;
}

Please help me get this fixed. Thanks!

delusion · #2 Feb 29th, 2008, 01:29

I see "content: ".";

what does that do?

danny322 · #3 Feb 29th, 2008, 09:55

Have you got a link to the site? Quick tip......always test in firefox, not IE

Aso · #4 Feb 29th, 2008, 11:27

Quote:

Originally Posted by delusion

I see "content: ".";

what does that do?

The :after pseudo element is a CSS function for adding (and styling) content after a selector.

The content is the actual content to be placed after the selector. In this case, a period. Usually this is a handy technique for clearing floats in FF, without the need for additional markup (which is not semantic).

@Hyroz - a link would be really useful. Since you've also got images in your layout, it will be hard for us to debug if we're not seeing the same thing as you. (Otherwise upload a zip of your files).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Browser compatibility issues	Craigj1303	Web Page Design	3	Feb 4th, 2008 09:28
PC browser compatibility	aaronh	Starting Out	2	Sep 21st, 2007 01:10
AOL Browser Compatibility	hortondr	Web Page Design	6	Apr 4th, 2007 22:25
Browser compatibility	Alsilver	Web Page Design	11	Oct 19th, 2006 20:18
Browser compatibility issue	wombleUK	Web Page Design	6	Sep 6th, 2006 13:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Browser Compatibility Problem (Major)