CODEWITHSUNDEEP
css
SamJolly
SamJolly

Reputation: 6477

Vertically align a PRE block within a TD to "Top"

I am trying to vertically align the contents of a PRE block within a TD to "Top". I am using a CSS stylesheet file. No Luck. I can get the font colour and size to change however.

table td pre{
color: red;
font: normal 16px Arial;
vertical-align:top; /* Does not work */
}

Thoughts appreciated.

EDIT:

table td pre{
   color: red;
   font: normal 16px Arial;
}
table td {
   padding: 5px;
   border: solid 1px white;
   background-color: #edeff1;
   vertical-align: top;
}

Upvotes: 2

Views: 1864

Answers (2)

Anthony
Anthony

Reputation: 37065

Make sure you 0 out any top spacing on the pre element as well:

td {
    padding-top: 0;
    margin-top: 0;
    vertical-align: top;
}
pre {
    padding-top: 0;
    margin-top: 0;
}

Fiddle example.

Upvotes: 1

Hanky Panky
Hanky Panky

Reputation: 46910

Vertical align is for td and not for pre

table td.preBlock{
vertical-align:top;
}

table td pre{
color: red;
font: normal 16px Arial;
}

Then you can do

<td class="preBlock">

Fiddle

Edit:

Seems to work for me even that way, just reduce margin-top. See here

Fiddle2

Upvotes: 3

Related Questions