3 replies [Last post]
pezbrigade
pezbrigade's picture
Offline
newbie
Last seen: 5 years 18 weeks ago
Timezone: GMT-4
Joined: 2008-01-04
Posts: 4
Points: 0

Hi!

Can someone help please? I've read about lots of people having trouble with valign but I've tried every solution I can find and I'm still scratching my head.

I have a 2-column table nested inside a div. The left column is just an image and it sits nicely against the top of the table/div layer. The RIGHT column however, is driving me crazy. It starts with a sentence in 36px font and the top line just will NOT rest against the top of the frame. I want the top of the capital W to be aligned with the top of the image but its just not happening.

Theres a lot of extraneous stuff on this page. I'll post the quickey (what I think is relevant) code below. and I'll reply with the full CSS and html.

If anyone can help me I will be forever in debt to your priceless adivice.

xoxoxoxoxoxoxoxo

pezbrigade
pezbrigade's picture
Offline
newbie
Last seen: 5 years 18 weeks ago
Timezone: GMT-4
Joined: 2008-01-04
Posts: 4
Points: 0

Re: Vertical Align is a Bee Word-------Full CSS and HTML

/*--------------TEXT---------------*/

body {
font-family: Verdana, Helvetica, sans-serif;
font-size: small;
line-height: 1.4;
color: #303030;
}

body.lg {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
}

body.sub {
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
}

/*---Text Cosmetics---*/

.italic {font-style: italic;}
.bold {font-weight: bold;}
.uppercase {text-transform: uppercase;}

.text {color: #444444;}
.textlt {color: #888888;}
.color {color: #99CC33}
.colorlt {color: CCFF99;}
.colorltr {color: EEFFEE;}

/*---Text Styles---*/

h1 {
font-family: Gerogia, serif;
}

h1.menu {
font-size: 13px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

h1.title {
font-size: 36px;
line-height: .90;
font-weight: normal;
}

h1.search {
font-size: 24px;
font-weight: normal;
}

h2 {
font-family: sans-serif;
}

h2.menu {
font-family: Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
}

h2.title {
font-family: Helvetica, sans-serif;
font-size: 45px;
font-weight: bold;
}

h2.caption {
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight: normal;
}

/*---Text Links---*/

a.bannermenu:link {color: #444444; text-decoration: none;}
a.bannermenu:visited {color: #444444; text-decoration: none;}
a.bannermenu:hover {color: #99CC33; text-decoration: none;}
a.bannermenu:active {color: #CCFF99; text-decoration: none;}

.tracking {
letter-spacing: 75px
}

/*--------------LAYOUT---------------*/

/*---Main Divs---*/

#banner {
position: absolute;
top: 0;
left: 40px;
width: 850px;
height: 125px;
}

#submenu {
position: absolute;
top: 125px;
left: 40px;
width: 190px;
margin: 0;
border: 0;
padding: 0;
}

#main {
position: absolute;
top: 125px;
left: 250px;
margin: 0;
border: 0;
padding: 0;
}

/*---Secondary Divs---*/

#bannermenu {
left: 40px;
width: 850px;
height: 30px;

border-top: 1px solid #303030;
border-bottom: 1px solid #303030;
display: table-cell;
vertical-align: middle;
}

#events {
width: 175px;
height: 278px;
border: 1px solid #CCFF99;
padding: 10px;
}

table.header {
border: 0px;
margin: 0px;
padding: 0px;
}

td.large {
vertical-align: top;
width: 370px;
text-align: left;
}

td.small {
vertical-align: top;
width: 250px
}

/*--------------IMAGE---------------*/

.float {float:left;}

/*-------------------AND NOW THE HTML:::::---------------------*/

Website de la Richfield

Home Bulletin Board History Community Town Hall

Saturday, Nov 39
Some Random Cover-Dish Dinner

Sunday, April 22
Christmas Caroling with Mt. Zion Church

Friday, October 9
Party in the Park



Search.

Just try and find some *beep*, mother*beep*ers.

Welcome home.
An introductory paragraph, a short blurb about the town. Where it’s at, some glowing description of the people and the sites and the everything else. We got so much offer, just check out this awesome website. Yeh. An introductory paragraph, a short blurb about the town. Where it’s at, some glowing description of the people and the sites and the everything else. We got so much offer, just check out this awesome website. Yeh.


“Um, perhaps some sort of Welcoming message here from the mayor or town concil, something very generic, about the town, who we are, what we do, yo yo yo. I’m only putting this here because it feels kindof naked without a little something else down here and I don’t know what else to do.” – So and So, Mayor of Richfield

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's because you haven't

It's because you haven't removed the top margin from the h1.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

pezbrigade
pezbrigade's picture
Offline
newbie
Last seen: 5 years 18 weeks ago
Timezone: GMT-4
Joined: 2008-01-04
Posts: 4
Points: 0

Oh man---I feel

Oh man---I feel foolish,

This is awesome.
THANK YOU!!!!!!!!!!

Seriously, I've been grinding my teeth over this since I got up this morning.

Thank you Thank you Thank you Thank you!