...

View Full Version : simple display: inline question



canadianjameson
09-25-2006, 10:56 PM
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 (http://www.enviromark.ca/Collab/tests/T2.htm): (without cheat)
and here (http://www.enviromark.ca/Collab/tests/T1.htm) (with cheat but looking how I want it in IE --> display error in FF with link border-right)

the affected code is here:
#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



<!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>

_Aerospace_Eng_
09-25-2006, 11:50 PM
#links needs to come before #mainLogo in the html.
Then you won't need that top margin.

canadianjameson
09-26-2006, 01:03 AM
Thanks :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum