PDA

View Full Version : Trouble with DIV heights across browsers



UtterBen
Dec 10th, 2008, 08:53 PM
Hey guys,

You've probably had this one a million times, judging by the amount of info brought up when I searched for it. I've been trying to fix this for the last 2 days and just can't get it right.

Here is my page in question: www.uttermedia.net/gallery/

It appears okay in some browsers, and not so good in others. When I get it lined up in Firefox on a Mac, it misaligns in Firefox for Win, and sometimes in Safari. I basically want the bottom of the right column (HOME PHOTO DESIGN IMAGERY) to sit at the same level as the bottom of the image to the left. Both columns are DIVs. When you select a photoshoot from the iframe, it loads a new page and presents the same problem, but obviously with a flash gallery rather than the image. The links at the base of the website are in a 3rd DIV. At present, it doesn't line up in Firefox on Windows, but seems to be just about okay in Firefox on Mac. If I line it back up for Windows, it screws up on a Mac.

Here's my code:

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<html>
<head>
<title>utterMEDIA | PHOTO</title>
<link rel="stylesheet" type="text/css"
href="http://www.uttermedia.net/ess.css" />
</head>

<body bgcolor="#FFFFFF" link="#333333" alink="#333333" vlink="#333333">

<div id="container">

<div id="image">
<img src="http://www.uttermedia.net/select.jpg">
</div>

<div id="text">
<img src="http://www.uttermedia.net/medialogo.gif"><br>
<iframe name="frameOne" iframe src="http://www.uttermedia.net/frame.html" WIDTH=365 HEIGHT=500 FRAMEBORDER=0 allowtransparency="true"></iframe>
</div>

<div id="foot">
<center>
<FONT FACE="verdana" FONT SIZE="1" FONT COLOR="#404040">&copy; <a href="http://blog.uttermedia.net">BEN HORSLEY</a> &nbsp;2004-2008<br>
<a href="http://www.uttermedia.net/contact.php"><b>CONTACT</b></a> <a href="http://www.uttermedia.net/faq.php"><B>FAQ</B></a> <a href="http://www.uttermedia.net/feedback.php"><B>FEEDBACK</B></a></FONT>
<br>
</center>
</div>

</div>

</body>

</html>

CSS:


BODY { background-image:url(http://www.uttermedia.net/divide.jpg);
background-position:top center; background-repeat:repeat; }



A{text-decoration:none}

#container {
width: 800px;
height: 800px;
position: absolute;
left:50%;
top:50%;
margin-left:-400px;
margin-top:-400px;
text-align: left;
overflow: auto;
}


#image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -235px;
margin-left: -384px;
width: 310px;
height: 624px;
}


#text {
position: absolute;
top: 50%;
left: 50%;
margin-top: -340px;
margin-left: 35px;
width: 355px;
height: 624px;
}


#foot {
position: absolute;
top: 50%;
left: 50%;
margin-top: 300px;
margin-left: -70px;
width: 160px;
height: 30px;
}

Any help would be much appreciated! I've tried to keep my code as simple as possible. The right DIV contains an iframe, as you can see.

Cheers!

Excavator
Dec 10th, 2008, 09:00 PM
Hello UtterBen,
The first step would be to add

* {
margin: 0;
padding: 0;
}
to your CSS. That will zero out all default margins and padding since every browser has a different idea what those should be.
After you do that, you can specify any padding and margin you want and it should appear the same in different browsers.

Another thing that helps is validation. Read about validation in the links in my sig below.



.

Excavator
Dec 10th, 2008, 09:19 PM
Maybe it would work better to let the divs flow normally, instead of absolute positioning...
Here's a start, replace your CSS with this-
BODY { background-image:url(http://www.uttermedia.net/divide.jpg);
background-position:top center; background-repeat:repeat; }

* {
margin: 0;
padding: 0;
}

A{text-decoration:none}

#container {
width: 800px;
background: #f0f0f0;
margin: 0 auto;
text-align: left;
overflow: auto;
}


#image {
background: #0000ff;
float: left;
margin: 290px 0 0 0;/*adjust position here*/
width: 378px;
height: 624px;
}


#text {
background: #ff0000;
float: right;
margin: 235px 0 0 0;/*adjust position here*/
width: 355px;
height: 624px;
}


#foot {
background: #ff00ff;
margin: 30px 0;
float: left;
clear: both;
height: 30px;
text-align: center;
}

It still needs some tweaking but this is just to show you another way.

UtterBen
Dec 10th, 2008, 11:09 PM
Well they don't call you senior coder for nothing!
Worked perfectly, thank you. Just need to check in on a Mac tomorrow.

Can I use the dead center rule to put the content at the middle of the browser regardless of screen resolution?

Thanks again.

Excavator
Dec 10th, 2008, 11:52 PM
Can I use the dead center rule to put the content at the middle of the browser regardless of screen resolution?


I'm not sure what "dead center rule" your talking about. I did notice you were using <center> in your markup and that's deprecated.

To center a div:

give it a width
set it's margins as margin: 0 auto;

Excavator
Dec 11th, 2008, 12:19 AM
The validator likes this a little better -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>utterMEDIA | PHOTO</title>
<style type="text/css">
body, html {
background: #FFF url(http://www.uttermedia.net/divide.jpg) repeat center top;
}
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
margin: 0 auto;
text-align: left;
overflow: auto;
}
#image {
float: left;
margin: 96px 0 0 20px;/*adjust position here*/
width: 378px;
height: 504px;
}
#text {
float: right;
margin: 50px 20px 0 0;/*adjust position here*/
width: 355px;
height: 579px;
}
#foot {
margin: 30px 0;
float: center;
clear: both;
height: 30px;
text-align: center;
}
a:link, a:visited, a:active {
color: #333333;
}
a:hover {
color: #F00;
}
</style>
</head>
<body>
<div id="container">
<div id="image">
<img src="http://www.uttermedia.net/select.jpg" width="378" height="503" alt="photos">
</div>
<div id="text">
<img src="http://www.uttermedia.net/medialogo.gif" width="330" height="124" alt="logo">
<iframe name="frameOne" iframe="" src="utter_files/frame.htm" allowtransparency="true" width="365" frameborder="0" height="500"></iframe>
</div>
<div id="foot">
<font font="" size="1" color="#404040" face="verdana"> <a href="http://blog.uttermedia.net/">BEN HORSLEY</a> &nbsp;2004-2008<br>
<a href="http://www.uttermedia.net/contact.php"><b>CONTACT</b></a> <a href="http://www.uttermedia.net/faq.php"><b>FAQ</b></a> <a href="http://www.uttermedia.net/feedback.php"><b>FEEDBACK</b></a></font>
</div>
<!--end container--></div>
</body>
</html>
Still need to get rid of the inline styles in your footer and it doesn't like your iframe. I only attached your CSS for testing purposes, you'll want to link it again when you put it up for real.

effpeetee
Dec 11th, 2008, 05:12 PM
Just for your information, this site may help (http://www.wpdfd.com/editorial/thebox/deadcentre4.html) for DEAD CENTER

Note that the 'horizon bar' is only there to demonstrate the principle and is not needed to centre the text.

Frank.