473,486 Members | 2,181 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Space at top of webpage in Firefox

1 New Member
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 7116
drhowarddrfine
7,435 Recognized Expert Expert
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 Recognized Expert Top Contributor
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

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

Similar topics

12
9387
by: skeeterbug | last post by:
http://www.geocities.com/operationsengineer1/test2.htm the extra space between the logoHeader and the menu bar occurs when i add the <ul>. if i comment out the ul and and all the li, the 1em...
8
6850
by: lkrubner | last post by:
Am I wrong, or do paragraphs have extra space on top in FireFox, when compared to Microsoft IE. The top of this page is an example: http://www.publicdomainsoftware.org/index.php?pageId=299 The...
5
718
by: Michael Shell | last post by:
Greetings, Consider the XHTML document attached at the end of this post. When viewed under Firefox 1.0.5 on Linux, highlighting and pasting (into a text editor) the <pre> tag listing will...
2
3255
by: doug s | last post by:
How would I access the source of a webpage? I would like to get the source, then use a regexp to find text on a webpage. For example, retrieving a counter, or some other text that dynamically...
4
6246
by: Joey | last post by:
Does anyone know how to center this sample webpage in Firefox? If so, will you provide the example as it applies to this sample webpage? I have read numerous posts and articles on how to center...
11
2957
by: Bob Hollness | last post by:
Hi all (me again. I do try to answer the posts I can instead of just asking!!!) Any ideas how I could load a webpage into a control that was about the size of a stamp? I tried a few things but...
12
4197
by: M.L. | last post by:
When loaded from my hard drive, the webpage I'm working on renders fine on IE6, Firefox 2.0.0.1, and Opera 9.02. However, after uploading it to the web there are 2 images that fail to display on...
5
2547
by: Richard Maher | last post by:
Hi, Can someone please show me how to tell Firefox to preseve white-space when returning the selectList.option.value attribute? I have change the style so that the white-space is preserved on...
6
1713
by: Jetus | last post by:
Is there a good place to look to see where I can find some code that will help me to save webpage's links to the local drive, after I have used urllib2 to retrieve the page? Many times I have to...
0
7105
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
6967
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7132
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7180
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
7341
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
1
4870
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
3076
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3071
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
600
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.