Back To Website Design Forum

CSS float Right Problem in FireFox PLease Help me?

  • virose
  • Novice
  • Novice
  • No Avatar
  • Joined: 20 Jul 2005
  • Posts: 15
  • Loc: florida
  • Status: Offline

Post February 21st, 2008, 12:04 pm

CSS float Right Problem in FireFox PLease Help me?

the problem is in the main content area the text will not wrap around a
image if the image is floated to the right.

it dose work in IE but i think IE is Reading the code wrong i think the main problem is in my css

here is the CSS


Line number On/Off
Code: Select all
  1. /*------------------------this defaults all browsers to 0------------------------*/
  2. * {
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6. a {
  7.     text-decoration: none;
  8.     color: #CC9900;
  9. }
  10.  
  11. #hr {
  12.     width: 570px;
  13.     height: 3px;
  14.     background: url(images/main%20layout%20gfx/hr.png);
  15.     margin: 10px;
  16.     clear: both;
  17. }
  18. img.left {
  19.     float: left;
  20.     margin: 0;
  21.     padding: 0;
  22.     clear: left;
  23. }
  24.  
  25.  
  26. }
  27. img.right {
  28.     float: right;
  29.     margin: 0;
  30.     padding: 0;
  31.     clear: right;
  32. }
  33.  
  34. #hr_gold {
  35.     width: 570px;
  36.     height: 3px;
  37.     background: url(images/main%20layout%20gfx/hr_gold.png);
  38.     margin: 10px;
  39.     clear: both;
  40. }
  41.  
  42. /*base styling*/
  43.  
  44. body {
  45.     text-align: center;
  46.     font-family: Verdana, Arial, Helvetica, sans-serif;
  47.     font-size: 75%;
  48.     background-color: #EBE6C9;
  49.     }
  50.    
  51. #wrapper {
  52.     position:relative;
  53.     width:800px;
  54.     margin: 0 auto;
  55.     text-align:left;
  56.     font-size: 85%;
  57.     background: url(images/main%20layout%20gfx/content_sidebar_bg.jpg) repeat-y;
  58. }
  59. #clear {
  60.     clear:both;
  61.     }
  62.    
  63. /*-----------------------------position containers elemnts------------------------*/
  64.  
  65. /*----heading------*/
  66. #header {
  67.     position:relative;
  68.     background:#CC3399 url(images/main%20layout%20gfx/heading_bg.jpg) repeat-x top left;
  69.     height: 140px;
  70.     }
  71.    
  72. #header h1{
  73.     margin-left: -9000px;
  74.     }
  75.    
  76. #header #heading_title {
  77.     position: absolute;
  78.     top: 20px;
  79.     left: 20px;
  80.     width: 403px;
  81.     height: 64px;
  82.     background: url(images/main%20layout%20gfx/heading_title.png) no-repeat top left;
  83.     }
  84.    
  85. #header #heading_logo {
  86.     position: absolute;
  87.     top: 10px;
  88.     left: 80px;
  89.     width: 121px;
  90.     height: 119px;
  91.     background: url(images/main%20layout%20gfx/heading_logo.png) no-repeat top left;
  92.     }
  93.    
  94. #header #heading_effect {
  95.     position: absolute;
  96.     top: 0px;
  97.     left: 0px;
  98.     width: 337px;
  99.     height: 140px;
  100.     background: url(images/main%20layout%20gfx/heading_effect.png) no-repeat bottom left;
  101.     }
  102.    
  103. #header #heading_sidepic {
  104.     position: absolute;
  105.     top: 0px;
  106.     right: 0px;
  107.     width: 220px;
  108.     height: 140px;
  109.     background: url(images/main%20layout%20gfx/heading_sidepic_bg.png) no-repeat top right;
  110.     }
  111.    
  112. /*----content area-----*/   
  113.  
  114. #content {
  115.     position: relative;
  116.     background: url(images/main%20layout%20gfx/content_bg.jpg) repeat-y top left;
  117.     background-color:#E1EBC8;
  118.     width:590px;
  119.     margin: 0px;
  120.     padding: 15px;
  121.     float: left;
  122.     clear: right;
  123.     }
  124.    
  125. #content #border1 {
  126.     position: absolute;
  127.     top: 0;
  128.     left: 0;
  129.     width: 800px;
  130.     height: 5px;
  131.     background: url(images/main%20layout%20gfx/border1.jpg) top left;
  132.     }
  133.    
  134. #content img {
  135.     padding: 0px;
  136.     border: 0px solid #877c57;
  137.     margin: 10px;
  138.     }
  139.    
  140. #content h1 {
  141.     color: #336633;
  142.     font-size: 3em;
  143.     font-family: "Lucida Sans", "MS Sans Serif", "Trebuchet MS";
  144.     }
  145.    
  146. #content h2 {
  147.     color: #009900;
  148.     font-size: 1.5em;
  149.     font-family: "Lucida Sans", "MS Sans Serif", "Trebuchet MS";
  150.     clear: left;
  151.     }
  152. /*------main navagation style-----*/   
  153.  
  154. #content ul {
  155.     position: absolute;
  156.     margin: 0;
  157.     padding: 0;
  158.     list-style: none;
  159.     width: 560px;
  160.     height: 40px;
  161.     background: url(images/main%20layout%20gfx/nav_bg.png)  no-repeat top left;
  162.     left: 30px;
  163.     top: 10px;
  164.     }
  165.    
  166. #content ul li {
  167.     float: left;
  168.     }
  169.    
  170. #content ul a {
  171.     padding: 0 2em;
  172.     font-size: 12px;
  173.     line-height: 3em;
  174.     font-weight:bold;
  175.     text-decoration: none;
  176.     float: center;
  177.     display: block;
  178.     color: #CCCC33;
  179.     }
  180.    
  181. #content ul li a:hover {
  182.     color:#663300;
  183.     }
  184.    
  185. /*---------------------------sidebar-----------------------*/
  186.    
  187. #sidebar {
  188.     float:right;
  189.     background: url(images/main%20layout%20gfx/sidebar_bg.jpg) repeat-y top left;
  190.     background-color:#5A8DB4;
  191.     width:158px;
  192.     padding: 10px;
  193.     margin: 0px;
  194.     }
  195.    
  196. /*----sidebar nav-------*/
  197.  
  198. #sidebar ul {
  199.     border: solid  0px #003300;
  200.     list-style: none;
  201.     width: 160px;
  202.     padding: 0;
  203.     margin: 0;
  204.     }
  205.    
  206. #sidebar ul li {
  207.     border: solid  0px #003300;
  208.     display: inline;
  209.     display:block;
  210.     line-height: 3em;
  211.     text-decoration: none;
  212.     text-align: left;
  213. }
  214.  
  215. #sidebar ul a {
  216.     font-size: 12px;
  217.     color: #993300;
  218.     padding-left: 5px;
  219.     }
  220.    
  221. #sidebar ul li a:hover {
  222.     color: #FFCC00;
  223.     background: url(images/main%20layout%20gfx/sidebar_nav_bg.png);
  224.     display: inline;
  225.     display: block;
  226.     }
  227.    
  228.  
  229. #sidebar ul h2 {
  230.     text-align: left;
  231.     font-size: 16px;
  232.     color: #CCCC33;
  233.     padding-left: 5px;
  234.     background-image: url(images/main%20layout%20gfx/sidebar_nav_bg2.png);
  235.     }
  236.    
  237. /*----footer-----*/
  238.    
  239. #footer {
  240.     color:#EBE6C9;
  241.     font: 1.2em Georgia, "Times New Roman", Times, serif;
  242.     width:800px;
  243.     background: url(images/main%20layout%20gfx/footer_bg.jpg) repeat-x top left;
  244.     height: 40px;
  245.     text-align: center;
  246.     }
  247.    
  248. #footer  a {
  249.     color: #fff;
  250.     }
  251.  


here is the html

Line number On/Off
Code: Select all
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Natural jade bonsai - bonsai trees for you </title>
  6. <link href="base_layout.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11. <!--[if IE]>
  12. <style type="text/css">
  13.   body {word-wrap: break-word;}
  14. </style>
  15. <![endif]-->
  16.  
  17. <div id="wrapper">
  18.   <div id="header">
  19.     <h1>Welcome to Natural Jade Bonsai.com</h1>
  20.         <div id="heading_sidepic"></div>
  21.     <div id="heading_effect"></div>
  22.             <div id="heading_logo"></div>
  23.         <div id="heading_title"></div>
  24.   </div>
  25.   <div id="content">
  26.     <div id="border1"></div>
  27.        
  28.         <ul>
  29.           <li><a href="#">Home</a></li>
  30.           <li><a href="#">Abous us</a></li>
  31.           <li><a href="#">Our Bonsai's</a></li>
  32.           <li><a href="#">Gallery</a></li>
  33.           <li><a href="#">Contact us</a></li>
  34.     </ul>
  35.         <br />
  36.         <br />
  37.         <br />
  38.         <br />
  39.     <h1 align="left">Featured Article</h1>      
  40.       <img src="images/bonsai_tree1.png" alt="Big Old Bonsai Tree" width="200" height="263" class="right" /><br />
  41.           <br />
  42.    
  43.         <h2 align="left"><em>Long Live The Bonsai          </em></h2>
  44.        
  45.         <br />
  46.     <p align="left" class="left">This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a> This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a> This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a> This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a>This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a></p>
  47.     <p align="left">&nbsp;</p>
  48.     <p align="left">&nbsp;</p>
  49.     <div class="left" id="hr"></div>
  50.       <h1>Bonsai of the Month</h1>
  51.       <br />
  52.    
  53.     <h2 align="left"><em>Sayahi Bonsai</em></h2>
  54.       <p align="left">&nbsp;</p>
  55.     <div align="left"><img src="images/bonsai_tree_2.png" width="250" height="373" class="left" />        </div>
  56.     <p align="left">&nbsp;</p>
  57.     <p align="left">&nbsp;</p>
  58.     <p align="left"><span class="left">This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a></span></p>
  59.     <p align="left">&nbsp;</p>
  60.     <p align="left"><span class="left">This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a></span></p>
  61.     <p align="left">&nbsp;</p>
  62.     <p align="left"><span class="left">This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a></span></p>
  63.     <p align="left">&nbsp;</p>
  64.     <p align="left"><span class="left">This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a></span></p>
  65.     <p align="left">&nbsp;</p>
  66.     <p align="left"><span class="left">This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a></span></p>
  67.     <p align="left"><br />
  68.     </p>
  69.     <div class="clear" id="hr_gold"></div>
  70.     <p align="left">This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking.   This is a bueatiful display of natures Constant desire to survive.  this tree has been deseased many times and it has had it’s dry seasons througout it’s life, yet it’s still kicking. <a href="#"><em>Read more</em></a></p>
  71.     <p align="left">&nbsp;</p>
  72.     <p>&nbsp;</p>
  73.   </div>
  74.   <div id="sidebar">
  75.   <ul>
  76.     <li><h2>Bonsai's</h2></li>
  77.     <li><a href="#">Stunt Trees</a></li>
  78.     <li><a href="#">Slow Growing</a></li>
  79.     <li><a href="#">Night Trees</a></li>
  80.     <li><h2>Helpful Tips</h2></li>
  81.     <li><a href="#">Caring For your Bonsai</a></li>
  82.     <li><a href="#">Hi-Tech Help</a></li>
  83.     <li><a href="#">Step By Step</a></li>
  84.     <li><h2>The Bonsai Diet</h2></li>
  85.     <li><a href="#">List of foods</a></li>
  86.     <li><h2>Our Friends</h2></li>
  87.     <li><a href="#">Peter's Bonsai's</a></li>
  88.     <li><a href="#">Bonsai Tress and us</a></li>
  89.     <li><a href="#">Southern Bonsai's</a></li>
  90.    </ul>
  91.   </div>
  92.     <div id="clear"></div>
  93.   <div id="footer" class="">
  94.   <br />
  95.     <p>&copy; 2008 <a href="#">www.naturaljadebonsai.com</a> Site Design by: <a href="http://www.walkwaywebdesigns.com">www.walkwaywebdesigns.com</a></p>
  96.   </div>
  97. </div>
  98. <br />
  99. <br />
  100. </body>
  101. </html>
  102.  
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 21st, 2008, 12:04 pm

Post February 21st, 2008, 12:35 pm

I'm sorry, but where is this image and text you are talking about ... won't you just cut out that part from the code or just give us a link and tell us where this image and text is ...
Would you love me more if I were a robot?
  • virose
  • Novice
  • Novice
  • No Avatar
  • Joined: 20 Jul 2005
  • Posts: 15
  • Loc: florida
  • Status: Offline

Post February 21st, 2008, 12:56 pm

ok here is the link to the test site i have up http://www.caverun.org/test%20site%201/index.html
try it in firefox or netscape then try it in IE you well see the main bonsai tree picture float nicely to the right of the text,

but in firefox and netscape it dose not float right it stays left and pushes the text under it.

that the problem i want fixed

so when i tell a image to float right using the class img.right it should look like it dose in IE accross all browsers

thanks for quick response jason

Post February 21st, 2008, 1:34 pm

just change this:
Line number On/Off
Code: Select all
  1. #content img {
  2.     padding: 0px;
  3.     border: 0px solid #877c57;
  4.     margin: 10px;

to this:
Line number On/Off
Code: Select all
  1. #content img {
  2.     padding: 0px;
  3.     border: 0px solid #877c57;
  4.     margin: 10px;
  5.         float:right;
Would you love me more if I were a robot?
  • virose
  • Novice
  • Novice
  • No Avatar
  • Joined: 20 Jul 2005
  • Posts: 15
  • Loc: florida
  • Status: Offline

Post February 21st, 2008, 3:22 pm

ok well that makes all the images in the content div float right.

i just what to be able to choose what images float left or right with a class
  • virose
  • Novice
  • Novice
  • No Avatar
  • Joined: 20 Jul 2005
  • Posts: 15
  • Loc: florida
  • Status: Offline

Post February 21st, 2008, 4:32 pm

i Finally just got it it just hit me lol


all i had to do was and the img.right/img.left float classes to the content div like this

Line number On/Off
Code: Select all
  1.  
  2.  
  3. #content img.right {
  4.     float: right;
  5.     margin: 0;
  6.     padding: 0;
  7.     clear: right;
  8. }
  9.  
  10.  

Page 1 of 1

Post Information

  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2008. Driven by phpBB © 2001-2008 phpBB Group.

 
 
 

Need a pre-made web design for your website?

Check out our templates here: Ozzu Templates

Perfect Money : Swiss approach to work with e-finance