Nuked my carousel

being going over my code & please close to starting over.
when the user clicks the left or right button the setting show up correct for about a second.
but was wondering if there was something obvious to anyone that I missed.

I relize it has do do w/the margin of the inner span. but I’ll be darned if i can see where I coded it off or broke it.
http://www.danielamorescalchi.com/coreCorp/engineering.php

thx
D

Morning pdxSherpa,

In style.css line 1391 you define this rule:

.active { margin-top:-18em; height: 18em}

The negative top margin is what’s nuking your carousel.
The reason there is a split second where everything looks good, is because this is the time before the style is applied.

than you Pullo. Dead on!

Good stuff :slight_smile:

You said you were “close to starting over”, but your error took me about thirty seconds to find.
Would you like me to explain how I did so?

Absolutely! Thank you!
I was using chrome/inspect element. I could see the margins were off but could not pinpoint the problem

D

Sure thing.

Well, using Chrome, I saw the initial problem straight off.
I then right clicked on the slide (which was half out of view), then selected “Inspect Element”.
This opened up Chrome’s Dev Tools with a <div class=“span7”> highlighted.
This just seemed to be the text within the slide and there weren’t any suspicious styles attached to it.
(you should be able to see the styles associated with a particular element on the right hand side of the Dev Tools when the element is selected).
I then selected the element’s nearest sibling (<div class=“span2”>) by clicking on it from within the Dev Tools.
This seemed to be the picture and was equally as unsuspicious.
I then selected the parent element of <div class=“span2”>, which was <div id=“eng1stSlide” class=“item active”>.
This seemed to be the slide container. That’s when I saw the negative margin being applied to the class “active”.
I removed that rule from within the Dev Tools (just remove the tick next to the style) so as to make sure and Bingo!

As an additional tip (apologies if you know this already) - if you mouse over the various DOM elements from within the Dev Tools elements tab - the actual elements they correspond to are highlighted on the page.

Hope that helps.

Thank you Pullo. I already used Chrome for debugging but they way you explained your methodical approach will be helpful. I saw it was off the margin. had not thought of the parent class.
Great advice.
D