Ширина DIV и TABLE неправильно отображается с использованием CSS - PullRequest
Новая
       14

Ширина DIV и TABLE неправильно отображается с использованием CSS

1 голос
/ 30 июля 2009

С этим html: 

<div class="sectionheading">User Information</div>  
<table id="UserInputTable" class="xInputTable">

... и этот CSS: 

.sectionheading{width:100%; font-size:20px; font-weight:bold; background-color:#28BA87; color:white; text-align:center; border-style:solid; border-width:thin; border-color:Black; border-collapse:separate; overflow:hidden}

.xInputTable {text-align:left; 
                  vertical-align:middle; 
                  margin: 0px 0px 0px 0px;
                  padding: 0px 0px 0px 0px;
                  border-collapse:separate;
                  overflow:hidden}
table.xInputTable {width:100%; border: solid thin red; border-top-style:none;}

В результате DIV рендерится на 2 пикселя шире как в IE, так и в Firefox (левые границы идеально выровнены, правые границы смещены на два пикселя). Используя панель инструментов IE web dev, оба элемента имеют ширину 100%. В Firebug они имеют ширину 950px и 948px. Вот вычисленный CSS (из панели инструментов разработчика IE):

DIV 

BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid black;
WIDTH: 100%;
FONT-SIZE: 300;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
BORDER-LEFT: thin solid black;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid black;
BORDER-TOP: thin solid black;
BACKGROUND: #28ba87;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: #28ba87;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
TEXT-ALIGN: center;
COLOR: white;
FONT-WEIGHT: 700;
MARGIN: 0px;
PADDING-BOTTOM: 0px;

Таблица 

BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid red;
WIDTH: 100%;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
HEIGHT: auto;
BORDER-LEFT: thin solid red;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid red;
BACKGROUND: white;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
BACKGROUND-COLOR: white;
LINE-HEIGHT: normal;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 0px;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px;
PADDING-BOTTOM: 0px;

Есть идеи, какую концепцию мне здесь не хватает?

Ответы [ 7 ]

1 голос
/ 30 июля 2009

Границы действуют как отступы, поэтому вы добавляете 2 пикселя к ширине => 100% + 2 пикселя

Также рассмотрите возможность использования meyers reset.css, чтобы убедиться, что вы находитесь на ровном месте, прежде чем прыгать. http://meyerweb.com/eric/tools/css/reset/

Кроме того, вы сходите с ума от всех заглавных букв.

1 голос
/ 31 июля 2009

Хорошо, так что, на мой взгляд, в этот момент я бы вернулся к HTML. Используйте FireBug неукоснительно и добавляйте только один атрибут CSS за раз, чтобы быть уверенным, что он не оказывает негативного влияния на макет.

К сожалению, природа CSS такова, что он полон исключений и вещей, которые следует учитывать при наследовании. Начиная с файла reset.css, и, возможно, сделав все ваши основные элементы другого цвета фона (потому что он не изменит размер, как границы), вы можете увидеть, где в действительности находятся ваши элементы.

1 голос
/ 30 июля 2009

пб правильно.

Когда вы применяете «бордюр» к таблице, он будет регулировать ширину в соответствии с рамкой. DIV добавит границу в дополнение к ширине (как и большинство элементов с указанной шириной, таблицы являются специальными).

Hurix правильно, что нет смысла добавлять ширину 100% к div, поскольку он является блочным элементом и по умолчанию будет занимать всю ширину родительского элемента, так что вы можете снять его, и он автоматически изменит размер оставаться внутри родителя, даже если к его ширине добавлена ​​граница. Однако таблица должна получить ширину: 100%, если вы хотите, чтобы она была полной ширины.

1 голос
/ 30 июля 2009

Старайтесь не устанавливать ширину специально для div (и, возможно, таблицы тоже). По умолчанию они имеют значение 100%, но рассчитываются немного по-другому, я полагаю.

1 голос
/ 30 июля 2009

Может быть 2 пикселя для каждой (левой и правой) границы, которые не учитываются при расчете ширины.

1 голос
/ 30 июля 2009

Угадайте здесь, но таблицы по умолчанию имеют cellpadding или cellspacing (не помню, какой из них) по умолчанию равны 2px, если вы не установите border-collapse: collapse;.

Это не влияет на саму таблицу, но td внутри таблицы .

Если мои предположения верны, должно сработать любое из следующего:

  • Набор border-collapse: collapse; в css для таблицы
  • Положите "cellpadding =" 0 "cellspacing =" 0 "in the` tag
  • Добавить новую декларацию CSS table.xInputTable td { padding:0; margin:0; }
0 голосов
/ 30 июля 2009

В дополнение к kmiyashiro и pb, я хотел бы добавить, что если вы обернули свою таблицу в div со стилем "width:100%; border: solid thin red; border-top-style:none;" и изменили стиль на "table.xInputTable" на "width: 100%", то все должно выравниваться до.

...