AKcyclelucraphy
New Member
I'm working on putting together a webpage for my wife and I've run into a CSS issue that I can't figure out. I have an image slider (RoyalSlider) that I want to have no whitespace around, but various nested divs before the slider div add padding, margins, and borders. The classes and the formatting within the classes are used in multiple places on the page, so I can't simply change the each element without breaking other elements of the page, and I would prefer to do this without messing with the PHP.Here are the divs that are causing the formatting, tabbed in to represent how they are nested, below each div is the CSS formatting of the div.\[code\]<div class="container"> #section-content .container { padding-top: 20px; } #section-content .container { border-left: 10px solid white; border-right: 10px solid white; } <div class="eleven columns content sixteen no-thumbnail"> .content { padding: 10px 0 0; } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } <div class="the_content post type-post hentry excerpt clearfix"> .content .hentry { padding-bottom: 15px; } <div class="royalSlider"> <div class="rsOverflow"> <div class="rsContainer">\[/code\]I thought that I could do something with a bunch of > to specify that when the royalSlider div was present that it would override all the other rules, but I can't figure out how to do it.The URL of the page is here:http://rachelhappen.com/high-res-royal-test-post/Here is a picture showing how it is now, how I'd like it to be, and color coded graphic of the way the CSS formats it.
Any help would be greatly greatly appreciated.