jasonc Posted June 17, 2011 Share Posted June 17, 2011 I have two problems with my code that I just can not get my head around. 1. the images are not within the borders, i am really wanting them to always be no more than 100px high and no more than 90px wide. in either case. I tried to use the !important tag but this did not work in firefox or IE. I have even tried the max-width and max-height but still no luck. 2. when I view the source code in firefox it does not have any of the products in the html code, but it does show up in IE ?! strange, is there something else wrong with my code that is causing this to happen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- /*div { border: 1px solid blue; }*/ .bodyContainer { border: 0px solid pink; float: left; width: 600px; } .header { width: 100%; text-align: center; font-size: 30px; } .menu { width: 100%; text-align: justify; font-size: 12pt; } .searchCategoryBox { border-right: 1px solid orange; float: left; width: 110px; padding: 3px; font-size: 10pt; } .results { border: 0px solid blue; float: left; width: 443px; padding: 3px; font-size: 9pt; } .multiItemBoxes { border: 1px solid red; float: left; width: 90px; height: 100px; margin: 4px; padding: 4px; text-align: center; } .footer { border-top: 1px solid grey; width: 100%; font-size: 12pt; } .clearfloat { clear: both; } .productLineheight { line-height: 5px; } --> </style> </head> <body> <!-- start of pink --> <div class="bodyContainer"> <div class="header">Header</div> <div class="menu">Home Product About us Contact us</div> <form action="" method="post"> <div class="searchCategoryBox"> <p><strong>Search categories</strong><br><input name="query" type="text" size="12"><br><input name="search" type="submit" value="search"></p> <p>a</p><p>b</p><p>c</p> <p><strong>List by category</strong></p> <p>d</p><p>e</p><p>f</p> <p>(all of these are taken from the mysql’s category table)</p> </div> <div class="results"> <div>Showing 1</div> <div class="multiItemBoxes"> <img class="multiItemBoxesImg" width="84" alt="Fiskars Medium Bypass Pruner" src="pImages/pic_3570.jpg"><br> Fiskars Medium Bypass Pruner<br><br class="productLineheight"> £11.99p<br><br class="productLineheight"> buying: <select name="3570"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select> </div> <div class="multiItemBoxes"> <img class="multiItemBoxesImg" width="84" alt="Rolcut Digging Spade" src="pImages/pic_3560.jpg"><br> Rolcut Digging Spade<br><br class="productLineheight"> £13.49p<br><br class="productLineheight"> buying: <select name="3560"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select> </div> <br class="clearfloat"> <br class="clearfloat"> <br class="clearfloat"> </div> </form> <br class="clearfloat"> <div class="footer">footer</div> </div><!-- end of pink --> </body> </html> Quote Link to comment Share on other sites More sharing options...
jasonc Posted June 17, 2011 Author Share Posted June 17, 2011 here are the screen shots from Firefox and IE what i was hoping to have is a maximum width and or height IE seems to show a large image and firefox has the text overlap outside the box area what am i doing wrong in my code that causes this ? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
sunfighter Posted June 17, 2011 Share Posted June 17, 2011 A suggestion for your image problem: Don't show the images! Show thumbnails of the images. That a look at this software: http://www.fookes.com/ezthumbs/ There are others. This one is free does batch conversion and looks like it automatically links to the full size images. For your next problem - where is this list suppose to be? Not in your code. Is it generated by php? Quote Link to comment Share on other sites More sharing options...
jasonc Posted June 17, 2011 Author Share Posted June 17, 2011 Hey thanks great piece of software, this partly solved one problem, but what i was also after is a way to allow the boxes to grow in height but keep a min-height of sat 150px but allow it to grow if the text needs it to. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted June 18, 2011 Share Posted June 18, 2011 you could put overflow:hidden on the container element. Although the right tool depends on the situation. if you have an online example of this, i am happy to take a look at it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.