Hey all,
For some reason I cannot get two objects to display on the same horizontal line without cheating and using "margin-top: -225px"... which i dont want to do. The links seem to be getting pushed down below the image.
the css code in the affected parts is messy because i've been trying to simply get the thing working, but to no avail. I know its a simple solution cause I've had this problem before... I just can't figure out whats wrong this time. If you find my problem, feel free to suggest what I should cut out
you can see the problem
here: (without cheat)
and
here (with cheat but looking how I want it in IE --> display error in FF with link border-right)
the affected code is here:
Code:
#mainLogo {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
position: relative;
z-index: -1;
height: 300px;
width: 210px;
padding: 20px;
}
#links {
float: left;
display: inline;
height: 100px;
width: 50px;
margin-left: 100px;
margin-top: -225px;
position: relative;
text-align: left;
border-right: 1px #ccc solid;
}
and here's the entire page code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The Concordia Collaboration Lab</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript" src="js/borderFade.js"></script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
text-align: center;
font-family: "verdana", trebuchet ms, arial, sans-serif;
font-size: 11px;
background-color: white;
}
#pageContainer {
min-height: 100%;
}
* html #pageContainer {
height:100%;
}
A:link, A:visited, A:active {
text-decoration: none; color: blue;
}
#welcome {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
position: relative;
font-size: 14pt;
}
#mainLogo {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
position: relative;
z-index: -1;
height: 300px;
width: 210px;
padding: 20px;
}
#links {
float: left;
display: inline;
height: 100px;
width: 50px;
margin-left: 100px;
margin-top: -225px;
position: relative;
text-align: left;
border-right: 1px #ccc solid;
}
.languageLinks {
position: relative;
text-decoration: none;
margin-left: 25px;
margin-right: 25px;
}
</style>
</head>
<body onload="zxcInit('languageLinks','#FFFFFF','#000000',15)">
<div id="pageContainer">
<div id="welcome">Welcome to the Concordia Collaboration Lab</div>
<div id="mainLogo"><img src="images/toddler.gif"></div>
<div id="links">
<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">English</a>
<br>
<a class="languageLinks" href="#" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">French</a>
</div>
</div>
</body>
</html>
Before you post, read our: 
