2 replies [Last post]
ralphcarlsonjr
ralphcarlsonjr's picture
Offline
newbie
Last seen: 2 years 29 weeks ago
Timezone: GMT-4
Joined: 2010-11-01
Posts: 2
Points: 3

I have the following code below, in Firefox the left LI is on the left and the right is on the right, but in IE the right one is below the left one, what am I doing wrong? Is there an IE hack to fix this?

body
{
   background: #FFFFFF;
   font-family: Arial,Helmet,Freesans,sans-serif;
}
 
.containerCenterAlign
{
   width: 100%;
   text-align: center;
}
 
.container
{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 500px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-color: #777;
    border-width: 2px;
    border-style: solid;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
 
.titleClass
{
   border-color: #777;
   border-width: 0 0 2px 0;
   border-style: solid;
   margin-right: -5px;
   margin-left: -5px;
   margin-top: -5px;
   text-align: center;
   font-size: 32px;
   background-color: #DDD;
   color: #777;
}
.errorMessage
{
   text-align: center;
   font-size: 20px;
   background-color: #DDD;
   color: #FF6565;
}
 
.loginUL
{
   list-style: none;
   float: left;
}
 
.loginLeft
{
   display: inline;
   list-style: none;
   float: left;
   height: 35px;
   text-align: center;
}
 
.loginRight
{
   list-style: none;
   float: right;
   height: 70px;
   width: 100px;
   display: inline;
   text-align: center;
}
 
.loginLabel
{
   float: left;
   width: 100px;
   overflow: hidden;
   color: #777;
   padding-top: 6px;
   font-size: 16pt;
}
 
.loginText
{
    background-color: #DDD;
    border-color: #777;
    border-width: 2px;
    border-style: solid;
    color: #777;
    height: 35px;
    margin-top: 1px;
    width: 256px;
    padding-left: 1px;
    padding-right: 0px;
    margin-left: 1px;
    margin-right: 0px;
    font-weight: lighter;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
 
.loginSubmit
{
    text-align: center;
    background-color: #DDD;
    border-color: #777;
    border-width: 2px;
    border-style: solid;
    color: #777;
    height: 70px;
    margin-top: 1px;
    width: 100px;
    padding-left: 0px;
    padding-right: 1px;
    margin-left: 0px;
    margin-right: 1px;
    cursor: pointer;
    font-size: 26px;
    font-weight: lighter;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

<html>
   <head>
      <title></title>
      <link rel="stylesheet" href="styles.css" type="text/css" />
   </head>
   <body>
     <form action="/mypage.jsp" method="POST">
 
             <div class="containerCenterAlign">
                <div class="container">
                <div class="titleClass">title</div>
                <div class="errorMessage"></div>
                  <ul class="loginUL">
                      <li class="loginLeft">
                        <div>
                           <label class="loginLabel" for="loginusername">Username</label>
                           <input id="loginusername" name="loginusername" 
                                      class="loginText" type="password" value="" maxlength="150" />
                        </div>
                        <div>
                           <label class="loginLabel" for="loginpassword">Password</label>
                           <input id="loginpassword" name="loginpassword" 
                                      class="loginText" type="password" value="" maxlength="150" />
                        </div>
                       </li>
                       <li class="loginRight">
                           <input type="submit" name="submit" id="submit" value="Login" class="loginSubmit" />
                       </li>
                   </ul>
                   <div style="clear: both;"></div>
                 </div>
              </div>
 
     </form>
   </body>
</html>

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 7 years 30 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Doctype missing

First of all you must use a Doctype otherwise you are putting IE into Quirks mode which will give you all sorts of weird and wonderful surprises. However once you do that, you are going to find another problem. To fix that you need to realign your tags by using margin and padding. Also floated elements require a width.

.loginUL
{
   list-style: none;
   float: left;
   width: 500px;
   margin: 10px 0;
   padding: 0;
}

Second for a simple form you have an awful lot of markup in there, it can be simplied by just using the different html tags for the form without adding in extra divs, li's and classes.

ralphcarlsonjr
ralphcarlsonjr's picture
Offline
newbie
Last seen: 2 years 29 weeks ago
Timezone: GMT-4
Joined: 2010-11-01
Posts: 2
Points: 3

I was able to get it to align

I was able to get it to align using width on inline element, however I created another page , search page and replaced the first input of type password with select and the rest of loginRight below the select is all messed up no matter what width/height or display settings I use on the select, how are select elements "select" , "option", treated differently than input elements? can they be used in this type of layout? For now I am just going to use html tables for search page with select as they are much easier to get working.