CodingForums.com - Changing CSS properties depending on browser.

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Changing CSS properties depending on browser. (http://www.codingforums.com/showthread.php?t=238259)

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.

testing, ths works fine for me:

Code:

if ($.browser.opera){

        $('#nav').css({'background' : '#e9d', 'padding-top' : '30px'});

}

can we see the whole page?

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.

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>

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.

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?

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.