CSS - Vertical Aligning

I'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this?

My Webpage

You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding.

In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine.

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.

Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE.

http://www.sun-awnings-direct.co.uk/the-carino-p-29.html

It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it?

Thanks a lot

After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css.

I was just wondering if someone could help me with the correct tag.

www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php
Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please.

CSS LINK

http://www.devwebsites.com/estilos.css

Hi everyone,
I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks
Code:

<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
  <tr>
    <td width="230" height="85">
	<ul><li><a href="">HOME</a></li>
        <li><a href="">LINK TWO</a></li>
    </ul>
	</td>
  </tr>
  <tr><td></td></tr>
</table>

/*Left Links*/

#leftcol{
float: left;
display: block;
width: 200px; /*Width of left column*/
}

ul#leftcol{
list-style-type: none;
padding: 0.5em 0 1em 0;
margin: 0;
}

li#leftcol{
margin: 0;
padding: 0;
}

#leftcol a, #leftcol a:link, #nav a:visited {
float: left;
display: block;
position:relative;
width: 165px;
height: 1%;
padding: 8px 5px 8px 30px;
margin: 0;
font: normal 11px Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration:none;
background-image:url(images/sidelinks_back.jpg);
border-bottom: 1px solid #FFFFFF;
}

#leftcol a:hover {
background-position: 0 -45px;
color: #0C0F1B;
}

#leftcol img {
border-bottom: 1px solid #FFFFFF;
}

<!--LEFT COLUMN -->


<ul id="leftcol"
><li><img src="images/sidelinks_top.jpg" alt="Our Services" width="200" height="40" border="0" /></li>
<li><a href="**">Collision Repair</a></li>
<li><a href="**" >Heavy Frame Repairs</a></li>
<li><a href="**">Truck Body Repairs</a></li>
<li><a href="**" >Sprinter Repair Specialists</a></li>
<li><a href="**">Commercial Van Repairs</a></li>
<li><a href="**">Painting & Decaling</a></li>
<li><a href="**">Custom Truck Body Services</a></li>
<li><a href="**">Morgan Body Parts & Service</a></li>
<li><img src="images/sidelinks_btm.gif" alt=" " width="200" height="10" border="0" /></li
></ul>


2 problems:

1) In IE and Firefox: gap between <img> and <li>
2) In IE6, a gap appears between all my <li>tags

What to do? Do I have to put my <ul> in a <div> and keep my <img> out of the <ul>?

I know I'm probably still thinking in terms of tables...

I have a <div> container with several more <divs> stacked up inside it. They have varying widths. I would like some (maybe not all) to be centered within the primary <div>.

Now, I know I can do this: <div align="center">, but align isn't a property in a style sheet, is it?

I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this:

Code:

Picture - Header                                         Text over here

I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob.

So what I want is to have 2 forms with buttons aligned horizontally.

<form><input type="submit"></form>
<form><input type="submit"></form>

They should be like this: [Button 1] [Button 2]

But instead, they go like this:

[Button 1]
[Button 2]

And I don't know the CSS for it, so thanks in advance.

I am not sure if this is a problem that can be solved with css or not. I have recently switched from straight html to php and have no experience in css.

Basically I split my pages into 5 separate areas. Header, footer, right column, left column and center column. The problem that I am running into is that the header and footer are in the right spot on the page but the left, right and center columns are way off.

Here is a link to my site OWPT
I have my problem, with an example, explained in more detail.
Any help would be greatly appreciated.

ok...

im making a site with CSS...

this is my css code -

Quote:
a:link {color:white}
a:visited {color:white}
a:hover {color:black}
a:active {color:white}

body {background-color: #666666}

#head{

position: relative;
top: 7px;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#content {

position: relative;
top: 7px;
left: 140px;
width: 697px;
font-family: verdana;
font-size: 12px;
text-align: justify;
color:white;
background-color: #666666;
background-image: url(image/back.jpg);
padding: 5px;

}


#foot{

position: relative;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 9px;
text-align: center;
color:white;
background-color: 666666;
background-image: url(wavy.jpg);

}



and this is my code for my PHP page, which reads the css -

Quote:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fula.css" />
</head>

<body>


<div id="head"><img src="image/head.jpg"></div>


<div id="content">

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>

<br>

<div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div>

</body>
</html>


ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated!

to view the page this problems on -

http://www.outlawz.frihost.net/fula/test2.php

I'm having trouble aligning headings in CSS.

I've tried creating a class like this -

Code:

.rightalign {
   text-align:right;
}

and applying it like this -

Code:

<h1> <span class="rightalign" /> Heading </span> </h1>

but it doesn't work, any help?

Thank you.

I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE.

I'm told that display:inline-block is not properly supported, which is probably the root of my problems.

What I want a set of divs down the page (the "imagedivs") Each div will contain

An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

What obvious thing am I over looking?

Code:

+--------------------------------------+
| +----------------+                   |
| | .............. |                   |     ---  <div>
| | :            : |                   |     ...  <img>
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+
   
+--------------------------------------+
| +----------------+                   |
| | .............. |                   |    
| | :            : |                   |    
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+