Can someone help please I have a CSS problem

**brokensoul2271** · 02-23-2005, 07:10 AM

This is the site which has the problem: http://pureskateboarding.freeownhost.com/layout.html

When the site is viewed in IE everything looks fine but in Netscape and Firefox (unsure of other browsers) it's all messed up. The menu covers the content and things move about....

I'm pretty sure its the way the other browsers read the padding and positioning in the CSS

If anyone could help it would be greatly apprieciated

Thanks,
Seb

PS i'll post the code aswell...

HTML page:

HTML Code:

<?xml version="1.0" encoding="iso-8859=1"?>
<!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">
<html>
<head>
<title>PureSkateboarding - </title>
<link href="layout.css" rel="stylesheet" type="text/css" />


</head>
<body><script src="http://100webads.com/banners/tooltip.js"></script>
<div id='divtxl' width="781" align="center" style="position: absolute; z-index: 1000; top: 0; padding:0px 0px 0px 0px; color: #D4D4D4">
<table width="779"  border="0" cellspacing="0" cellpadding="0" style="text-align: center">
  <tr>
    <td width="4"><img src="http://100webads.com/banners/left_corner.gif" width="4" height="22"></td>
    <td bgcolor="#D4D4D4" background="http://100webads.com/banners/bg.gif" align="center" height="22" style="font: Tahoma; font-size: 11px; color: #D4D4D4; bgcolor: #D4D4D4; background: url(http://100webads.com/banners/bg.gif); text-align: center"> 
      <a href="http://www.100webspace.com" title="100mb free web space" style="font-weight: normal; font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">100mb free web space</a>&nbsp;|
	  <a href="http://www.lonex.com" title="web hosting by lonex" style="font-weight: normal; font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">web hosting by lonex</a>&nbsp;|
	  <a href="http://www.resellerspanel.com" title="2 tier affiliate program" style="font-weight: normal; font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">2 tier affiliate program</a>&nbsp;|
	  <a href="http://www.fateback.com" title="free web hosting" style="font-weight: normal; font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">free web hosting</a>&nbsp;|
	  <a href="http://www.motion-hosting.com" title="linux hosting" style="font-weight: normal; font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">linux hosting</a>&nbsp;|
	  <a href="http://www.ipowerweb.com" title="web hosting" style="font-weight: normal; font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">web hosting</a>&nbsp;|
	  <a href="#" style="font-weight: normal; font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onmouseover="on_eo(event,'tt1','show')" onmouseout="on_eo(event,'tt1','fade_hide')">links</a> 
    </td>
    <td width="3"><img src="http://100webads.com/banners/right_corner.gif" width="3" height="22"></td>
  </tr>
</table>
</div>
<div id='tt1' style="font-family: Tahoma; font-size: 11px; font-weight: normal; color: #000000; text-decoration: none; background-color: #FFFCCC; border-style: Solid; border-color: #000000; border-width:1 1 1 1; position: absolute; display: none; width: 250px; padding: 5 5 5 5;" onMouseOver="on_eo(event,this.id,'pause');" onMouseOut="on_eo(event,this.id,'fade_hide');"> 
  <div align='left'>
    <a href="http://www.valueweb.com" target="_blank" style="font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">web hosting</a>,
    <a href="http://www.cheaphostingdirectory.com" target="_blank" style="font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">cheap web hosting</a>,
    <a href="http://www.websitehostdirectory.com" target="_blank" style="font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">website hosting</a>
  </div>
  <div align='right'><a href="http://www.100webspace.com/advertising.html" target="_blank" style="font-family:Tahoma; color:#000000; font-size:11px; text-decoration: none;" onMouseOver="this.style.color = '#0098F6'" onMouseOut="this.style.color = '#000000'">online advertising</a></div>
</div>
<script language="JavaScript">
<!--
// Width = 779;
// Get browser ...
function checkBrowser(){
	this.ver=navigator.appVersion
	this.dom=document.getElementById?1:0
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
	this.ie4=(document.all && !this.dom)?1:0;
	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
	return this
}
var bw = new checkBrowser();
// Get page size ...
var PageWidth = (bw.ns4 || bw.ns5) ? innerWidth : document.body.offsetWidth - 20;
var PageHeight = (bw.ns4 || bw.ns5) ? innerHeight : document.body.offsetHeight - 20;
// Get our layer ...
var my_div = document.getElementById('divtxl');
// Fix stuff ...
if (parent && (PageWidth < 300 || PageHeight < 200)) {
	my_div.style.display = "none";
}
else {
	my_div.style.left = (PageWidth - 781) / 2;
	document.write('<div align="center"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td height="22" style="font: Tahoma; font-size: 11px; color: #D4D4D4;">&nbsp;</td></tr></table></table></div>\n');
}
-->
</script>


<div id="header">
<img src="images/simpleheader.gif" width="600" height="60" alt="PureSkateboarding" />
</div>
  <div id="logo">
    <span class="logo"><a href="index.html"><br /><br />Pure<br />Skateboarding</a></span>
    
    
  </div>

  <div id="textMenu">
    <a href="about.html">About</a> | <a href="contact.html">Contact Info</a>
  </div>

  <div id="navigation">
	<p class="myButton"><a href="index.html">Home</a></p>
	<p class="myButton"><a href="gallery.html">Gallery</a></p>
	<p class="myButton"><a href="forum.html">Forum</a></p>
	<p class="myButton"><a href="chat.html">Chat</a></p>
	<p class="myButton"><a href="tricks.html">Trick Tips</a></p>
	<p class="myButton"><a href="reviews.html">Reviews</a></p>


   </div>

 <div id="content">
 <h1 style='text-align:center'>Content</h1>
  <h2>Content</h2>
   
     <p>&nbsp;&nbsp;The content of my website will go here. The content of my website will go here. The content
     of my website will go here. The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here.
     The content of my website will go here.The content of my website will go here.The content of my website will go here....</p>
   
<br />
  <div id="footer">
    <a href="index.html" title="Home">Home</a>&nbsp;|&nbsp;
    <a href="gallery.html" title="Photo Gallery">Gallery</a>&nbsp;|&nbsp;
    <a href="forum.html" title="PureSkateboarding Forums">Forum</a>&nbsp;|&nbsp;
    <a href="chat.html" title="PureSkateboarding Chat">Chat</a>&nbsp;|&nbsp;
    <a href="tricks.html" title="Trick Tutorials">Trick Tutorials</a>&nbsp;|&nbsp;
    <a href="reviews.html" title="Reviews">Reviews</a>
   </div>
  
 </div>

    <div id="sidebar">
  <h3>Other Links</h3>
  <ul>
    <li><a href="LINK" title="link" class="sidebar">Link</a></li>
    <li><a href="LINK" title="link" class="sidebar">Link</a></li>
  </ul>
  <h3>Advertisments</h3>
  <ul>
   <li><a href="LINK" title="ad" class="sidebar">Ad</a></li>
  </ul>
 </div>

<script type="text/javascript" language="javascript" src="http://counter.fateback.com/java.php?user=10003"></script><noscript><a href="http://counter.fateback.com" target="_blank"><img src="http://counter.fateback.com/webstat.php?user=10003" alt="counter" border="0"/></a></noscript></body>
</html>

CSS page:

Code:

#logo {
  position: absolute;
  top:30px;
  left:15px;
  color: #ffffff;
  padding:1px;
  padding-top:5px;

.logo {
	margin-bottom: -15px;
	font-weight: 500;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.logo a:link {
	padding: 0px;
	text-decoration: none;
	width: 100px;
	height: 15px;
	display: block;
	color: #555555;
	background-color: #000000;
	padding-left: 5px;
	border-top: 1px #660000 solid;
	border-left: 10px #660000 solid;
	border-bottom: 1px #660000 solid;
	border-right: 1px #660000 solid;

}

.logo a:visited {
	padding: 0px;
	text-decoration: none;
	width: 100px;
	display: block;
	color: #555555;
	background-color: #000000;
	border-top: 1px #660000 solid;
	border-left: 10px #660000 solid;
	border-bottom: 1px #660000 solid;
	border-right: 1px #660000 solid;
}

.logo a:hover {
	padding: 0px;
	text-decoration: none;
	width: 100px;
        height: 15px;
	display: block;
	color: #cccccc;
	background-color: #666666;
	border-top: 1px #888800 solid;
	border-left: 10px #888800 solid;
	border-bottom: 1px #888800 solid;
	border-right: 1px #888800 solid;

}

.logo a:active {
	padding: 0px;
	text-decoration: none;
	width: 100px;
	display: block;
	color: #ffffff;
	background-color: #666666;
	border-top: 1px #888833 solid;
	border-left: 10px #888833 solid;
	border-bottom: 1px #888833 solid;
	border-right: 1px #888833 solid;
}


}

#header {
  position: absolute;
  top:30px;
  left:130px;
  width:475px;
  height:60px;
  margin:0 auto 10px;
  border:0px solid #ffffff;
}

#textMenu {
  position: absolute;
  top:100px;
  right:10px;
  float:right;
  color: #ffffff;
}

#navigation {
  position: absolute;
  left:10px;
  top:120px;
  padding:5px;
  padding-top:10px;
  width:100px;
  height:350px;
  background-color: #000000;
  border:0px solid #ffffff;
}
  

#content {
  position: absolute;
  left:125px;
  top:120px;
  margin:0 auto;
  padding-right:120px;
  padding-left:10px;
  text-align:left;
  border:2px solid #880000;
  border-bottom:2px solid #880000;
  background-color: #ffffff;
}

#sidebar {
  position:absolute;
  top:120px;
  right:0px;
  width:120px;
  padding:15px;
  float:right;
  border:2px solid #880000;
  border-left:10px solid #880000;
  background-color: #666666;
  color: #ffffff;
}

#footer {
  position:absolute;
  bottom:0px;
  right:0px;
  float:right;
  color: #000000;
  background-color: #ffffff;
  text-align:right;
  margin-top:30px;
}

/* Sidebar Content
----------------------------------------------- */
ul {
  color:#ffffff;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
  border-bottom:1px solid #999999;
  list-style:none;
  }
li {
  color: #ffffff;
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.5em;
  }

a.sidebar:link {
  color: #ffffff;
}

a.sidebar:visited {
  color: #ffffff;
}

a.sidebar:hover {
  color: #777777
}

a.sidebar:active {
  color: #777777
}

/* Content
------------------------------------------ */

a:link {
  color: #999999;
}

a:visited {
  color: #999999;
}

a:hover {
  color: #cccccc
}

a:active {
  color: #cccccc
}

body {
  color: #000000;
  background-color: #000000;
  font-family: Verdana, arial, sans-serif;
  font-size: 14px;
}

p {
  font-family: Verdana, arial, sans-serif;
  color: #555555;
  font-size: 12px;
  font-weight: bolder;
}






/* Headings
----------------------------------------------- */
h3 {
  margin:1.5em 0 .75em;
  font:88%/1.0em "Georgia Ref",Trebuchet,Arial,Verdana,Sans-serif;
  letter-spacing:.0em;
  color:#cccccc;
  }

h2 {
  font-family: Georgia Ref, Century Gothic, serif;
  font-size: 20px;
  font-weight: bolder;
  color: #555555;
}

h1 {
  font-family: Verdana, serif;
  font-size: 34px;
  font-weight: lighter;
  color: #660000;
} 

h1.header {
  font-family: arial, serif;
  font-size:26px;
  font-weight:bolder;
}
 
/* Buttons
----------------------------------------------- */
.myButton {
	margin-bottom: -15px;
	font-weight: 500;
	font-family: Georgia Ref, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.myButton a:link {
	padding: 0px;
	text-decoration: none;
	width: 100px;
	height: 15px;
	display: block;
	color: #cccccc;
	background-color: #000000;
	padding-left: 5px;
	border-top: 1px #660000 solid;
	border-left: 10px #660000 solid;
	border-bottom: 1px #660000 solid;
	border-right: 1px #660000 solid;

}

.myButton a:visited {
	padding: 0px;
	text-decoration: none;
	width: 100px;
	display: block;
	color: #cccccc;
	background-color: #000000;
	padding-left: 5px;
	border-top: 1px #660000 solid;
	border-left: 10px #660000 solid;
	border-bottom: 1px #660000 solid;
	border-right: 1px #660000 solid;
}

.myButton a:hover {
	padding: 0px;
	text-decoration: none;
	width: 100px;
        height: 15px;
	display: block;
	color: #ffffff;
	background-color: #666666;
	padding-left: 5px;
	border-top: 1px #ffff00 solid;
	border-left: 10px #ffff00 solid;
	border-bottom: 1px #ffff00 solid;
	border-right: 1px #ffff00 solid;

}

.myButton a:active {
	padding: 0px;
	text-decoration: none;
	width: 100px;
	display: block;
	color: #ffffff;
	background-color: #666666;
	padding-left: 5px;
	border-top: 1px #ffffff solid;
	border-left: 10px #ffffff solid;
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
}

**ph4nt0m** · 02-25-2005, 03:32 PM

One thing I might say is that you will never get a website to work perfectly in all browsers. Particularly between FireFox and IE. I've run across the many problems myself. Fix one thing in firefox, and it then something doesn't work in IE anymore. As I've been told before, try to perfect your website to work on the more common browsers, but if I had to give any recommendations on the coding, I would recommend decreasing the width of your "content" div. Even in IE the navbar I assume on the right floats of some of the white content box. If you're not wanting that to happen then I would make sure to give the content div a width parameter and align them correctly so they don't float of one another.

Another thing I noticed is that is on a couple of your pages you have your navbar on the left in a navframe. I imagine you simply just forgot, but you left the frame open for resize, so people can mess with it, and then it doesn't look so nice. To fix this just add noresize="noresize" in the frameset/frame code.

I'm sorry I couldn't really help you any further...
ph4nt0m

**brokensoul2271** · 02-25-2005, 05:38 PM

Thankyou for replying.
Yes i did forget about the frame, thanks for the reminder.
I know I won't be able to get it right exactly but i jus hoped that i could get it close to right. I have fixed most of the site now and have not given up. I may jus use javascript to give other browsers a difefrent stylesheet.
Thanks again,
seb

**Paradroid** · 02-25-2005, 07:13 PM

Seems to work fine in Opera 7.54