CSS, positioning and FireFox
Posted: Wed Mar 29, 2006 11:39 am
Hi all,
I have some trouble getting the following page to show correctly in FireFox:
http://test.bprv.dk
The problem is:
When you look at it in IE6 and you change the font-size with CTRL+Scrollwheel the image everything expands nicely and pushes the block-elements below down. When shown in FF the chess-image kind of dissapears under the main-divelement.
The CSS goes here:
And the HTML:
When I remove the "position:relative;" from the #main-element it works a little better in FF (the image still dissapears a little, but it also pushes the elements under it a little down).
Really hope somebody can help me out, really can't figure what's wrong. How do I make it work i FF the way it works in IE?
I have some trouble getting the following page to show correctly in FireFox:
http://test.bprv.dk
The problem is:
When you look at it in IE6 and you change the font-size with CTRL+Scrollwheel the image everything expands nicely and pushes the block-elements below down. When shown in FF the chess-image kind of dissapears under the main-divelement.
The CSS goes here:
Code: Select all
html
{
height:100%;
}
body
{
margin:0px;
width:100%;
height:100%;
text-align:center;
font-family:arial,sans-serif;
font-size:1em;
background-color:#E9E9E9;
color:#000000;
}
p
{
font-family:arial,sans-serif;
font-size:0.8em;
margin:0px;
}
h1
{
font-size:1em;
letter-spacing: 1px;
margin-bottom: 0px;
}
h2
{
font-size:1em;
letter-spacing: 1px;
margin-bottom: 0px;
}
/* specific divs */
#container
{
width:758px;
margin:0 auto;
height:100%;
background-color:#FFFFFF;
text-align:left;
}
#image
{
height:119px;
background:url("./media/imagebg.jpg") top left no-repeat;
}
#image img
{
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
}
#main
{
position:relative;
padding:0px;
background:url("./media/bodybg.jpg") top left no-repeat;
}
#text
{
padding-top:20px;
padding-left:25px;
padding-right:25px;
height:185px;
}
#sidebar
{
position:absolute;
top:0px;
left:539px;
width:110px;
padding:20px;
height:100%;
background-color:#F7F7F7;
}
#top
{
margin:0px;
padding:0px;
position:relative;
width:758px;
height:79px;
overflow:hidden;
text-align:center;
}
#top span
{
display:block;
position:absolute;
left:0px;
top:0px;
z-index:1;
width:758px;
height:79px;
margin:0px;
padding:0px;
background:url("./media/top.jpg") top left no-repeat;
}Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>BPRV - Bracheforeningen for Public Relations Virksomheder - PR</title>
</head>
<body onload="window.defaultStatus='BPRV - Bracheforeningen for Public Relations Virksomheder';" id="bprv">
<div id="container">
<h2 id="top">
BPRV - Bracheforeningen for Public Relations Virksomheder
<span></span>
</h2>
<div id="menu">
<ul id="udm" class="udm">
<?php $menu->render();?>
</ul>
</div>
<div id="image"><img src="./media/image.jpg" alt=""></div>
<div id="main">
<div id="text">
<h1 id="pageheader">
titel
</h1>
<p>
text
</p>
</div>
<div id="sidebar">
nyhed
</div>
</div>
<div id="bottom">
<address></address>
</div>
</div>
</body>
</html>When I remove the "position:relative;" from the #main-element it works a little better in FF (the image still dissapears a little, but it also pushes the elements under it a little down).
Really hope somebody can help me out, really can't figure what's wrong. How do I make it work i FF the way it works in IE?