asked on

CSS quirk in IE/Firefox

Good day,

I'm having a small problem with my css and placement of a global navbar in my site.

Please look at this page in IE & Firefox and note the different position of the globalnav bar at the top of the page, just under the header banner. You'll note that in one it sits inside of the #mastHead div and in firefox it sits just under the #mastHead div....

http://www.hfspools.com/

Visually, it's rendered correctly in IE, however, I am certain that its exactly the reverse as is with most CSS/IE quirks I come across. I am sure FF is rendering it correctly.

Anyhow, whatever help I can get I will gladly take!

Here's the css:

#masthead{
      margin: 0;
      padding: 10px 0px 0px 0px;
      border-bottom: 1px solid #cccccc;
      width: 100%;
}

#navBar{
      background-color: #ECF0F9;
      padding: 0px;
      margin-right: 73%;
/*      margin-bottom: 0;
      margin-left: 0;
*/      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: #ccc;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #CCCCCC;
}

Here's the HTML:

<div id="masthead">
<a href="../index.php"><img src="../images/masthead.gif" alt="HornerXpress Financial Service" width="475" height="99" border="0" /></a>
<div id="globalNav">
<a href="../pool/loan-center/benefits.php">Benefits of Financing</a> | <a href="../pool/loan-center/finance.php">Pool Financing</a> |
<a href="../pool/loan-center/home-improvement.php">Home Improvement Loans</a> | <a href="../pool/app/index.php">Apply
Now</a> |
<a href="../contactus.php">Contact Us</a> |
<a href="../index.php">Home</a></div>
<div id="globalPhone">877-HFS-POOL</div>
</div>

Thank you-

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pmagony

ASKER

Thanks dude! This is what worked:

<div style="clear:both;"></div>

GrandSchtroumpf

yes, i forgot the main part in my "div.clear" ruleset... ;)

div.clear {
height: 1px;
margin-top: -1px;
overflow: hidden;
clear: both;
}

note that elements should never be empty... that's the reason for the   and the more complex ruleset.

pmagony

ASKER

You gave me a 'B' rated answer!!!!!

Hehe, it's all good... you helped and between the two of us we got it.

All the best-

GrandSchtroumpf

> You gave me a 'B' rated answer!!!!!
lol, we can see it that way. congratulations for your answer ;).