CODEWITHSUNDEEP
css
drenl
drenl

Reputation: 1333

css triangle 'out of line' relative to other elements

I've created a control bar in js for my audio elements, and am trying to style the play button (class playPause) using a css triangle. My problem is that the triangle is raised several pixels relative to the rest of the control elements. As if it had margin- or padding-bottom, but the console shows no such thing, and explicitly styling those properties to 0 has no effect.

The controls are added as such:

$( this ).after(  
    '<div class="audio_controls_bar">\
        <span id="' + playPauseId + '" class="playPause" ></span>\
        <input id="' + seekSliderId + '" class="seekSlider" type="range" min="0" max="100" value="0" step="1">\
        <span id="' + timeTxtId + '"></span>\
        <span id="' + muteBtnId + '" class="mute" ></span>\
        <input id="' + volumeSliderId + '" class="volumeSlider" type="range" min="0" max="100" step="1">\
    </div>'
);

the span indicating text is styled inline-block, and also has these styles added:

playBtn.style.width = "0"; 
playBtn.style.height = "0"; 
playBtn.style.borderTop = "10px solid transparent";
playBtn.style.borderBottom = "10px solid transparent";
playBtn.style.borderLeft = "10px solid white";

When these styles are not applied, no such 'bumping' occurs.

... worth mentioning, if text is added to the playPause span, that text appears at the same relative height to the other elements.

... also worth mentioning: a div creates the same effect, however, a button element has the same (and opposite) problem, of mysterious un-findable padding on top.

Any idea what's going on here, and how to fix it?

Upvotes: 0

Views: 46

Answers (1)

Marcel
Marcel

Reputation: 1288

it's quite common for a CSS triangle to hang lower or higher depending on other elements.

As example: I made an arrow and placed it inbetween text on http://jsfiddle.net/xdqFk/ I fixed the position by adding 2px to the bottom margin: margin: 0 6px 2px 6px; (top right bottom left) pushing it up.

In your case, where it's higher, a negative margin like this should work:

playBtn.style.width = "0"; 
playBtn.style.height = "0"; 
playBtn.style.borderTop = "10px solid transparent";
playBtn.style.borderRight = "10px solid transparent";
playBtn.style.borderBottom = "10px solid transparent";
playBtn.style.borderLeft = "10px solid white";
playBtn.style.marginBottom = "-5px"; // CHANGE THIS

Upvotes: 1

Related Questions