Почему мой заголовок удваивает высоту в IE

Question

Привет, ребята, я очень новичок в веб-дизайне, и чем больше я узнаю, тем больше я понимаю, что IE немного придурок, когда дело доходит до того, как это проявляется. В firefox и chrome все работает правильно, но в IE мой заголовок удваивается по высоте. Я не знаю, почему. Я сделал все divs и сделал все свое позиционирование в css. вот мой css.

сайт: http://www.discerningear.com

html { font-family:Arial, Helvetica, sans-serif; color:#333; } 
body { background:#a99a6f; margin:0 auto; text-align:center;} 
img { border-style: none; } 
#slide{ max-width:100%; -moz-box-shadow: 0px 0px 12px #fff; -webkit-box-shadow: 0px 0px 12px #fff; box-shadow: 0px 0px 12px #fff; } 
#container { -moz-box-shadow: 0px 0px 12px #000; -webkit-box-shadow: 0px 0px 12px #000; box-shadow: 0px 0px 12px #000; text-align: left; width:800px; height:1500px; margin:0 auto; background:#d4d4d4; background-image:url("/includes/images/container.jpg"); background-repeat:no-repeat;} 
#header { width:100%; height:160px; padding:0 0 0 0; background-image:url('/includes/images/wave-header-background.jpg');} 
#logo { float:left; height:80px; margin:5px; } 
.logoImage{ content:url("/includes/images/DiscerningEar_Logo.png"); height:100%; } 
#top_info { float:right; width:450px; height:40px; padding:0 0 0 0 ; margin:20px; } 
#top_info ul { margin:0; padding:0; list-style-type:none;} 
#top_info ul li { margin:0; padding:0px; float:left; } 
#top_info ul li a { display: -moz-inline-stack; display: inline-block; width: 100px; height: 35px; background: url("http://dabuttonfactory.com/b.png?t=&f=Calibri-Bold&ts=18&tc=ffffff00&tshs=1&tshc=22222200&it=png&c=5&bgt=gradient&bgc=8c7f5e&ebgc=000000&bs=2&bc=a9996f&shs=2&shc=4d4d4d&sho=se&w=100&h=35") no-repeat; line-height: 35px; vertical-align: text-middle; text-align: center; color: #ffffff; font-family: Calibri; font-size: 14px; font-weight: bold; font-style: normal; text-shadow: #222222 1px 1px 0; } 
#top_info ul li a > span { display: -moz-inline-block; } 
#navbar {padding:20px 0 180px 0; height:60px; clear:both; } 
#navbar ul { margin:0; padding:0; list-style-type:none;} 
#navbar ul li { margin:0; padding:0px; float:left; } 
#navbar ul li a { font-size:12px; float:left; padding:0 0 0 20px; display:block;} 
#banner { background-image:url('/includes/images/banner-background.jpg'); margin-top:-12px; width:100%; height:180px; clear:both; padding:0 0 0 0; text-align:center;} 
#left_col { float:left; width:30%; height:600px; border:1px solid #333; color:#fff; padding:20px; } 
#right_col { float:right; width:58%; height:600px; border:1px solid #333; color:#fff; padding:20px; } 
#footer { padding:20px; clear:both; } 

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

Answer 1

Скорее всего, из-за IE double margin bug. Это происходит в IE6, когда у плавающего элемента также применяется маржа (в вашем случае, скорее всего, #logo).

Исправление состоит в том, чтобы добавить: display: inline; к CSS этого элемента.