Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jun 2008
    Location
    Canada
    Posts
    7
    Member #
    16940
    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 or not affected at all (including this one). 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 ---------------------------------------



    Code:
    /* ----------- 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 ------------------------------------------



    Code:
    #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

  2.  

  3. #2
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Well, I'll tell you one thing that's making it go wrong...

    #nav li ul {
    left: -16000px;
    }
    If you remove that line it won't go all narrow.

    If you think about it there's nothing weird going on here... you've placed an element absolutely about 15 screen widths left of your content... Opera has to FIT TO WIDTH, so it has to get those extra 15 screens fitted into the one screen... in order for the thing to balance it has the same on the right, so you end up with your content being 1/30th of the width (or whatever)...

    If you change it to -1070px (ie. width of screen) you don't get the issue.

    However, you get another issue - that of the images screwing up the second level navigation.

    Unfortunately can't look into that now, but perhaps somebody else can help.

    Version with -1070px here... http://seanmiller.net/op

    Sean

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Any reason why you don't [minicode]display:none[/minicode] instead of positioning absolute and pulling it off the screen?

  5. #4
    Junior Member
    Join Date
    Jun 2008
    Location
    Canada
    Posts
    7
    Member #
    16940
    Quote Originally Posted by Shadowfiend
    Any reason why you don't [minicode]display:none[/minicode] instead of positioning absolute and pulling it off the screen?
    As I remember collerctly when I read the suckerfish tutorial article they mentioned that some browsers don't interpret the display: none correctly and actually display it regardless. So that is why they decided to move the elements that not supposed be visible way outside the screen and then bring them back as needed. However, in the original code the value was -999em I changed all the values to pixels to prevent users screwing up the site when they increase the font size, etc. Unfortunately, though Opera breaks those rules.
    Anyways thanks guys for all the help so far that is definitely a step forward now if only someone could help me figure out how to straighten up that second drop down menu level then that would be just awesome! I looked at the original suckerfish article and actually their demo has that same problem where their second level gets totally messed up!

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Usually worth looking at is what browsers they're referring to. Often I find that articles from even just a couple of years ago talk about IE versions before 6 and on Mac and Netscape (!!) as browsers you need to target. At this point, targeting those is an academic exercise in fueling one's insanity, so if they're the ones that are poorly affected, you can probably ignore that and switch to display: none and make your problems evaporate nicely.

  7. #6
    Junior Member
    Join Date
    Jun 2008
    Location
    Canada
    Posts
    7
    Member #
    16940
    Quote Originally Posted by Shadowfiend
    Usually worth looking at is what browsers they're referring to. Often I find that articles from even just a couple of years ago talk about IE versions before 6 and on Mac and Netscape (!!) as browsers you need to target. At this point, targeting those is an academic exercise in fueling one's insanity, so if they're the ones that are poorly affected, you can probably ignore that and switch to display: none and make your problems evaporate nicely.
    You're absolutely right and I'm actually not too concerned with the very old browsers. However, I'm not very saavy in programing and therefore don't know what can be done. It's very likely that if I were to use display:none then that problem would probably disappear I'm almost convinced of that. But simple inclusion of display: none however, won't do the trick (I tried) as the menu is dependent on some Javascript which I'm completely clueless about. Some change needs to be done to the script first. If you would like to take a look at it then please, here it is:
    Code:
     
    sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
          sfEls[i].onmouseover=function() {
        this.className+=" sfhover";
          }
          sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
          }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    If you have an idea or anybody else for that matter how the functionality of this menu could be improved then I'm up for it reading your solutions but, please bare with me as I'm still a beginner.
    Thanks again for all your posts.

    Cheers!
    Tom Graczkowki

  8. #7
    Senior Member tonyf12's Avatar
    Join Date
    Mar 2007
    Posts
    132
    Member #
    14998
    Opera 9.5 is in fact very buggy compared to 9.27. Try it in 9.27 and see if it works.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

code to ignore fit to width in opera

,

opera 15 fit to width

Click on a term to search for related topics.
All times are GMT -6. The time now is 02:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com