Small Opera 10.0 html coding issue

[Bruce AaLee]

On our website there is a small issue that only appears when viewing the homepage on Opera 10.0

Our website address is:
Social Smoke

In the link below you will see how the website looks when loaded in Firefox 3.5. It also looks the same in Apple Safari and Internet Explorer.
Firefox Image

However, only in Opera a vertical scroll bar appears.
Opera Image

It appears that the scroll bar has something to do with the fact that the images on the right of the homepage are linked to other pages. When I remove the link from the images, the scroll bar disappears.

Any help is appreciated.

Thanks
Ali

[htmlbasictutor]

You have some coding errors and warnings according to the W3C HTML Validator. That would be a place to start troubleshooting.

There's also some CSS errors according to the W3C CSS Validator, so that's another spot to troubleshoot.

Are you using a beta version of Opera 10? They came out with a new version yesterday. http://www.opera.com/

From what I can tell from a Google search for Opera 10, iframe, there were issues in the beta version(s).

[abajan]

From my tests using four browsers (Firefox 3.5.2, Chrome 2.0.172.43, Safari 4.0.3 and Opera 9.64) on Windows XP Professional, the problem appears to be with Opera period, rather than just version 10.

I have run into similar Opera problems when developing one of my own sites. Surprisingly, on such occasions even IE6 displayed my site correctly! I suspect that the solution to your problem might well be as simple as reducing a margin or padding value by just a couple pixels.

If that does’t help, the first thing to do, as htmlbasictutor stated, would be to correct those validation errors (and warnings). Presently, there are 6 errors and 3 warnings. To the uninitiated, W3C validation reports may look awfully cryptic and daunting to tackle but oftentimes fixing just one error eliminates several others.

So let's run through those errors and warnings, line by line. (I'm no expert in this stuff but I've downloaded your page's source so that I can make the corrections one at a time, then upload the page to the validator after each correction.)

• ERROR Line 12: You need to include a "type" attribute in that opening "script" tag. (It's JavaScript, right? If it is, that line should read

  <script type="text/javascript">

  Validator result: 5 errors, 3 warnings
  
• WARNING Line 46: Encode the ampersand "&" so that the line reads

  <script type="text/javascript" language="javascript" src="https://www.socialsmoke.com/livehelp/class/js/include.php?live&amp;departmentid=1"></script>

Validator result: Just 2 errors and no warnings. See what I mean about how fixing one error can fix others too?
Okay, we're almost there. Let's see if we can get rid of those remaining errors...

• WARNING Line 291: Put a "<li>" start tag before the "<div>" so that that line reads

  <li><div id="minicartempty">

  Obviously, the opened "<li>" needs to be closed: (Line 293)

  </div></li>

  Validator result: Congratulations - This document was successfully checked as XHTML 1.0 Transitional!
  Sweeet!

You may need to make some adjustments to the CSS to compensate for the additional list item. Also, it is advisable to separate structure, style and behavior. In other words, put your styles in a stylesheet and link to it from the source, and your script from lines 13 to 15 (inclusive) should also be in a separate file.

[Bruce AaLee]

You're both absolutely correct about having valid code and css as the first step to trouble shooting a website issue. With that said, I am almost 100 % sure that the issue on Opera is not caused by the html/css errors when its validated. However I corrected the few issues that I should have fixed a long time ago and now the css validates 100%, but unfortunately I have never been able to get the html to validate 100% because of this code:

<li class="imatm"  style="width:63px;"><a href="(CGIVAR)seo_base_url(/CGIVAR)/page--Shopping-Cart--cart.html" style="height:29px;"><span class="imea imeam"><span></span></span>CART</a>

	<div class="imsc"><div class="imsubc" style="width:219px;top:0px;left:-154px;">
<ul id="cartcontainer">
(CGIGET TYPE="SUB" VALUE="ste_cart_dropdown")
(CGIGET TYPE="SUB" VALUE="ste_cart_view_checkout")
	</ul></div></div></li>

You will see that the opened li is actually closed, but what happens is that when the scripts all run the codeCGIGET TYPE="SUB" VALUE="ste_cart_dropdown")
(CGIGET TYPE="SUB" VALUE="ste_cart_view_checkout"): is replaced with
"<div id="minicartempty">
Your cart is currently empty
</div>"
and that causes the error because its not correct to use a div inside of a li.

Obviously the drop down menu code was not designed to work like this. I have put a mini shopping cart display into the menu and it causes the validator to show an error, but it works correctly in every browser I've ever tested so I just left it alone.

I know there is a correct way to do this, possibly using a drop down hover box, but i have never been able to recreate the way the drop down shopping cart works when I take the cart code out of the menu code. Even though the sites html/css was all done by hand except for the menu, i am certainly not an expert in any of this.

I am going to keep working on getting the menu to validate, but the issue with Opera is still something I dont understand. I tried taking the links off the images on the right of the homepage and it fixes the error. So I really think there has to be something small I can do to the links to correct the problem. Check it out

Homepage but without links

I appreciate your help guys.
Ali