PDA

View Full Version : vertical alignment at 60 & 40% not working in FF

canadianjameson
10-12-2006, 07:55 AM
Hi,

I'm sorry for this and i know its probably something that is simple but its 3am and my face is about to fall off.

This page (www.enviromark.ca/Collab/main.html) displays somewhat properly in IE but in FF the "Welcome" & Bonjour" images will not display underneath the main image as they do in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Concordia Collaboration Lab</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
height:100%;
}
img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#languageLogo {
position:absolute;
display: block;
left:50%;
top:40%;
width:600px;
height:178px;
margin-left:-300px;
margin-top:-89px;
}
#english {
position:relative;
display: inline;
top: 70%;
width:200px;
height:50px;
margin-right: 70px
}
#french {
position:relative;
display: inline;
top:70%;
width:200px;
height:50px;
margin-left: 90px;
}

</style>

</head>

<body>
<div id="pageContainer">
<div id="languageLogo">
<img src="images/web_intro_logo2.gif">
</div>
<div id="english">
<a href="english.html" target="_self"><img src="images/EN_welcome_logo.gif"></a>
</div>
<div id="french">
<a href="french.html" target="_self"><img src="images/FR_welcome_logo.gif"></a>
</div>


</div>
</body>
</html>

Also I suppose it would be helpfull if those two images were equi-distant apart... for some reason changing the margin-right and margin-left on them to the same value wont do that...:confused:

i need to sleep :(
_Aerospace_Eng_
10-12-2006, 08:36 AM
Try this
* {
padding: 0;
margin: 0;
}
html, body {
text-align: center;
height:100%;
}
img {
border: 0
}
#pageContainer {
min-height: 100%;
position:relative;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#languageLogo {
position:absolute;
display: block;
left:50%;
top:40%;
width:600px;
height:178px;
margin-left:-300px;
margin-top:-89px;
}
#english {
position:absolute;
top: 70%;
width:200px;
height:50px;
left:16%;
}
#french {
position:absolute;
top:70%;
width:200px;
height:50px;
right:16%;
}
canadianjameson
10-12-2006, 09:26 AM
Hey, just got up for some water

I tried it and this was the result: www.enviromark.ca/Collab/tests/T3.htm

i'm guessing something went very wrong somewhere :)
_Aerospace_Eng_
10-12-2006, 05:34 PM
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
background:#FFF;
height:100%;
overflow:auto;
}
a img {
border:0;
}
#main {
display:table;
height:100%;
text-align:center;
width:100%;
}
#mainhold {
display:table-cell;
position:relative;
vertical-align:middle;
}
#pageContainer {
height:224px;
margin:auto;
position:relative;
width:600px;
}
#languageLogo {
line-height:0px;
font-size:0;
margin-bottom:5px;
}
#buttons {
height:41px;
}
#buttons img {
float:left;
display:inline;
}
#english {
margin-left:60px;
}
#buttons img#french {
margin-right:48px;
float:right;
}
</style>
<!--[if IE]>
<style type="text/css">
#mainhold {
position:absolute;
top:50%;
left:0;
}
#pageContainer {
top:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="mainhold">
<div id="pageContainer">
<div id="languageLogo"><img src="images/web_intro_logo2.gif" width="600" height="178" alt="" /></div>
<div id="buttons"><a href="/english.html" title="English"><img src="images/EN_welcome_logo.gif" width="165" height="41" id="english" alt="English" /></a><a href="/french.html" title="Fran&ccedil;ais"><img src="images/FR_welcome_logo.gif" width="191" height="41" id="french" alt="Fran&ccedil;ais" /></a></div>
</div>
</div>
</div>
</body>
</html>
canadianjameson
10-12-2006, 11:24 PM
Hey,

Thanks, that works perfectly :D

I can see by the added CSS that it must have been somewhat tricky to do. Why did it involve such drastic measures?
_Aerospace_Eng_
10-13-2006, 12:04 AM
Which part? Well it would be less CSS if IE supported display:table and display:table-cell but it doesn't so a workaround is required.
canadianjameson
10-15-2006, 05:51 AM
why doesnt it support them, and as it doesnt... what does the workaround compensate for?

you dont have to answer this, i'm just interested in the 'why's of CSS :D
_Aerospace_Eng_
10-15-2006, 07:17 AM
Remove the conditional comments and see what happens. May of the 'why's' of CSS you have can be answered by yourself if you just try things yourself.