chrometweaks.org

Anyone here using 1and1 iPage web hosting?

Click Here To View All Answers...


My first question is Anyone here using 1and1 iPage web hosting? Many thanks for any response. 2nd question I got is.. Hello all!.

I'm asking for help as a last resort after WEEKS of struggle with a table I want to use to lay out my page. It doesn't render properly, and I just can't figure out why. I've tried using an HTML editor, but still the cells are not their correct size. I've included the code below, and here's a URL where I've posted a GIF I made in photoshop showing the layout I'm trying to achieve:.

Http://eelsinthewilderness.iwarp.com/newlayoutb.html.

In the code below, I've named the cells 'A, B, C...' etc (except for in the cells where the default font size would probably make them too big for the cells)..

I have the feeling that the answer is simple, but that I'm just unable to see it - either that it's a problem with those cells from 'F' onwards, or that it's just an impossible layout (if such a thing exists...)..

Anyone who'd try helping me out would be helping to reduce a lot of HTML heartache, and I'd be eternally grateful..

Thanks in advance..

Here's the code:.

<table width="754" height="388" cellpadding="0" cellspacing="0">.

<tr>.

<td width="184" height="358" rowspan="5" bgcolor="cyan">A</td>.

<td width="402" height="302" colspan="3" bgcolor="blue">B</td>.

<td width="77" height="358" rowspan="5" bgcolor="yellow">C</td>.

<td width="91" height="358" rowspan="5" bgcolor="green">D</td>.

</tr>.

<tr>.

<td width="11" height="86" rowspan="5" bgcolor="orange">E</td>.

<td width="391" height="10" colspan="2" bgcolor="green"></td>.

</tr>.

<tr>.

<td width="335" height="16" colspan="1" bgcolor="yellow">G</td>.

<td width="56" height="16" colspan="1" bgcolor="magenta">H</td>.

</tr>.

<tr>.

<td width="140" height="24" colspan="1" bgcolor="grey">I</td>.

<td width="251" height="24" colspan="1" bgcolor="red">J</td>.

</tr>.

<tr>.

<td width="391" height="6" colspan="2" bgcolor="green"></td>.

</tr>.

<tr>.

<td width="184" height="30" colspan="1" bgcolor="red">L</td>.

<td width="149" height="30" colspan="1" bgcolor="grey">M</td>.

<td width="410" height="30" colspan="3" bgcolor="cyan">N</td>.

</tr>.

</table>..

Comments (26)

Good question... I dunno what is the right answer to your question. I'll do some research and get back to you if I got an answer. You should email the people at iPage as they probably could assist you..

Comment #1

Actually didn't say what was wrong. sure it doesn't render properly, but what doesn't? the whole table or the bottom cells? and the nested tabeles is the best thing to do, an don't wory about NS4, the only problem with that is it doesn't do backgrounds in nested tables. and nested tables make sit work hardwer but it still runs, never heard about the javascript thing before in nested tables...

Comment #2

Oh, I see. Well what I mean when I say that it doesn't render properly is that a lot of the cells are sized wrongly, seemingly ignoring the width and height attributes that I've put in them. If you're looking at that GIF I linked to above, you'll see that those rows beneath the biggest cell, B, that contain more than one cell (so the rows with G, H, I, J, M and N) all have different widths - they're not just split nicely into two columns, lining up as you go down row by row. But in the code I've posted here, that's just what they do. They all line up, losing their individual widths. Maybe I'm misuing the 'colspan' attribute in those cells? Apart from the fact that these columns are lining up as they should, the rows are too long, and this seems to have had the effect of pushing out cell B above to a greater width than it should be, so that it can fit them..

I wouldn't have posted here unless I was completely at a loss... which I am. :/.

I think I maybe what I read about Javascript and nested tables could now be outdated - applying to an early version of that language. Clearly though, I'm a beginner and my information shouldn't be trusted on this..

Do you see what I mean now?.

I hope so!..

Comment #3

Oops, made a mistake in what I said above..

When I said that that ll those rows ahve differnt widths, what I meant was that ll the cells in those rows have different individual widths. The cells I mean are G, H, I, J, M and N..

I hope I'm making sense.....

Comment #4

Well yes you ahve a problem. the cells at teh btoom shouldn't have any colspan in them. they have nothign to span to. cell B is only 1 cell and it should be colspaned to teh bottom cells only, not the other way around. if you have a working model of this I can see where the problem is...

Comment #5

Thanks Martin,.

Funny you should mention Vaughan Oliver and 23 Envelope, my uncle said the exact same thing when he saw the site. Do you know where I could find any info on him/them? I'm just curious to find out a little more..

Anyway, back to your problem, I'll work on it a little for fun if you don't figure it out..

Also, two other suggestions, although I think they are missing the point of your project, but you could always just do a big image map, or do it in flash..

-Matt..

Comment #6

See this [.

Link.

] for a list of stuff that you need to fix. Some of this may be causing problems. It is all easy stuff to fix...

Comment #7

Matt - thanks for the kind offer. I'll stick at it for awhile yet. I've only pulled about a third of my hair out so far..

I'd love to make the iPage site - which I'm building for my itinerate brother - using Flash, and I'm sure my brother would love it too, but unfortunately I'm approaching a period in my life in which I don't think I'll have time to even learn how, let alone actually execute the iPage site to completion. I guess I'm in a semi-rush to finish it, and move on to other things. So, heh, the intention was to go with what I 'know'... for what it's been worth..

Vaughan Oliver and 23 Envelope - I think it's now v23: I stand to be corrected, but I think he's quite an elusive presence as far as the net goes. Basically, he and his then company 23 Envelope designed, as far as I'm aware, just about all of the cover art and sleeves for every album released on the 4AD label here in Britain from it's inception in 1984 until sometime in the mid-1990s, when he left the company (I'm think that's the story.) Best place I have been able to find is [url]www.evo.org/eyesore.html - has a ton of cover scans of many if not all of the 4AD releases. There's also the links page at.

Www.4ad.com.

, which lists some fansites. I have a couple of beautiful glossy back catalogues that 4AD sent me in the early 1990s (somewhere amongst my junk); sadly I don't think they have a snail-mailing list anymore..

I may be telling you what you already know, but check out the three 'This Mortal Coil' album sleeves (1984, 1986, 1991) for a good idea about what Vaughan Oliver's all about..

Hope this is helpful Matt. Sorry all for going off topic in this post...

Comment #8

Thanks Scoutt, I tried using the things you pointed out to me, but, unless I didn't follow through correctly, changing those colspans didn't help..

I've just put the table, as coded here, on the website. I haven't incorporated the graphics into it yet, but having coloured the cells and named them, it's easy to see the difference, when you compare it with the GIF link showing how I want it (see my first post)..

Http://www.eelsinthewilderness.iwarp...ewlayoutc.html.

I hope you get the chance to look at it..

Thanks so far..

And giz - thanks a lot for that link. I'm sure I'll use it in the future. Trouble is, apart from finding fault with the coding of my server's pop-up banner, it doesn't seem to find significant fault with the coding of the HTML in the link to the table I've just provided above..

Really, I haven't a clue...

Comment #9

Matt - sorry about the malformed links. They should be:.

Www.evo.org/eyesore.html.

Www.4ad.com..

Comment #10

I'd still love to hear from anyone who can help render my initial table correctly; but for now I think I'll try using a nested table, as Matt (parker) originally suggested here, and be damned to eternity by Netscape 4.0 and "some versions of Javascript [that] do not deal well with forms or scripts within tables when <TABLE> tags are nested.".

Moncur, Michael:.

Sams Teach Yourself Javascript 1.3 in 24 Hours.

.....

Thanks to everyone who commented...

Comment #11

Are you talking about how G,H,I,J are all not aligned? if you are then I don't believe you can do it this way. the tables will always align, the borders that is. if you want H small like you show than use 5% instead of fixed variables. also make G like 40% instead of being fixed...

Comment #12

Ok here is the code for your original table..

Create yourself some images first. These should be the same size as all your blocks. I have found the a table wont go less than about 20px in height unless you put an image in that is less than 20px in height. Anyway this should work for you. The reason it didn't work first time around is that you are setting widths for merged cols. You can't do this.

Remember this will not work for you unless you put some fixed size images in so the table can render around it correctly..

<table border="0" cellspacing="0" cellpadding="0" width="754">.

<tr>.

<td rowspan="5" width="184">&nbsp;</td>.

<td colspan="5" height="302">&nbsp;</td>.

<td rowspan="5" width="77">&nbsp;</td>.

<td rowspan="5" width="91">&nbsp;</td>.

</tr>.

<tr>.

<td rowspan="5" width="11">&nbsp;</td>.

<td colspan="4" height="10">&nbsp;</td>.

</tr>.

<tr>.

<td colspan="3" height="16">&nbsp;</td>.

<td width="56">&nbsp;</td>.

</tr>.

<tr>.

<td width="140" height="24">&nbsp;</td>.

<td colspan="3">&nbsp;</td>.

</tr>.

<tr>.

<td colspan="4" height="6">&nbsp;</td>.

</tr>.

<tr>.

<td>&nbsp;</td>.

<td colspan="2" height="30">&nbsp;</td>.

<td colspan="4">&nbsp;</td>.

</tr>.

</table>..

Comment #13

Entimp.

Thanks very much!.

I was initially very excited as I modified my code, because indeed your changes seemed to have solved the problem (and I was inspired by your confidence and thwe clarity of your explanation.

). But.... having put some unfinished BUT correctly-sized graphics into those cells, I've found that they throw the table out again. I've uploaded the table with those graphics in the URL here for you to see:.

Http://www.eelsinthewilderness.iwarp...ewlayoutc.html.

And as you might see, I got rid of all the width and height attributes for the images, in the vain hope that it would help. I've made 'spacer' GIFs for those cells which are here empty (F, G, J and K), but haven't included them here, and I got rid of the bgcolor attributes in my original code so that you can better see my graphics and how they're not fitting correctly. So of course all that grey space within the table consists of empty cells, or emptiness in cells which should be nicely full of correctly-sized graphics (I've checked and re-checked their size, they should be fitting snugly)..

Thanks very much for taking the time, but it seems I'm still not getting very far..

And thanks scoutt. I think entimp's reply here pretty much sums up was wrong with my initial code..

Hurrumph...

Comment #14

Try using this table layout and modify and moving around the contents to get everything just right....

Also, if you could use paint brush and draw the table layout you with ( labeling where specifc text and pictures go ( include the text as well as the file names of each pic please ) )...I'll see what I can do on building a table for you....

<table width="754" cellpadding="0" cellspacing="0">.

<tr>.

<td width="184" rowspan="5"><img src="cella.gif" /></td>.

<td height="302" colspan="5"><img src="iframe.gif" /></td>.

<td width="77" rowspan="5"><img src="colourstripes.gif" /></td>.

<td width="91" rowspan="5"><img src="gary1.jpg" /></td>.

</tr>.

<tr>.

<td width="11" rowspan="5"><img src="vert01.gif" /></td>.

<td height="10" colspan="4"></td>.

<td>&nbsp;</td>.

<td>&nbsp;</td>.

</tr>.

<tr>.

<td height="16" colspan="3">G</td>.

<td width="56"><img src="back.gif" /></td>.

<td>&nbsp;</td>.

<td>&nbsp;</td>.

</tr>.

<tr>.

<td width="140" height="24"><img src="useaus.gif" /><td colspan="3">J</td>.

<td>&nbsp;</td>.

<td>&nbsp;</td>.

<td>&nbsp;</td>.

</tr>.

<tr>.

<td height="6" colspan="4"></td>.

<td>&nbsp;</td>.

<td>&nbsp;</td>.

<td>&nbsp;</td>.

</tr>.

<tr>.

<td><img src="navbar.gif" /></td>.

<td height="30" colspan="2"><img src="cellm.gif"></td>.

<td colspan="4"><img src="bbar.gif" /></td>.

<td>&nbsp;</td>.

</tr>.

</table>..

Comment #15

I still don't see what is wrong!! you should have width and heights in.

All.

Images even though it is width="1". also you should have something in the cells.

<td height="6" colspan="4"></td>.

Cannot be empty as some browsers.

Will not.

Render them. it will mess up. so you should at least add &amp;nbsp; to them, or the image with a width of 1 and height of 1..

Although entimp's way is a good way, my way still stands as it made H small like you wanted..

Actually the image way is better but my way also solved it...

Comment #16

Lol, theboard took out the whitespace I put in the <td>'s above... use:.

<td>& n b s p ;</td> <take out the spaces between the & n b s p ;..

Comment #17

Hi scoutt,.

We posted at the same time...you are correct on some browsers not rendering blank td's....

How do we paste html code examples withOUT the board removing or rendering some of the code example?.

Would [ h t m l ] [ / h t m l ] work? or do we have to use the [ q you o t e ] [ / q you o t e ] tags?..

Comment #18

Have no fear, now I have a few images I can fix it up for you. brb..

Comment #19

Ok Squire... all fixed. I have added a new few images. These are spacer gifs to force the table to reach the correct dimensions. You will Also notice an extra row of table at the bottom... it is important you dont delete this.



This extra row of table is what I will now come to call a Scafolding Row... Playing with your tables it came to light that that once you merge the cells you lose all real control over the widths. Thus this row off cells at the bottom is in fact holding your overall table together. I am quite pleased with the discovery of the technique to be honest and may use it in the future. Not sure if it has been done before. But there you go.

All the code and images are below. Ackkk I can only upload one file. I will have to add them in different posts for you. First the code and 1 extra image..

<table border="0" cellspacing="0" cellpadding="0" width="754">.

<tr>.

<td rowspan="5" width="184" align="left" valign="top"><img src="cella.gif" width="184" height="358"></td>.

<td colspan="4" align="left" valign="top"><img src="iframe.gif" width="402" height="302"></td>.

<td rowspan="5" width="77" align="left" valign="top"><img src="colourstripes.gif" width="77" height="358"></td>.

<td rowspan="5" width="91" align="left" valign="top"><img src="gary1.jpg" width="91" height="358"></td>.

</tr>.

<tr>.

<td rowspan="5" align="left" valign="top"><img src="vert01.gif" width="11" height="86"></td>.

<td colspan="3" align="left" valign="top"><img src="spacer_391_10.gif" width="391" height="10"></td>.

</tr>.

<tr>.

<td colspan="2"><img src="spacer_335_16.gif" width="335" height="16"></td>.

<td width="56" align="left" valign="top"><img src="back.gif" width="56" height="16"></td>.

</tr>.

<tr>.

<td><img src="useaus.gif" width="140" height="24"><img src="spacer_9_24.gif" width="9" height="24"></td>.

<td colspan="2" align="left" valign="top"><img src="spacer_242_24.gif" width="242" height="24"></td>.

</tr>.

<tr>.

<td colspan="3" height="6" valign="top" align="left"><img src="spacer_391_6.gif" width="391" height="6"></td>.

</tr>.

<tr>.

<td valign="top" align="left"><img src="navbar.gif" width="184" height="30"></td>.

<td align="left" valign="top"><img src="cellm.gif" width="149" height="30"></td>.

<td colspan="4"><img src="bbar.gif" width="410" height="30"></td>.

</tr>.

<tr>.

<td width="184">&nbsp;</td>.

<td width="11">&nbsp;</td>.

<td width="140">&nbsp;</td>.

<td width="186">&nbsp;</td>.

<td width="56">&nbsp;</td>.

<td width="77">&nbsp;</td>.

<td width="91">&nbsp;</td>.

</tr>.

</table>..

Comment #20

Will ftp to web iPage site get them here....

Spacer 391-10.

Click here.

Spacer 335-16.

Click here.

Spacer 9-24.

Click here.

Spacer 242-24.

Click here.

Spacer 391-6.

Click here.

You will have to go to each one in turn and save em..

Hope that helps, let me know how it goes. a..

Comment #21

Entimp,.

I've been sitting here for a while now absolutely astonished. I have been looking at this table literally for weeks. And it's fixed! I've just been staring at the everything sitting together as it was intended. 'Scaffolding'? Architechture of the Gods, more like!.

I can't tell you how pleased I am..

What's great is your discovery of this technique. Whether or not it has been used before, how brilliant is it?!.

How can I repay you? The least I can do is credit you on this humble iPage site and provide a link to your own (for what it's worth in terms of traffic.

)..

If you're ever in the Norwich region, I owe you a pint, right?.

Thanks ucm, scoutt and everyone else who looked at this..

Entimp is the man - problem sorted!!..

Comment #22

Hey that made me smile... no probs dude. A link would be cool in time... ot just yet tho... my iPage site was hacked recently so I am giving it a rest and playing around in here instead. I'll let you know when a little text link would be appreciated..

As for the idea I would be shocked to find out if it had never been used before... was having problems keeping the widths of the cells all lined up and the idea just came from nowhere... anyway I have gained from it so it was a two way street..

Thanks for the offer on a pint tho.....

Comment #23

>>.

How do we paste html code examples withOUT the board removing or rendering some of the code example?.

<<.

If you want to put.

&amp;nbsp;.

In the forum, you will need to type in.

&amp;amp;nbsp;.

Into the message box, as just putting.

&amp;nbsp;.

In the code will mean the forum software renders it as a space. As you are trying to show the actual code in the message you will have to make an.

&amp;.

First, by typing.

&amp;amp;.

Then adding the.

Nbsp;.

To it after rendering the.

&amp;.

First...

Comment #24

It's really pleasing for me that you've gained, because in terms of HTML/web design, etc, it's unlikely if you were in a position where you needed help that I'd be able to reciprocate a good deed anytime soon, heh. Sorry to hear about your recent trouble..

As for the link, absolutely welcome, geezer..

Let me know when you're ready for it...

Comment #25

Yeah, it.

Should.

Be obvious what to do, but seems to always involve a lot of head scratching..

I think the explanation should be added to the FAQ for this forum, if it hasn't been already...

Comment #26

There are still errors in the code to fix:.

Http://validator.w3.org/check?uri=ht...sp=1&verbose=1..

Comment #27


This question was taken from a support group/message board and re-posted here so others can learn from it.