By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

Space at top of webpage in Firefox

P: 1
Hi, thanks for reading this post. I have a web page that displays fine in IE but in Firefox and Safari there is a space at the top of the web page. It is as if the whole page is pushed down, like there is a large margin at the top. Thank you. My code is as follows:
[html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Liken - A Series of Movies the Whole Family Can Enjoy</title>
<style type="text/css">
<!--
table {
vertical-align: top;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
.top {
height: 50%;
width: 100%;
background-image: url(images/index_03.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
.bottom {
height: 50%;
width: 100%;
background-image: url(images/index_08.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.left {
width: 50%;
background-image: url(images/index_05.jpg);
background-repeat: no-repeat;
background-position: right center;
}
.right {
width: 50%;
background-image: url(images/indexj_07.jpg);
background-repeat: no-repeat;
background-position: left center;
}
body {
background-color: #0099CC;
text-align: center;
vertical-align: top;
margin: 0px;
padding: 0px;
clear: none;
float: none;
height: 100%;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: visible;
position: absolute;
visibility: visible;
z-index: auto;
top: 0px;
}
-->
</style>
<body>

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="3" class="top">&nbsp;</td>
</tr>
<tr>
<td class="left"></td>
<td>
<script type="text/javascript" src="swfobject.js">
</script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so = new SWFObject("nav-WEBbrochure-bible.swf", "nav-WEBbrochure-bible.swf", "629", "607", "#336699");
so.write("flashcontent");
</script>
</td>
<td class="right"></td>
</tr>
<tr>
<td colspan="3" class="bottom"></td>
</tr>
</tbody>
</table>
</body>
</html>
[/html]
Mar 12 '07 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
What you are seeing in IE is a bug in IE. IE treats 'height' as min-height while Firefox, and other browsers, correctly interpret height by the standard. This is why you should never use IE as your first test.
Mar 12 '07 #2

Expert 100+
P: 1,892
Hi, thanks for reading this post. I have a web page that displays fine in IE but in Firefox and Safari there is a space at the top of the web page. It is as if the whole page is pushed down, like there is a large margin at the top. Thank you. My code is as follows:
[html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Liken - A Series of Movies the Whole Family Can Enjoy</title>
<style type="text/css">
<!--
table {
vertical-align: top;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
.top {
height: 50%;
width: 100%;
background-image: url(images/index_03.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
.bottom {
height: 50%;
width: 100%;
background-image: url(images/index_08.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.left {
width: 50%;
background-image: url(images/index_05.jpg);
background-repeat: no-repeat;
background-position: right center;
}
.right {
width: 50%;
background-image: url(images/indexj_07.jpg);
background-repeat: no-repeat;
background-position: left center;
}
body {
background-color: #0099CC;
text-align: center;
vertical-align: top;
margin: 0px;
padding: 0px;
clear: none;
float: none;
height: 100%;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: visible;
position: absolute;
visibility: visible;
z-index: auto;
top: 0px;
}
-->
</style>
<body>

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="3" class="top">&nbsp;</td>
</tr>
<tr>
<td class="left"></td>
<td>
<script type="text/javascript" src="swfobject.js">
</script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so = new SWFObject("nav-WEBbrochure-bible.swf", "nav-WEBbrochure-bible.swf", "629", "607", "#336699");
so.write("flashcontent");
</script>
</td>
<td class="right"></td>
</tr>
<tr>
<td colspan="3" class="bottom"></td>
</tr>
</tbody>
</table>
</body>
</html>
[/html]
FYI you can simplify your border statements if all sides are going to get the same values.. Ex:

Expand|Select|Wrap|Line Numbers
  1. border: 1px solid black
  2.  
Or in your case you can probably get rid of all of that since you have the size set to 0px and style set to none.
Mar 12 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.