Assign a .css to a single div...?

[jenycz]

Hey -

I have my main css attached to the page, but then there is a separate css sheet for a jquery gallery that I'm using. The only problem is that the jquery styling involves adjusting the ul, which makes my menu on that particular page use that styling.

www.nyczdesigns.com/misc_graphics.php to see what I'm talking about - check out my spacing on the sidebar on another page, then on that one.

Anyways, my real question is that is there anyway I can set it so that the attached jquery styling (style.css) only affects a single div, ie. mainContent? I feel like I've done this before and just forgotten how.

Thanks in advance for any help!

[ryanbutler]

Not sure I understand completely, but I'd just change the style sheet that you have access to and let jquery sit along for the ride.

If this doesn't help, maybe be a bit more specific.

[sharonjackson]

The beauty of css is that it cascades. The last order wins!

I see two possible solutions for you. On that page only with the random pictures, create a class for the li which will force them to space the way you want.

<li class="wider"> blah blah blah </li>
<li class="wider"> Wakka wakka wakka </li>

.wider{
line-height: 150%;
}

...or whatever.....


Failing that first choice, I would do an in-line style adjustment on that page only. This is definitely a second best, but will work.

<li style="line-height:28px;">


I hope that helps

[Omega-Cottage]

This is the code I use
In the head

<script type="text/javascript">
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", "resizable=no,toolbar=no,status=no,directories=no,menubar=no,location=no,scrollbars=no,left=50, top=50,width=640,height=500");
}
</script>

In the body

<input class="button" type=button onClick="Start('#.html')" value="Next">

I have tried this with your CSS and it works just fine in IE 6,7 & 8. Safari, Opera and FireFox

To see it in action - www.omega-cottage.co.uk