Website Wierdness

mac guru · July 23, 2002 8:24PM

In the beginning when I was in the beta testing stages of my new design it looked EXACTLY the same in Dreamweaver as it did in my browser.. so I released the design to the public then something WIERD happened.

In my design I have a small header table at the top that is 100% wide by 95px tall so it won't stretch. In the middle it is 100% wide by 100% tall and that is where the content goes for each page. And my footer table is 100% by 40px so IT stays the same. In three of my pages there isn't enough content to make the page long enough to scroll but for some reason it's acting like there are like 20 line breaks above and below my content making a LOT of dead space around it and it looks UGLY.

Here's what I mean:

Does anyone know how to fix this?

BTW you can check out my source code at jamesmeister.com if you think you can help me.

Thanks!

Mac Guru

pyr3 · July 23, 2002 8:47PM

Either try NOT setting the height in the middle or you could try using frames. The other option would be to make the part at the bottom a <div>.

The easiest way would be to make that bottom part a nested table. Insert a table at the end of the middle part that is 40px high. Such as :

<table height=95>

top part

</table>

<table height=100%>

middle part

<table height=40>

bottom part

</table>

</table>

(actually, you won't need that "height=100%" if you do it this way since the height will automatically resize)

This way the bottom table scales with the middle table as it extends since it will always be at the bottom of the middle table.

[ 07-23-2002: Message edited by: pyr3 ]</p>

mac guru · July 23, 2002 8:56PM

None of that solved the issue, in fact, the one about not specifiying a height made it worse.

Thanks thout it was worth a shot.

Mac Guru

stroszek · July 23, 2002 9:30PM

I've encountered stuff like this before. I think that the browser is intrepreting the 100% for the middle as 100% of the page size. I know that sounds confusing, but pretend that the area in the browser window for the page to display in is 500px high. If you subtract the 95px and the 40px, then logic would tell you that there are 365px left for the middle, but the browser is tryong to shove 500 (100%) in there. I don't know how to fix it off the top of my head using tables like that. It would be easier, I think, to move to CSS-P, but if you don't already know it, you would have to learn it.

Then again, I could be completely wrong.

Hope I helped some.

johnny_chrome · July 23, 2002 9:47PM

Mac Guru: Are you still seeing this problem, or did you fix it? It looks okay in IE 5.2 and Chimera on X.

johnny_chrome · July 23, 2002 10:10PM

Mac Guru: Are you still seeing this problem, or did you fix it? It looks okay in IE 5.2 and Chimera on X.

pyr3 · July 23, 2002 11:01PM

I've fooled around with your code and if you change the middle table to have cellpadding="0", and insert your bottom table into the middle table as such

<tr>

<td width="100%" colspan="2">

<table>

this is the bottom table

</table>

</td>

</tr>

that should fix everything except the issue of making it longer length-wise.

[ 07-24-2002: Message edited by: pyr3 ]</p>

mac guru · July 23, 2002 11:51PM

yes I'm still getting the same issue no matter what I do, but the odd thing is I'm using IE 5.2 in OS X and I'm seeing the error.

Mac Guru

pyr3 · July 24, 2002 12:02AM

It's not just IE, I see it in Mozilla 1.0 for windows.

mount_my_floppy · July 24, 2002 12:08AM

Looks fine in omniweb did you fix it? I don`t feel like starting up IE

mac guru · July 24, 2002 12:37AM

I've tried EVERYTHING and can't get the page to look like the first picture. Large space above and/or below the content on the left is not supposed to be there, this is a very short page, as is the links and content page.

Thing is, it was working but somehow DOESN'T now. VERY strange.

Mac Guru

mcq · July 24, 2002 1:52AM

I've looked at it in several web browsers on the mac and pc, they all render it the same. There's not much space from the top, but lots of space at the bottom. I tried nesting those tables in another table structure, and declaring heights for the top and bottom tables. It sorta renders better, but since the main part is so short it gets a lot of whitespace at the bottom, which is ugly and probably not what you want. Anyway, I posted it up temporarily at <a href="http://plaza.ufl.edu/zoom102/test.html"; target="_blank">http://plaza.ufl.edu/zoom102/test.html</a>;

pixelpusher · July 24, 2002 3:04AM

Here's what you should do:

Create a table set which consist of 3 rows (the table height is 100%).

Top row (height 95px) with a nested table with your logo and menu

Middle row (unspecified height) with a nested table with your content (this table is 100% in height so that it will scale in this row)

Bottom row (height 40px) with a nested table with your footer.

It's pretty easy to change, since you've already put the different parts in their own tables!

Edit: Here's how it'll <a href="http://idisk.mac.com/rtorp/Public/macguru/tableset.htm"; target="_blank">look</a>

[ 07-24-2002: Message edited by: Pixelpusher ]</p>

unremarkable · July 24, 2002 4:51AM

You will run into these problems, because it's not legal HTML to specify the height in that way. Unfortunately, you can't do it in CSS either (and you should be using CSS for your layout, rather than tables).

ghost_user_name · July 24, 2002 7:57AM

[quote]Originally posted by unremarkable:

<strong>You will run into these problems, because it's not legal HTML to specify the height in that way. Unfortunately, you can't do it in CSS either (and you should be using CSS for your layout, rather than tables).</strong><hr></blockquote>

You beat me to it

unremarkable is definitely right, learn CSS and use it. Your code is a mess, give me 20 minutes with it and I'll fix it right up...

ghost_user_name · July 24, 2002 8:34AM

All done, it's working fine. A few notes...

o I just cleaned and reformatted it so it would *work*

o I did not reconstruct your HTML to optimize it. I just made it work. Paying clients get the full spa treatment

o I didn't get rid of any of your outdated and vintage HTML tags. I suggest you look at the latest CSS spec. I think you would actually be surprised at what you're supposed to be doing in CSS.

Due to the above, I just went ahead and completely omitted the DOCTYPE from the beginning of the document. The code is in no way conforming to it, so why bother having it?

Oh, right, <a href="http://www.turborodent.com/newjames.html"; target="_blank">here is the evidence</a>. Tested in Mac OS X and Windows XP, all rendering issues from your current design have been eliminated. If you can't figure out what I did by reading the comments...

Basically, when you're designing something like this, you have to take a sort of Frames based approach to it. If you know how to write HTML for framesets by hand, you'll understand the "Global Embedding Table" I have enclosed your original code in. All major elements are separated by comments, it should be pretty intuitive.

<a href="http://www.turborodent.com/newjames.html"; target="_blank">http://www.turborodent.com/newjames.html</a>;

Enjoy!

EDIT: This is essentially what pixelpusher said and did above my original post. I completely missed his comment, so give him credit too

[ 07-24-2002: Message edited by: M3D Jack ]

[ 07-24-2002: Message edited by: M3D Jack ]</p>

pyr3 · July 24, 2002 9:31AM

[quote]Top row (height 95px) with a nested table with your logo and menu

Middle row (unspecified height) with a nested table with your content (this table is 100% in height so that it will scale in this row)

Bottom row (height 40px) with a nested table with your footer.<hr></blockquote>

I feel stupid that I didn't think of putting the top part in the table as well. d'oh! Most woes can be solved by nesting table inside of tables inside of tables though. You just have to know how to do it the right way.

mac guru · July 24, 2002 9:42AM

hey M3D,

Is there any way you could contact me in AIM? I would really love to talk with you about how to apply this across my design. Thanks, I KIND of understand what you've done and can probably apply it to the light pages but am a tad weary I'd screw it up on the portfolio and icon sections since those have a lot of cells.

??edit?? ok so if I understand correctly it will work if I just copy the center Table from my current pages and replace the center cell (content) from the other? Or is that too sloppy?

AIM: PRSop2000

Thanks,

Mac Guru

[ 07-24-2002: Message edited by: Mac Guru ]</p>

mac guru · July 24, 2002 10:26AM

Ok your fix look wonderful in any and every form of browser but then I opened it in the great and almighty OmniWeb and boy was it raped! Take a look:

What the heck? I've never liked Omniweb and I have half a mind to ignore this since 82% of my veiwers are using IE5.0+ on both windows and Mac, and 10% use Netscape, so 2% isn't in my worry zone.

Lemme know if you think of something.

Mac Guru

Website Wierdness

Comments