Див с фантомным левым отступом
У меня есть тег Div, который по какой-то причине дополняет левую сторону примерно на 50 пикселей.
Ниже приведен HTML-код, и имейте в виду, что вы, не являющиеся "классом", имеете padding-left"
<body>
<div class="popHeaderMain" align="center">
<div class="PopHeader">
Keller Williams Realty | (704) 602-0271
</div>
<div class="popLoginHeader">
<table>
<tr>
<td style="font-size:10px;">Username: <input type="text" name="username" /></td>
<td style="font-size:10px;">Password: <input type="password" name="password" /></td>
<td style="vertical-align:bottom;"><input name="login" type="submit" value="Login" /></td>
</tr>
</table>
</div>
</div>
<!-- ImageReady Slices (backgroundPage.psd) -->
<div style="padding-top:20px; width:900px;" align="center">
<table id="Table_01" width="900" height="1200" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td rowspan="2" style="background-image:url(images/backgroundPage_01.png); background-repeat:no-repeat; width:20px; height:410px;">
<td rowspan="2" style="padding-top:8px; background-image:url(images/backgroundPage_02.png); background-repeat:no-repeat; height:380px; width:455px;">
<div style="padding-left:25px; padding-top:0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#F0F0F0;">
Preview House Address
</div>
<div style="padding-top:20px; width:450px;">
<div style="padding-left:10px;">
<img src="images/GibsonHouse3.jpg" alt="GibsonHouse" border="0" style="width: 437px; height: 300px;"/>
</div>
</div>
</td>
<td style="padding-top:0px; background-image:url(images/backgroundPage_03.png); background-repeat:no-repeat; width:405px; height:58px;">
<div style="padding-top:0px; padding-left:50px; font-family:Georgia, 'Times New Roman', Times, serif; font-size:14px; heigh:58px;">Preview House 1 out of N of houses in area</div>
</td>
<td rowspan="2" style="background-image:url(images/backgroundPage_04.png); background-repeat:no-repeat; width:20px; height:410px;">
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_05.png); background-repeat:no-repeat; width:405px; height:352px;"></td>
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_06.png); background-repeat:no-repeat; width:20px; height:766px;"></td>
<td colspan="2" style="background-image:url(images/backgroundPage_07.png); background-repeat:no-repeat; width:860px; height:766px;"></td>
<td style="background-image:url(images/backgroundPage_08.png); background-repeat:no-repeat; width:20px; height:766px;"></td>
</tr>
<tr>
<td style="background-image:url(images/backgroundPage_09.png); background-repeat:no-repeat; width: 20px; height:24px;"></td>
<td colspan="2" style="background-image:url(images/backgroundPage_10.png); background-repeat:no-repeat; width:860px; height:24px;"></td>
<td style="background-image:url(images/backgroundPage_11.png); background-repeat:no-repeat; width:20px; height:24px;"></td>
</tr>
</table>
</div>
Кто-нибудь может мне помочь
3 ответа
Призрачный левый фантом фактически наследовался от тега body. Ширина была установлена на 800 пикселей вместо 900 пикселей.
Ширина вашего тега тела установлена на 800 пикселей. Измените его на 900px.:)
Я не вижу никаких аномальных отступов. С левой стороны стола есть пустая ячейка шириной 20 пикселей. Это то, что вы имели ввиду? Попробуйте временно изменить атрибут border таблицы на border="1", чтобы лучше понять, где находятся ячейки.
Для тестирования в Firefox я настоятельно рекомендую приобрести Firebug, если у вас его еще нет. Одним из многих преимуществ является то, что при наведении указателя мыши на элементы на вкладке HTML вы увидите выделение их отступов.