CSS - Gap In Vertical Nav Between <img> And <li>

Hi,

Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables.

My page is on:
http://www.3003online.com/demos/ecoceylon/v2/

You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox.

Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this?


Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions).

The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately

[ this is a follow up to my previous thread
http://forums.devshed.com/showthread.php?t=270438

Any help would be greatly appreciated.

Thanks very much.

Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side)



Thanks!

Hello to all of you,

I am doing my first steps in respect to CSS programming and wonder if I can get some hint here.

I have created a table, with two different line colors, and a changing line background color with hover. Basically everything works as expected - just the vertical-align command does not respond at all. Am I doing something wrong? What could be the reason, and how can I continue investigating?

I am using the CSS stylesheet, in connection with a Joomla 1.5 CMS. Please see the code below:

Code:

table.general {
    text-align: left;
    vertical-align: top;
    width: 100%;
    border-collapse: collapse;
}
table.general th {
    text-align: center;
    font-size: 15px;
    color: white;
    font-style:bold;
    height: 30px;
    background-color:#95B3D7;
    border: 3px solid #FFFFFF;
}
table.general tr.row1 {
    background-color: #f1f1f1;
}
table.general tr.row2 {
    background-color: #e0e0e0;
}
table.general tr.row1:hover {
    background-color: #CCCCCC;    
}
table.general tr.row2:hover {
    background-color: #CCCCCC;
}    
table.general td {
    border: 3px solid #FFFFFF;
    padding: 4px;
}

The classes are being used in the following form:
Code:

<table style="width: 320px;" class="general">
<col span="4" width="80"></col> 
<tbody>
<tr>
<th>head A</th> <th>head B</th> <th>head C</th> <th>Alface</th>
</tr>
<tr class="row1">
<td>Topic A</td>
<td>65</td>
<td>215</td>
<td>35</td>
</tr>
<tr class="row2">
<td>Topic B</td>
<td>2</td>
<td>2,3</td>
<td>1,2</td>
</tr>
<tr class="row1">
<td>Topic C</td>
<td>68</td>
<td>55</td>
<td>13</td>
</tr>
<tr class="row2">
<td>Topic D</td>
<td>44</td>
<td>50</td>
<td>33</td>
</tr>
<tr class="row1">
<td>etc.</td>
<td>494</td>
<td>611</td>
<td>238</td>
</tr>
</tbody>
</table>

Thank you in advance for your kindness!

Hello all,

I noticed there was similar post on this topic, though I was not able to fix my problem with that post, so I will post my own.

I have made a site with relative pos, and css. I have everything positioned nicely (on everything but IE, still working on that CSS), but I have a vertical scroll bar that goes down about 3 inches, the only thing, there is nothing down there to scroll to. I have tried to alter just about everything I can think of, but nothing seems to work. If you can believe it this has been plagueing me for about 3 weeks now. Any help would relieve a lot of stress. Thanks very much for your time.

bcode.

=========== CSS File============
.wdlogo {
visibility:visible;
position:absolute;
z-index:0;
left:10px;
top:10px;
}


.slidingtext {
visibility:visible;
position:relative;
z-index:2;
left:245px;
top:-200px;
}


.blacklink {
text-decoration: none;
color: #000000; }


.blacklink:hover {
text-decoration: none;
color: #000000;
}


.intro {
text-align: left;
color: #000000;
font-size: 12pt;
font-family: Lithograph, sans-serif;
position: absolute;
visibility: visible;
z-index: 2;
left: 360px;
top: 300px;
}


.center {
visibility: visible;
position: absolute;
z-index: 0;
top: 165px;
left: 85px;
}


.shadowleft {
width:32px;
background-image: url(images/Working/jpg/left_ver_5.jpg);
background-repeat: repeat-y;
background-position: right top;
}


.background {
background-image: url(images/Working/jpg/background.jpg);
background-repeat: repeat;
}


.shadowright {
width: 32px;
background-image: url(images/Working/jpg/right_ver_3.jpg);
background-repeat: repeat-y;
background-position: left top;
}


.top {
position: absolute;
visibility: visible;
top: 0px;
}


.dots {
position: relative;
visibility: visible;
z-index: 2;
left: 160px;
top: -150px;
}


.nav {
position: relative;
visibility: visible;
z-index: 2;
left: 5px;
top: 250px;
}


.bar1 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -460px;
}


.bar2 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -420px;
}


.bar3 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -380px;
}


.welcometext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -455px;
width:330px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}


.whytext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -415px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}


.empowertext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -375px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}

=================================


==========XHTML File===============
<?xml version="1.0" encoding="iso-8859-1" ?>


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
Author: Mathew Pridham
Date: April 2004
-->


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


<title>Web Diligence</title>

<link rel="stylesheet" type="text/css" href="wd.css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="wdiespecific.css" />
<![endif]-->

<!--webbot bot="Include" endspan i-checksum="11150" -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


</head>

<body topmargin="0" bottommargin="0" class="background">
<table cellpadding="0" cellspacing="0" align="center" width="800px">
<td class="shadowleft" height="100%" width="32px" rowspan="20">
</td>
<td width="800px" height="100%" bgcolor="#FFFFFF">

<img src="images/logo/JPEG/Logo/WedDiligence_ver_4.5.jpg" align="left" border="0" name="wdlogo" width="480px" height="252px" />

<object class="slidingtext" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="100">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash/banner/textslide_ver_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed class="wdflyingtext" src="flash/banner/textslide_ver_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="100"></embed>
</object>

<img src="images/Working/gif/dotted4.gif" class="dots" border="0" />

<table style="position:relative; left:5px; top:-340px" class="nav" cellpadding="0" cellspacing="4" width="180px" border="0">
<tr>
<td align="right"><img src="images/Working/jpg/buttons/home_button_hit.jpg" border="0" name="home" /></td>
</tr>
<tr>
<td align="right"><a href="about.html" onmouseover="document.about.src='images/Working/jpg/buttons/about_button_over.jpg'" onmouseout="document.about.src='images/Working/jpg/buttons/about_button_up.jpg'"><img src="images/Working/jpg/buttons/about_button_up.jpg" name="about" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="contact.html" onmouseover="document.contact.src='images/Working/jpg/buttons/contact_button_over.jpg'" onmouseout="document.contact.src='images/Working/jpg/buttons/contact_button_up.jpg'"><img src="images/Working/jpg/buttons/contact_button_up.jpg" name="contact" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="design.html" onmouseover="document.design.src='images/Working/jpg/buttons/design_button_over.jpg'" onmouseout="document.design.src='images/Working/jpg/buttons/design_button_up.jpg'"><img src="images/Working/jpg/buttons/design_button_up.jpg" name="design" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="portfolio.html" onmouseover="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_over.jpg'" onmouseout="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_up.jpg'"><img src="images/Working/jpg/buttons/portfolio_button_up.jpg" name="portfolio" width="143px" height="20px" /></a></td>
</tr>

</table>

<img src="images/Working/jpg/welcomebar.jpg" border="0" class="bar1" width="325px" height="23px" />
<div class="welcometext">
We are a small web design & development company, specialized in quality web design for small businesses.
</div>

<img src="images/Working/jpg/whybar.jpg" border="0" class="bar2" width="325px" height="23px" />
<div class="whytext">
We, at Web Diligence, understand your need for an attractive, high quality website at an affordable price.
We create websites that are an effective combination of functionality, style, and creativity.
We specialize in custom web design as well as website makeovers.
</div>

<img src="images/Working/jpg/herebar.jpg" border="0" class="bar3" width="325px" height="23px" />
<div class="empowertext">
Not the other way around. We believe that it is your idea's, as well as ours that will make your site convey the message you're aiming for.
Whether you're re-vamping an existing site, or starting from scratch, we can design a site that not only captures your imagination,
but also fits into a small business budget.

</div>
</td>

<td class="shadowright" height="100%" width="32px" rowspan="20">
</td>
</table>
</body>

</html>

for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code,
#outer{
position: relative;
float: left;
width: 900px;
height: 200px;
}
#outer .inner{
position: relative;
float: left;
width: 500px;
height: 200px;
vertical-align: bottom;
}

however the content of the inner div is starting at its default location which is top left of the inner div

instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases.

please advice.

thanks.