Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Problems with "border"...

Posted on 1999-07-08
11
Medium Priority
?
270 Views
Last Modified: 2010-04-09
I am trying to create a web site for my mom and learn html at the same time. Don't know much, but I am learning. I have tried to create a "border" for the pages I am doing for her using tables. Using IE5, if you visit http://hometown.aol.com/buzzyld/template.html, you can see this "border" that I have tried to create. Using Communicator 4.6 you will only see the corners of the "border" which are actually images unlike the rest of the "border". Well, I figured out that navigator wasn't processing the rest of the "border" because I needed to put some content into those specific cells. So, I put a transparant image in each of the cells, and now the "border" shows up both in Navigator and IE. However, you can see that it is not what I had intended the "border" to look like. It's pretty messed up actually. You can see this at http://hometown.aol.com/buzzyld/template2.html
Now when you look at the first url in IE5, that's what I was hoping to accomplish in the "border". It comes out perfectly with the sides matching the width of the corners and everyting flowing together nicely. My question I guess, is can anybody see why I am having problems with the "border" looking like I had originally planned? Why is it that I can't get it to display correctly as you can see in the second url? Basically, I want template2.html to look like template.html does in IE5 and I want it to look that way both in Navigator and IE. Is there something wrong with my code or is there a step I've forgotten? Any help would be greatly appreciated.

Thank you,

beegled
beegled@teleport.com
0
Comment
Question by:beegled
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +3
11 Comments
 
LVL 6

Expert Comment

by:kschang
ID: 1851740
Your template 2 looks almost identical to me in N4.61 and IE4.01SP2...
0
 

Author Comment

by:beegled
ID: 1851741
Edited text of question.
0
 
LVL 1

Expert Comment

by:gramdee
ID: 1851742
As far as I understand the border is a thin cells with specific bgcolor. If so, then

You have made one small mistake: Netsape does not renders (and shows) the cells without any content. You should place something in the cells where the border stored.

You can use   special sequence or some image with 1x1 dimesions for this.

If you'll use image, then you should put </td> or <br> tag just after the <img> tag (f.e. <img src=spacer.gif width=1 height=1></td>)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:gramdee
ID: 1851743
...and one more correction to your page...

i have very specific default window color (not white). that's why your page has not white background in both browsers. i recommend you always put bgcolor=#FFFFFF in body tag.


0
 

Author Comment

by:beegled
ID: 1851744
I already have put a 1X1 image in the cells which is why template2.html renders the "border" in both Netscape and IE.  The problem is that the "border" now does not look like I had intended.  I wish the "border" that is in template2.html to look like template.html does in IE5.
0
 

Author Comment

by:beegled
ID: 1851745
Adjusted points to 460
0
 
LVL 2

Expert Comment

by:johnny99
ID: 1851746
My personal comment is that you're getting very hung up on one particular effect -- if you're still trying to learn HTML, as you say, now's a good time to learn to find something that you know will work in the medium of HTML, not try and reproduce something you can do elsewhere in HTML even if the solution is incredibly complex. Do you see many other web pages which have round-cornered borders on them? There's a clue right there! : ) It's a good idea, but not a good *HTML* idea...

My solution to your problems? Set the height and width of the table which contains the border stuff to something impossibly small, like 1%, which forces the sizes of the cells to fit the sizes of the images.
0
 
LVL 4

Expert Comment

by:chewymon
ID: 1851747
What version of Netscape are you using?  <tbody> is not supported by Netscape 4.0 and earlier versions.  As fussy as Netscape is about tables, it can cause problems.  Take out all <tbody> and </tbody> tags and see if it helps.
0
 
LVL 2

Accepted Solution

by:
djsansui earned 1840 total points
ID: 1851748
First of all, I'd suggest you completely re-do the tables.  They are a mess.  I'm not saying that the page is bad, but the layout of the tables is poor, and may be a factor in your problem.  (as well as a big factor in helping us troubleshoot it).

You only need 1 table for the whole page.  That table is for the box where the content goes.  It should basically conisit of 3 rows, 3 columns.

<table border=0 cellpadding=0 cellspacing=0>
 <tr height=5>
  <td width=5><img src="images/upperleft.gif" height=5 width=5></td>
  <td bgcolor="##000099"><img src=images/spacer.gif height=5 width=5></td>
  <td width=5><img src="images/upperright.gif" height=5 width=5></td>
 </tr><tr>
  <td width=5 bgcolor="#000099"><img src=images/spacer.gif height=5 width=5></td>
  <td vailgn=top> Content goes here </td>
  <td width=5 bgcolor="#000099"><img src=images/spacer.gif height=5 width=5></td>
 </tr><tr height=5>
  <td width=5><img src="images/lowerleft.gif" height=5 width=5></td>
  <td bgcolor="##000099"><img src=images/spacer.gif height=5 width=5></td>
  <td width=5><img src="images/lowerright.gif" height=5 width=5></td>
 </tr>
</table>

This is all the code you need.  It will make a table that makes a nice blue border around the text.

To learn more about how to use tables, go to http://www.webdiscuss.com/danlaub/tutorials/tables1.shtml
It'll show you how to set up tables to be sensible and easy to read.  Remember, simpler is better.

Please inqure if you need more information.
0
 
LVL 2

Expert Comment

by:johnny99
ID: 1851749
Hmmm -- you know what?

I messad around with your content and your tables and I realised that my solution, that is, set the widths to "impossibly small" percentage values isnt' going to work -- because your border corners are 5 pixels, and the lowest percentage value, 1%, is far from 'impossibly small" on most people's screens!

I reiterate my earlier statement -- this putting a border around the page thing seems as if it ought to be easy, and I understand that, but seriously, this is not easy in HTML, at least if you want the pages to work at a bunch of different window sizes.

My reccomendation is to go with fixed table size, that would be a nice number like 580 which is guaranteed to work on all monitor resolutions 640x480 and up. Centre it on the page and the 640x480 people will just see a full window, and the 1024x768 people will see a stylish narrower column of text.

Seriously, this is a good opportunity for you to stop trying to force HTML to fit a pre-conceived idea for a page design, and instead to come up with a design that works well in various browsers and is simple HTML.

oh yeah, and nearly all your attributes are without quotes!
0
 

Author Comment

by:beegled
ID: 1851750
Just want to say thank you to everybody for their coments and help with my question.  You have all made some great suggestions, and I will try to work on all of it.  I will learn html.  :-)  Take care everyone.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question