...

View Full Version : 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 -

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
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 ...

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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum