0

I am implementing UI design in one of my own projects, and it looks like I have an issue with CSS, big time.

As far as I know, I have specified styles for Input types : text, buttons in the way CSS accepts:

body input[type=text]{
    border:1px solid #208278;
    height:24px;
    padding-left: 5px;
}
body button{
    background-color: #279A8F;
    border:0px;
    color:white;
    height:24px;
}
body input[type=password]{
    border:1px solid #208278;
    height:24px;
    padding-left: 5px;
}
body input[type=submit], input[type=button]{
    background-color: #279A8F;
    border:0px;
    color:white;
    height:24px;
}

On the login page, the fields appear to be of 24px in height, where as after I log in, I see all the fields are bigger, with height more than 24px. I have no clue. One point is after logging in, the fields are present in a container which has some padding, and margins, but I don't see any reason how this would affect the fields. This issue has been driving me crazy nuts, can someone please provide some insight?

The container in which the form fields are placed are below:

#container{
    width:1100px;
    margin: 0 auto;
}
#leftbar{
    float:left;
    width:200px;
    font-size:13px;
    background-color:#237971;
    color:white;
    padding:4px;
}
#rightbar{
    float:right;
    width:200px;
    font-size: 13px;
    background-color:#237971;
    color:white;
    padding:4px;
}
#middlebar{
    padding:5px;
    margin-left:3px;
    margin-right:3px;
    float:left;
    width:660px;
    border:1px solid black;
}

HTML Code of Log in page:

<html>
<head>
    <link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>" media="all">
    <title>
        My Page
    </title>

</head>
<body>
<div id=header>
    &nbsp;&nbsp;&nbsp;Welcome
</div>
<?php echo validation_errors(); ?>


<?php echo form_open('login/verify'); ?>
<table>
    <tr>
        <td align="right"><label for="email">E-Mail:</label></td>
        <td align="left"><input type="text" name="email" id="email" value="<?=set_value('email')?>"></td>
    </tr>
    <tr>
        <td align="right"><label for="password">Password:</label></td>
        <td align="left"><input type="password" name="password" id="password"></td>
    </tr>
    <tr>
        <td></td>
        <td align="left"><input type="submit" name="submit" value="Login"></td>
    </tr>
</table>
 </form>
<br/>
<a href="<?php echo base_url();?>signup/signup">Sign up</a> for a new account<br/>
</body>

</html>

HTML Code of member's area:

<!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>
    <script src="<?php echo base_url('js/jquery-1.9.1.js'); ?>"></script>
    <script src="<?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?>"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?>">



    </script>
    <link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>">
    <title>Welcome</title>
</head>
<body>
<div id=container>
    <div id=header>
        &nbsp;&nbsp;&nbsp;Members area
    </div>


    <div id="leftbar">
        <div class=content><a href="<?php echo base_url();?>user/home/logout">Logout</a></div></div>
    <div id="rightcontainer">
        <div id="middlebar">
            <?php echo validation_errors();?>
            <?php echo form_open_multipart('home/create/validate'); ?>
            <table>
                <tr>
                    <td align="right"><label for="fullname">full Name:</label></td>
                    <td align="left"><input type="text" name="fullname"></td>
                </tr>


<tr>
                    <td></td>
                    <td><input type="submit" name="finish" value="Finish"></td>
                </tr>
            </table>

        </div>
        <div id="rightbar"></div>
    </div>
</div>

</body>

</html>

All the fields in the member's area appear bigger than 24px. :( Please help me!

Thank you very much in advance.

7
  • 4
    A jsFiddle example would be great! :) Without HTML we cannot proceed. :) Apr 15, 2013 at 16:40
  • Is body really necessary in all of your input selectors?
    – cimmanon
    Apr 15, 2013 at 16:46
  • Is it optional? I guess all the fields within the body tag share that property? Correct me if I am incorrect, please. Apr 15, 2013 at 16:50
  • Use Chrome's developer tools or Firebug for Firefox to figure out where the extra size is coming from. Chances are pretty good it's just the element's padding.
    – user229044
    Apr 15, 2013 at 17:08
  • Yes, body is optional and probably unnecessary in this case Apr 15, 2013 at 17:19

1 Answer 1

0

Figured out the main fault, I was not standardizing the login page with the statements below in my HTML code:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.