MonicaR

Hi Frost Tear Thankyou very much. This is exactly the sort of information I'm looking for. I've got the thing up and running like I promised, so now is the time to switch it about and make it into a website to be proud of, which I can do with help from tekkies like yourself. Cheers Mon

Hi Frost Tear Thankyou for your time I'm interested to know why you consider tables to be a mistake. Please. The colour pink was the only design factor agreed upon by the poets when we had our 5 minute chat about the website. (OK. A NORMAL website design will involve a series of protracted meetings to discuss expectations, etc, but this one didn't. Cyderspace is special.) I've chosen the font colours to make sure that they comply with standards on colour contrast. The fonts I use are chosen because they are designed to be quicker to read. The website is tested in all screen sizes, and I'm satisfied with its appearance. I think that designing websites which have huge margins either side probably saves a lot of trouble, but the resulting narrow screen, standard for loadsawebsites including this one, is SILLY. (That's my opinion, but I'm sure it can be changed. Trust me to go against the flow) It takes longer to test a wide design like mine in the different screen sizes, but I believe that it is well worth the time. I thought that my CSS was perfect. It's passed the w3c validation, as indicated by the icon at the bottom left of each page. W3C The W3C CSS Validation Service W3C CSS Validator results for http://cyderspace.net/ThePoems.htm (CSS level 2.1) Congratulations! No Error Found. This document validates as CSS level 2.1 ! Valid CSS information body.carolecassie { background-color : #ffc0cb; } div.header { padding : 0.2em; background-color : #ff66cc; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); color : rgb(255, 255, 255); font-size : 350%; } table.thr { table-layout : fixed; empty-cells : show; border-collapse : separate; font-size : 1em; background-color : #ffe4e1; border-style : none; z-index : 2; padding : 20px; } table.aut { table-layout : auto; background-color : #ffe4e1; border-style : none; font-size : 1em; z-index : 2; padding : 10px; } img.carolecassie { border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); } table.horizlinks { table-layout : fixed; empty-cells : show; border-collapse : separate; font-size : 1em; background-color : rgb(255, 255, 255); border-style : groove; border-width : thick; border-color : rgb(255, 255, 255); z-index : 2; width : 100%; } p.hor { white-space : nowrap; } td.bot { vertical-align : bottom; } td.top { vertical-align : top; } td.rht { text-align : right; } td.poem { width : 50%; } div.twdlink { background-color : rgb(204, 204, 204); font-size : 0.9em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); width : 9%; float : right; } div.contact { background-color : #ffccff; font-size : 0.9em; border-style : ridge; border-width : thick; border-color : #ff0066; width : 20%; float : right; } div.letter { background-color : #ffffcc; padding : 1em; width : 85%; left : 2em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 20px; margin : 1em; } div.half { background-color : rgb(255, 255, 204); padding : 1em; width : 50%; left : 2em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 20px; margin : 1em; } div.vdrt { background-color : rgb(255, 255, 204); padding : 1em; width : 30%; left : 2em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 20px; margin : 1em; float : right; } div.blu { background-color : #ccffff; padding : 1em; width : 90%; left : 2em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 200%; margin : 1em; text-align : justify; } div.smart { background-color : #ffe4e1; padding : 0.5em; left : 2em; text-indent : 2em; font-family : Arial, Helvetica, sans-serif; color : #8b4513; font-size : 0.75em; z-index : 1; line-height : 200%; margin : 1em; text-align : justify; } div.smallsmart { background-color : #ffe4e1; padding : 0.5em; left : 2em; text-indent : 2em; font-family : Arial, Helvetica, sans-serif; color : #8b4513; font-size : 1em; z-index : 1; line-height : 200%; margin : 1em; text-align : justify; width : 80%; } div.wel { background-color : #fff5ee; padding : 4em; border-style : ridge; border-width : thick; border-color : #ff00ff; text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 200%; margin : 1em; text-align : justify; width : 100%; } div.red { color : red; background-color : #ffffff; } div.smred { color : red; background-color : #ffffff; font-size : 0.7em; } div.address { text-align : right; } div.rht { font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 200%; margin : 1em; text-align : justify; background-color : #ff00ff; border-style : ridge; border-width : thick; border-color : #ff00ff; } span.bold { font-weight : bold; word-spacing : 0; } div.testmonindex { background-color : rgb(255, 255, 204); padding : 1em; width : 90%; left : 2em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); word-spacing : 1.2em; text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 200%; margin-top : 2em; } ol.testmonindex { line-height : 300%; } div.testimonial { background-color : rgb(255, 255, 204); padding : 4em; margin : 1em; border-color : rgb(255, 255, 255); word-spacing : 1.2em; text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 200%; } div.testimonialx { background-color : rgb(153, 204, 153); padding : 4em; margin : 1em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); word-spacing : 1.2em; text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 200%; } img.testimonial { border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); float : right; } div.monica { background-color : rgb(204, 204, 255); color : rgb(0, 0, 0); word-spacing : 1.2em; margin : 2em; padding : 4em; line-height : 125%; font-family : times new roman, times, serif; } img.mon { border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); float : left; } div.bava { background-color : rgb(153, 204, 153); padding : 4em; margin : 1em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); word-spacing : 1.2em; text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 200%; } div.thc { background : rgb(153, 255, 153); font-family : arial, helvetica, sans-serif; margin : 4em; padding : 4em; word-spacing : 1em; line-height : 1.2em; } div.biogs { background-color : rgb(153, 255, 153); padding : 4em; width : 30%; left : 2em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); word-spacing : 1.2em; text-indent : 2em; font-family : times new roman, times, serif; font-size : 1em; line-height : 200%; margin : 4em; z-index : 2; } div.aact { background-color : rgb(255, 255, 255); font-family : arial, helvetica, sans-serif; padding-left : 4em; padding-right : 4em; padding-top : 1em; word-spacing : 1em; line-height : 1.2em; margin-top : -8em; z-index : 1; } div.cen { text-align : center; } ul.a { list-style-type : none; } table.midram { border : 0; padding : 10px; } td.midram { vertical-align : top; } td.size { width : 40%; } table.cel { background-color : transparent; padding : 10px; table-layout : fixed; } div.nit { background-color : #ffffcc; padding : 1em; width : 85%; left : 2em; border-style : ridge; border-width : thick; border-color : rgb(255, 255, 255); font-family : times new roman, times, serif; font-size : 1em; z-index : 1; line-height : 20px; margin : 1em; }

Hi JMC Thankyou for your helpful reply. I'll ask 1&1 about the animated gifs. I can't imagine why they would be illegal... I've acknowledged their source as proscribed by the webhosts. I was just going through and changing the circled c for the word copyright, because IE reproduces it as a little square. Can you please explain why they would be illegal, or point me to a weblink which explains? The pagenames appear across the title bar. The coding for each page is mostly just 3 letters, which was how we were advised to do it, so your advice about that is puzzling. I'll investigate further. Please, what is SEO? I'll check the consistency of the links... you have obviously found some that are inconsistent. Bless you for that too. Thanks for your time. Mon

http://cyderspace.net I've done a 6th of a course with the OU on the principles of web design, and am doing triple toilet (w3c) tutorials before carrying on with the ou course, which I found difficult. That's my web 'expertise' so far. This website was created with the many technophobe poets in mind. It's aim is to take poetry from the claws of academia, and into people's hearts. The internet can do sooohhh much more than just print poems. This website encourages folks to make YouTube videos which I embed next to the poems. It's growing slowly, at a rate with which I can cope. I'm using HTML. I haven't invested in a wysiwyg text editor, so coding the poems is time-consuming, but I don't mind... yet. Please, do you think that the target technophobe audience will find this website easy to negotiate? Have you any suggestions for improvement...don't forget, I only do HTML atmit THANKYOU GOOD PEOPLE Mon xx

Thanks for that Nero. I didn't name the file. it named itself I think. I don't know what a png is but this could be the reason that IE was acting up... IE won't brook any nonsense from wacky beginner web designers like MonicaR Should I change the file name then? What difference would that make please? I really don't understand... I thought that .jpg was just a way of compressing a file, whether it is a photo or a drawing like this. Thankyou for your time

My Mozilla Firefox doesn't mind at all. My IE has this pop up blocker which I continually disable, set to 'allow' but it still comes up with the 'activex control stuff is a threat' alert box, which is then followed by the alert box I've scripted to onload in the header... except just now. nothing happened on the IE. I tested all the browsers, and they were all fine too. I cannot replicate the problem, but I've a nasty feeling that it won't have gone away completely. Thankyou for your time once more Monica

Hi Mr Wonderful Zed Thankyou once again for your time, and your instant response, and your expertise. So I've prob got a malfunctioning IE7. Thanks I'll check it out in http://browsershots.org/

I looked at your coding and was confused by al the divs. Sometimes Firefox will ignore coding cockups which IE will take exception to. Can I suggest that you comment all your div and other / endings so that you know what they are closing? This makes it easier to check through the coding. eg <div class="wra"><!-- wrapper --> blahdeblahstuff </div><!-- wra --> Also, these coding errors showed up on wc3 Validation Output: 9 Errors 1. Error Line 20, Column 67: end tag for "link" omitted, but OMITTAG NO was specified <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> ✉ You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". 2. Info Line 20, Column 1: start tag was here <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 3. Error Line 30, Column 89: required attribute "alt" not specified …tact"><img src="images/envelope.gif" border="0" /> hello@goldenskyfilms.com</a> ✉ The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>. 4. Error Line 21, Column 7: Opening and ending tag mismatch: link line 20 and head </head> ✉ 5. Error Line 28, Column 32: attributes construct error <img src="images/filmsw.png"alt="films" style="position: absolute; top: -35… ✉ 6. Error Line 28, Column 32: Couldn't find end of Start Tag img line 28 <img src="images/filmsw.png"alt="films" style="position: absolute; top: -35… ✉ 7. Error Line 29, Column 29: attributes construct error <img src="images/sun.png"alt="sun" style="position: absolute; top: -93px; r… ✉ 8. Error Line 29, Column 29: Couldn't find end of Start Tag img line 29 <img src="images/sun.png"alt="sun" style="position: absolute; top: -93px; r… ✉ 9. Error Line 46, Column 7: Opening and ending tag mismatch: head line 3 and html </html> ✉ 10. Error Line 46, Column 7: Premature end of data in tag html line 2 </html>

Hi On http://cyderspace.net goto The Poets goto The Pink Poet OK, so it's WACKY WEB DESIGN with bags of horizontal scrolling which gets you nowhere, except stuck in the middle of pink cyderspace,... BUT My Wot No Poems Trog, which I made using Microsoft's Paint, won't display in IE. It's fine in Mozilla Firefox, but IE, after IE's shown a scary warning about the simples javascript alert box that is about to come up, IE just shows the red cross in the top left of an empty white area where the pic should have been. WHY?

Thankyou for that link ZED. I'm a bit nevous of the file it's downloaded... Installer BOTCExe 331 MB I thought BOTs were those horrid little creatures which lurk on the internet ready to pounce on twittish web designers ...

Hi It's a bit difficult to answer your question without seeing the webpage or all the code for the webpage. Text aligns differently in different screen sizes, and if you don't have Mozilla Firefox web developer addon, there are plenty of websites which will do this http://www.yournew.com/resolution_test.cfm If you know the screen size (but don't forget all the ipod users, so you need to test for those too) you can put the text where you want it to go, but again, different browsers will display it differently. You can insert extra spaces into the text. Spaces in html default to a single space, so if you want more, insert some You could experiment with paragraphs too.

Sorry I meant to end the div with </div><!-- let --> Only 3 letters is a good rule to have for the names of your divs. Your css can be used over different websites, so make life easy for yourself

I notice that in your css you haven't coded for the divs; only put a . then the name of the div. In any css, you need to have div.whateverit's called and make it only 3 letters then put a css comment which explains what it is say, if you wanted a parchment section with cleverdick borders to look resemble a letter div.let/*letters from subscribers*/ { background-color: #FFFFCC; padding: 1em; width: 85%; left: 2em; border-style: ridge; border-width: thick; border-color: rgb(255,255,255); text-indent: 2em; font-family: times new roman, times, serif; font-size: 1em; z-index: 1; line-height: 20px; margin: 1em; } Then you'd code: <div class="let"> dear Sir I'm dissgussted sined dissgussted Tunbridge Wells </div><!-- letter from subscriber --> Note that I include an XHTML comment at the end on the div, because the div end can be SUPERconfusing if you don't do this

Hi I'd recommend the Google Captcha, http://googlewebmastercentral.blogspot.com/2010/01/protect-your-site-from-spammers-with.html But this article explains about how even that seeminly powerful tool has been easily compromised http://securitylabs.websense.com/content/Blogs/2919.aspx This seems useful http://www.thecaptcha.com/

First of all, a big THANKYOU to Zed again, for sorting out the links to the Benjamin Zephaniah videos and for this useful link. http://cyderspace.net/beze.htm'>http://iphonetester.com/?url=http://cyderspace.net/beze.htm I have designed my website http://cyderspace.net using tables. I tested it in the small screen by using the small screen rendering on Mozilla Firefox web developer tool. BUT on a mobile phone, all sorts of trix happen. The table for the links to the main pages goes across the top and bottom of the screen. Another vertical table goes from the top of the screen. This has a group of similar links... which are the different poetry anthologies. These tables are unreadable on the mobile phone screen because mobile phones do not, as I thought they would, linearize the page. Oh no. Mobile phones seem to take a vorpal blade to my website, go one! two! one! two! and through and through and snicker-snack. (as Lewis Carroll would have said) HELP

Hi Zed Thankyou so much You have found a fohpar in the latest vid addition and AND ANSWERED MY QUESTION. All I have to do is to put the videos underneath each other and it will work on mobiles. THANKYOU THANKYOU THANKYOU for your time, your expertise, and for being so thorough and finding my pants coding mistake to boot. Have a niceynicey gismo Oh Callooh! Callay! (as Lewis Carroll would say)

Hi http://cyderspace.net The Benjamin Zephaniah page has an index which links to different videos embedded on this page. On the small screen, which I replicate using the Mozilla Firefox web developer addon, the links on the page go to the wrong videos. hmmmyah

Thankyou Zed for checking what happens. IE again. Groan. I'm having such trouble with IE. In Mozilla Firefox, the link goes to the wrong video, but at least it only plays the one. You say it works OK on your mobile. How can it be different? The Benjamin Zephaniah page on my website doesn't work on mobiles consistently. This is a nightmare innit? Husseycoding I'm not sure what you mean about 'overlapping links' so please could you explain? I notice you are a newbie so; to access the coding to any website, you can install Mozilla Firefox and get the web developer addon. It has many useful tools which enable your coding to be validated with w3c, the screen size to be varied, tables outlined, etcetc.

Hi Folks Funny things happen to my fledgling website when folks access it on their mobile phones. http://cyderspace.net My Mozilla Firefox web developer replicates the problems with its 'small screen rendering' One problem at a time... goto The Poets>Benjamin Zephaniah On Benjy's page, you can click Talking Turkeys and you go straight to the video Talking Turkeys BUT in small screen rendering, the link to Talking Turkeys goes to the wrong video Thankyou folks

Thankyou for your kind and well-meaning reply. My websites are just a bit of fun, and they are helping folks too. I am concerned that I can't get the code validated because of the various embedded objects. 1&1, my webhosts, are now liasing with the World Wide Web Consortium to sort out the problems with their icon... an ampersand is coded as & and should be & and there is no alt text for the icon, which makes accessibility of the information a problem for anyone with a sight defect who uses a screen reader. I am very grateful to webdesignerforum for solving my query. I posted in in the corrrect forum, and received an immediate answer... I'd only coded 2 tables as having cells and headings of width 100%... no idea why I did that, but it caused all the problems. Please would you visit my two websites, and tell me if you like them? They are both designed with technophobes in mind. Neither site is commercial, although I hope a few folks will click the Amazon links on cyderspace.net to buy some stuff.. that way I'll be able to afford to keep them in cyberspace. I have been advised that using boxes rather than tables is preferable, so I'm studying the howto of boxes. I could change the site by simply altering the css, I think. The tables work OK now, so maybe I'll keep them. Thanks again for your interest. Mon xx

yeah well, if you've really cocked summat up, and it's unclear wot the hek u have done, and you are ever so busy up to neck in assignments, and the dogs want walking, and folk need feeding, and then someone mentions that your perfect (well, not the html, only the css) website is total balderdash and rubbish and nonsensical driveling nothinkness, and you ask on a website you've only just discovered, and getananswer just like that (but not like that) IT'S WUNDERFUL

width 100% applied to tables and the cells and the headings what a prize Dope-ms iyam Bless you for your help I am soohhh pleased that at last the website is readable... I was only told about it today. I hadn't tested in all browsers. I am going to test in all browsers but it works OK in IE now That explains a lot. I'll fix devon healing hands in a minute too Cheers Wow wow wo what a fantastic reply quick fixed it wonderful Thankyou a million times Mon xx

Hi peeps I hope someone can help me with an instant fix Both my little websites were fine in all browsers, so I made the BIG MISTAKE of adding content and not continuing to test in all browsers Both websites look super dooper and wonderful ... in Firefox but in IE no no no I should go to rehab o dear please can anyone help me? http://cyderspace.net http://devonhealinghands.com

Hi folks, you lovely clever knowledgable and amazing peeps I started the open university wed design modules. I've completed the first 10 credits, but gave up on the next one which was scripting. I tested my 2 little websites in all the browsers and they were fine, so get ready for my BIG MISTAKE I carried on happily adding stuff, and they look luverly in Firefox but some kind soul has just told me how they NOW look in IE and it's awful unreadable hopeless Please can anyone tell me how to fix? I've used CSS and tables http://cyderspace.net http://devonhealinghands.com I tried changing some th in the tables to td (no reason, just did) and IE improved the index page ever so slightly in cyderspace... O hek. o me. o my. odear. HELP Monica xx