PDA

Click to See Complete Forum and Search --> : IE vs. Firefox float issue

shotsy247
12-10-2008, 03:18 PM
Hi All,

I have a page with a navigation on the top. It looks like this:

<div class = "UG_nav">
<div style="float:left;">
<p><strong>
<a href="../default.asp">TABLE OF CONTENTS</a></strong> | <strong>WELCOME</strong></p>
</div>
<div class='dynNav'>
<p><< Last | <a href = "../chapter1/ch1_2.asp">Next >></p></a>
</div>
</div>

Here's what seems to be the relevant css:

.UG_nav {
display:inline-block;
margin: -1em 0 1em 0;
}


The content in the first div within the UG_nav div displays left as wanted, but the content within the next div does not. It displays directly after the content within the first div, but I want it to float to the far right of the UG_nav div.

This works in IE as I want but not in Firefox. What am I doing worng?

Thanks in advance.

_t
javawebdog
12-10-2008, 03:24 PM
I see a class dynNav?
What's in it?
shotsy247
12-10-2008, 03:33 PM
Yes sir! I set the width of the parent div to 100% and then followed your advice and it worked.

Thank you!

BTW the dynNav class was old code and should have been removed . . . although it only contained float:right.

_t
javawebdog
12-10-2008, 03:49 PM
try this:
<html>
<head>
<style>
.UG_nav {
display:inline-block;
margin: -1em 0 1em 0;
width:100%;
}
.dynNav{border:0px solid;width:auto;}
</style>
</head>

<body>
<div class = "UG_nav">
<div class="dynNav" style="float:left;">
<p><strong>
<a href="../default.asp">TABLE OF CONTENTS</a></strong> | <strong>WELCOME</strong></p>
</div>
<div class='dynNav'>
<p><< Last | <a href = "../chapter1/ch1_2.asp">Next >></p></a>
</div>
</div>
</body>
</html>
drhowarddrfine
12-13-2008, 05:24 PM
Never, ever use IE as a reference for how things should work. Always, always reference a modern browser and fix IE.

IE does not properly handle inline-block. (not tested as I'm going to dinner) try adding 'display:inline' and see if IE acts more like FF (as it should).

Also, IE does not handle floats properly. It expands parent containers to hold floated elements. This is incorrect behavior and FF is performing correctly. To get FF to act like IEs bug, add 'overflow:auto' to the parent div.
drhowarddrfine
12-13-2008, 05:31 PM
Perhaps this is what you are looking for?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.UG_nav {
display:inline-block;display:inline;
margin: -1em 0 1em 0;
}
</style>
</head>
<body>
<div class = "UG_nav">
<div style="float:left;">
<p><strong>
<a href="../default.asp">TABLE OF CONTENTS</a></strong> | <strong>WELCOME</strong></p>
</div>
<div class='dynNav' style="float:right">
<p><< Last | <a href = "../chapter1/ch1_2.asp">Next >></p></a>
</div>
</div>
</body>
</html>