Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    simple display: inline question

    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 criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    #links needs to come before #mainLogo in the html.
    Then you won't need that top margin.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •