newbie: problem with table cell size

Jeff · Jun 18, 2006

Hey

I'm creating a web page. I created the web page using a table ( the left
column is for a menu, right column is for ad, the centre column is for site
content)... The left and right column's width is set to be 200px... Before I
added the <ul> block into the web page this really worked -> the left and
right column's width was 200px when I tested it.. so far everything works...

But my problem starts after I added the <ul> block. Now the left and right
column take up almost the entire width of the table, the centre column
becomes a little block in the centre of the table.

I want to use this <ul> block and the width of left/right column to be
200px...

What am I doing wrong here?

Here is my code (the files are separated with "***************"):
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link href='css/general.css' rel='stylesheet' type='text/css' />
<link href='css/menu.css' rel='stylesheet' type='text/css' />
</head>

<body>
<table width="100%" border="1">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3">
<ul id="top_menu">
<li><a href="">TEST 1</a></li>
<li class="first"><a href="">TEST 2</a></li>
<li><a href="">TEST 3</a></li>
<li><a href="">TEST 4</a></li>
<li><a href="">TEST 5</a></li>
<li><a href="">TEST 6</a></li>
<li><a href="">TEST 7</a></li>
<li><a href="">TEST 8</a></li>
</ul>
</td>
</tr>
<tr>
<td width="200">
<table width="100%" border="1">
<tr>
<td>TEST A</td>
</tr>
<tr>
<td>TEST B</td>
</tr>
<tr>
<td>TEST C</td>
</tr>
</table>
</td>
<td>A</td>
<td width="200">B</td>
</tr>
<tr>
<td colspan="3">C</td>
</tr>
</table>

</body>
</html>

***************
general.css
body {
background-color:#99CCCC;
}

a:link {
text-decoration:none;
}
***************
menu.css
ul#top_menu, ul#top_menu li {
list-style:none;
float:left;
margin:0;
padding:0;
}

/* ul#top_menu {
background-color:#00FFCC;
}*/

ul#top_menu li a {
border-color:#0099FF;
list-style:none;
border-width:1px 1px 1px 0;
border-style:solid;
display:block;
padding:3px;
}

ul#top_menu li.first a {
border-color:#0099FF;
background-color:#CCCC00;
list-style:none;
border-width:1px 1px 1px 0;
border-style:solid;
display:block;
padding:3px;
}

Sid Ismail · Jun 18, 2006

On Sun, 18 Jun 2006 20:25:06 +0200, "Jeff"

: Hey
:
: I'm creating a web page. I created the web page using a table ( the left
: column is for a menu, right column is for ad, the centre column is for site
: content)... The left and right column's width is set to be 200px... Before I
: added the <ul> block into the web page this really worked -> the left and
: right column's width was 200px when I tested it.. so far everything works...
:
: But my problem starts after I added the <ul> block. Now the left and right
: column take up almost the entire width of the table, the centre column
: becomes a little block in the centre of the table.
:
: I want to use this <ul> block and the width of left/right column to be
: 200px...
:
: What am I doing wrong here?
:

Try the CSS-alternative for a 3 column table?

In the meantime, quick fix:
ul {margin-left:-6px;}

Sid

Jeff · Jun 18, 2006

I tryed this code, it almost works, but the problem with this is that when
the browser window resizes the left and right column also resizes. I want
only the centre column to be resized when window resizes:
..left, .right {
width:200px;
}
..centre {
width:80%;
}
<tr>
<td class="left">A</td>
<td class="centre">B</td>
<td class="right">C</td>
</tr>

ul {margin-left:-6px;} isn't working....

any suggestion?

Jeff

Sid Ismail · Jun 19, 2006

On Sun, 18 Jun 2006 22:16:53 +0200, "Jeff"

:
: ul {margin-left:-6px;} isn't working....
:
: any suggestion?

Hi - ok, try:
ul, li {margin-left:-6px;}

Also, maybe post a url? That'll help!

Sid

Jeff · Jun 19, 2006

Hey!

this is the url
http://home.online.no/~au-holme/pub/66505/index.php
or
http://home.online.no/~au-holme/pub/66505/index.html

There you see that the centre column is very small, and the left and right
column are very wide. I want those left and right column to be 200px wide

general.css
/* CSS Document */
body {
background-color:#FFFFFF;
}

a:link {
text-decoration:none;
}

***********************************************
menu.css
ul#top_menu, ul#top_menu li {
list-style:none;
float:left;
/* margin:0;
padding:0;*/
}

ul#top_menu {
background-color:#FFFFFF;
}

ul#top_menu li a {
border-color:#000000;
color:#000000;
list-style:none;
border-width:1px 1px 1px 0;
border-style:solid;
display::block;
padding:3px;
}

ul#top_menu li.first a {
border-color:#0099FF;
background-color:#CCCC00;
list-style:none;
border-width:1px 1px 1px 0;
border-style:solid;
display:block;
padding:3px;
}

Any suggestions to what I should do to correct this?

Sid Ismail · Jun 19, 2006

On Mon, 19 Jun 2006 12:10:41 +0200, "Jeff"

: Hey!
:
: this is the url
: http://home.online.no/~au-holme/pub/66505/index.php
: or
: http://home.online.no/~au-holme/pub/66505/index.html
:
: There you see that the centre column is very small, and the left and right
: column are very wide. I want those left and right column to be 200px wide

Try:

<TR>
<TD width=200>A</TD>
<TD width=100%>B</TD>
<TD width=200>C</TD></TR>
<TR>

Sid

Jeff · Jun 19, 2006

I tryed that:
http://home.online.no/~au-holme/pub/66505/index.php
But now the left /right columns are too small and centre column too large...

Neredbojias · Jun 19, 2006

To further the education of mankind, "Jeff"

I tryed that:
http://home.online.no/~au-holme/pub/66505/index.php
But now the left /right columns are too small and centre column too
large...

Did you try the page in Firefox? It seems to work there. Table behavior
is notoriously broken in ie6 (-although you could try "quirks mode" which I
suspect will work "better".)

Martin Jay · Jun 20, 2006

Jeff said:
I'm creating a web page. I created the web page using a table ( the left
column is for a menu, right column is for ad, the centre column is for site
content)... The left and right column's width is set to be 200px... Before I
added the <ul> block into the web page this really worked -> the left and
right column's width was 200px when I tested it.. so far everything works...

But my problem starts after I added the <ul> block. Now the left and right
column take up almost the entire width of the table, the centre column
becomes a little block in the centre of the table.

I want to use this <ul> block and the width of left/right column to be
200px...

What am I doing wrong here?

Here is my code (the files are separated with "***************"):
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

It works with an HTML 4.01 strict doctype, such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

But it would probably break in IE versions prior to 6.

I wouldn't bother with XHTML. Stick with HTML 4.01.

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I need help fixing my website	2	Oct 15, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
Not sure why drop-down is not working.	2	Mar 24, 2024
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Only one table shows up with the information	2	Mar 29, 2023

newbie: problem with table cell size

Jeff

Sid Ismail

Jeff

Sid Ismail

Jeff

Sid Ismail

Jeff

Neredbojias

Martin Jay

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads