Menu
i got this jGrowl notification on my site, when the notifications box its poped jGrowl popup doesnt looks well styled.
this is how i call jgrowl files
<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" />
this is the notification box
alt text http://hinuts.com/jgrowl.look.png
991
jGrowl containers will have their style affected if you are referencing jQuery UI's stylesheet on the same page as jGrowl. As of jGrowl version 1.2.2 all jGrowl containers are decorated with the CSS class "ui-state-highlight", which adds a background, border, and font-color to the style definition.
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
background:url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;
border:1px solid #FCEFA1;
color:#363636;
}
To prevent this behavior you can make the following addition to the jquery.jgrowl.css file:
div.jGrowl > .ui-state-highlight {
background: inherit;
color: inherit;
border: inherit;
}
In Firebug or in your CSS file, add !important declarations (ex. background-color: red !important; ) and see if your styles are applied correctly. If so, your rules are being overridden by ones with a higher specificity (or rules that are applied after yours with equal specificity).
Edit: I created a jGrowl test page and its notifications display correctly. Try commenting out any other style sheets in your head and see if the issue persists. Also, make sure the files are in the directories specified. (The ./ is redundant and not needed: . indicates current directory, so referencing ./folder/test.js is the same as just folder/test.js)
<!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>
<link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
<link rel="stylesheet" href="examples/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="examples/jquery.ui.all.js"></script>
<script type="text/javascript" src="jquery.jgrowl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.jGrowl( "jGowl test", { sticky: true } );
});
</script>
</head>
<body>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
