Problems with Vertical Align...

jihanemo · 11-01-2009, 06:32 PM

http://americanchic.net/blank.html

I'm having problems trying to vertical align EVERYTHING in the "topnav" div. You'll see that the free shipping image and live chat image at the top of the screen seem to be vertically aligned in the middle but the text menu is aligned at the top. How can I get [I]all/I] of them to set in the middle?

Trying to middle-align the dotted borders on the lists in the "navbar" div. You see that the text in each individual list is aligned vertically in the middle but the borders on each list look as if they're closer to the bottom of the div. How can I fix that?

Excavator · 11-01-2009, 06:41 PM

Hello jihanemo,
Have a try with directly positioning the a instead of trying to get it to inherit from it's container.
Like this -

Code:

td.topimgnav {

width: 40%;
vertical-align: middle;
padding: 0;
margin: 0;

}


img.freeship {

border: 0;
vertical-align: middle;

}
td.toptextnav a{vertical-align:bottom;}

td.toptextnav {

text-align: right;
vertical-align: bottom;
padding: 0;
margin: 0;

}

Excavator · 11-01-2009, 06:49 PM

Quote:

Originally Posted by jihanemo

Trying to middle-align the dotted borders on the lists in the "navbar" div. You see that the text in each individual list is aligned vertically in the middle but the borders on each list look as if they're closer to the bottom of the div. How can I fix that?

Try adding a line-height to your ul ...

Code:

ul.navbar { 

list-style-type: none;
padding: 0;
margin: 0;
line-height:22px;
}

jihanemo · 11-01-2009, 08:37 PM

Thank you. Solution for the topnav vertical align worked somewhat, except that the slashes don't work off of a link - they're plain text. So those are still off...

2nd solution only moved everything closer to the top of the divs. List text and list borders still won't line up vertically...