Fit-to-Width killing my site in Opera 9.50?

[tommy2008]

Hi Guys!

I'm hoping you might be able to help me with a problem I discovered with my site and Opera 9.50. As you know Opera has a fit-to-width feature which supposed to get rid off horizonal scrolling on wide sites. Most sites when this feature is enabled are virtually un-affected (including this one) or not affected at all. My site however, gets totally screwed up when I enable this feature. Can someone please look at my code and offer me some pointers? I'm pretty sure it's something simple with my CSS which I'm new to and probably why can't figure out what's wrong. Anyways, the SITE is using two external style sheets one for the suckerfish drop down and the other for the theme. See below.

-------------------------------------- theme.css ---------------------------------------

/* ----------- centering container ----------- */


body {
 
  margin: 0 auto;
  background-color: #87ACC1;
  font-size: 100%;
  text-align: center;  
}  

a { text-decoration: none; }
a:link, a:active { color: #246BD6  }
a:visited { color: #0A003C }

#container {
  
  
  width: 1070px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
} 

/* --------------- centering container end -------------- */

div.search {

margin: 14px auto 28px 16px;
font-family: arial, helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #ffffff;

}

div.navi {

margin-left: 15px;
margin-bottom: auto;

}


div.bodytext {

margin: 2em 1em auto 2em;
font-family: arial, helvetica, sans-serif;
font-size: small;
color: #04001D;

}


/* ------------  Thumb Nail Gallery Styling Begin ---------- */


div.galpos
{
 
 margin-top: 30px;
 margin-left: 35px;
}


div.img
{
  
  margin-right: 38px;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	


div.desc
{
  
  font-weight: normal;
  max-width: 209px;
  margin-top: 10px;
  margin-bottom: 30px;
  text-align: center;
  font-family: arial, helvetica, sans-serif;
  font-size: small;
  font-color: #0A003C;
}

------------------------------ sucker.css ------------------------------------------

#nav, #nav ul {	
					  
	width: 740px;			 
	list-style: none;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
            line-height: 17px;
	padding: 0;
	margin: 0;
	
}


#nav a {       				
	text-decoration: none;
}


#nav li {				
	float: left;
	width: 117px;		
}

#nav li a {
	display: block;
	width: 105px;			
	color: #ffffff;
	background-color: #09003A;
	text-align: center;
	padding: 2px 4px 2px 4px;				
	border-right: dashed #A79ED7 1px;
	border-bottom: solid #0A003C 1px;
	border-left: solid #0A003C 3px;
}

#nav li a:hover {
	background-color: #150087;
	border-bottom-color: #246BD6;
	border-left-color: #246BD6;
         
}

#nav li ul {
	position: absolute;
	width: 105px;		
	w\idth: 140px;	       
            left: -16000px;		
}


#nav li li {
	width: 140px;		
}


#nav li ul a {
        width: 140px;           
}


#nav li ul ul {
	margin: -22px 0 0 150px;  
	
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -16000px;		  
                
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
        
}

#nav li:hover, #nav li.hover {
	position: static;
}

Once again the site is: http://photorific.tdimension.ca/adventures.htm

Thank You very much for reading and I appreciate any help that you can give me.

With Kind Regards,
Tom Graczkowski

[MidiMagic]

Since I don't have Opera, I can't see the trouble. But you do have several common troubles:

- Nonzero surrounding styles (margin, border, padding) in the same style definitions and tags that have size styles (width, height) causes cross-browser incompatibility.

- You have a typo: w\idth

- The location of an object placed by absolute or relative positioning is not cross-browser compatible. Position objects relative to the immediately containing tags, not to the browser window.

- Negative surrounding style values are not consistent.

[tommy2008]

Hi MidiMagic,

As for the problem I've been having I was made aware that it's because of the drop down menu. The invisible levels have been pushed off screen for browser compatibility and when fit-to-width is enabled Opera is trying to fit them onto the screen causing the whole site to get squashed. I was able to adjust the width to fix that problem with now only the second level of the menu being affected. There probably is an adjustment that could be made to have the drop down work with a CSS visible property but, unfortunately I don't know Javascript to be able to make that adjustment.

As far as your other points, the site is cross compatible on other major browsers being: Firefox, IE 6+ and Opera (as long as fit-to-width is not enabled which there is no need for on this site anyway). With Netscape the only one I have yet to test.

The w/idth is not a typo but actually an IE hack which as I remember correctly was implemented for IE mac.

Anyways thank you for taking the time to reply, still if anyone has an idea on how to get that second level drop down to work when the fit-to-width is enabled in Opera then I would really appreciate it.

With Kind Regards,
Tom