Web Page Design, problem with Tables

Toggle sidebar Toggle sidebar
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
Ok, So I am throwing together a website for my brother as he wants to rent his flat out. He wanted a static menu on the left, there is a logo at the top, and then the content in the middle changes. The odd thing is, in IE, the space between the menu links on the left changes depending on the amount of content in the middle. It is all just in a table, but it is making no sense to me why this is happening. Firefox renders it with the table staying the same size all the time, just IE...does anyone have any thoughts on this? What should I do differently?

I have a second question about this page, but I'll stick to this one first!

Cheers for your help!

Waldo
 
I

Insomnium

Senior member
Aug 8, 2000
644
0
0
From what I understand, you want your page to look like:

[ <-- Logo at top --> ]
[menu][ content ]

Each of the [] should be a single table cell. If your [menu] keeps changing when [content] changes, it is likely because your menu is comprised of table cells that belong to the whole table. To keep that from changing you need to put a new table (1 column with x number of rows for x number of menu options) in the [menu] cell so that you have a table within a cell. That way when content changes your menu won't stretch or anything, even though the menu cell will. (you might have to align the table at the top of the menu cell). Give that a shot, it should work.
 
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
Thanks, I will give it a shot.

Just to reiterate...I am going to put a table in the menu cell to keep that all together. I am hoping the table will align with the top, thanks for the help. I tried putting them all in one cell, but ended up with the whole list of menu items in the middle of the page!! :p If that happens, thoughts around that?
 
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
Just did it, and the same problem....sort of...the mene doesn't expand as previously, but it jumps to the middle of the page!! :p thoughts?
 
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
I can post the code, unfortunately it is not on a server at the moment.......should I post the code in a reply here? I'll grab it, then just cut and paste it in your coder....the only thing is you will have to swap the images!! :p
 
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
Here is the basic code. It really is basic, nothing fancy...which is why I am perplexed!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>The Birch</title>
<!-- TemplateEndEditable --><script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&amp;&amp;i<a.length&amp;&amp;(x=a)&amp;&amp;x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&amp;&amp;parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&amp;&amp;d.all) x=d.all[n]; for (i=0;!x&amp;&amp;i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&amp;&amp;d.layers&amp;&amp;i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x &amp;&amp; d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
.style1 {font-family: Garamond}
-->
</style>
</head>

<body onLoad="MM_preloadImages('file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Home%20Tab%20copy.gif','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Facilities%20Tab%20copy.gif','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Layout%20Photos%20Tab%20copy.gif','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Directions%20Tab%20copy.gif','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Maps%20copy.gif','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Bookings%20Tab%20copy.gif','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Rates%20Tab%20copy.gif','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Local%20Info%20copy.gif')">
<table border="0" cellpadding="0">
<tr>
<th height="120" colspan="2" scope="col"><div align="left"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Logo1%20long%20edition%20copy.jpg" width="800" height="120"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Line%20copy.gif" width="100%" height="3"></div></th>
</tr>
<tr>
<th width="280" scope="row"><table width="250" border="0" cellpadding="0">
<tr>
<td width="250"><a href="../Home.htm" class="style1" onMouseOver="MM_swapImage('Home','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Home%20Tab%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Home%20Tab%20copy%20unselected.gif" alt="Home" name="Home" width="250" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="../Fac.htm" class="style1" onMouseOver="MM_swapImage('Facilities','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Facilities%20Tab%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Facilities%20Tab%20copy%20unselected.gif" alt="Facilities" name="Facilities" width="250" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="../Photos.htm" class="style1" onMouseOver="MM_swapImage('Layout/Photos','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Layout%20Photos%20Tab%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Layout%20Photos%20Tab%20copy%20unselected.gif" alt="Layout/Photos" name="Layout/Photos" width="250" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="../Local.htm" class="style1" onMouseOver="MM_swapImage('Local Info','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Local%20Info%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Local%20Info%20copy%20unselected.gif" alt="Local Info" name="Local Info" width="250" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="../Rates.htm" class="style1" onMouseOver="MM_swapImage('Rates','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Rates%20Tab%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Rates%20Tab%20copy%20unsselected.gif" alt="Rates" name="Rates" width="250" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="../Directions.htm" class="style1" onMouseOver="MM_swapImage('Directions','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Directions%20Tab%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Directions%20Tab%20copy%20unselected.gif" alt="Directions" name="Directions" width="250" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="../Maps.htm" class="style1" onMouseOver="MM_swapImage('Maps','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Maps%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Maps%20copy%20unselected.gif" alt="Maps" name="Maps" width="250" height="40" border="0"></a></td>
</tr>
<tr>
<td><a href="../Bookings.htm" class="style1" onMouseOver="MM_swapImage('Bookings','','file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Bookings%20Tab%20copy.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="file:///C|/Web%20Design/Gerry/The%20Birch/Artwork/Bookings%20Tab%20copy%20unselected.gif" alt="Bookings" name="Bookings" width="250" height="40" border="0"></a></td>
</tr>
</table>
<div align="center"></div></th>
<th width="500" rowspan="2" scope="row"><!-- TemplateBeginEditable name="Text or Maps" -->
<div align="left"></div>
<!-- TemplateEndEditable --></th>
</tr>
<tr>
<th scope="row">&amp;nbsp;</th>
</tr>
<tr>
<th width="280" rowspan="2" scope="row">&amp;nbsp;</th>
</tr>
<tr>
<th scope="row"><a href="../Contact.htm">Contact Us</a></th>
</tr>
</table>
</body>
</html>
 
A

AFB

Lifer
Jan 10, 2004
10,718
3
0
Try this. I just threw this together with some div's instead, see if it's what you want. It readers the same in FF and IE
 
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
not sure what the outterwrapper is...hmmmm....but looking at the code, it appears that you are just dealing with the width, whereas it is the height that is a problem. When the page becomes too long then the menu, which is on the left, moves down the page....I could go to a frame style page, maybe that would be just easier, but I thought tables would be the easiest for someone to work on that doesn't know a lot about web pages, or even less than I do!! :p
 
K

kuljc

Golden Member
Apr 7, 2004
1,845
0
0
ok let me make sure i'm understanding this correctly.

you have a single table w/ 2 col's on 1 row. right?

And when the row on the right becomes too long, the stuff in the row on the left start to move down.


if that's the problem then all it is, is an alignment problem. I think either in the <tr> or <td> tag's you have to add a align=top (i think that's the right command). lol using WYSIWYG (did i do that right) editors has made me forget too much.


****

GOT THE RIGHT COMMAND:
valign="top"
i put it in my <td>

take a look here if it helps:
http://www.jaythecomputerman.c...s/jtcm0.1a/desktop.htm
(don't laugh... it's a little page i'm working on to help me sell comps easier).


give me a PM if you have anymore questions.
 
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
I'll give that a try, thanks! I was trying to put an align value for the table, but ti wasn't working, and I am not sure IE recognizes them!! :) I"ll let you know in a second!
 
I

imported_waldo

Golden Member
Aug 30, 2004
1,076
0
0
Got it! Cheers all for the help! I had to change the th tages to td, and then valign both the cell itself and the table itself, and I aligned the first cell in the table just to be safe, that worked!! :) ANd why is anandtech rendering funny now? Did they do a page change?
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom