I have a webpage that is NOT suppose to have a border at the top. In IE, Safari, and Chrome, that top border does not appear; this is the way I want it. However, in Firefox there is a border and I can't seem to get rid of it.
Here's the HTML and CSS
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Susan Cruz Design</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Susan Cruz Design" />
<style type="text/css" media="all">@import "css/master.css";
.style1 {
text-align: center;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/new_images/frog_glow.png','images/new_images/girl_glow.png','images/new_images/sun_glow.png','images/new_images/moviecamera_glow.png','images/new_images/postcard_glow.png','images/new_images/toucan_glow.png','images/new_images/emailme_glow.png')">
<div id="page-container">
<div id="main-nav" class="style1">
<a href="/default.html">
<img alt="home tab" height="30" src="images/hometab.jpg" width="146" BORDER="0" /></a>
<a href="/portfolio.html">
<img alt="portfolio tab" height="30" src="images/portfoliotab.jpg" width="147" BORDER="0" /></a>
<a href="/contactme.html">
<img alt="contact me tab" height="30" src="images/contactmetab.jpg" width="146" BORDER="0" /></a>
</div>
<div id="header">
<h1><a href="/default.html"><img src="images/new_images/logo.png" alt="logo" BORDER="0" /></a></h1></div>
<div id="sidebar-left"></div>
<div id="content"><a href="/textbook.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('frog','','images/new_images/frog_glow.png',1)"><img src="images/new_images/frog.png" alt="Textbook" name="frog" width="184" height="124" border="0" id="frog" /></a> <a href="/logo.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sun','','images/new_images/sun_glow.png',1)"><img src="images/new_images/sun.png" alt="Logo Design" name="sun" width="184" height="124" border="0" id="sun" /></a> <a href="/printdesign.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('moviecamera','','images/new_images/moviecamera_glow.png',1)"><img src="images/new_images/moviecamera.png" alt="Print Design" name="moviecamera" width="184" height="126" border="0" id="moviecamera" /></a><br/><br/><br/>
<a href="/photoillustration.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('postcard','','images/new_images/postcard_glow.png',1)"><img src="images/new_images/postcard.png" alt="Photo Illustration" name="postcard" width="184" height="125" border="0" id="postcard" /></a> <a href="/email.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('girl','','images/new_images/girl_glow.png',1)"><img src="images/new_images/girl.png" alt="E-mail" name="girl" width="184" height="125" border="0" id="girl" /></a> <a href="/illustration.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('toucan','','images/new_images/toucan_glow.png',1)"><img src="images/new_images/toucan.png" alt="Illustration" name="toucan" width="184" height="125" border="0" id="toucan" /></a><br/><br/><br/><br/>
<a href="mailto:susan@susancruzdesign.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('emailme','','images/new_images/emailme_glow.png',1)"><img src="images/new_images/emailme.png" alt="Send E-mail" name="emailme" width="93" height="63" border="0" id="emailme" /></a></div>
<div id="footer" class="style1">
<img src="images/new_images/copyright.png" />
</div>
</div>
</body>
</html>
CSS
Code:
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
#page-container {
background: url('../images/new_images/big_background.jpg');
width: 100%;
margin: auto;
}
#main-nav {
background: url('../images/new_images/nav_banner.jpg');
height: 30px;
}
#header {
height: 175px;
}
h1 {
margin: 0;
float: none;
margin-top: 5px;
margin-left: 300px;
}
#sidebar-left {
float: left;
width: 550px;
height: 550px;
}
#content {
padding-top: 50px;
padding-right: 30px;
}
#footer {
clear: both;
height: 30px;
background-image: url('../images/new_images/footer.png');
}
02-09-2010, 06:53 PM
Remove top border in Firefox
Linear Mode
