Web page distortion and wrap

Get Started
1

I designed a website that seems to work on most computers. However, I look at the pages on my wife’s PC and some of the content on some of the pages wraps and therefore doesn’t properly align. The full webpage appears on her screen but the information becomes misaligned. On that particular page, one of our officer’s picture wraps. On another page, listed documents don’t appear in the aligned fashion they appear on my (and other) screens. In a third instance, I have a general information box which is just a little less wide than the page, but the text in her information box does not go across the entire width of the box (wraps earlier and leaves space at the end of each line in the box). I need to be sure that all those accessing the website get undistorted web pages. How do I ensure that?

thanks a lot
wormwood

2

I’ve never used Kompozer, so I downloaded a copy to try. I’m using the Linux version, which may be slightly different to the Windows version.

If you go to Edit>Preferences>Advanced there is a dialogue allowing you to choose the doctype. If I set that to HTML4 Transitional (see screenshot), it adds the full doctype declaration to the page. However, if I then decide I want to change the doctype, it seems determined not to let me, nor will it let me edit that line in the Source view. It appears that you have to set the doctype, then open a new page for that doctype to apply; you can’t alter an existing page.

Check your settings to make sure you have HTML4 Transitional selected, then try opening a new document and see if the full doctype declaration is there. If so, you could then copy and paste your entire page (apart from the partial doctype) into the new document, which will hopefully save correctly with the full declaration. If that works, you can repeat it for all your pages. If it doesn’t, I think you’ll be stuck with having to change the doctype in WordPad every time you edit it in Kompozer, because Kompozer seems to be set to disallow doctype changes.

Hope that makes sense!

3

Thanks, Technobear. The text editor (WordPad) seems to do the trick. However, I’m confused. Why can’t I edit the source code in Kompozer? It seems like that is what it is made for. I did a search online and the source said Kompozer does not (seem to) support that doctype. Is that the problem? Also, I’m a bit confused when you say “You’ll probably have to go through the same performance after every time you edit the page in Kompozer, but it’s one way round the problem.” Can you provide a bit more about that? Does that mean that if I edit some code in Kompozer the doctype will revert back to the old version? Is there any chance that the server side code can be edited (ipage)?

thanks a million
wormwood

4

Try opening your html page in a text editor, rather than Kompozer, and do the copy and paste bit in that. You’ll probably have to go through the same performance after every time you edit the page in Kompozer, but it’s one way round the problem.

5

Thank you Dr. John. You are dealing with in idiot - I tried copying and pasting your recommended doctype opening and editing the first line in Kompozer (opened source code). I paste it in, save it, then reopen it and the old doctype shows up. It won’t accept my copy and paste. Thanks again

wormwood

6

You’ve got half a doctype declaration and are triggering quirks mode in IE
use this more complete doctype instead
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd”>

7

Without seeing the problem, it’s pretty difficult to second-guess what’s up. If you want to post a link to the page, we’ll see if we can figure out what’s going wrong.

8

Thanks for the help. the website is vistaclara.org. It is password protected. User name is “homeowner” and password is “vcvhoa”. I’ll change these after this problem is fixed.

I appreciate any help you can provide

wormwood

9

Not to be insulting, but are you restricted to using Kompozer? It’s an antiquated program that should be jettisoned, though I understand that there’s a current version that may be more up-to-date. Still, it’s a WYSIWYG program, which is inherently troublesome no matter how current.

10

As I mentioned before, and Stevie D also pointed out, styling should be done separately. So the “correct” way is to use a style sheet to control your layout and spacing. Unfortunately, Kompozer doesn’t produce a separate style sheet, so it’s a case of doing the best you can with what you’ve got. It’s also using a table for layout purposes, which, as Stevie D says, is incorrect usage. Whatever kind of layout you’re using, trying to control spacing using the spacebar is unlikely to work. In this case, the problem seems to be compounded by having a mixture of different fonts and sizes in the lists.

I gather this page is still a work in progress, so can you explain what the finished version will contain? Are the first four items (Covenants, By Laws, Articles of Incorporation, Development Plan) going to be links to single documents, or headings for a list of document, as with the AGM Minutes and Policy Letters? It will be easier to sort out the layout if we know what you want to achieve.

11

I know the code is awful. As I’ve already pointed out, I’ve done the best I could to do a quick edit of the existing code to solve the OP’s alignment problem. If the question had asked how to covert the site from an antiquated table layout with in-line styling to standards-compliant, accessible HTML and CSS, then my answer would have been quite different. Please feel free to suggest a better solution that doesn’t involve re-writing the whole site from scratch. I would be interested to see it. :slight_smile:

12

Woah … for a moment there I thought you were giving an example of bad code … but it looks like you’re actually seriously recommending that :eek:

Sorry, but that code is absolutely awful.

  1. It isn’t tabular data, so you shouldn’t be using a table.
  2. Never set colspan or rowspan to 1, it’s just a waste of 12 characters. It’s 1 by default.
  3. Loads of inline CSS shouldn’t be there.
  4. Triple nested <big> elements … what is this, 1993 or something? No way José.
  5. Times New Roman … again, what is this, 1993 or something?

I’m not saying that’s everything that’s wrong with it, that’s just what I found in the time it took me to get bored …

13

wow - that doesn’t sound good. Is it something I did?

14

I’ve just tried to have another look at your site, but all I’m getting is a 403 Forbidden error message.

15

Many thanks, Technobear. I will do as you suggest in Kompozer (I found the doctype stuff under tools vice edit but I made the change and it appeared in the source code of the new document. Great help -
Two final questions (I hope). While the wrap problem went away on my wife’s computer (she was using IE and I use Firefox which explains why she had the wrap problem), I still have an alignment problem when viewing a page on her computer. Our “contact us” page has pictures of Board officers with the title of the position above the picture and contact information below the picture. In essence, we have four columns of information. On my computer the information with the pictures align vertically but on my wife’s computer they do not. The only way I know to create the vertical alignment in Kompozer is by using the space bar. I don’t know if/how tabs can be set. In any event, is that what is causing the misalignment and how can that be corrected? Finally, my web pages don’t center on the screen - they left justify. Can that be fixed. Many, many thanks. Wormwood

16

Wow, Technobear - that seems like a ton of work. Thanks - it really looks great! I had to change a little of the reference code because two of the pictures didn’t populate (mine and the Treasurer). It’s like it had too many numbers in the picture file. My last remaining problem seems to be similar alignment issues. In the govdoc files they all look fine in FireFox but in IE, one of the policy letters doesn’t align. Any suggestions? Is there a correct way to space items on a webpage that I’m not doing?

Again, many thanks for your help and support.

17

I’ve been looking again at the version I downloaded to test (version 0.8b3). It does have a facility to create a separate style sheet, and even to create in-line styles and then export them to an external sheet. However, it doesn’t seem to me to be very intuitive for a beginner - you have to know that you need to create CSS rules in order to do so, if that makes sense. Styling done through the WYSIWIG editor produces code like that above, with multiple nested <big> and <small> tags to control size, and in-line styles on everything. These styles can’t be exported to an external sheet, as far as I can see.

18

The recommended method to create a Web site is to use HTML to mark up your document, and a separate CSS (Cascading Style Sheets) document to add the styling information. You can then use margins, padding, etc. to control layout and positioning. Unfortunately, most (if not all) WYSIWYG programmes combine the two and generally produce far more code than is strictly necessary. I was looking for a simple solution based on what you already have.

Go to the source for that page and delete the entire row with the Board officers, from the <tr> tag to the </tr> tag, then replace it with this:

<tr style="font-family: Times New Roman;">
<td colspan="1" rowspan="1" style="text-align: center; background-color: rgb(235, 235, 235);">
<big><big><big>President</big></big></big><br>
<img src="Ben%2520Borth.jpg" style="width: 168px; height: 211px;" alt="pres"><br>
<big><big>Ben Borth</big></big><br>
<a href="mailto:benborth@q.com">benborth@q.com</a><br>
 Phone: &nbsp;481-6853
</td>
<td colspan="1" rowspan="1" style="text-align: center; background-color: rgb(235, 235, 235);">
<big><big><big>Vice President</big></big></big><br>
<img style="width: 114px; height: 217px;" alt="mary jo" src="MaryJo.jpg"><br>
<big><big>Mary Jo Giudice</big></big><br>
<a href="mailto:majogi@me.com">majogi@q.com</a><br>
Phone: &nbsp;488-2485</td>
<td colspan="1" rowspan="1" style="text-align: center; background-color: rgb(235, 235, 235);">
<big><big><big>Secretary</big></big></big><br>
<img src="placeholder.gif" style="width: 156px; height: 213px;" alt="pres"><br>
<big><big>Peter Krasikov</big></big><br>
<a href="mailto:krazmandu@msn.com">krazmandu@msn.com</a><br>
Phone: &nbsp;488-0551</td>
<td colspan="1" rowspan="1" style="text-align: center; background-color: rgb(235, 235, 235);">
<big><big><big>Treasurer</big></big></big><br>
<img src="Betsy%2520Grovenburg.jpg" style="width: 156px; height: 213px;" alt="vp"><br>
<big><big>Betsy Grovenburg</big></big><br>
<a href="mailto:bmgroven@gmail.com">bmgroven@gmail.com</a><br>
Phone: &nbsp;488-4484</td>
</tr>

You will then need to go to the other three <td> tags in your document (two before the replaced section, one after) and where you have colspan=“1”, replace it with colspan=“4”.

What I have done is split the row for the officers into four separate cells, one for each officer’s details. Inside each cell, the text and image are centrally aligned and will stay within the correct cell at any text size.

To allow for the missing photo, I made a temporary grey placeholder image, the same colour as the background. Right-click it to save it and use it.

I also changed the links on the second two e-mail addresses to use the mailto: syntax, as I assumed that was what they should be. If that was incorrect, I apologise.

Hope that helps. If anything is not clear, please ask.

I have only been in yours once, many years ago, when my brother married a California Girl. They moved to the US a couple of years back, so we’re hoping to visit them in Connecticut before too long.

19

I was hoping you would know!

What it says is

You don’t have permission to access / on this server.
where / refers to your home directory. Have you made any changes to your password protection? (It’s not offering me any log-in option - just the error message.)

20

Thanks again Technobear - I think the only remaining problem is text alignment with the pictures (although one or two of the documents in the Budget GovDocspages looked out of alignment as well on my wife’s computer). I don’t know how HTML handles the variables associated with displaying web pages (different browsers, different screen resolutions and screen sizes), but generally speaking, I’ve not seen problems at any web pages I’ve visited. So, I’m surprised there isn’t a simple solution out there to manage those variables. In any event, I look forward to your research.

BTW, I enjoyed visiting your fair land on several occasions.

wormwood