Float problem with Firefox

[Emzi]

I didn't know whether to post this in the CSS or JS category, so apologies if this is in the wrong place.

I have added a widget from addthis.com to a site I'm currently working on putting together.

The widget sits within a DIV that has a float:left assigned to its class.

There is a DIV that has float:right next to it but since I implemented this widget the DIV with float:right seems to sit below the DIV with float:left in Firefox. In IE it looks fine.

This is the code used for the widget.

Code: Select all

 <a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[url]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
     <img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" /></a>
     <script type="text/javascript" src="java/addthis_widget.js"></script>

When I get rid of the script tags it looks fine so I think it's something wrong with the javascript. I downloaded the javascript and changed the widths of certain things in the file (some were set at 100%) and saved it to my server, but that still didn't work, so now I'm thinking there maybe a CSS solution to it?

Please take a look at: http://dev.enjoyonline.co.uk/mobilebucket/ to see it better than I'm explaining it

Ignore the black borders around the floated divs - I put them on to see where they were showing up in Firefox.

Anyone have any ideas on what I can do to solve the problem?

Thanks for your help in advance!

[MikeHopley]

Start by validating your XHTML. Always, always do this when you encounter a bug (your CSS is fine, but should also be validated when bug-fixing).

I have the same widget on my site, and I have no problems controlling its positioning. I don't think it's a problem with the widget; I think it's a problem with your floats.

I believe the problem is actually pretty prosaic: you haven't allowed enough width for both floats to sit side-by-side!

Always allow a little "breathing room". Browser have different default formatting settings (such as text size), and this can slightly change the amount of space an element takes up.

So to fix the problem, simply reduce the width of your <div>s.

[Emzi]

Hi Mike,

Thanks for the input

I did change the widths to smaller sizes and that didn't work either. I even got rid of the widths to see if that would help, but alas it didn't work.

Validating is something I usually do when a page is finished but thank you for reminding me that I should also do it if I come accross any problems in the process, because it just might help me!

It sits perfectly when it's just the image (without the < script > tags), so I am wondering if FF doesn't like < script > tags in the HTML. I tried moving the < script > tags to be in the HEAD tags but the widget didn't like that and it stopped working.

Here's a link to the site without the < script > tags and just the image: http://dev.enjoyonline.co.uk/mobileb...outscript.html

[welshstew]

Emzi,
[edit] sorry didn't read your issue correctly, give me 5 [/edit]
Stew

[MikeHopley]

Okay, I just inspected your CSS and I think I've found the difference:

You have applied display: table to your div.top_nav_inner container. IE (incorrectly) ignores this -- it does not understand this display type. Firefox, however, correctly applies a table-layout to the <div>.

Try removing display: table. It seems to fix the problem.

[welshstew]

change .top_nav_outer width from auto to 800px
change .top_nav_left and .top_nav_right width from 397px to 395px

and that seems to sort it all out

[edit]or try mikes solution[/edit]

[Emzi]

Originally Posted by MikeHopley

Okay, I just inspected your CSS and I think I've found the difference:

You have applied display: table to your div.top_nav_inner container. IE (incorrectly) ignores this -- it does not understand this display type. Firefox, however, correctly applies a table-layout to the <div>.

Try removing display: table. It seems to fix the problem.

Ugh, I feel like such a berk (is that even a word?! ). Thank you so much! That did work!

I only apologise for not checking these things myself before asking for help!

Thank you again! I can now stop hitting my head against my desk

[Emzi]

Originally Posted by welshstew

change .top_nav_outer width from auto to 800px
change .top_nav_left and .top_nav_right width from 397px to 395px

and that seems to sort it all out

[edit]or try mikes solution[/edit]

Thanks Mikes solution worked, but thank you

[Emzi]

This thread is solved, but I can't seem to find the option that lets you choose that, so any mods if you can mark this thread as solved I'd really appreciate it (or point me in the right direction so I can do it myself )

[MikeHopley]

Originally Posted by Emzi

This thread is solved, but I can't seem to find the option that lets you choose that, so any mods if you can mark this thread as solved I'd really appreciate it (or point me in the right direction so I can do it myself )

Funnily enough, I was just looking for the same option -- and I can't find it. Has it vanished? I can only close threads, not mark them as solved.

[welshstew]

that function has been disabled for the time being, you can however edit the title of the thread if you so wish