Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 27-08-2008
Member
 
Join Date: Dec 2005
Posts: 136
problem with vertical text align

I am trying to make a CSS navigation, I have managed to get it the way I want except for one thing, I cannot get the text to be vertically aligned, if i use padding in IE 7 it works fine , but in Firefox it sticks a bit extra background image on the bottom, I have tried to use the vertical-align but it does not work, here is the code I am using:

HTML Code:

<div id="Navigation">

<ul>
<li>Home</li>
<li>Forums</li>
<li>DKP</li>
</ul>

</div>

CSS code:

#Navigation {
border-top: 1px solid #FFFFFF;
width: 100%;
height: 40px;
background: url(Nav_Main_Background.bmp);
padding: 0px;
margin: 0px;
}

#Navigation UL {
padding: 0px;
height: 39px;
margin: 0px;
}

#Navigation LI {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
background: url(Nav_Background.bmp) right 0%;
height: 29px;
color: #FFFFFF;
float: left;
list-style-type: none;
margin: 0px;

}

Please help me somebody.
Reply With Quote
  #2  
Old 27-08-2008
Member
 
Join Date: Dec 2007
Posts: 1,592
Start by making the div position:relative and the content position:absolute
Reply With Quote
  #3  
Old 27-08-2008
Member
 
Join Date: Jun 2006
Posts: 620
vertical-align applis to two cases:
1. aligning relative to the text baseline within an inline element (I think this is what you were trying to describe above, but as block level elements don't go inside inline elements your description really doesn't make sense).
2. aligning relative to the table row baseline within table cells.

The second use may be of some help to you: apply the vertical-align property to the td not to the contained spans. Failing that apply padding and margin to achieve the layout you want.

Or, considering that you've decided that this form is sufficiently table-like to be a table, why not use a nested table for the nested options?
Reply With Quote
  #4  
Old 27-08-2008
Member
 
Join Date: Dec 2007
Posts: 1,728
Please see this link here about Css vertical-align
Reply With Quote
  #5  
Old 27-08-2008
Member
 
Join Date: Dec 2005
Posts: 136
I put a overflow: hidden; in the UL and included the padding so when the background overflowed in FF it was hidden so this way I have solved the problem. Thanks anyways
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "problem with vertical text align"
Thread Thread Starter Forum Replies Last Post
How to align wd20ears to windows 7 KIdaa PaA Hardware Peripherals 5 24-02-2011 07:15 PM
vertical blue line on screen problem Allanoo Monitor & Video Cards 3 02-09-2009 09:12 PM
How to Align text inserted in html table format DarenHawk Software Development 3 11-08-2009 09:08 AM
In Which ASUS BIOS Version You met with the VERTICAL LINES Problem Saaarc Polls & Voting 2 30-06-2009 11:34 PM


All times are GMT +5.5. The time now is 10:18 PM.