img won't align with div in both IE and FF

[robertjoellewis]

http://www.umsl.edu/divisions/artscience/communication/new_site/

The link above is to my depts' new site that I have been working on. I am pretty much an amateur ... and I cannot get the header image to align with the menu div just under it in Firefox. I can align them in I.E., and I can align them in Firefox and the other browsers ... but I have to re-code them and I cannot get them to align properly in all browsers consistently. Right now, it's optimized for IE but nothing else. If you look at it through another browser, the image is misaligned.
Would anybody know a slick way to get it to align in IE *and* other browsers at the same time? Internet Explorer seems to be the misfit here ...

Thanks! : )
Robert

 

[monksnake]

Why do you have a -5 left margin on this:

<img src='images/test_bar.jpg' style='border:0px;float: left; margin:0px 0px 5px [!]-5px[/!];' />

Make that margin 0px.

The way to make CSS look the same cross-browser is to first make it look correct in FF, then adjust stuff to make it look correct in IE.

<.

 

[robertjoellewis]

Yes ... I started with margin 0px; and it works(as it should, like you mention) in all browsers except IE. I had to jury-rig the thing with the -5px to make it work in IE ... but now it's off in all the other browsers.

 

[robertjoellewis]

Now, if you check the link I originally posted, I have made a (very) slight improvement. It's aligned properly in every browser except IE now. In IE, the only problem is that the image appears slightly misaligned on the left side.

Is there a way, I wonder, to "hack" it for IE so that it still looks good in the other browsers?

 

[monksnake]

Try this:

<div style="height:125px;width:527px;[!]float:left[/!]">
<img src='images/test_bar.jpg' style='margin-bottom:5px' />
<div class="menu" style="height: 60px; margin:0px">
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 175px; height: 20px;" href="doc_gen.htm"                     >GENERAL INFORMATION</a></div>
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 175px; height: 20px;" href="doc_on.htm"                       >WEB INSTRUCTION</a></div>
    	<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 177px; height: 20px;" href="doc_ba.htm"                           >B.A. in COMMUNICATION</a></div>
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 175px; height: 20px;" href="doc_news.htm"                       >DEPARTMENTAL NEWSLETTER</a></div>
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 175px; height: 20px;" href="doc_pub.htm"                     >RESEARCH &amp; PUBLICATIONS</a></div>
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 177px; height: 20px;" href="doc_ma.htm"                      >M.A. in COMMUNICATION</a></div>
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 175px; height: 20px;" href="doc_sup.htm"                       >SUPPLEMENTAL RESOURCES</a></div>
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 175px; height: 20px;" href="doc_fac.htm"                        >FACULTY AND STAFF</a></div>
			<div style="line-height: 20px;"><a style="vertical-align: middle; text-indent: 10px; float: left; width: 177px; height: 20px;" href="doc_scholar.htm"                   >FINANCIAL SUPPORT</a></div>
                                                                                                                    
		</div>


</div> 
</div>

Notice the highlighted area. Also notice, I removed some css from the <img> and the menu <div>

<.