CSS - Vertical Aligning Form/button In Table Cell... Font-size???

hi....i'm trying to align some elements inthe left cell of a table that separates the two main areas of my site....table structure is as follows


Code:

<table height="100%" cellSpacing="0" cellPadding="0" width="100%" bgColor="#333333" border="0">
				<tr>
					<td id="leftcell" width="267" vAlign="top" bgColor="#999999">
						<div id="logo"><IMG align="right" height="266" src="images/logo-c.gif" width="256"></div>
						<div id="baby-foot"><A href="mailto:#">dog@the bomb.com</A>&nbsp;&nbsp;&nbsp;P:323-957-0572</div>
						<div id="maillist"><asp:textbox id="_email" Runat="server" Width="192px">Enter Email To Join Mailing List</asp:textbox><asp:button id="_join" Runat="server" Text="Join" CssClass="join"></asp:button></div>
						<div id="search"><uc1:sidesearch id="Sidesearch1" runat="server"></uc1:sidesearch></div>
						<div id="fav"><uc1:favlist id="Favlist1" runat="server"></uc1:favlist></div>
					</td>
					<td id="rightblock" vAlign="top">
<td id="rightblock" vAlign="top">....main content area...</td>

and the css2

Code:

#logo { BACKGROUND-IMAGE: url(../images/logo-c.gif); BACKGROUND-REPEAT: no-repeat; HEIGHT: 266px; BACKGROUND-COLOR: #000000 }
#baby-foot { PADDING-LEFT: 11px; FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 256px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 30px; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none }
#maillist { PADDING-LEFT: 11px; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 60px; BACKGROUND-COLOR: #000000 }
#search { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BORDER-BOTTOM: red 1px solid; BACKGROUND-COLOR: #666666 }
#fav { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BACKGROUND-COLOR: #999999 }

ok....the way it's set up now looks fine in safari and netscape (the fav and search controls push the cell beyond 256px but the right floating logo-c.gif flows with the push)

however, in IE the controls are fixed at 256 and the logo-c pushes the cell a few pixels right exposing a slice of the table's back color...


any suggestions for a work around?

thank,
b

I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong.

Correct look Incorrect look

I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any.

Here is my main CSS:
Code:

	body		{ background-color: #FFFFFF; }
	a		{ text-decoration: none; font-weight: bold; }
	a:link		{ color: #003366; background-color: transparent; }
	a:visited	{ color: #003300; background-color: transparent; }
	a:active	{ color: #339933; background-color: transparent; }
	a:hover		{ text-decoration: underline; }
	table		{ border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
	td, th		{ border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
	tr.one		{ background-color: #FFFFFF; }
	tr.two		{ background-color: #DDDDDD; }
	table.squares	{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
	td.square	{ border: 1px solid grey; padding: 4px; }
	td.nopadding	{ padding: 0px; }
	.default	{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
	.h1		{ font-size: 200%; font-weight: bold; text-align: center;}
	.h2		{ font-size: 120%; font-weight: bold; }
	.h3		{ font-weight: bold; }
	.step		{ font-size: 150%; font-weight: bold; color: #999999; }

Here is one of the sets of squares:
Code:

<table class="squares">
    <tr>
        <td class="square" style="background-color: #CCCC66"></td>
        <td class="square" style="background-color: #CC9966"></td>
        <td class="square" style="background-color: #990000; border: black"><td>
        <td class="square" style="background-color: #669966"></td>
        <td class="square" style="background-color: #669999"></td>
    </tr>
</table>

And finally, here is one of my progress bars:
Code:

<table style="color: white; width: 100px">
    <tr>
        <td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
        <td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
    </tr>
</table>

And in case that code is not enough, here is a link to the full HTML.

According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers?

My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work?

ive searched google throughout and im blank on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
	margin:0;
	padding:0;
}

div
{
	width:70%;
	margin:0 auto;
	height:20em;
	border:.4em solid black;
}
p
{
	border:.4em solid black;
	margin:0 auto;
	line-height:8em;
	display:inline;
	width:55%;
	height:8em;
}
span
{
	display:block;
	color:red;
	font-size:2em;
	width:60%;
	margin:0 auto;
	text-align:center;
}
</style>
</head>
<body>
<div>
	<p>
		<span>X</span>
	</p>
</div>
</body>
</html>

I need the outer box to be vertiacllly aligned within the viewport, the other boxes vertically aligned within each other. does that make sense? I thought u could do it with line-height but i can't get it working. fresh eyes?

Edit: New code there.

Hello,

I am trying to get two images aligned inside a table cell as a top and bottom background element. I know with CSS you can't have two background elements, so I was playing with relative and absolute positioning. Unfortunately, I was unsuccessful, as the positioning wouldn't refer to the diameter of the cell.

I have an image demonstrating what I am looking for. The shaded area represents the two images (a bottom and top quote) that I want to align to the top and bottom. I can't simply make this a single image since the information on the left will be different heights. I also noted the table layout in the lower example if there are any questions in that regard.

http://www.forma3.com/stuff/css_question.png

Thanks so much!

I'm attempting to vertically align my content to the size of the browser window, something that I've concluded can be done a million ways after days of Googling and reading.

My outcome seems to work fine in all browsers (FF, Safari, Opera, Chrome, Navigator are the ones I've tested) except Internet Explorer. It renders perfect in IE 8, but there is a huge margin bumping the content down in all other versions of IE. The complete execution can be seen he http://www dot kristenshemanski dot com/testing/index dot html

Any thoughts/input is welcome. I've completely hit a wall with this one. Also, I am indeed still using nested tables. I still have not completely mastered div tables, so I've decided to stick with the familiar until I learn a bit more. This project has really opened my eyes to how out-dated my coding is.

Here is my CSS for the vertical positoning:
Code:

/* Divs */

#outer { 
	position: absolute; 
	height: 100%; 
	width: 100%;
	border:0;
	overflow: visible;
	vertical-align: middle;
}

#inner { 
	position: relative; 
	top: 50%; 
	height: 645px; 
	width: 100%;
	margin: 0px auto;
}

How do you go about vertically aligning text in a <div> tag that is 200px in height?

Hi there!

This might seem really basic but I don't seem to be able to remove the default border from a cell I created.

The code looks like this:

"<p> </p>
<table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;">
<tbody>
<tr>
<td>
<div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;">
<p align="center">
<img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" />&nbsp;</p>
<p align="center">
</p>
<p> </p>
</div>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;&nbsp;</p>

How shall I do to hide the border?

Thanks in advance!

/Kristoffer

I am having problems with vertical aligning both texts and images. Can someone show me a working example or tell me where I messed up the codes below?

http://efetuncel.win.aplus.net/ryt/new/

Code:

#rcontent{
	float:right;
	width:490px;
	padding:0px;
}
#rcontent .category{
	float:left;
	width:240px;
	height:120px;
	margin:30px 0px 0px 5px;
	background: url(images/bg_home_category.gif)
}
#rcontent .category img{
	float:left;
	vertical-align:middle;
}


        <div id="rcontent">
            <div class="category">
            	<img src="images/home_categories_gb.gif" alt="" />
            </div>
            <div class="category">
            </div>            
            <div class="category">
            </div>
            <div class="category">
            </div>   
	    </div>

Here is my development site:
http://www.pursuedbybear.com/sunwashed/

Is there any way to vertically center the links in the left hand nav inside their orange boxes without resorting to a table? I've tried vertical-align: middle and padding-top the #nav ul li a element, but neither works.

I've done some searching here and the results haven't been encouraging - anyone have something different I could try? I mean really, this isn't exactly a super-complicated or obscure thing I'm trying to do, you'd think CSS could handle it.

Any advice?

Well, the title might be a little oversimplified, but I guess it caught your attention

In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable.

Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately.

Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this?
Any help/suggestions/ideas are appreciated...

People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly.
I'm using "em" instead of pixels when setting font sizes in CSS.
The site has fixed length and width, do I HAVE to allow it to resize itself?

Whats the best way to fix font size?

I use CSS. The font size seems to stay fix on IE but not on Mozilla and Netscape.

Also I notice when I use adgui font it stay fix no matter in what browser and no matter at what text view. Why is that. Are there more of this kinda fonts?

Bottom line, whats the best way to fix the size of fonts regardless of browser and at what text view.

Thanks for you help
Liz

Hello,

I have something has follows:

<div>
...
<table>
...
</table>

</div>

My document font size is 1em.

My div font size is 1.4em.

What should be the font-size in my table to get back to the 1em of the document?

Thanks,
Miguel

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

form { margin: 0px; padding: 0px; }

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller


here is a preview with that css file in use : http://www.dbznetwork.net/

Normally when I want to vertically align some text to the middle of a div I use

line-height: 40px; and vertical-align: middle;

However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this?

I thought something like the following would work but it doesn't.

<div style="line-height: 60px; vertical-align: middle;">
<span style="line-height: normal;">line1<br />line 2</span></div>