When I put a border around the <div> to see what is happening, I see that there is space within the div below the text, as if a blank line were being printed. Can anyone tell me why?
.cbox {
margin: 5px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #0000B0;
position: relative;
text-align: left;
}
.cright {
float: right;
text-align: right;
}
<div class="cbox" style="width: 475px;">
<div class="cright" style="width: 190px; padding-top: 5px;">
<SELECT NAME=Agent onchange="this.form.submit();">
//etc
</select>
<span class="black-8">not finalized</span>
<span class="blue-8">finalized</span>
<span class="green-8">locked</span>
</div>
</div>
The <span> tags are straightforward font size and color classes. There are no <br> tags anywhere in the code.I see no space. Can you give a full working example and the browser(s) giving the problem.It was showing in both Firefox and IE, but actually, I found that a <form> tag seemed to be causing it. I moved both the opening and closing <form> tags outside of that <div> and that extra space went away. The form boundaries are within <cbox> but outside of <cright> and the form still works, so that seems to have solved that problem.
But it introduced another. Within that <cright> object the "padding-top: 5px" is having no effect on the contents. They are touching the top border.
I haven't read much about <form> tags and <div> tags, so any input would be welcome. I know that forms can really mess up tables unless the opening and closing tags are carefully aligned.form {margin:0;} would have solved the problem.
If your'e still having problems post the FULL document or give a link.Thanks, I'll keep that in mind next time a form is messing up an alignment.
I don't have the document any more, because when I can't make something work I tend to take another approach. I think in this case I used a div inside the offending div and used relative positioning of the interior div.
One thing I'm finding about CSS: it is absolutely horrible when it comes to cross-browser support. Just awful. Whoever dreamed this mess up should be shot.
.cbox {
margin: 5px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #0000B0;
position: relative;
text-align: left;
}
.cright {
float: right;
text-align: right;
}
<div class="cbox" style="width: 475px;">
<div class="cright" style="width: 190px; padding-top: 5px;">
<SELECT NAME=Agent onchange="this.form.submit();">
//etc
</select>
<span class="black-8">not finalized</span>
<span class="blue-8">finalized</span>
<span class="green-8">locked</span>
</div>
</div>
The <span> tags are straightforward font size and color classes. There are no <br> tags anywhere in the code.I see no space. Can you give a full working example and the browser(s) giving the problem.It was showing in both Firefox and IE, but actually, I found that a <form> tag seemed to be causing it. I moved both the opening and closing <form> tags outside of that <div> and that extra space went away. The form boundaries are within <cbox> but outside of <cright> and the form still works, so that seems to have solved that problem.
But it introduced another. Within that <cright> object the "padding-top: 5px" is having no effect on the contents. They are touching the top border.
I haven't read much about <form> tags and <div> tags, so any input would be welcome. I know that forms can really mess up tables unless the opening and closing tags are carefully aligned.form {margin:0;} would have solved the problem.
If your'e still having problems post the FULL document or give a link.Thanks, I'll keep that in mind next time a form is messing up an alignment.
I don't have the document any more, because when I can't make something work I tend to take another approach. I think in this case I used a div inside the offending div and used relative positioning of the interior div.
One thing I'm finding about CSS: it is absolutely horrible when it comes to cross-browser support. Just awful. Whoever dreamed this mess up should be shot.