Question

In below fiddle the text “Header” (coloured red) appears slightly higher than the rest of the question text. How can the height of the text be reduced ?

I’ve tried using “top -30px” ?

http://jsfiddle.net/25LjE/44/

.pds-pd-link {
display: none !important;
}
.pds-box {
    width: 220px !important;
}
.pds-input-label{
    width: auto! important;
}
.PDS_Poll{
    margin-bottom:15px;
}

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script>
<noscript><a href="http://polldaddy.com/poll/6352993/">This is very long test question to test how polldaddy handles questions that exceed that normal length............ yes a very long question indeed..............</a></noscript>

$(document).ready(function() {

    $('.pds-question-inner').prepend('<center><span style="color:red;font-weight:bold;font-size: 10pt;float:left"><u>Header</u></span></center>');
});

Answer 1

First, don’t float the header span span. Keep it inline. So remove that declaration from your js.

Second, the problem is that the padding-top on the .pds-question-top element is pushing the paragraph text down. Try setting it to zero and everything looks fine. This is cleaner anyways. I generally prefer creating all my paragraph spacing with bottom padding on p elements, and no top padding, so that paragraphs will always begin where I want.

See:

http://jsfiddle.net/25LjE/56/