468,117 Members | 1,524 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,117 developers. It's quick & easy.

Space at top of webpage in Firefox

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
2 6949
drhowarddrfine
7,435 Expert 4TB
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
AricC
1,892 Expert 1GB
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.

Similar topics

5 posts views Thread by Michael Shell | last post: by
2 posts views Thread by doug s | last post: by
11 posts views Thread by Bob Hollness | last post: by
5 posts views Thread by Richard Maher | last post: by
6 posts views Thread by Jetus | last post: by
13 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.