Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    919
    Thanks
    76
    Thanked 29 Times in 29 Posts

    Changing CSS properties depending on browser.

    Hi I have been searching google for about an hour now and found a snippet which is said to work. I want to change a property of #nav depending on the users browser being Opera. I'd like to do this with jQuery but this code isn't working and all the examples show this to be the correct way to achieve this.

    Here's the code:

    Code:
    if( $.browser.opera ) {
         $('#nav').css({'padding-top' : '10px'});
    }
    Any information or links will be appreciated,

    Regards,

    LC.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    testing, ths works fine for me:

    Code:
    if ($.browser.opera){
    	$('#nav').css({'background' : '#e9d', 'padding-top' : '30px'});
    }
    can we see the whole page?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    919
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Where in the source are you inserting it because currently I have it in an external javascript file.

    Here is the relevant code:-

    HTML:
    Code:
    <div id="nav">
                 <ul><li><a href="#" title="Home">Home</a></li>
                     <li><a href="#" title="News">News</a></li>
                     <li><a href="#" title="Members">Members</a></li>
                     <li><a href="#" title="Forums">Forums</a></li>
    		         <li></li>
    		         <li></li>
    		         <li class="listItem"><span class="listItem"></span></li>
    		         <li class="listItem"><a href="#" class="listItem" title="Server">Server</a></li>
    		         <li><a href="#" title="Help">Help</a></li>
    	         </ul>
             </div>
    menu.css
    Code:
    #nav {width: 900px;
          height: 25px;
    	  background-color: white;
    	  position: relative;
          top: -10%;
    	  border-top: 2px solid #a6a6a7;
    	  padding-bottom: 10px;
    	  padding-top: 0px;
    	  border-bottom: 2px solid #a6a6a7;}
     
    #nav ul {list-style: none;
             font-size: 18pt;
    		 color: #006daf;
    		 font-family: century gothic;
    		 text-transform: lowercase;
    		 margin: 0;
    		 padding: 0 0 0 0px;}
    
    #nav li {display: inline;
             padding: 0 25px;
    		 line-height: 25px;
    		 font-size: 14pt;}
    myscripts.js
    Code:
    if( $.browser.opera ) {
         $('#nav').css({'padding-top' : '10px'});
    }
    Regards,

    LC.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    this works fine for me. Having the JS external shouldn't be an issue.

    Are you linking to the jQuery and your external JS correctly?

    View source on your page and click the link to the scripts and make sure they are there.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>box do-hicky</title>
    <style type="text/css">
    #nav {width: 900px;
          height: 25px;
    	  background-color: white;
    	  position: relative;
          top: -10%;
    	  border-top: 2px solid #a6a6a7;
    	  padding-bottom: 10px;
    	  padding-top: 0px;
    	  border-bottom: 2px solid #a6a6a7;}
     
    #nav ul {list-style: none;
             font-size: 18pt;
    		 color: #006daf;
    		 font-family: century gothic;
    		 text-transform: lowercase;
    		 margin: 0;
    		 padding: 0 0 0 0px;}
    
    #nav li {display: inline;
             padding: 0 25px;
    		 line-height: 25px;
    		 font-size: 14pt;}
    		 
    </style>
    
    </head>
    <body>
    <div id="nav">
                 <ul><li><a href="#" title="Home">Home</a></li>
                     <li><a href="#" title="News">News</a></li>
                     <li><a href="#" title="Members">Members</a></li>
                     <li><a href="#" title="Forums">Forums</a></li>
    		         <li></li>
    		         <li></li>
    		         <li class="listItem"><span class="listItem"></span></li>
    		         <li class="listItem"><a href="#" class="listItem" title="Server">Server</a></li>
    		         <li><a href="#" title="Help">Help</a></li>
    	         </ul>
             </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    if ($.browser.opera){
    	$('#nav').css({'background' : '#e9d', 'padding-top' : '30px'});
    }
    </script>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    919
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I'll try inserting it into my HTML code because this is what you have done. It's worth a try because I've explored all other avenues that I know. My script links have the correct type and src so I believe it should work.. :S

    Edit: Still no change.

    Do I need to delete my history or something? I haven't deleted it since I started using it and it's the only browser I have trouble with.

    Please see attatched visual: http://abjava.host22.com/abopera.png.

    I'm not sure why there is not an equal margin around my content div because in every other browser it is near on perfect. I have a gray div floated left, a gray div floated right and a content div in the middle. I have set the margin to 2.4% but ideally I would like to be able to use margin: auto but everytime I do, the right-floated div ends up below the flow, down the bottom of the page underneath the content div but still floated right.
    Last edited by LearningCoder; 09-16-2011 at 06:35 PM. Reason: Update

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    looking at your image, it looks like you just might have some "bad" CSS going on. You mind posting the code for that page or a simplified version?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    919
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Sorry not been able to get on since change. I've successfully achieved what I wanted, it is displaying exactly how I wanted it to. I was not aware you had to put the if statement within a $(function() {});. It's almost embarrassing, I presumed if it was in an external file, being an if statement it would automatically run.

    Apologies,

    LC.


  •  

    Posting Permissions

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