By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,649 Members | 1,572 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,649 IT Pros & Developers. It's quick & easy.

internet explorer image placement issue but fine in mozzila

P: 23
For some unknown reason ie is placing images I have in a div in a weird way. One image is overlapping another but this problem is not occuring in mozilla. I have looked at my code over and over again but cant seem to find out what the problem is. I think this could be fixed with a i.e hack??? please advise

the problem of the overlapping image is occuring in imagerow2 div on line 56. please see my code below

here is my html

Expand|Select|Wrap|Line Numbers
  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.  
  4. <head>
  5.  
  6. <title>Ebay listing template</title>
  7. <link rel="stylesheet" type="text/css" media="screen" href="styles/stylesheet.css" />
  8. </head>
  9.  
  10. <body>
  11. <div id="body">
  12.   <div id="container"> <!--START CONTAINER-->
  13.     <div id="header"> <!--START HEADER-->
  14.     </div> <!--END HEADER-->
  15.     <div id="title">Unboxed Microsoft Xbox 360 Core Version FAULTY Red Rings Of Death, Power Fault - SPARES <!--START TITLE-->
  16.     </div> <!--END TITLE-->
  17.     <div id="main"> <!--START MAIN-->
  18.       <div id="contenth1">Description <!--START CONTENTH1-->
  19.       </div> <!--END CONTENTH1-->
  20.       <div id="content1"> <!--START CONTENT1-->
  21.       <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01762.jpg" target="_blank"> 
  22.       <img src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01762.jpg" height="90" width="120" 
  23.       alt="Gallery Image" title="Click for larger version" align="right" style="margin:10px"/></a>
  24.         <span>For sale is an unboxed Microsoft Xbox 360 Core edition game console. There's no box, component/power cable, hard drive, controller or or any other accessories!<br />
  25.         <strong>Only console is provided! </strong></span><br /><br />
  26.         <span> This has suffered from the red ring of death and also has a power supply problem as sometimes the console turns on but sometimes does not.
  27.         Console has been opened before so warranty is void. There's no obvious damage or marks to the console. This would be ideal as 
  28.         spares or if you know how to fix this machine you can grab a bargain. <strong>No returns provided!</strong></span><br /><br />
  29.         <span> If you have any questions please do not hesitate to <a href="mailto:pro.jdm@ntlworld.com?subject=Ebay%20Auction">Contact 
  30.         me!</a> </span>
  31.       </div> <!--END CONTENT1-->
  32.       <div id="contenth2">Pictures <!--START CONTENTH2-->
  33.       </div> <!--END CONTENT2-->
  34.       <div id="content2"> <!--START CONTENT2-->
  35.         <span> Click on an image thumbnail below to view a larger version.</span><br /><br />
  36.         <div id="imagerow1"> <!--START IMAGEROW1-->
  37.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01762.jpg" target="_blank"> 
  38.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01762.jpg" height="90" width="120" 
  39.         alt="Gallery Image" title="Click for larger version" /></a> 
  40.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01757.jpg" target="_blank"> 
  41.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01757.jpg" height="90" width="120" 
  42.         alt="Image 2" title="Click for larger version"/>
  43.         </a> <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01758.jpg" target="_blank"> 
  44.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01758.jpg" height="90" width="120" 
  45.         alt="Image 3" title="Click for larger version"/></a> 
  46.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01759.jpg" target="_blank"> 
  47.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01759.jpg" height="90" width="120" 
  48.         alt="Image 4" title="Click for larger version"/></a> 
  49.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01760.jpg" target="_blank"> 
  50.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01760.jpg" height="90" width="120" 
  51.         alt="Image 5" title="Click for larger version"/></a> 
  52.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01761.jpg" target="_blank"> 
  53.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/xboxcorefaulty23022009/DSC01761.jpg" height="90" width="120" 
  54.         alt="Image 6" title="Click for larger version"/></a> 
  55.         </div> <!--END IMAGEROW1-->
  56.         <div id="imagerow2"> <!--START IMAGEROW2-->
  57.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/no-image.gif" target="_blank"> 
  58.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/no-image.gif" height="90" width="120" 
  59.         alt="Image 7" title="Click for larger version"/></a> 
  60.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/no-image.gif" target="_blank"> 
  61.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/no-image.gif" height="90" width="120" 
  62.         alt="Image 8" title="Click for larger version"/></a>
  63.         <a href="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/no-image.gif" target="_blank"> 
  64.         <img style="float:left; margin:5px; padding:0" src="http://i327.photobucket.com/albums/k442/ej2_sleeper/ebay/no-image.gif" height="90" width="120" 
  65.         alt="Image 9" title="Click for larger version"/></a> 
  66.           </div> <!--END IMAGEROW2-->
  67.       </div> <!--END CONTENT2-->
  68.     </div> <!--END MAIN-->
  69.     <div id="sidesection"> <!--START SIDESECTION-->
  70.       <div id="contenth3">Payment &amp; Contact Info <!--START CONTENTH3-->
  71.       </div> <!--END CONTENTH3-->
  72.       <div id="content3"> <!--START CONTENT3-->
  73.         <span>Payment must be made within 48-72 hours. Payment can be made via Paypal, Personal Cheque or a bank transfer. <br /><br />
  74.         I can be contacted directly via email at <br /><br />
  75.         <a href="mailto:pro.jdm@ntlworld.com?subject=Ebay%20Auction">pro.jdm@ntlworld.com</a><br /><br />
  76.  
  77.         Once paypal payment is received or a cheque/bank transfer has cleared the item will be dispatched within 48 hours. </span>
  78.         <br /><br />
  79.         <span><a href="mailto:pro.jdm@ntlworld.com?subject=Ebay%20Auction">Click here to email me</a><br />
  80.         <a href="http://shop.ebay.co.uk/merchant/pro.jdm_W0QQ_nkwZQQ_armrsZ1QQ_fromZQQ_mdoZ">View my other auctions</a><br />
  81.         <a href=
  82.         "http://feedback.ebay.co.uk/ws/eBayISAPI.dll?ViewFeedback2&userid=pro.jdm&ftab=AllFeedback">
  83.         Read my feedback reviews</a></span>
  84.       </div> <!--END CONTENT3-->
  85.       <div id="contenth4">Shipping <!--START CONTENTH4-->
  86.       </div> <!--END CONTENTH4-->
  87.       <div id="content4"> <!--START CONTENTH4-->
  88.         <span> Domestic packages are shipped via Royal mail. Delivery details can be found at the bottom of each auction page. <br />
  89.         <br />
  90.         <strong>International shipping is not offered.</strong></span><br /><br />
  91.         <span> Shipping fees include costs of packaging (bubble wrap, brown wrapping paper, cardboard box, etc).</span>
  92.       </div> <!--END CONTENTH4-->
  93.     </div> <!--END SIDESECTION-->
  94.     <div id="footer"> <!--START FOOTER-->
  95.       <div id="leftcontent">Copyright &copy; 2008 Pro JDM <!--START LEFTCONTENT-->
  96.       </div> <!--END LEFTCONTENT-->
  97.       <div id="rightcontent">Powered by Pro JDM <!--START RIGHTCONTENT-->
  98.       </div> <!--END RIGHTCONTENT-->
  99.     </div> <!--END FOOTER-->
  100.   </div> <!--END CONTAINER-->
  101. </div> <!--END BODY-->
  102.  
  103. </body>
  104. </html>
  105.  
here is my css

Expand|Select|Wrap|Line Numbers
  1. #body { 
  2.     padding-top: 25px;
  3.     padding-bottom: 25px;
  4.     text-align:center;
  5.     background-color: black
  6. }
  7.  
  8. #container {
  9.     height: 946px;
  10.     width: 1000px;
  11.     margin:auto;
  12.     text-align: center;
  13.     border-style:solid;
  14.     border-color:white;
  15.     border-width:1px;
  16.     background-color: black
  17. }
  18. #header {
  19.     height: 289px;
  20.     width: 1000px;
  21.     background-image: url(../ebayimages/header.jpg);
  22.     background-repeat: repeat-x
  23. }
  24. #title {
  25.     height:43px;
  26.     width:1000px;
  27.     padding-top: 12px;
  28.     background-image: url(../ebayimages/gradient.jpg);
  29.     font-family:tahoma, arial;
  30.     font-size:20px;
  31.     font-weight:bold;
  32.     color:white;
  33.     border-top:solid;
  34.     border-bottom:solid;
  35.     border-width:1px;
  36.     border-color:white;
  37. }
  38. #main {
  39.     height:556px;
  40.     width:682px;
  41.     margin-left: 10px;
  42.     float:left;
  43.     background-color: black
  44. }
  45.  
  46. #imagerow1 {
  47.     height:100px;
  48.     width:675px;
  49. }
  50.  
  51. #imagerow2 {
  52.     height:100px;
  53.     width:675px;
  54. }
  55.  
  56. #main a:link {
  57.     color: #00611C;
  58.     font-weight:bold;
  59.     text-decoration: none
  60. }
  61. #main a:visited {
  62.     color: #00611C;
  63.     font-weight:bold;
  64.     text-decoration: none
  65. }
  66. #main a:hover {
  67.     color: #00611C;
  68.     font-weight:bold;
  69.     text-decoration: underline
  70. }
  71.  
  72. #contenth1 {
  73.     height: 35px;
  74.     width:681px;
  75.     margin-top: 20px;
  76.     background-image: url(../ebayimages/gradient.jpg);
  77.     background-repeat: repeat-x;
  78.     float:left;
  79.     border-left:solid;
  80.     border-top:solid;
  81.     border-right:solid;
  82.     border-width:1px;
  83.     border-color: white;
  84.     font-family:tahoma, arial;
  85.     font-size:20px;
  86.     line-height:30px;
  87.     color:white;
  88.     font-weight: 200
  89. }
  90. #contenth2 {
  91.     height: 35px;
  92.     width:681px;
  93.     margin-top: 20px;
  94.     background-image: url(../ebayimages/gradient.jpg);
  95.     background-repeat: repeat-x;
  96.     float:left;
  97.     border-left:solid;
  98.     border-top:solid;
  99.     border-right:solid;
  100.     border-width:1px;
  101.     border-color: white;
  102.     font-family: tahoma, arial;
  103.     font-size:20px;
  104.     line-height:30px;
  105.     color:white;
  106.     font-weight: 200
  107. }
  108. #content1 {
  109.     height: 170px;
  110.     width: 681px;
  111.     background-color: #9AFF9A;
  112.     float:left;
  113.     font-family:tahoma, arial;
  114.     font-size:14px;
  115.     font-weight: 500;
  116.     border-style:solid;
  117.     border-color:white;
  118.     border-width:1px;
  119. }
  120. #content2 {
  121.     height: 250px;
  122.     width: 681px;
  123.     background-color: #9AFF9A;
  124.     float:left;
  125.     font-family:tahoma, arial;
  126.     font-size:14px;
  127.     font-weight: 500;
  128.     border-style:solid;
  129.     border-color:white;
  130.     border-width:1px;
  131. }
  132. #sidesection {
  133.     height:556px;
  134.     width:280px;
  135.     margin-right: 10px;
  136.     float:right;
  137.     background-color: black
  138. }
  139. #contenth3 {
  140.     height: 35px;
  141.     width:279px;
  142.     margin-top: 20px;
  143.     background-image: url(../ebayimages/gradient.jpg);
  144.     background-repeat: repeat-x;
  145.     float:right;
  146.     border-left:solid;
  147.     border-top:solid;
  148.     border-right:solid;
  149.     border-width:1px;
  150.     border-color:white;
  151.     font-family:tahoma, arial;
  152.     font-size:20px;
  153.     line-height:30px;
  154.     color:white;
  155.     font-weight: 200
  156. }
  157. #contenth4 {
  158.     height: 35px;
  159.     width:279px;
  160.     margin-top: 20px;
  161.     background-image: url(../ebayimages/gradient.jpg);
  162.     background-repeat: repeat-x;
  163.     float:right;
  164.     border-left:solid;
  165.     border-top:solid;
  166.     border-right:solid;
  167.     border-width:1px;
  168.     border-color: white;
  169.     font-family:tahoma, arial;
  170.     font-size:20px;
  171.     line-height:30px;
  172.     color:white;
  173.     font-weight: 200
  174. }
  175. #content3 {
  176.     height: 260px;
  177.     width: 279px;
  178.     background-color: #9AFF9A;
  179.     float:right;
  180.     font-family:tahoma, arial;
  181.     font-size:14px;
  182.     font-weight: 500;
  183.     border-style:solid;
  184.     border-color:white;
  185.     border-width:1px;
  186. }
  187. #content4 {
  188.     height: 160px;
  189.     width: 279px;
  190.     background-color: #9AFF9A;
  191.     float:right;
  192.     font-family:tahoma, arial;
  193.     font-size:14px;
  194.     font-weight: 500;
  195.     border-style:solid;
  196.     border-color:white;
  197.     border-width:1px;
  198. }
  199. #sidesection a:link {
  200.     color: #00611C;
  201.     font-weight:bold;
  202.     text-decoration: none
  203. }
  204. #sidesection a:visited {
  205.     color: #00611C;
  206.     font-weight:bold;
  207.     text-decoration: none
  208. }
  209. #sidesection a:hover {
  210.     color: #00611C;
  211.     font-weight:bold;
  212.     text-decoration: underline
  213. }
  214. #footer {
  215.     float: left;
  216.     height: 43px;
  217.     width:1000px;
  218.     background-image: url(../ebayimages/gradient.jpg);
  219.     background-repeat: repeat-x;
  220.     font-family: Tahoma;
  221.     font-size: 15px;
  222.     line-height:37px;
  223.     color: white;
  224.     border-top:solid;
  225.     border-width:1px;
  226.     border-color:white
  227. }
  228.  
  229. #leftcontent {
  230.     width:400px;
  231.     height:43px;
  232.     float:left;
  233.     text-align:left;
  234.     margin-left:15px
  235. }
  236.  
  237. #rightcontent {
  238.     width:400px;
  239.     height:43px;
  240.     float:right;
  241.     text-align:right;
  242.     margin-right:15px
  243. }
  244.  
thanks in advance
Feb 23 '09 #1
Share this Question
Share on Google+
2 Replies


TheServant
Expert 100+
P: 1,168
Being an IE problem it is likely that it requires a hack or something unnatural. Have you tried floating imagerow2 and making it display as a block? I am about to leave work so I don't have much time to go through with much detail. Someone else will be along shortly who will help more than I can.
Feb 24 '09 #2

Expert 100+
P: 397
An easy fix, providing you have control of and can modify the markup, is to move the three no-image.gif(s) to the bottom of imagerow1. And comment out or delete imagerow2 in its entirety.
Feb 24 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.