Проблема с CSS для начинающих - маржа появляется в IE, но не в Chrome или FireFox

Question

Я знаю, что это моя собственная вина, но я не вижу, что я сделал неправильно.Выглядит точно так, как и ожидалось в Chrome и FireFox.Сбои в IE9.Я использовал валидатор W3C CSS, и он вернулся чистым.

Все, что мне нужно, - это какой-то текст (горизонтально выровненный по левому краю, вертикально выровненный по низу) и изображение (добавление баннера) в той же строке.

<div id="header">
    <span id="logo">MyCoolLogoText!</span>
    <img id="ad1" src="banner.jpg">     
</div>

Мой CSS стал длиннее, так как я боролся с этим, но в настоящее время он

#logo {
width:507px;
height:65px;
display:inline; 
float:left;
text-align:left;    
vertical-align: text-bottom;
color:white;
margin:0;
padding:0;
background-color:rgb(77,00,00);
}

#ad1 {
float:left;
display:inline;
width:468px;
height:65px;
margin:0;
padding:0;
}
#header 
{   
    width:975px;    
    height:75px;    
    margin:0;   
    padding:0;    
}

Internet Explorer поместит Span в первую строку, а затем изображение наследующая строкаЕсли бы я уменьшил ширину любого из них, они оба появились бы в верхней строке.Я предполагаю, что IE добавляет поля или отступы некоторого вида;но я пытался сказать это не так.

Любая помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ: я добавил информацию о стиле для # header

Answer 1

Попробуйте отобразить # ad1 как встроенный блок и переместить его вправо. Также добавьте переполнение скрытого на #header, если вы хотите, чтобы он заключал в себе жулики (при условии, что вам не нужно ничего переполнять).

Answer 2

Это может быть добавление margin или padding, поэтому убедитесь, что у вас есть:

body {
   margin: 0;
   padding: 0;
}

Однако, это может быть просто ширина вашего окна. Поскольку вы перемещаете объекты и они имеют фиксированную ширину, вы можете получить тот же эффект, что и в IE9 в любом браузере, просто уменьшив ширину окна браузера. Такова природа работы поплавка. Чтобы это исправить, сделайте это (основываясь на том, что я вижу с текущими настройками полей, отступов и границ):

#header {
    min-width: 975px; /* the width of your two floated elements */
}

Вы можете использовать width вместо min-width.

РЕДАКТИРОВАТЬ: Хорошо, у вас была ширина в заголовке. Я заметил, что ваш синтаксис на теге img неверен. У вас есть <img id="ad1" src="banner.jpg">, но отсутствует косая черта <img id="ad1" src="banner.jpg" />. Я сомневаюсь, что это проблема, но с другой стороны, браузеры могут делать забавные вещи с неверным кодом.