IE specific code for margin-top - css

Question

My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>

Answer 1

It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps