SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Netscape vertical align text within div

    I am rebuilding our website in CSS and have a problem with a small part of the site. In Internet explorer the text appears vertically centered but in Netscape it is near the bottom. Do you know how to fix this?

    Thanks
    Rach

    Code:
     HTML 
    -----
     
    <div id="sub-naviagtion">
    	 <p id ="bottomtext">
    	  <a href="default" class="bottomlinks">Introduction</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	  <a href="corevalues.asp" class="bottomlinks">Core Values</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<a href="Partnerships.asp" class="bottomlinks">Partnerships</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<a href="careers.asp" class="bottomlinks">Careers</a>
    	</p>
    </div>
     
    CSS
    ----
     
    #sub-naviagtion{background-color: #999999;height: 25px;border-top-width: 1px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-top-style: solid;border-right-style: none;border-bottom-style: none;border-left-style: none;border-top-color: #FFFFFF;clear: both;text-align: center;vertical-align: middle;margin: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}
    #bottomtext{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, helvetica, sans-serif;TEXT-DECORATION: none;text-align: center;}
    a.bottomlinks{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, Helvetica, sans-serif;TEXT-DECORATION: none}

  2. #2
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Nacogdoches, Texas
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adding margin: 0px; to #bottomtext should do the trick.

    #bottomtext{FONT-WEIGHT: bold;FONT-SIZE: 11px;COLOR: #ffffff;FONT-FAMILY: Arial, helvetica, sans-serif;TEXT-DECORATION: none;text-align: center; margin: 0px;}
    Jason

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Set the line-height to the same size as the height and this will automatically centre text when it is in one single line. (It will not work if the text spreads over two lines.)

    Then set the margin on the paragraph to zero as NN/moz has larger defaults.

    Code:
    #sub-naviagtion{
     background-color: #999999;
     height: 25px;
     line-height:25px;
     border-top: 1px solid #fff;
     clear: both;
     text-align: center;
     margin: 0px;
     padding: 0px;
    }
    #bottomtext{
     FONT-WEIGHT: bold;
     FONT-SIZE: 11px;
     COLOR: #ffffff;
     FONT-FAMILY: Arial, helvetica, sans-serif;
     text-align: center;
     margin:0;
    }
    a.bottomlinks{
     FONT-WEIGHT: bold;
     FONT-SIZE: 11px;
     COLOR: #ffffff;
     FONT-FAMILY: Arial, Helvetica, sans-serif;
     TEXT-DECORATION: none
    }
    You should also look at other ways of spacing your text rather than using hundreds of &nbsp.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    e.g. Something like this perhaps:
    Code:
    #sub-naviagtion span {margin: 0 5%;}
    Code:
    <div id="sub-naviagtion"> 
      <p id ="bottomtext"> <a href="default" class="bottomlinks">Introduction</a><span>|</span><a href="corevalues.asp" class="bottomlinks">Core 
    	Values</a> <span>|</span><a href="Partnerships.asp" class="bottomlinks">Partnerships</a> 
    	<span>|</span><a href="careers.asp" class="bottomlinks">Careers</a> </p>
    </div>
    Paul

  5. #5
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I tried the line height suggestion and it worked perfectly.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •