[RESOLVED] Help with Firefox not displaying the same as IE....
I have 2 pages in the site ive been working on that do not display correct
1) index.html
-This is supposed to act like a "slpash" screen. but the background image doesnt display correctly: It doesnt center?
Code:
<HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Refresh" content="10;url=http://www........com/home.html">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=3)">
<LINK REL="shortcut icon" HREF="http://www......com/favicon.ico">
<title></title>
<style type="text/css">
body {
background-image: url('bg_main.jpg');
background-repeat: no-repeat;
background-position: center;
background-color: black;
cursor: hand;
scrollbar-arrow-color: black;
scrollbar-base-color: black;
scrollbar-dark-shadow-color: black;
scrollbar-track-color: black;
scrollbar-face-color: black;
scrollbar-shadow-color: black;
scrollbar-highlight-color: black;
scrollbar-3d-light-color: black;
}
div a
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body onMouseOver="window.status='Welcome to ...'; return true">
<div>
<a href="home.html" HIDEFOCUS></a>
</div>
</body>
</HTML>
basically the bg image (bg_main.jpg) is 1024x883 so that it fills the screen for 800x600 & 1024x768... and it has a logo in the center of the image...
problem is.. in IE the image centers both vertically and horizontally.. but in FF it doesnt??
Re: Help with Firefox not displaying the same as IE....
This is incorrect IE behaviour. (And on a side note, your HTML is quite invalid.) IE expands the body/document to fill the whole viewport, even when the content is shorter. Firefox doesn't, and centers the image on the content, not the viewport.
I believe that if you add a lot of dummy content, the image will center. Or it might drop even beyond the page.
OK, I looked at the page (if you want to hide the address of the page, it's a good idea to remove the shortcut icon ref too, not just the refresh address), and that's most definitely the problem.
Put the background image on the link instead. (A short test seems to confirm this.)
Re: Help with Firefox not displaying the same as IE....
ROFL! lol.. I dont care about hiding the url.. just was shortening some of the code. so it didnt go way beyond the edge....
if I put it on the link.. it wont center will it??
wont it start the image at 0,0?? hmmm
Re: Help with Firefox not displaying the same as IE....
oh.. and I forgot to ask.. how do I fix this!?? lol.. some code examples would be most appreciated!
Re: Help with Firefox not displaying the same as IE....
This worked for me:
Code:
body {
background-repeat: no-repeat;
background-position: center;
background-color: black;
cursor: hand;
scrollbar-arrow-color: black;
scrollbar-base-color: black;
scrollbar-dark-shadow-color: black;
scrollbar-track-color: black;
scrollbar-face-color: black;
scrollbar-shadow-color: black;
scrollbar-highlight-color: black;
scrollbar-3d-light-color: black;
}
div a
{
background-image: url('bg_main.jpg');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Re: Help with Firefox not displaying the same as IE....
well.. as I thought...
it puts the image at 0,0.. no good..
I need it so the logo goes in the middle.. always.. like IE does it
is there a way to get the screen size then set the left/top to - negative positions???
or some other way?
Re: Help with Firefox not displaying the same as IE....
I got it!!
actually.. try it now with ff
i added this:
background-attachment: fixed;
font-family: Times New Roman, serif ;
font-size: 16;
to the body section of the CSS.. and it worked!!
