Added stylesheet conflicts with slider

HTML & CSS
1

Hello. Here I am again, in a jam … I was wondering if a CSS guru could take a look at a strange issue I’m experiencing where everything lined up nice and looked great until I plugged in the CSS for the revolution slider. As soon as I did that, a margin (or padding) was introduced to the left edge of the div that sits directly below the slider div in question. So, the slider itself is fine, but has somehow affected the divs directly below it … and only after I had hooked up the settings.css file. In fact, if you comment out the settings.css file, everything snaps back to the way it was … when you enable it again, you can see that the area with the heading “Results Beyond Words” suddenly margins over about 52 pixels to the right which then breaks that div.

I went through the settings.css file and couldn’t really find anything that was even named close to any of my elements in that are that got broken. Some kind of voodoo?

You can also set the left margin of the div “results-beyond-words” to -52px instead of “auto”, and that fixes it … but I had always heard it’s bad form to leave those negative margins in there … could cause rendering trouble … plus I also just want to understand what the hell happened.

Thanks!

Dev link: http://sterling-testing.com/website2014/marginIssue/

2

The arrows for the slider are hidden with visibility: hidden, but they are still on the page, just under the slider, and pushing the div to the right. On line 624 ff, just add

.tparrows {display: none;}

if you don’t want the left right arrows.

3

That was indeed the culprit. Thanks Ralph. Do you mind me asking how you saw that? I looked high and low in Firebug and couldn’t see a thing.

4

These days I use Chrome, and they stood out quite prominently there. But they were inside the bannercontainer div (hanging out of it). (Actually, I just checked FF and they are quite obvious there, too. Again, the key way to see what was inside the bannercontainer div.)

5

Thanks again.