CSS, positioning and FireFox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

CSS, positioning and FireFox

Post by asgerhallas »

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:

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;
}
And the HTML:

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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

It seems it has something to do with the udm menu, which has some complicated positioning going on. I would try to remove the menu to see if it has indeed something to do with it. Also, you position the sidebar absolutely. That often causes trouble when resizing text. Last, I would advice to turn things around: first develop for FF or other modern browsers, and only after that test in an old browser like IE. Will save you some headaches, if you don't already have some :wink:
Sorry I don't have an exact answer, but maybe this can help you a step forward.
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

That was a great step forward... many thanks! :) ...

It was the UDM-menu, which caused the problem. Now I just have to find out what to do about it :D
Any suggestions highly appriciated!

One more question, if I shouldn't position the sidebar absolute, does a better method exist then?

/Asger

(sorry for my slow reply)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Good we have pinpointed it down to one thing. Need some sleep now however but i'll look into your questions tomorrow morning (CET). For now a quick answer:
The problem with absolute positioning is that it is always absolutely positioned relative to it's positioned parent. So normally that's the body. And when you resize the text size, a header div for example will expand. But the sidebar div will remain at exactly the same position.

2 solutions:
1) Give the first parent container a position:relative. So if you have a #content div in which a #main and #sidebar are, give #content a position:relative; and then the sidebar is positioned absolutely relative to that #content.
2) use floats. Float the sidebar to the right with a certain width. Float the main content to the left. Make sure the widths added up aren't too wide for the containing div. Something like:

Code: Select all

#main{
	position:relative;
	padding:0px;
	background:url("./media/bodybg.jpg") top left no-repeat;
}
#text{
 float:left;
 width:600px;
 padding-top:20px;
 /*padding-left:25px;
	padding-right:25px; watch out with padding and widths and box model headaches. Just give the child elements a margin */
	height:185px; 
}
#sidebar{
 float:right;
 width: 150px;	
	/*padding:20px; again watch out with padding */
	height:100%;
	background-color:#F7F7F7;
}
Only thing with floats is that you have to clear them when you want to position something below it. Or use more floats. Well, now I'm really going to sleep :)
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

Good morning, hope you have had good night sleep... :D

Thanks for the quick solutions! (And the good advice on paddings). Well, the first solution with the first parent of the sidebar having position:relative; is actually what I am doing in posted code - just with some other ids (#main is parent of #text and #sidebar) - guess you were really tired :lol:

The relative #main and so works pretty much as predicted as long as I do not implement the UDM4. But when the menu is active it is kind of not calculated in to where the #main-element should begin, thus the menu-size has no effect on the #main position - even though it's relative.

I will go try the float method to see if I can make that work better, but it would still be nice to get my head around why the UDM4 menu messes things up.

Hope you've dreamt a solution :)
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

I've tried to remove all padding on the page now, and it actually did something - the problem is less visible now, but there's still something wrong. Take a look, it seems pretty strange to me:

http://test.bprv.dk
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Good morning and thanks, I did sleep :)

Looked at the layout again and cannot explain the bugginess exactly. But what I always do in such a case to speed up the process: strip down the style elements and start with the basic stuff of which I know always works. So I changed some things, removed some rules and came with this:

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>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
		<meta name="author" content="Asger Hallas" />
		<meta name="keywords" content="brpv brancheforeningen for public relations virksomheder pr" />
		<meta name="description" content="BPRV - Bracheforeningen for Public Relations Virksomheder - PR" />
        <meta name="robots" content="all" />
			
			<style type="text/css">
<!-- 
html{height:100%;}
body { 
  margin:0px; 
  text-align:center;
  font-family:arial,sans-serif;
  font-size:1em;
  background-color:#E9E9E9;
  color:#000000;
}
/* 
  .. other styling stuff here .. p, h1, h2 etc
*/

/* specific divs */

#container {
	width:758px;
	margin:0 auto;
	background-color:#FFFFFF;
	text-align:left;
}
#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;
} 
#image {
  float:left;
  width:100%;
  height:119px;
  background:url("./media/imagebg.jpg") top left no-repeat; background:red;
}

#image img {
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;
}
/* this is the basic layout: float left, float right, and clear below. Always works */
#main { 
  float:left;
  width:649px;/* width= #text width+ #sidebar width + gutter */
  position:relative;
  padding:0px;
  background:url("./media/bodybg.jpg") top left no-repeat;
}
#text {
  float:left;
  width:500px;
  margin-left:25px;
  display:inline; /* IE double float margin bug, see positioniseverything */
  background:blue;
}
#sidebar {
  float:right;
  width:110px;	
  background-color:#F7F7F7;
}
#bottom {
  clear:both; /* needed to clear the floated elements */
}

-->
</style>
        <!--<link rel="stylesheet" type="text/css" href="main.css" media="screen, projection" /> -->
    	<link rel="stylesheet" type="text/css" href="udm-style.css" media="screen, projection" />
        <script type="text/javascript" src="/udm4/udm-dom.php"></script>
        <script type="text/javascript" src="/udm4/udm-mod-keyboard.js"></script>
		<script type="text/javascript" src=""></script>
	</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">
           <li><a href="test" title="test">Sider</a>
        <ul class="orangeMenu" style="width:8em">
       <li><a href="test" title="test">Angiv titel</a></li>
      <li><a href="test" title="test">dfgdfg</a>
     <ul class="orangeMenu" style="width:8em">
       <li><a href="test" title="test">Angiv titel</a></li>
      </ul>
       </li>
     <li><a href="test" title="test">Angiv titel</a></li>
      </ul>
      </li>
    </ul>
 </div>
  
 <div id="image"><img src="image.jpg" alt="" width="758" height="119"></div>
  
 <div id="main">
    
	<div id="text">
      <h1 id="pageheader">titel</h1>
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure d</p>
   </div>

   <div id="sidebar">
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure d</p>
   </div>
 </div>
  
 <div id="bottom">
   <address>bottom</address>
 </div>
  
</div>
</body>
</html>
The reason I used floats is that with your previous css, the text in #text would go below the #sidebar. As you only had one word in that div you couldn't see that. of course, you could have given the #text a margin-right to solve that. However, another problem would have been that the absolute positioned sidebar would have gone over the bottom if the content of the sidebar would have been larger then that of #text.
(pay attention, I changed some paths in the code above for testing purposes)

Hope this helps.
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

Thank you very much! That was an eye-opener actually. I have never used the float attributes before :? !!!

I'm now looking to find a way for full-height layouts, and it seems positioniseverything has some good links!

It is my plan to have the design looking like this in the end:

http://test.bprv.dk/design.jpg

I guess I'll return with more qustions soon :D

/Asger
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

If you are looking for a way to position the footer at the bottom or - when the content is longer - below the content, look no further:
http://www.themaninblue.com/experiment/footerStickAlt/ which fixes a bug from http://solardreamstudios.com/learn/css/footerstick/.

Full-height layouts are difficult to get cross-browser. So if you need that, follow the link and study the above article as that will save you some braindamage.
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

Thank you very much for the links. Those togehter with this one: http://www.positioniseverything.net/art ... _home.html seems to have got me in the right direction. Thank you once again!

/asger
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

If anyone's interested I here month after actually found a proper solution to my CSS problem. I have now acomplished full height layout *with* elements above the full height text div and full height sidebar.

There's is BTW no faux coloumns or anything in this. The result can be seen here:

http://test.bprv.dk

If anybody needs an explanation, just post to this thread and I'll try giving one :)

/Asger
Post Reply