Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

having trouble aligning tables in IE w/CSS


  • This topic is locked This topic is locked

#1
brookwood

brookwood

    New Member

  • Member
  • Pip
  • 6 posts
I posted this on the w3schools forum but I thought I'd post it here as well for good measure:

I hope there is a quick answer to this (and likely there is). I am trying to align two tables, so one lies on top of the other, and get them both to align horizontally in the center of the page. It works fine in Firefox but IE aligns the first table ("main") centrally and then aligns the center of the second table ("menustrip") over the right-side edge of the first table. That may sound confusing. But here's a really simplified version of the code and you'll see:

HTML:
<html>
<head>
<link rel="stylesheet" href="first.css" type="text/css" media="screen">
</head>
<body>
<table id="main" border=0 cellpadding=0 cellspacing=0>
<tr>
<td id="one">&nbsp;</td>
<td id="two">&nbsp;</td>
<td id="three">&nbsp;</td>
</tr>
</table>
<table id="menustrip" border=0 cellpadding=0 cellspacing=0>
<tr><td>&nbsp;</td></tr>
</table>
</body>
</html>

CSS:
body
{
background: gray;
margin:0px;
padding:0px;
text-align:"center";
}

#main
{
margin:0px auto;
text-align:left;
height:100%;
width:780px;
}

#one {width:25px; background:black;}

#two {width:175px; background: #4B4B4B}

#three {width:580px; background:black;}

#menustrip
{
position:absolute;
top:90px;
background: white;
margin:0px auto;
height:10px;
width:780px;
}

I do know I could make the second table be a part of the first table but due to how I would like to fill them, I would prefer to be able to use them as two separate tables if there is a way to make this work.

I'm stumped. Any help is greatly appreciated.

Edited by brookwood, 22 March 2006 - 11:09 AM.

  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Interesting only in that when I inserted a <!DOCTYPE> both IE and Firefox no longer displayed the tables as you discribed. IE put the "menustrip" at the bottom and left of the "main" table displaced downward from it by the amount of 90px. Firefox displayed the "menustrip" at the bottom of "main" table, but centered with it and about 79px down according to the FF Ruler Tool I use.

<!DOCTYPE> used was:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...ml4/loose.dtd">

If you aren't planning on adding text which is not changed at times in the "menustrip" portion, you might try making an image of the strip with text and playing around with the " z-index " attribute although the <layer> tag has its own problems. Styling for {position:absolute; z-index:n or auto;} might be worthwhile to research. I did this for one site, but can't recall code right offhand. LOL

Know this is no help, but only some ideas to look into.

Ron
  • 0

#3
bdlt

bdlt

    Member

  • Member
  • PipPipPip
  • 875 posts
hi brookwood,

have you made any progress?

I'm no CSS expert - been playing with it for a month.

using IE5, 'menu' was off center.

CSS:
body
{
background: gray;
margin:0px;
padding:0px;
text-align:"center";
}

modified
text-align:"center";
to
text-align:"left";

if you try this, does it work with firefox and IE, IE only, or neither?

bdlt
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
I'm using a screen res of 1024x768. Here's one that IE sets up that looked ok to me after removing the table tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Column XHTML Layout Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">
body
{
background: gray;
margin:0 0 0 0; padding:0 0 0 0;
text-align:"center"; color: #ffffff;
}

#main
{
margin:0 0 0 0 auto;
text-align:left;
height:100%; width:780px;
}

#leftcol {
width:15%; height: 500px; background: #000000;
border: #00f 1px solid; margin: 0 0 0 0;
float: left;
}

#centercol {
width:30%; height: 500px; background: #4B4B4B;
border: #f00 1px solid; margin: 0 0 0 0;
position: absolute; left: 15.5%; top: 0;
}

#rightcol {
width:55%; height: 500px; background: #000000;
border: #0f0 1px solid; margin: 0 0 0 0;
position: absolute; left: 39%; top: 0;
}


#menustrip {
background: yellow; margin:0 0 0 0 auto; height:10px; width:100%;
position:absolute; top:90px; left: 2%;
}

</style>
</head>
<body>


<div id="leftcol"><h1>Left Column</h1>

</div>

<div id="main">

<div id="rightcol"><h1>Right Column</h1>
<p> </p></div>

<div id="centercol"><h1>Center Column</h1>
<p> </p></div>


<div id="menustrip">
<div> </div>
</div>


</div>


</body></html>


You can play with the values in the CSS to use pixels or percentages, whatever. Only problem now is Firefox doesn't like it. :tazz: I changed the colors so I could see what the results were, but you can change them back.

Didn't try too hard to set code to make both browsers really happy. Firefox did the columns ok, but the menutitle (yellow in mine) was not centered.

Was something to play with and doesn't meet what you wanted.

Ron
  • 0

#5
thenotch

thenotch

    Member

  • Retired Staff
  • 667 posts
I'm curious, why are you using tables in a CSS document again?

Why aren't you using DIV's instead?
  • 0

#6
brookwood

brookwood

    New Member

  • Topic Starter
  • Member
  • Pip
  • 6 posts
I started trying to do this with DIVs actually. Not sure exactly why I had decided on tables to begin with. I'm a bit less familiar with DIVs so thats part of it. I'm encountering other problems with the DIVs. Like trying to use the same method I've been using for centering within the body to try to center one DIV inside another. I can't remember all that I was encountering, I just got back from vacation and have to reacquaint myself with where I was in the process, but I'll do that and post again.
  • 0

#7
brookwood

brookwood

    New Member

  • Topic Starter
  • Member
  • Pip
  • 6 posts
okay, just went back to it. for now the centering a div within a div is not such a big deal because of how I've designed the sight so far. hopefully it won't become an issue. i've got a whole new problem now (should this be under a whole new topic then?) and I'm bewildered.

I've redone the page now with DIVs (MUCH cleaner and shorter). If you look at it it should look like my prior workup with the tables except that I added another DIV (#4) within the white horizontal menu strip. If you look at this in Firefox you'll see how I want it to look, which is so that #4 lines up with the vertical strip (#2). For some reason in IE the margin-left that I input for #4 is doubled. I can't figure out why its doubling it. (Obviously if I just cut the margin value in half it lines up in IE, but then Firefox, and I imagine others, display too small of a margin.) If I take out the float:left for #4 it lines up correctly but as far as I can tell I need to keep that in because I want to follow the #4 box with text which will be the menu. If I take out the float:left then my text drops down below the #4 box. Here's where I'm at:

HTML:


<html>
<head>

<link rel="stylesheet" href="main.css" type="text/css" media="screen">

</head>

<body>

<div id="one">

<div id="two"></div>

<div id="three">
<div id="four"></div>
</div>

</div>
</body>
</html>

CSS:

#one
{
background: black;
text-align:left;
height:100%;
width:780px;
margin:0px auto;
}

#two
{
background: #4B4B4B;
text-align:left;
height:100%;
width:25%;
margin-left:25px;
}

#three
{
background: white;
height:20px;
width:780px;
position:absolute;
top:90px;
}

#four
{
background: #CACACA;
height:100%;
width:25%;
float:left;
margin-left:25px;
}
  • 0

#8
Sir Grand Funk

Sir Grand Funk

    Member

  • Member
  • PipPipPip
  • 115 posts
FOOLS NO! NO! FUNCTIONALITY PEOPLE!
This is what I have on my site:

.category {
TEXT-ALIGN: left;
BORDER-RIGHT: 1px solid;
BORDER-LEFT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-BOTTOM: 1px solid;
width: 115px;
BACKGROUND-COLOR: #DEDEDE;
COLOR: #000000;
PADDING-LEFT: 5px;
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
Z-INDEX: 4;
LEFT: -10px;
MARGIN-BOTTOM: -10px;
POSITION: relative;
TOP: -10px;
}

And please forgive me if you did the same, I scan through the posts as fast as possible after the first post. Bad habbit.
  • 0

#9
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Due to lack of feedback, this topic has been closed.

If you need this topic reopened, please contact a staff member. This applies only to the original topic starter. Everyone else please begin a New Topic.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP