CSS - Vertical Aligning Issue In Ie

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.

I am new to CSS style sheets and coding.

Best way to explain problem is to say:

go to: sfsmokefree.org/test

View in Firefox = no issues, looks good

View in I.E. = left column is all pushed downwards

what's up with that?

http://www.gaminghybrid.com/cms_design/

I would like to get the top tab table (#top-tabs) and the sub tabs (#sub-tabs) centered, instead of the semi-left alignment they are in. What is the best way to go about it? (I've tried <center> and text-align:center)

Also, as you can see in FireFox, the bottom bite doesn't go to the bottom of the other two content bits, but it does in IE.

Any help is appreciate

Hi all,

I'm pretty new to CSS and html, and I've run into a problem with a navbar I've created for a website. I want the navbar to extend the length of the content on each page, but I can't seem to set it for that. All I've been able to do so far is get it to fit the content of the navbar itself (too small), or set the height for a higher number of pixels than I need on most of the pages. This lets me accommodate the content on my lengthiest page, but it leaves the others with a lot of white space on the screen.

Could someone please take a look at the code and help me? Bolded line is the problem, but setting it to a percentage doesn't work, either. Thank you for answering what's probably painfully obvious!:

#navigation {
background: #CCCCCC;
float: left;
width: 18%;
height: 750px;
border-right: #990033 2px solid;
border-left: #990033 2px solid;
font-family: arial, sans-serif;
line-height: 150%;
background-image: url (navbar.jpg);
background-repeat: repeat-y;
}
#navigation ul{
list-style: none;
background-color: #CCCCCC;
padding: 5px;
margin: 0px;
text-align: left;
}
#navigation li a {
display: block;
color: #000000;
text-decoration: none;

Hi,

I am having trouble with divs inside tables cells. I have td's in a row, and I want all the objects within these cells to be aligned at the top of the cells. However, the objects within the cells with lesser content are vertically aligning to the central level of the cell with the most content.

Please check: www dot incorrectlyprogrammed dot org/CRC/ to see what I mean.

This is driving me mad. Any help appreciated!!

reflectionstour.com
^ Site I am working on.

So I have these nice little gifs that are curving the corners. In FF3 they work fine and it is XHTML/CSS 2.1 valid. Which of course means that they are not working right in IE 7 (haven't bothered testing 8, as I run Linux and it is hard enough to locate an IE7 to test it on.)

So I have tried a few different searches and don't really know what to even call it. And no webdev tool bar on IE to help tell me.

"vertical-align: bottom IE7 ~padding"
"bottom padding issues IE7"

I would rather not do separate CSS sheets as it is a simple site, there shouldn't be an issue here.

Thanks!
Wil

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

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

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.

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

/*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>?

HI there

I am wondering if anyone can help with a css issue I am strugging to resolve.

The url is simplyroomsandsuites co uk (forward slash) blog

You can see where the footer image is floating left.. I have tried to float it centrally but it disappears.

Thanks for any help.



.footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;}

Hi all,
I am having trouble getting my third column to sit in place correctly. Here is the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html -->
<HTML><HEAD><TITLE>CSS layout using divs</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="" name=Keywords>
<META content="" name=Description>
<STYLE type="text/css" media="all">
  @import url( css/commonSite.css );		
</STYLE>

<META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD>
<BODY>

<DIV class="panelS">
<DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt="">
<DIV class="colTwo">
<DIV class="linkS">
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A>
</DIV>
<DIV class="colThree"></DIV>
</DIV>
</DIV>
</DIV>
</BODY></HTML>

Code:

.panelS
{
    BACKGROUND-COLOR: #adadad;
	WIDTH: 760px;
	position: absolute; 	
}
.colOne { 
	FONT-WEIGHT: bold; 
	FONT-SIZE: medium; 
	LEFT: 0px; 
	WIDTH: 85px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative; 
}
.colTwo {
	FONT-SIZE: medium; 
	LEFT: 85px; 
	WIDTH: 475px;   
	HEIGHT: 21px;
	background-color:#FF6633;
	position:relative;		
}
.colThree { 
	FONT-SIZE: medium; 
	LEFT: 560px;  
	WIDTH: 200px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative;
	background-color:#00CCCC;	 
}
.linkS
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:link
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:visited
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:hover
{
    FONT: bold 10px Verdana;    
	COLOR: #0055c3;
	TEXT-ALIGN: right;
    TEXT-DECORATION: underline
}

I was wanting all the columns side by side.
Any ideas where i might be going wrong?

Cheers

How would I prefectly fit a table or div against the edge of a browser without any white space?

I've tried setting the margin border to 0px without any success.