Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

mozilla and opera compatibiliy issue

Newbie
  
Join Date: Mar 2008
Posts: 23
#1: Jun 23 '08
im hoping someone can help me here - my html/css seems to be perfectly compatible with internet explorer with no issues however the page breaks if viewed in opera or mozilla

can anyone help please?

Expand|Select|Wrap|Line Numbers
  1. <link rel="stylesheet" type="text/css" media="screen" href="http://creativedevelopments.net/stylesheet.css" />
  2.  
  3. <div id="body">
  4. <div id="container">
  5. <div id="header"></div>
  6.  
  7. <div id="title">New Brazil Away Shirt 08/10 Short Sleeve MEDIUM SIZE</div>
  8. <div id="main">
  9. <div id="contenth1">Description</div>
  10.  
  11. <div id="content1">
  12. <div class="img-shadow">
  13. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg">
  14. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg" height="90" width="120" alt="" /></a>
  15. </div>
  16.  
  17. <p>100% official Nike product with barcoded tags, nike tag's inside shirt and including serial numbers [please see pics below].</p>
  18.  
  19. <p>Brazil Away Shirt in the famous blue of the national away side is the perfect way to show your support for Brazil on the field, in the stands, or on the couch.
  20. The Brazil Away Shirt, manufactured by Nike celebrates the magnificent five Brazil World Cup wins with 5 stars on the inside of the collar. The blue shirt has a discreet yellow trim on the sleeves. The shirt has an embroidered Nike logo on the chest, alongside the Brazil badge.</p>
  21.  
  22. If you have any questions please do not hesitate to contact me!</p>
  23. </div>
  24.  
  25. <div id="contenth2">Pictures</div>
  26.  
  27. <div id="content2">
  28. <p>Click on an image thumbnail below to view a larger version.
  29. Use your browser's Back button to return to this page.</p>
  30.  
  31. <div id="imageList"></span>
  32.  
  33. <span class="img-shadow">
  34. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg">
  35. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg" height="90" width="120" alt="" />
  36. </a></span>
  37. <span class="img-shadow">
  38. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/2.jpg"><img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/2.jpg" height="90" width="120" alt="" />
  39. </a></span>
  40.  
  41. <span class="img-shadow">
  42. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/3.jpg">
  43. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/3.jpg" height="90" width="120" alt="" />
  44. </a></span>
  45.  
  46. <span class="img-shadow">
  47. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/4.jpg">
  48. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/4.jpg" height="90" width="120" alt="" />
  49. </a></span>
  50.  
  51. <span class="img-shadow">
  52. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/5.jpg">
  53. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/5.jpg" height="90" width="120" alt="" />
  54. </a></span>
  55.  
  56. <span class="img-shadow">
  57. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/6.jpg">
  58. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/6.jpg" height="90" width="120" alt="" />
  59. </a></span>
  60.  
  61. <span class="img-shadow">
  62. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/7.jpg">
  63. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/7.jpg" height="90" width="120" alt="" />
  64. </a></span>
  65.  
  66. <span class="img-shadow">
  67. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/8.jpg">
  68. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/8.jpg" height="90" width="120" alt="" />
  69. </a></span>
  70.  
  71. <span class="img-shadow">
  72. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/9.jpg">
  73. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/9.jpg" height="90" width="120" alt="" />
  74. </a></span>
  75.  
  76. <span class="img-shadow">                
  77. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/10.jpg">
  78. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/10.jpg" height="90" width="120" alt="" />
  79. </a></span>
  80. </div>
  81. </div>
  82. </div>
  83.  
  84. <div id="sidesection">
  85. <div id="contenth3">Seller Information</div>
  86.  
  87. <div id="content3">
  88. <p>Thanks for stopping by my auction. I have been an ebay member since June 2007 and only sell genuine soccer wear. </p>
  89.  
  90. <p>All items listed on ebay are in stock and are shipped out within 24 hours from our uk premises. Our stock is in no way shape or form associated with cheap Chinese fakes that are floating around ebay - All our stock is sourced from manufacturer or our uk contacts within the soccer industry.</p>
  91.  
  92. <p><a href="http://search.ebay.co.uk/_W0QQfgtpZ1QQfrppZ25QQsassZsoccerQ2dlimits">View my other auctions</a><br>
  93.  
  94. <a href="http://feedback.ebay.co.uk/ws/eBayISAPI.dll?ViewFeedback2&userid=soccer-limits&ftab=AllFeedback&sspagename=STRK:ME:UFS">Read my feedback reviews</a></p>
  95. </div>
  96.  
  97. <div id="contenth4">Shipping</div>
  98.  
  99. <div id="content4">
  100. <p>Domestic packages are shipped via Royal mail 1st class recorded delivery. International packages will be shipped via Royal mails international signed for service.</p>
  101.  
  102. <p>Shipping fees includes costs of packaging (bubble wrap, box, etc.). Once payment is received the package will be dispatched within 24 hours.</p>
  103.  
  104. </div>      
  105. </div>    
  106. <div id="footer">
  107. <div id="leftcontent">Copyright © 2008 Soccer Limits</div>
  108. <div id="rightcontent">Powered by Soccer Limits</div>
  109. </div>
  110. </div>        
  111. </div>
  112.  

drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,580
#2: Jun 23 '08

re: mozilla and opera compatibiliy issue

Never, ever use IE as a reference for how things should work. IE is the worst browser on the planet, 10 years behind web standards and incorrect in its implementation. Always use Firefox or Opera or Safari as your reference. Once your page works there, then you can hack IE to make it work. The many bugs are known, as are the hacks.

More later.
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,580
#3: Jun 24 '08

re: mozilla and opera compatibiliy issue

To continue:

So if you use a broken browser, which is IE, to design your page, and then expect modern browsers, such as Firefox and Opera, to perform the same way, well, you get what I'm saying. This is why you must use FF or Opera to create your page while checking to see when and where IE screws it up.

You also need to validate your html and css for those lists of errors that need correcting.

You didn't supply the complete markup. I only assumed you are using an xhtml doctype because you have some xhtml end tags, yet there are some errors in your markup that are html only.

Fix the errors, then get your page working in a modern browser, then we can help you fix IEs crap.
Newbie
  
Join Date: Mar 2008
Posts: 23
#4: Jun 24 '08

re: mozilla and opera compatibiliy issue

thank you very much for your replies and information.

I will try my best to validate the code and fix any html errors so I can test on opera or firefox.

I will post progress shortly..
Newbie
  
Join Date: Mar 2008
Posts: 23
#5: Jun 25 '08

re: mozilla and opera compatibiliy issue

okay iv run the html through a W3C markup validator and have fixed as many errors as possible. The only few remaining errors are contained within the ebay url to my feedbacks which is simply a URL so not sure what the problem is there?

as you guys may have noticed this is basically my ebay advert and therefore I cannot state the document type declaration otherwise the whole ebay page breaks and goes funny...

anyway the page is still not being displayed in mozilla, opera properly and im really stuck...can someone please help? amended code is below.. thanks in advance

Expand|Select|Wrap|Line Numbers
  1. <link rel="stylesheet" type="text/css" media="screen" href="http://creativedevelopments.net/stylesheet.css">
  2.  
  3. <div id="body">
  4. <div id="container">
  5. <div id="header"></div>
  6.  
  7. <div id="title">New Brazil Away Shirt 08/10 Short Sleeve MEDIUM SIZE</div>
  8. <div id="main">
  9. <div id="contenth1">Description</div>
  10.  
  11. <div id="content1">
  12. <div class="img-shadow">
  13. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg">
  14. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg" height="90" width="120" alt="" ></a>
  15. </div>
  16.  
  17. <p>100% official Nike product with barcoded tags, nike tag's inside shirt and including serial numbers [please see pics below].</p>
  18.  
  19. <p>Brazil Away Shirt in the famous blue of the national away side is the perfect way to show your support for Brazil on the field, in the stands, or on the couch.
  20. The Brazil Away Shirt, manufactured by Nike celebrates the magnificent five Brazil World Cup wins with 5 stars on the inside of the collar. The blue shirt has a discreet yellow trim on the sleeves. The shirt has an embroidered Nike logo on the chest, alongside the Brazil badge.<br>
  21.  
  22. If you have any questions please do not hesitate to contact me!</p>
  23. </div>
  24.  
  25. <div id="contenth2">Pictures</div>
  26.  
  27. <div id="content2">
  28. <p>Click on an image thumbnail below to view a larger version.
  29. Use your browser's Back button to return to this page.</p>
  30.  
  31. <span class="img-shadow">
  32. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg">
  33. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/1.jpg" height="90" width="120" alt="" >
  34. </a></span>
  35. <span class="img-shadow">
  36. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/2.jpg"><img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/2.jpg" height="90" width="120" alt="" >
  37. </a></span>
  38.  
  39. <span class="img-shadow">
  40. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/3.jpg">
  41. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/3.jpg" height="90" width="120" alt="" >
  42. </a></span>
  43.  
  44. <span class="img-shadow">
  45. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/4.jpg">
  46. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/4.jpg" height="90" width="120" alt="" >
  47. </a></span>
  48.  
  49. <span class="img-shadow">
  50. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/5.jpg">
  51. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/5.jpg" height="90" width="120" alt="" >
  52. </a></span>
  53.  
  54. <span class="img-shadow">
  55. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/6.jpg">
  56. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/6.jpg" height="90" width="120" alt="" >
  57. </a></span>
  58.  
  59. <span class="img-shadow">
  60. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/7.jpg">
  61. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/7.jpg" height="90" width="120" alt="">
  62. </a></span>
  63.  
  64. <span class="img-shadow">
  65. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/8.jpg">
  66. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/8.jpg" height="90" width="120" alt="">
  67. </a></span>
  68.  
  69. <span class="img-shadow">
  70. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/9.jpg">
  71. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/9.jpg" height="90" width="120" alt="" >
  72. </a></span>
  73.  
  74. <span class="img-shadow">                
  75. <a href="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/10.jpg">
  76. <img src="http://i298.photobucket.com/albums/mm251/soccerlimits/BRAZIL%20AWAY%200810/MEDIUM/10.jpg" height="90" width="120" alt="">
  77. </a></span>
  78. </div>
  79. </div>
  80. </div>
  81.  
  82. <div id="sidesection">
  83. <div id="contenth3">Seller Information</div>
  84.  
  85. <div id="content3">
  86. <p>Thanks for stopping by my auction. I have been an ebay member since June 2007 and only sell genuine soccer wear. </p>
  87.  
  88. <p>All items listed on ebay are in stock and are shipped out within 24 hours from our uk premises. Our stock is in no way shape or form associated with cheap Chinese fakes that are floating around ebay - All our stock is sourced from manufacturer or our uk contacts within the soccer industry.</p>
  89.  
  90. <p><a href="http://search.ebay.co.uk/_W0QQfgtpZ1QQfrppZ25QQsassZsoccerQ2dlimits">View my other auctions</a><br>
  91.  
  92. <a href="http://feedback.ebay.co.uk/ws/eBayISAPI.dll?ViewFeedback2&userid=soccer-limits&ftab=AllFeedback&sspagename=STRK:ME:UFS">Read my feedback reviews</a></p>
  93. </div>
  94.  
  95. <div id="contenth4">Shipping</div>
  96.  
  97. <div id="content4">
  98. <p>Domestic packages are shipped via Royal mail 1st class recorded delivery. International packages will be shipped via Royal mails international signed for service.</p>
  99.  
  100. <p>Shipping fees includes costs of packaging (bubble wrap, box, etc.). Once payment is received the package will be dispatched within 24 hours.</p>
  101.  
  102. </div>      
  103. </div>    
  104. <div id="footer">
  105. <div id="leftcontent">Copyright © 2008 Soccer Limits</div>
  106. <div id="rightcontent">Powered by Soccer Limits</div>
  107. </div>
  108. </div>        
  109.  
Newbie
  
Join Date: Mar 2008
Posts: 23
#6: Jun 25 '08

re: mozilla and opera compatibiliy issue

can someone please help...
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,580
#7: Jun 25 '08

re: mozilla and opera compatibiliy issue

I looked at one of those storefronts and it didn't have a doctype. This puts IE into quirks mode and you will never get modern markup to work in it. I cannot emphasize enough that you should never attempt to "fix" Mozilla or Opera but always "fix" IE. Mozilla and Opera will display what you write while IE, you don't always know what it will do.

The only thing you can do is adjust your markup to look the way you want in Mozilla/Opera so you know your markup is written correctly. Then we can help adjust for IEs multitude of bugs and quirks.
Newbie
  
Join Date: Mar 2008
Posts: 23
#8: Jul 21 '08

re: mozilla and opera compatibiliy issue

guys bless you all for your help!

you were all right - one should not test there web pages with i.e. I worked on my code whilst testing with mozilla and everything is fine.

thank you : )
Reply

« previous question | next question »

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,537 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved