Float not working in Firefox.

Reply

•
•
Join Date: Jun 2005
Posts: 104
Reputation: Pim is an unknown quantity at this point 
Solved Threads: 0
Pim Pim is offline Offline
Junior Poster

Float not working in Firefox.

 
0
  #1
Feb 1st, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,396
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 170
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Float not working in Firefox.

 
0
  #2
Feb 1st, 2009
There is no float :top; property
float takes left right none
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Float not working in Firefox.

 
0
  #3
Feb 1st, 2009
The li tag is not allowed to be alone. It must be directly inside a ul or ol pair.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,396
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 170
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Float not working in Firefox.

 
0
  #4
Feb 1st, 2009
Its also very bad form, to get your images from someone elses servers.
Last edited by almostbob; Feb 1st, 2009 at 6:27 pm.
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Float not working in Firefox.

 
0
  #5
Feb 1st, 2009
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 104
Reputation: Pim is an unknown quantity at this point 
Solved Threads: 0
Pim Pim is offline Offline
Junior Poster

Re: Float not working in Firefox.

 
0
  #6
Feb 6th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: Float not working in Firefox.

 
0
  #7
Feb 6th, 2009
I don't see any elements with a float: right; in your stylesheet.
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 104
Reputation: Pim is an unknown quantity at this point 
Solved Threads: 0
Pim Pim is offline Offline
Junior Poster

Re: Float not working in Firefox.

 
0
  #8
Feb 6th, 2009
The text shouldn't be on the right of the page, it should be on the right of the image.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum


Views: 1827 | Replies: 7
Thread Tools Search this Thread



Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart center cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format free frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC