Results 1 to 6 of 6

Thread: Only Google Chrome doesn't show it right !

  1. #1
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Unhappy Only Google Chrome doesn't show it right !

    Hi everyone !

    First of all here is 2 things:

    1- English is not my native language :P
    2- Im a beginner on building sites.

    Here is the problem:

    I have a dropdown menu on the very top of the page.

    Everything appears right when viewing in IE, Firefox and Opera but Only Google Chrome doesn't show it right ! The menu goes underneath a DIV !

    Here is the site : http://pages.videotron.com/drcolt45/

    Here is the codings ( CODE and CSS ) --- Don't forget, Im a newbie !


    ***** CODE *****

    HTML Code:
    <body>
    
    <img src="Images/Fond_Site1.jpg" class="superbg" />
      <script src="script/jquery.js" type="text/javascript"></script>
      <script src="script/background.js" type="text/javascript"></script>
      	   
    <div id='cssmenu'>
    <ul>
       <li class="active"><a href="index.html"><span>Présentation</span></a></li>
       <li class="has-sub" style="z-index:1005"><a href="index.html"><span>Services</span></a>
          <ul>
             <li><a href="index.html"><span>Terrassement</span></a></li>
             <li><a href="index.html"><span>Excavation</span></a></li>
             <li><a href="index.html"><span>Déneigement</span></a></li>
     		 <li class="last"><a href="index.html"><span>Démolition</span></a></li>
          </ul>
       </li>
          <li class="has-sub" style="z-index:1005"><a href="index.html"><span>Nos Équipements</span></a>
          <ul>
             <li><a href="index.html"><span>Machinerie lourdes</span></a></li>
             <li><a href="index.html"><span>Machinerie légères</span></a></li>
             <li class="last"><a href="index.html"><span>Autres équipement</span></a></li>
          </ul>
       </li>
       <li class="has-sub" style="z-index:1005"><a href="index.html"><span>Location</span></a>
          <ul>
             <li><a href="index.html"><span>Machinerie</span></a></li>
             <li class="last"><a href="index.html"><span>Autres</span></a></li>
          </ul>
       </li>
       <li class="last"><a href="index.html"><span>Coordonnées</span></a></li>
    </ul>
    </div> 
        
    <div id="wrapper">
    
    <div id="nav">
    <p>&nbsp;</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor leo ut mauris posuere, quis laoreet velit scelerisque. Quisque dolor risus, aliquet ac est commodo, vestibulum feugiat massa. Pellentesque sem ante, auctor quis nibh eget, faucibus venenatis augue. Pellentesque nisl massa, blandit sed pharetra nec, laoreet eget velit. Nunc molestie venenatis augue in adipiscing. Quisque consequat eros id quam rutrum, nec imperdiet sem convallis. Quisque nec venenatis eros. Pellentesque id iaculis magna. Maecenas vehicula ultrices massa non convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet aliquam dui. Donec in scelerisque nulla. Proin ullamcorper at felis ut scelerisque.</p> 
    
    <p>Quisque laoreet urna id nulla vestibulum, dapibus elementum tortor interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis quis leo enim. Phasellus porttitor, enim vitae adipiscing consequat, ligula nunc porta mauris, vitae malesuada tortor diam a nulla. Integer nisl lectus, aliquet a leo vel, molestie consequat diam. Nam non ultricies augue. Fusce id sapien mi. Praesent tempor purus turpis, quis mattis orci condimentum in. Suspendisse at magna ac purus dignissim suscipit nec nec neque. Donec turpis arcu, ultrices ac mollis quis, molestie eu ligula. Suspendisse potenti. Morbi eleifend eros id ipsum venenatis consequat. Vestibulum laoreet vitae erat non tristique. Proin a libero eros. Duis eu sagittis quam, vitae sollicitudin dolor.</p> 
    
    <p>Pellentesque id faucibus velit. Duis aliquet interdum imperdiet. Sed placerat nibh non purus posuere, ac euismod lectus aliquet. Curabitur auctor,lorem non blandit molestie, massa mauris ultricies lorem, in ultricies eros enim vitae libero. Phasellus egestas nec metus quis sodales. Nullam cursus augue at nunc blandit pulvinar. Mauris ultrices urna lacus, sit amet aliquet justo pellentesque ut. Aliquam dapibus nisl id nunc rhoncus cursus. Vestibulum consectetur neque nec dolor faucibus fringilla. Fusce feugiat felis a elit scelerisque venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec leo sed odio euismod faucibus. Nulla mattis tempus nisl ut fermentum.</p>
    </div>
    
    <div id="footer" align="center">
    <p>Vestibulum consectetur neque nec dolor faucibus fringilla.</p>
    </div>
    
    
    </div>
    
    </body>
    </html>
    **** CSS ****

    Code:
    img.superbg {
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
    }
    
    function redimensionnement(){ 
     
        var $image = $('img.superbg');
        var image_width = $image.width(); 
        var image_height = $image.height();     
         
        var over = image_width / image_height; 
        var under = image_height / image_width; 
         
        var body_width = $(window).width(); 
        var body_height = $(window).height(); 
         
        if (body_width / body_height >= over) { 
          $image.css({ 
            'width': body_width + 'px', 
            'height': Math.ceil(under * body_width) + 'px', 
            'left': '0px', 
            'top': Math.abs((under * body_width) - body_height) / -2 + 'px' 
          }); 
        }  
         
        else { 
          $image.css({ 
            'width': Math.ceil(over * body_height) + 'px', 
            'height': body_height + 'px', 
            'top': '0px', 
            'left': Math.abs((over * body_height) - body_width) / -2 + 'px' 
          }); 
        } 
    } 
          
    $(document).ready(function(){
    
        // Au chargement initial   
        redimensionnement();
         
        // En cas de redimensionnement de la fenêtre
        $(window).resize(function(){ 
            redimensionnement(); 
        }); 
     
    }); 
    
    html { 
      margin:0;
      padding:0;
      background: url(Images/Fond_Site1.jpg) no-repeat center fixed; 
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover; /* version standardisée */
    }
    
    #content1 {
    	float:left;
    	width:770px;
    	/* Pas de hauteur pour qu'il s'ajuste automatiquement */
    	background-color:#565656;
    	filter: alpha(opacity=50); 	/* internet explorer */
    	-khtml-opacity: 0.5;      	/* khtml, old safari */
    	-moz-opacity: 0.5;       	/* mozilla, netscape */
    	opacity: 0.5;           	/* fx, safari, opera */
    	border-radius: 15px;
    		}	
    		
    
    #nav {
    	float:left;
    	width:800px;
    	height:450px;
    	background-color:#565656;
    	filter: alpha(opacity=70); 	/* internet explorer */
    	-khtml-opacity: 0.7;      	/* khtml, old safari */
    	-moz-opacity: 0.7;       	/* mozilla, netscape */
    	opacity: 0.7;           	/* fx, safari, opera */
    	border-radius: 15px;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 0.8em;
    	color: #FFF;
    	padding-top:5px;
    	padding-left:10px;
    	padding-right:10px;
    	text-align: justify;
    	margin-top:70px;
    	margin-left: 130px;
    }
    
    #header {
    	float: left;
    	width: 770px;
    	height:55px;
    	margin-top:0px;
    	border-radius: 15px;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 0.7em;
    	color: #FFF;
    	text-transform: capitalize;
    }
    
    #wrapper {
    	elevation:below;
    	width:960px;
    	margin-top:5px;
    	margin-right:auto;
    	margin-left:auto;
    	position:relative;
    }
    
    #footer {
    	float:left;
    	margin-top:5px;
    	width:800px;
    	height:60px;
    	border-radius: 15px;
    	filter: alpha(opacity=80); 	/* internet explorer */
    	-khtml-opacity: 0.8;      	/* khtml, old safari */
    	-moz-opacity: 0.8;       	/* mozilla, netscape */
    	opacity: 0.8;           	/* fx, safari, opera */
    	border-radius: 15px;
    	margin-left:130px;
    	padding-left:10px;
    	padding-right:10px;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 14px;
    	color: #FFF;
    	background-color: #565656;
    		}
    
    #cssmenu {
    	margin-left:380px;
    	position: fixed;
    Last edited by drcolt45; 11-24-2013 at 09:06 AM. Reason: Format: Html Tags [html][/html], Code Tags [code][/code]

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Add a positive z-index to your menu.

    ex.:
    Code:
    #cssmenu{
        margin-left:380px;
        position: fixed;
        z-index: 10;
    }

  3. The Following User Says Thank You to traq For This Useful Post:

    drcolt45 (11-24-2013)

  4. #3
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Humm... doesn't work at all Thanks for your response though.

  5. #4
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Doesn't work

    Click image for larger version. 

Name:	Untitled-1.jpg 
Views:	153 
Size:	71.7 KB 
ID:	5284

  6. #5
    Join Date
    Nov 2013
    Location
    Québec, Canada
    Posts
    18
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Wink Thanks !

    It's working ! Just deleted the space after the ":" ! ( z-index:_10

    Thank you very much Traq !

  7. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    You're very welcome.

    If your question has been answered, please mark your thread "resolved":
    • On your original post (post #1), click [edit], then click [go advanced].
    • In the "thread prefix" box, select "Resolved".
    • Click [save changes].

  8. The Following User Says Thank You to traq For This Useful Post:

    drcolt45 (11-24-2013)

Similar Threads

  1. Google (sometimes) doesn't work in Firefox
    By Snookerman in forum Computer hardware and software
    Replies: 0
    Last Post: 05-25-2010, 07:34 AM
  2. Google Chrome
    By boomer in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-17-2010, 03:33 PM
  3. Script doesn't work in Google Chrome
    By agistriClub in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-07-2010, 06:08 PM
  4. Ultimate Fade-In Slide Show in Google Chrome
    By ProjectsByPeggy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-24-2008, 06:06 AM
  5. Google Chrome
    By Moshambi in forum Computer hardware and software
    Replies: 1
    Last Post: 09-03-2008, 12:39 PM

Bookmarks

Posting Permissions

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