943,801 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Float not working in Firefox.
Ad:
Permalink
Feb 1st, 2009
0

Float not working in Firefox.

Expand Post »
Hello,

This is the css:
HTML and CSS Syntax (Toggle Plain Text)
  1. ul
  2. {
  3. float: left; 			/*Het plaatje van de persoon*/
  4. position: fixed;
  5. margin-left: 20px;
  6. margin-top: 2px;
  7. }
  8.  
  9. li
  10. {
  11. float: top;
  12. postion: fixed;
  13. margin left: 20px;
  14. margin-top: 5px;
  15. list-style: none;
  16. }
  17.  
  18. p
  19. {
  20. margin left: 5px;
  21. }
  22.  
  23. body
  24. {
  25. background-color: #66FF66;
  26. }

And the HTML:
HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Ding</title>
  4. <link rel="stylesheet" type="text/css" href="http://opacity.atspace.com/style2.css">
  5. </head>
  6. <body>
  7.  
  8. <li>
  9. <img src="http://www.carmelemmen.nl/img/logoCarmelEmmen.gif" width="200" heigth="150" >
  10. <img src="http://www.dogbreedinfo.com/images17/NorthernInuitDogFreya14wks.JPG" width="200" heigth="150" >
  11. <img src="http://www.shoarns.com/Unknown%20bird%20-%20Cincinnatti%20Zoo%20-%20D%20Byrd.jpg" width="200" 
  12.  
  13. heigth="150" >
  14. </li>
  15.  
  16. <ul>
  17. <img src="http://www.zefhemel.com/upload/2008/02/funny-cat.jpg" width="200" heigth="150">
  18. </ul>
  19. <p>
  20. Text
  21. Text
  22. </p>
  23. </body>
  24. </html>

The <u>l items are supposed to float left, and the <li> items are supposed to float to the top, with text in the middle.

In Internet Explorer, this way I can achieve this result, in Firefox I can't. Even though in the CSS file I put the
HTML and CSS Syntax (Toggle Plain Text)
  1. float: left;
in the ul, the text will be on the left, and not the image.

What would be the way to fix this?

If you have another suggestion to make some images float left and the others up, it is very welcome.

Thank you.
Last edited by Pim; Feb 1st, 2009 at 11:15 am.
Similar Threads
Pim
Reputation Points: 10
Solved Threads: 0
Junior Poster
Pim is offline Offline
106 posts
since Jun 2005
Permalink
Feb 1st, 2009
0

Re: Float not working in Firefox.

There is no float :top; property
float takes left right none
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Feb 1st, 2009
0

Re: Float not working in Firefox.

The li tag is not allowed to be alone. It must be directly inside a ul or ol pair.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Feb 1st, 2009
0

Re: Float not working in Firefox.

Its also very bad form, to get your images from someone elses servers.
Last edited by almostbob; Feb 1st, 2009 at 6:27 pm.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Feb 1st, 2009
0

Re: Float not working in Firefox.

The normal way to control where things are on the page is to control the order the items are listed in the html file. Objects are placed from top to bottom, and within a line, from left to right.

Do NOT think of a web page as a sheet of paper that you place things on in various places. Think of it as a scroll that grows longer downward as you add more content.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Feb 6th, 2009
0

Re: Float not working in Firefox.

Okay well I modified the design. I've got a new problem with the float property now: I want to make an image float to the left, with a box with text in in on the right. In IE this works fine, Firefox however insists on placing the banaan.jpg over the box. Is this fixable?

CSS:
HTML and CSS Syntax (Toggle Plain Text)
  1. div.box /* Zorgt voor het textvak in het midden. Zoek naar div bij w3schools. */
  2. {
  3. color: green;
  4. margin: 5px;
  5. border: 1px solid black;
  6. width: 400px;
  7. height: 510px; 
  8. float: none;
  9. }
  10.  
  11. body
  12. {
  13. background-color: #FFFFFF;
  14. }
  15.  
  16. img.onder
  17. {
  18. margin: 5px,5px,5px,5px;
  19. float: left;
  20. }
  21.  
  22.  
  23. p.text
  24. {
  25. margin: 5px;
  26. }

The HTML code:
HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title>Ding</title>
  4. <link rel="stylesheet" type="text/css" href="style2.css">
  5. </head>
  6. <body>
  7.  
  8. <img class="onder" src="banaan.jpg">
  9.  
  10. <div class="box">
  11. <p class="text">
  12. Hier komt de tekst.
  13. </p>
  14. </div>
  15.  
  16.  
  17. </body>
  18. </html>

Thank you.
Pim
Reputation Points: 10
Solved Threads: 0
Junior Poster
Pim is offline Offline
106 posts
since Jun 2005
Permalink
Feb 6th, 2009
0

Re: Float not working in Firefox.

I don't see any elements with a float: right; in your stylesheet.
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008
Permalink
Feb 6th, 2009
0

Re: Float not working in Firefox.

The text shouldn't be on the right of the page, it should be on the right of the image.
Pim
Reputation Points: 10
Solved Threads: 0
Junior Poster
Pim is offline Offline
106 posts
since Jun 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: focus on frame
Next Thread in HTML and CSS Forum Timeline: CSS Help..Plz





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC