Я реализую дизайн пользовательского интерфейса в одном из своих проектов, и похоже, что у меня проблема с CSS, большое время.Текстовые поля и кнопки HTML отображаются больше, чем указано
Насколько я знаю, я определенные стили для типов ввода: текст, кнопки в пути CSS принимает:
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;
}
На странице входа, поля появляются, чтобы быть 24px в высоту, где как после входа в систему, я вижу, что все поля больше, с высотой более 24 пикселей. Я понятия не имею. Одна точка после входа в систему, поля присутствуют в контейнере с некоторыми дополнениями и полями, но я не вижу причин, почему это повлияет на поля. Этот вопрос заставлял меня сумасшедшие орехи, может кто-то, пожалуйста, дать некоторое представление?
Контейнер, в котором размещаются поля формы ниже:
#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 Код Вход страницы:
<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>
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 код района участника:
<!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>
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>
Все поля в области участника отображаются больше 24px. :(Пожалуйста, помогите мне
Большое спасибо заранее
Пример [jsFiddle] (http://jsfiddle.net) был бы замечательным! :) Без HTML мы не можем продолжить. :) –
Действительно ли 'body' необходим во всех ваших селекторах ввода? – cimmanon
Возможно ли это? Думаю, все поля в теге body разделяют это свойство? Поправьте меня, если я ошибаюсь, пожалуйста. –