css style is getting overwritten by element.style

Question

I have an image slideshow with arrow buttons (CSS style slidePrev and slideNext). However, I cannot get the buttons to show up halfway down the images, rather they show up at the top.

Here's the CSS code that should work

#fwslider .slideNext {
    position: absolute;
    top:50%;
    right:-50px;
    z-index: 10;
}

However, this style is somehow getting overwritten by something called element.style (which may come from Bootstrap?). Chrome gives no clue as to where the source is:

Does anyone know what is overwriting my style? I don't even know how to go about debugging this so any tips appreciated.

Answer 1

About your question: Does anyone know what is overwriting my style? the answer is the element.style... but what is the element.style?

As said in this other SO question: What is element.style and why is it overriding my css settings?

element.style refers to inline styles on the dom element.

In your case, element.style should be a hardcoded style inside the html of the page, surely in the button element. Check its content in the html source and look for something like this:

<button class="slideNext" style="right: 0px; top:-52px;opacity:0.5">

Once found, you can delete, add or modify its content as you wish.

Additionaly, you could edit the CSS external style in fwslider.css file and add the !important rule to affected styles forcing them to override current inline style behaviour, but it is prefered to avoid to use style= inside inline document elements, to avoid this kind of missunderstandings and to separate structure (html) from layout (styles).

About order precedences when adding styles check What is the order of precedence for CSS?, where its saids:

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !important always takes precedence.

Important

These rules also applies for !important rule, so its precedence priority is also in that order too.

---

Update: What happens if javascript manages css properties?

Using jquery or vanilla javascript to manage css properties causes the addition, modification or deletion of element.style properties. So it affects the way that the browser see it and that changes will appear in its inspector inside the element.style.

By instance: If we execute this jquery function:

$('#fwslider).css('top','-52px');

it will add or modify the current value of the attribute style= inside the #fwslider element.

Before the execution of javascript code:

After the execution of javascript code:

So, take in consideration that if you are not finding a specific css property in your html code files but it appears inside the element.style in your browser inspector, then it could be generated by javascript code.

Answer 2

You can use !important in CSS to overwrite the default style. Check out the rule for your CSS

The code can be :

#fwslider .slideNext {
    position: absolute;
    top:50% !important;
    right:-50px !important;
    z-index: 10;
}