SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    web page distortion and wrap

    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. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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">

  5. #5
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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.
    Last edited by TechnoBear; Sep 7, 2011 at 12:45. Reason: Spelling!

  7. #7
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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!

  9. #9
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    I've just tried to have another look at your site, but all I'm getting is a 403 Forbidden error message.

  11. #11
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow - that doesn't sound good. Is it something I did?

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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.)

  13. #13
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Technobear - the only thing I changed was the doctype in each of the pages. The login and password remain unchanged. I just tried accessing the site to make sure it works for me - and it seems to work fine. I sure wish I knew what caused that cuz I need your help!! If there is something you want me to do on my end, please let me know.

    thanks,
    wormwood

  14. #14
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    OK - either it was a temporary glitch, or I was doing something daft, because it's fine now. Sorry I worried you!

    I'm not sure what you mean by your pages don't justify on the screen. I've tried them in three different browsers, and the pages sit centrally. The text within the pages also looks fine to me, apart from the problematic board members, who seem inclined to gather on the left!

    I think the reason your pictures and text align in some browsers and not others is to do with the browser's default font size. Your wife's IE is probably set slightly differently to your own Firefox. (Try using Ctrl + to increase your font size and Ctrl - to decrease it and you'll see what I mean.) I'll have a look at the best way to fix it, but it's getting late here, and I'd probably be better looking at this fresh in the morning. If no-one more knowledgeable solves your problem in the meantime, I'll get back to you then.

  15. #15
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  16. #16
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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:
    Code:
    <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.

    Quote Originally Posted by wormwood View Post
    BTW, I enjoyed visiting your fair land on several occasions.
    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.

  17. #17
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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:
    Code:
    <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>
    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

    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 ...

  19. #19
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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.

  20. #20
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by wormwood View Post
    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?
    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.

  21. #21
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  22. #22
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,207
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •