[johnnynu]

Hey!
I'm buliding a website and have some problem with my header in IE6.


CSS

/* HEADER */ 						 
#logobar {  height: 62px; width: 100%; background-image: url(bg_top.gif); background-repeat: repeat-x; text-align: center; }
#mainbar { height: 180px; width: 100%; background: #1c1c1c; border-bottom: 4px solid #38070a; overflow: visible; }
#mainlogotype img { border: none; margin-right: 2em; height: auto; float: right; position: relative; display: inline; }
#maintext { float: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; margin-top: 4%; margin-left: 4em; vertical-align: bottom; background-color: #161616; border-bottom: 2px solid #343434; border-right: 1px solid #292929; border-top: 2px solid #2d2d2d; border-left: 1px solid #292929; padding: 4px; }

HTML

<div id="mainbar">

<div id="mainlogotype">
<img src="logotype.jpg" alt="Uppsala Thaimassage och fotvård" />

</div>

<div id="maintext">
<p>Sidan ses bäst i upplösning: <strong>1280x1024+</strong></p>
Rekommenderad webläsare: <a href="#">Firefox</a>
</div>
</div>

overflow obviously don't work in IE? I also realized that IE 6 double the height properties. I use position: relative; display: inline; for corecting this in IE7.
Is there any workaround for this?