SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 50 of 50
  1. #26
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Yes, big guy, I'm mindful of it.

    It's important to me to emphasize the value of validation. In this case, that's best accomplished with the transitional doctype. More experienced coders can understand and differentiate between errors that need to be fixed, like stray tags, and those that are less significant. Noobs haven't learned that yet; so they make the page work somehow, and shy away from the uncomplimentary validator. I believe validation should be and is meaningful. "transitional", IN THIS CASE, helps. Otherwise, I'd go strict.

    I'm not pushing horses and carriages. I am picking my lessons, though.

    When the page is finished change the doctype to strict, if preferred, and publish.

    Gotta go. My cat brought me a fuzzy. She wants to play "fetch".

  2. #27
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Another suggestion... change your !DOCTYPE from HTML4 strict to HTML4 transitional.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    The reason is because you are using target="_blank" in your anchors. That attribute is not valid in HTML4 strict.
    Is there really any point in changing "strict" to "transitional" or "loose", just to get a "flawless coding" certificate?
    There may be other reasons to change from "strict" that I am not aware of and have a detremental effect, but at the moment it seems like the tail wagging the dog.

    I know target has been dropped, and will replace it with the accepted alternative when I find it; in the mean time I'll live with the validator's disapproval. I'm hesitant to change to "loose" as it will also let other things slip past, and I probably would not want those things in.
    I do strive for fault free coding, but sometimes you have no choice. The Google+1 button will increase in seo importance over time, but it is not accepted in "strict" coding for some reason; I could drop the "target", but no way I'll drop the Google+1 button.

  3. #28
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Is there really any point in changing "strict" to "transitional" or "loose", just to get a "flawless coding" certificate?
    No.

    A "flawless coding" certificate is not the purpose. The purpose is to reduce the distraction of the target attribute flags and bring more attention to "errors" that could be harmful, such as unmatched tags. It would be counterproductive to employ a "transitional" doctype if errors caused by other deprecated tags for which acceptable css solutions existed.

    Over the years, I have never found an example where a 401 "strict" doctype worked and a "transitional" doctype on the same file producted unexpected results. There are plenty of knowledgable writers on the web who "deprecate" the transitional doctype, but, as I told Ralph, so far I have seen no evidence to substantiate their position. The problem with transitional, as you mentioned, is that it allows deprecated tags to slip into the code. You are astute enough not to allow that to happen. It does not send any browser into quirks mode and produce unexpected effects. That presumption seems to be based on fear (or maybe genuinely antiquated browsers) rather than evidence. If in doubt, change to "strict" before publishing for a "strict" housecleaning. You haven't risked or lost a darned thing.

    Consider it a temporary developmental doctype that serves an arguably useful purpose. If it doesn't work for you, don't waste your time with it. Your call. I use it frequently when the target attribute is found on the page, and absolutely nothing has ever broken, thus my choice.

    The "target" attribute is likewise your choice. You expressed great hesitation about making ANY changes in your style of presentation and programming. I am sensitive to your hesitation and have no desire to push unrequested changes (thus the suggestion to use the transitional doctype). While examining your page, I clicked on a dozen or more of the links and found an equal number of tabs open on my browser (as expected, and each of which had to be closed) and wondered if that really serves the user, but it's not an issue... it's your design choice... so be it.

    The Google button seems pretty clear as "error" flags go. Easy to distinguish from those that beg attention.

    I consider myself something of a secular coder. Labels, mantras, fads leave me cold. Facts are my compass. It is adjusted frequently as I learn more.

    I completed a structural revision of your page on my PC. Unfortunately, it is far more complicated (more layers of html tags) than I had originally envisioned; so it fails the goal of "Easy to Manage". It's very logical, but heavily nested... too different. Will try another approach if you're still interested.

    ------------------------------------------------------------

    This measure addresses your original issue about the caption without considering your future plans.

    Replace your html:
    Code:
    <div class="logo"><img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" 
    style="float: left; margin: .1em 1em 61em 1em;  "><br> CAPTION 
    </div>
    With this:
    Code:
    <div class="logo">
        <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200">
        <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
        <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="140" height="200">
        <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
        <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="240" height="200">
        <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
    </div>
    Replace your css:
    Code:
    .logo {float: right; margin: 1em .1em .1em .1em;}
    With this:
    Code:
    .logo {
        float:right;
        display:table;
        width:100px;         /* must be lte image */
        height:1100px;       /* fixed height; adjust to suit */
        padding-left:20px;   /* adjust space to left of "column" */
        margin:16px 2px 0px;
    }
    .logo img {
        display:block;
        padding-bottom:8px;  /* adjust space between image and caption, here */
        margin:0px auto;
    }
    .logo p {
        font-size:.8em;      /* size of caption */
        line-height:1.32;    /* a good idea, IMHO */
        text-align:justify;  /* style as desired */
        margin:0;            /* another good idea */
    }
    .logo p + img {
        margin-top:25px;     /* space above another image if preceeded by a caption */
    }
    .logo img + img {
        margin-top:50px;     /* space above another image if preceeded by an image without a caption */
    }
    NOTES:

    The extra images in html are for demonstration purposes and are expected to be deleted.

    The images in the floating column auto-center to the width of the widest image as do the captions.

    The height of the div.logo is still fixed at whatever height you choose. pixels are a better unit of measure than ems in this case.

    It is good practice to remove all spaces from the name of images. Use dashes, underscores, pluses or run the words together instead. (eg: GSR GIF 200.gif should be GSR-GIF-200.gif or thereabouts.)

    Always try before you buy... (test thoroughly).

  4. #29
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Deprecated elements and attributes were done so for a good reason many of them to do with semantics; separating structure (markup) from presentation (style sheets), e.g. "Separation of Concerns", Content (HTML), Presentational (CSS) and Behaviour (JavaScript) - spawning windows is behaviour. Plus accessibly related issues. APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE, and U (all deprecated).

    An advantage of applying none deprecated markup can be interoperability. Misusing the target _blank solely for spawning a 'popup' style window can become an accessibility and usability issue since it breaks the back button, etc. If you absolutely must open a link in a new window (or tab), explicitly warn the user with a clear indication that the page will open in a different window.

    Though obviously you are supposed to use scripts if you want to spawn a new window not related to a frame and that is why Strict doesn't use it. So it's best to use unobtrusive JavaScript for the new window. Everything client side is under the control of the visitors to the site.

    The 'target' attribute (when applied to an anchor) can be used in any Transitional document and typically is supposed to be associated with a Frameset hence why is has never been deprecated for Transitional documents.

    Essentially the 'target' attribute is used with frames to specify in which frame the link should be rendered obviously you can have target on more elements than the anchor; _blank renders the link in a new, unnamed window.

    Why historically people got upset about "target" attribute disappearing from Strict onwards is because it could also be referenced via scripting languages. In either case the anchor target was specifically designed for the Frameset rather than Transitional.

    The user is a blackbox, if you use _blank for the sake of spawning then the 'web author' is essentially 'dictating' that the user will have to view the new page somewhere else. Leaving no direct means of getting back or focus or indication the new window has opened for that matter.

    Looking at SPF links, I'd agree that the forum has members that login, in which case they may want to have more than one page instance open. Therefore if you wanted external site links to be opening in a 'new instance' then you could alter the browser configuration file to allow that or use client-side script. Thus those both user groups are catered for, i.e. user-agents with or without JS. Therefore the web author would allow the 'user freedom' instead of restricting user freedom and imposing the author's own idea onto the visitor.

    Going onto a tangent: Flock mentality? Allow the site to dictate their actions and thus many 'mindless comply' and resign themselves to a new window (or tab) spawning as 'normal' behaviour. Because they cannot; or do not know how to do otherwise; or are happy being oblivious; or don't think for themselves.

    I assume in essence what is being asked; is why would something as perverse as _blank have to be used when obviously JS is the appropriate tool? Thus this mystic figure of 5% sometimes touted (non JS enabled browsers) is likely to be the people that would prefer not to see a new instance being spawned by default. Thus those people can make up their own minds of how to open a new page. What is worse; when there isn't indication that the link on many sites will attempt such a feat.

    I don't think anyone is arguing that in some instances a new window would be good; it's more the case of how the author writes the method or (informs or doesn't) the user that the link has been designed to open in such a way.

  5. #30
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    benbob, are these images arranged in a manner that appeals to you, or do they miss the mark?

    images.jpg

  6. #31
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    benbob, are these images arranged in a manner that appeals to you, or do they miss the mark?

    images.jpg
    It is more or less what I have in mind. Precise positioning, size etc to be determined by my (lack of) taste and judgement as to what would be a proportional and relevant image to support the text.
    Apart from a rare occasion, I would not have 2 images juxtaposed, but one flanking the text on either side. For example a section on burners would look like:

    h3 burner repairs for white boilers /h3
    image on left . . . text
    . . . . . . . . . . . . about
    . . . . . . . . . . . . burner
    . . . . . . . . . . . . repairs . . image on right

    h4 burner flame corrections /h4


    The dots are put in to simulate the "column of text"; spaces alone are not displayed on the forum.

  7. #32
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    ...The "target" attribute is likewise your choice. You expressed great hesitation about making ANY changes in your style of presentation and programming....
    That came across wronly then. I am hesitant in OVERALL changes e.g. "classic" 2-3 columb or tables, nav bars and so on. On the other hand, I am very keen on any changes/additions that either improve the looks of my site ( in my opinion or based on feedback from users ) or style alterations that make the site more flexible, more easily adaptable/changeable, or in any other way actually help performance.

    Quote Originally Posted by ronpat View Post
    ...I am sensitive to your hesitation and have no desire to push unrequested changes (thus the suggestion to use the transitional doctype). While examining your page, I clicked on a dozen or more of the links and found an equal number of tabs open on my browser (as expected, and each of which had to be closed) and wondered if that really serves the user, but it's not an issue... it's your design choice... so be it...
    My site is typically used by owners of a particular boiler who will got to the particular page about that boiler if there is one or general page if there isn't. From there they may want to visit a page dedicated to a particular problem that is common for many boilers, read that and then kill that page to go back to where they were. Due to the nature of the type of visitor, it is unlikely they would be interested in more than 3 or 4 pages; the scenario with a dozen open tabs will simply not happen. Added to that, is the rather large proportion of utterly a-technical people that have absolutely no idea you can do other things than just click on a link and back-track to the previous page. The use of "target" is something I find most helpful, deprecated or not

    Quote Originally Posted by ronpat View Post
    ... The Google button seems pretty clear as "error" flags go. Easy to distinguish from those that beg attention.
    I consider myself something of a secular coder. Labels, mantras, fads leave me cold. Facts are my compass. It is adjusted frequently as I learn more....
    Nevertheless, I would much prefer it if I could make it so that the "Google+" error would not flag up. If I undertand your statements on this correctly, you don't particularly care wheter a method is "approved" by the coding community or "frowned upon", as long as it works flawlessly.
    That would be exactly my attitude; pragmatic is the word for me, not approval.

    Quote Originally Posted by ronpat View Post
    ... I completed a structural revision of your page on my PC. Unfortunately, it is far more complicated (more layers of html tags) than I had originally envisioned; so it fails the goal of "Easy to Manage". It's very logical, but heavily nested... too different. Will try another approach if you're still interested....
    Yes, please, pretty please, sugar on top; I am very interested indeed.
    I've gone through several online courses and a dozen or so books on HTML and/or CSS, and found precious little new after the first 3 or 4. Evidently, there is still much I need to learn past the basic implementation, but I am at a total loss what to do and where to go to accomplish this.
    I count myself very lucky to have found this forum and to be able to get advice from accomplished professionals. At the same time, I find it utterly frustrating that I have to take this route, rather than being able to learn what I need and not having to bother others.

  8. #33
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    ...
    This measure addresses your original issue about the caption without considering your future plans.

    Replace your html:
    Code:
    <div class="logo"><img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" 
    style="float: left; margin: .1em 1em 61em 1em;  "><br> CAPTION 
    </div>
    With this:
    Code:
    <div class="logo">
        <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200">
        <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
        <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="140" height="200">
        <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
        <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="240" height="200">
        <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
    </div>
    Replace your css:
    Code:
    .logo {float: right; margin: 1em .1em .1em .1em;}
    With this:
    Code:
    .logo {
        float:right;
        display:table;
        width:100px;         /* must be lte image */
        height:1100px;       /* fixed height; adjust to suit */
        padding-left:20px;   /* adjust space to left of "column" */
        margin:16px 2px 0px;
    }
    .logo img {
        display:block;
        padding-bottom:8px;  /* adjust space between image and caption, here */
        margin:0px auto;
    }
    .logo p {
        font-size:.8em;      /* size of caption */
        line-height:1.32;    /* a good idea, IMHO */
        text-align:justify;  /* style as desired */
        margin:0;            /* another good idea */
    }
    .logo p + img {
        margin-top:25px;     /* space above another image if preceeded by a caption */
    }
    .logo img + img {
        margin-top:50px;     /* space above another image if preceeded by an image without a caption */
    }
    NOTES:

    The extra images in html are for demonstration purposes and are expected to be deleted.

    The images in the floating column auto-center to the width of the widest image as do the captions.

    The height of the div.logo is still fixed at whatever height you choose. pixels are a better unit of measure than ems in this case.

    It is good practice to remove all spaces from the name of images. Use dashes, underscores, pluses or run the words together instead. (eg: GSR GIF 200.gif should be GSR-GIF-200.gif or thereabouts.)

    Always try before you buy... (test thoroughly).
    Many thanks for this.
    If nothing unforeseen pops up, I'll have the time this weekend to study the code, (try to) understand what it does as well as HOW it does that, and then integrate it in my site if it doesn't raise any conflicts with current coding or future plans. There are still a variety of items in CSS that I can sort of implement, but faill to grasp the structure/concept of. I need to read about these things, play about with them, and then at some point follows the EUREKA experience. I have an unusual and particular learning style where understanding has little to do with complexity; the "presentation" needs to be suited to my style. If it is, I can absorb amazing amounts of material in a very short time. If it is not, I struggle to understand even very simple concepts.

    Quote Originally Posted by ronpat View Post
    ...It is good practice to remove all spaces from the name of images. Use dashes, underscores, pluses or run the words together instead. (eg: GSR GIF 200.gif should be GSR-GIF-200.gif or thereabouts.)..
    Why is that?
    I thought with the arrival of 32-bit operating systems, the old limitations had become redundant.

  9. #34
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    ... Though obviously you are supposed to use scripts if you want to spawn a new window not related to a frame and that is why Strict doesn't use it. So it's best to use unobtrusive JavaScript for the new window......I assume in essence what is being asked; is why would something as perverse as _blank have to be used when obviously JS is the appropriate tool? .....
    Why?
    Why is JS "better"? How is JS better?
    Why is _blank perverse?
    Why is JS the "obvious" tool? To me, using _blank is a damn site quicker and easier than writing a JS routine, not to mention the fact that it will work 100% of the time which can not be said for JS.
    Apart from that, what is the difference between usingn JS to automatically open a new window/tab and _blank doing exactly the same?

  10. #35
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Why is that?
    I thought with the arrival of 32-bit operating systems, the old limitations had become redundant.
    8-bit, 16-bit, 32-bit, 64-bit has nothing to do with the issue.

    The simple rule is that a URI (internet path) cannot contain spaces. Browsers delightfully fill in those spaces with %20 or plus marks IF the URI is surrounded by quote marks. If no quote marks, the browser stops reading at the first space. If that space occurs before the end of the intended URI, it fails. The easiest (best) practice, is to habitually eliminate spaces within all parts of a URI which typically means no spaces within image names and directory names (the full path).

    You can demonstrate the effect of spaces in image names and URIs on your PC by accessing a page which contains spaces in image names. In Firefox, right-click in the browser window on a web page and select "Save Page As..."; in IE, click the "File" menu and select "Save As...". Then save as a "Complete Web Page". (NOTE: this is NOT "View Page Source" then "Save As"). On a PC, you will find that the files associated with the web page have been placed in an associated folder whose name ends in "_files". Images in that folder have been renamed with %20 where there were spaces. The HTML file (the web page) also shows %20 where there were spaces in the URI.

    That's just the way PCs, browsers, and servers work.


    Back to the layout of your web page, a couple of questions, please.......

    You are now describing that you would put images along both edges of any section in the page. That's different than floating the image boxes to the right column (which is what the screenshot demonstrates).

    This is important. Note on the latest screenshot that the text flows beneath the images. Is that behavior acceptable or do you want the image/s and caption in a "column/s" from which the other text is excluded?



    ...integrate it in my site if it doesn't raise any conflicts with current coding or future plans.
    It shouldn't cause any problems with present coding but it DOES NOT support your future plans. It is the "bandaid" measure you requested in your first post in this thread. It uses a similar *fixed length* container for the images which means that it does not change heights when the width of the browser window changes, and it does not make easy the positioning of additional images. Although probably useful to study, it is not really a step forward, in my opinion.

    Future plans are still being discovered but we're getting closer <smile>.

  11. #36
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Oops, I made a mistake. The previous screenshot does NOT show text flowing beneath floated images. Sorry. This screenshot does because the window is narrow. Nothing different otherwise.

    floating_images.jpg

  12. #37
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    This page still needs a bit more work, but apart from being longer and better organised, it is fairly close to the desired endresult.
    example page

    Depending on availability of graphics, it will have an image on one side, or on both sides. If a large image is required for whatever reason, I would just have the one big photo (left or right).
    I couldn't quite see the details of your screenshot, but the idea is to float the images, but inside the "div" that wraps the "headline" of each section plus the text in that section, but not beyond. That may be lining up with the bottom OR the top of that text (haven't learned yet how to line up with the bottom of the text between two h-tags, but that is a different story.

    The main issue for the moment is to be able to position the images exactly where I want, WITH a caption directly under or above it.
    The top part (logo plus first two images) is not quite to my liking yet, but can live with it for the moment. Serious lack of time during busiest period of the year prevents me from being too picky.
    The next two sections, "back boiler ventilation repair" and "repairing backboiler lack of ventilation" are both acceptable variations. In some cases I will want the body text to wrap around the image, in others not.
    The final version of that page will be a "neater" top section followed by 5 sections with an image on either side ( or one big one, either left or right), and maybe some images sprinkled around at the bottom section.

    The bottom section will be redesigned at some point, when I have had inspiration/Eureka moment about what to do with it; not a priority for now.

  13. #38
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Oops, I made a mistake. The previous screenshot does NOT show text flowing beneath floated images. Sorry. This screenshot does because the window is narrow. Nothing different otherwise.



    floating_images.jpg
    That looks pretty much like what I have in mind. Most of the images I use will be relativly smaller than in the screenshot, ideally on both sides of the text if I've got enough graphic material, and "never" (never say never, but still) 2 directly next to each other.
    Sometimes text will wrap like in the secon section, sometimes it won't like in the top section.

    It also depends what else I will discover on my journey mastering "fluid design", plus adapting for mobile/tablet platforms. Compatibility/userfrienlyness for the latter is a high priority at the moment as it gives me at least two advantages over most of my competition; not only do most sites not display flawlessly on small screens, Google ranks my site better than those of my competitors on smartphones and other mobile devices.

  14. #39
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You could have added the Google proprietary markup with JavaScript (and the Validator would have skipped it for all it's worth else used extensibility) and since it requires JS to display and work it would be no hardship. I didn't see it [G+] because I usually surf with JavaScript disabled.

    It has proved quite useful this year having no JS when on some sites I've entered that have had encrypted scripts that were designed by some miscreants, which didn't in the slightest, affect me.


    Quote Originally Posted by benbob
    Why?
    Like I said, "Separation of Concerns" and accessibly and usability issues. The target attribute (for this use) doesn't fit in with this paradigm. If I had hardcoded a FONT text 'color' as black and background using 'bgcolor' black; you'll see the text yes, but I doubt you'd be able to read it... Now, instead if I were apply those colours with CSS I'd be separating structure from presentation. Thus all I would have to do is disable CSS or use user-stylesheets and problem solved.

    Quote Originally Posted by benbob
    Why is [this use of] _blank perverse?
    I presume you know the basic differences between; HTML, CSS and JavaScript? In which case you should be able to appreciate markup is static and scripts are dynamic. When I said unobtrusive JavaScript is more apt, is because spawning a new unnamed window is behaviour not markup. In the absence of JS the link will completely function like a normal 'standard' hyperlink and allow you to navigate backwards and forwards - misusing _blank won't.

    Quote Originally Posted by benbob
    Why is JS the "obvious" tool? To me, using _blank is a damn site quicker and easier than writing a JS routine, not to mention the fact that it will work 100% of the time which cannot be said for JS.
    Easier and quicker, etc., yes, I cannot fault that... just like wiring a 3-pin plug and choosing whichever colour wire you fancy to attach to each pin rather than bothering; to put brown to live and blue to neutral pin, etc.

    Actually _blank doesn't work 100% in all modern browsers for all it matters. Quite rightly the JS won't always work (open a popup) and like I said that is up to the user and user-agent. You are focusing too hard on the web author's point of view not the 'visitors' wishes or their choice.

    If you use _blank you've; just broken my back button, disorientated me, forced more CPU cycles and gained very little, possibly even annoyed me and maybe lost me as a customer? Forcing new windows to open without warning is disrespectful and hostile. In most cases it will be counter-productive as an end result.

    You do not know whether the user requires AT either or how they perceive the web through their user agent it may be vastly different to mine or your experience of browsing.

    The user 'never requested' this "new window" spawned by the target attribute. Note that not using the target allows the user to decide whether a new window should be opened or not.

    Quote Originally Posted by benbob
    Apart from that, what is the difference between using JS to automatically open a new window/tab and _blank doing exactly the same?
    They aren't the same thing and I've already covered this above and they don't have the same function.

    Quote Originally Posted by Robert
    I don't think anyone is arguing that in some instances a new window would be good; it's more the case of how the author writes the method or (informs or doesn't) the user that the link has been designed to open in such a way.
    Example: Buy me and Buy me without inspecting these two links you don't know what, how or where they'll take you to?

    Note with the former you have no flipping choice, of a window spawning (or for that matter no obvious indication). In other-words it has failed twice - and created a greyed-out back button and no clear way to return. The second would be considered the unobtrusive JS method when 'block popup windows' is "desired" and in effect by the user if the damn forum didn't add additional markup.

  15. #40
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Therefore point proved the forum mutilated the hyperlink in the second example adding target _blank and forced a window to be spawned just to link to a post higher up the page. Argh! So just use your imagination (second hyperlink) and assume it was coded: <a href="somelink">...</a> as would have been the case if unobtrusive JavaScript had have been used.

  16. #41
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    benbob,

    Sorry for the delay getting back with you. Power has been off in parts of the East coast of the US since Oct 29 when hurricane Sandy blew in. Mine was off for 9 days. Others are still out.


    I used the two pages that you posted and rewrote them using a "modular" or "boxy" approach that makes them easy to replicate, grow, or modify (in my opinion). If this approach appeals to you, it should be possible to apply these styles to your other pages easily enough. There are lots of explanatory comments.

    I did not tinker with the text except to give it a tad more vertical space.

    The image boxes are entirely new. You'll have to decide if the two-classname strategy works for you or not.

    There are no inline styles. Everything is styled on the css sheet.

    Here we go.....


    1. The outermost div is .wrapper (per your design). It applies some padding around the page and can apply a minimum page width, if desired. Useful for media queries. It also applies {margin:0 auto} to keep the page centered in the browser window should you decide to apply a max page width.

    2. The primary content divs are: topsection, midsection, and trailer. The primary content classes clear floats and are easily recognized section delineators in html.

    3. Most of the content is within <div class="midsection">s.

    4. <h1>, <h2>, <h3> and <h6> are the only <h#> tags used. <h6> is used as a "spacer" that is the same height as the <h3> header.

    5. As I wrote the page, the <h#> tags are outside of (preceed) the section tags. They could just as easily be the first item inside each section. Your choice. It makes no difference in the rendering of the page.

    6. Added a pixel or two of line height and a little space between paragraphs for readability.

    7. Most <br> tags have been replaced by <p> tags, and a margin-top applied to succeeding paragraphs.

    8. Where there were two <br><br> tags, I added another class, .doublespace, to the section div, <div class="midsection doublespace">, and thereby targeted the spacing between the <p> tags in that section ("Repairing backboiler lack of ventilation") with an increased margin-top that approximates your original page.

    9. When hovered, the "How To Avoid..." and "Boiler Repair Blog" links do not cause the text below to jump down as they used to as long as the browser window is at least 1100px wide.

    10. The contact information, ".phone", has been coded so it stays together better when the window narrows.

    11. The Google button does not show up on my PC. Presumably it works if the page is hosted on a server.

    12.0. The imagebox div requires some explanation. It was simple until the menu of layout options grew. Now, it has a rule: each <div class="imagebox ..."> must have two classnames, the second classname tells it where to float.

    12.1. The html for an image container would be one of these:
    <div class="imagebox floatright">
    <div class="imagebox floatleft">
    <div class="imagebox edgeright">
    <div class="imagebox edgeleft">

    12.2. For a simple layout (one image left or right), the choice of "float[left|right]" or "edge[left|right]" doesn't matter. The difference is that "edge[left|right]" also clears the same direction as the float which, when applied to a second imagebox, will put it in a second row under the first, whereas "float[left|right]" would put the second imagebox beside the first. That's it. Examples are shown in the trailer section of the "boiler-broken" demo page. Try it; you'll get the idea.

    12.3. If perchance you want two images snugly side-by-side and sharing the same caption, just put both images in one imagebox (example shown in the trailer section).

    12.4. Captions can appear over or under an image depending on whether the text preceeds or follows the image in html within the imagebox.

    13. I also used a second classname to apply unique styling to three of the midsections. Made it easy to apply special styling to those particular sections, especially their paragraphs.

    14. I recommend changing the name of all images so they contains no spaces. It's a URI thing. Without quotes around it, the URI would fail (just like the name of your home page has no spaces).

    15. Yes, I went a little crazy with the images and captions to demonstrate layout possibilities. Delete, delete, delete. <smile>.

    16. There are 10 lines in css with the comment /* LAYOUT TESTING */. These lines can be deleted to tidy up the sheet a bit or can be preserved for future use.


    After evaluating this stuff for a while, and if you have time, critical feedback would be appreciated.

    Cheers

    Code:
    /* FileName:  boilerrepair1.css */
    html,body {
        padding:0px;
        margin:0px;
    }
    body {
        background-color:#fef200;
        color:#000;
    }
    
    /* HEADER TAGS */
    h1,h2,h3,h4,h5,h6 {
    /*    background-color:#fbf;       /* LAYOUT TESTING */
        font-family:verdana,sans-serif;
        color:#000080;             /* navy */
        text-align:center;
        padding:0;
        margin:0;
    }
    h1 {
        font-size:2em;
        padding:.6em 0 .7em;
    }
    h2,h3,h4,h5 {
        padding:.75em 0;
    }
    h2 {
        font-size:1.75em;
    }
    h3,h4,h5 {
        font-size:1.5em;
    }
    h6 {
        height:66px;               /* a spacer.  approximately the height of the h3 tags on this page */
    }
    
    /* PARAGRAPH DEFAULTS */
    p {
        color:#000;
        font-style:normal;
        font-size:.8em;
        line-height:135%;
        font-family:verdana,arial,helvetica,geneva;
        text-align:justify;
        padding:0;
        margin:.6em 0;
    }
    .imagebox + p {
        margin-top:0;
    }
    .doublespace > p + p {
        margin-top:1.2em;
    }
    
    /* PRIMARY CONTAINERS */
    #wrapper {
    /*    min-width:578px;           /* 578px + h-padding = approx 610px;  615px is another value worth considering;  or no min-width at all. */
        padding:1px 2%;            /* padding around the edge of the page. */
        margin:0px auto;
    }
    .topsection,
    .midsection,
    .trailer {
    /*    outline:2px solid #fff;      /* LAYOUT TESTING */
        overflow:hidden;
    }
    .trailer {
        padding:66px 0px 120px;    /* padding-bottom applies lots of space below the last line of text */
    }
    
    /* NAVIGATION MENU BUTTONS */
    .nav {
    /*    background-color:#aaf;       /* LAYOUT TESTING */
        list-style-type:none;
        float:left;
        padding:2px 0px 6px;
        margin:0px;
    }
    .nav li {
    /*    background-color:#faf;       /* LAYOUT TESTING */
        width:160px;
        font-size:.9em;
        line-height:4em;
        margin:0px 0px 6px 10px;   /* margin-left sets the distance from the left edge of the page */
    }
    .nav a,
    a.button {
        border:1px solid #555;
        background:#eee;
        color:#000;
        font-family:sans-serif;
        text-align:center;
        text-decoration:none;
        text-shadow:1px 1px 0 #ccc;
        -moz-border-radius:1em;
        -webkit-border-radius:1em;
        -o-border-radius:1em;
        border-radius:1em;
        -webkit-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa;
        -moz-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa;
        box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff,  0 0 2px 1px #aaa;
        padding:1em;
        margin:0;
    }
    
    /* CUSTOMIZED paragraph */
    p.avoid {
    /*    background-color:#fbf;       /* LAYOUT TESTING */
        font-size:1em;
        line-height:150%;
        min-height:1.7em;          /* prevents the changing line height from causing the text below this paragraph to "jump" */
    }
    
    /* CUSTOMIZED MIDSECTIONS via an added classname; some paragraphs are targeted with the adjacent sibling selector "+" */
    .readblog p {                  /* targets all paragraphs in section .readblog */
        font-size:2em;
        line-height:100%;
        text-align:center;
        min-height:1em;
        padding:0px;
        padding-top:.5em;
        margin:0px;
    }
    .readblog p + p {              /* "+" targets all paragraphs after the first paragraph in this section */
        min-height:2em;            /* prevents the changing line height from causing the text below this section to "jump" */
        font-size:3em;
        line-height:150%;
    }
        /* The adjacent sibling selector is not always practical.  Individual paragraph classnames may be more practical. */
    .googlebutton p {              /* targets all paragraphs in section .googlebutton */
        color:#000;
        text-align:center;
        font-size:2em;
        line-height:130%;
        padding:0px;
        margin:0px;
    }
    .googlebutton .redbutton {     /* targets the paragraph with the classname .redbutton */
        color:#f00;
        font-size:4em;
        line-height:130%;
        padding-bottom:6px;
    }
    
    /* TRAILER SECTION PARAGRAPH */
    .trailer p {
        font-size:.7em;
        line-height:170%;
        padding:0px;
    }
    
    /* TELEPHONE CONTACT paragraphs.  Contact lines float left in the topsection and are centered in the midsection. */
    .phone {
    /*    outline:1px solid #090;      /* LAYOUT TESTING */
        display:table;
        margin:0 auto;
    }
    .phone p {
    /*    background-color:#ddd;       /* LAYOUT TESTING */
        color:#f00;
        font-weight:800;
        font-style:normal;
        font-size:1.5em;
        text-align:center;         /* text alignment */
    /*    white-space:nowrap;        /* stops contact info lines from wrapping.  If enabled, these lines become the widest object on the page and limit the minimum width of the page. */
        padding:.2em 0 .3em;
        margin:0;
    }
    .topsection .phone {
        margin:0;
    }
    
    /* IMAGE AND CAPTION BOX */
    .imagebox {
    /*    outline:1px solid magenta;   /* LAYOUT TESTING */
        display:table;             /* required for elastic width to contain text. */
        width:60px;                /* an elastic width; auto-expands to accommodate a wider image. */
        white-space:nowrap;        /* (1-of-4) permits two or more images to sit side-by-side in one image_box over the same caption; otherwise, unnecessary */
        padding-bottom:8px;        /* space beneath the image box. */
        margin:0px;
    }
    .imagebox.floatright {
        float:right;
        padding-left:20px;         /* space between the image and the body text */
    }
    .imagebox.floatleft {
        float:left;
        padding-right:20px;        /* space between the image and the body text */
    }
    .imagebox.edgeright {
        clear:right;
        float:right;
        padding-left:20px;         /* space between the image and the body text */
    }
    .imagebox.edgeleft {
        clear:left;
        float:left;
        padding-right:20px;        /* space between the image and the body text */
    }
    .imagebox img {
    /*    outline:1px solid cyan;      /* LAYOUT TESTING */
        display:inline-block;      /* (2-of-4) permits two or more images to sit side-by-side; otherwise, display:block; */
        background-color:#ccc;     /* "missing image" background-color.  optional */
        vertical-align:top;        /* (3-of-4) space for missing image if 2 or more images sit side-by-side; otherwise, unnecessary. */
        margin:6px 0px 5px;        /* tweak the space between the logo and the caption here. */
    }
    .imagebox img.classname {      /* SAMPLE:  If you want a caption to extend wider than a narrow image,  */
        padding:0px 20px;          /*   give the image a classname and apply equal left and right padding. */
    }
    .imagebox p {
    /*    background-color:#eee;       /* LAYOUT TESTING */
        font-size:.825em;
        line-height:125%;
        text-align:left;
        white-space:normal;        /* (4-of-4) permits caption to wrap if .imagebox {white-space:nowrap} exists; otherwise, unnecessary */
        padding:0px;
        margin:0px;
    }
    .imagebox p + img {
        margin-top:6px;
        margin-bottom:5px;
    }
    
    /* ANCHORS */
    a:link,
    a:visited {
        color:blue;
        text-decoration:underline;
    }
    p a:hover {
        font-style:bold;
        font-size:1.6em;
        line-height:75%;
        text-decoration:underline;
    }
    /* MISC */
    .spacer66 {
        padding-top:66px;          /* using a second classname allows one to randomly add space at the top of a div without adding a line of html (the h6 tags) */
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?895775-Caption-not-going-where-I-want-it
    http://www.boiler-breakdown-repair-london.co.uk/boiler-broken.html
      COMMENTS:
      1. h1, h2, h3 and h6 are the only <h#> tags used.  h6 is a "spacer".
      2. I recommend changing the name of all images so they contains no spaces.  It's a URI thing.
         Without quotes around it, the URI would fail (just like the name of your home page has no spaces).
      3. Tested in IE8 and Firefox 16.0.2.
    -->
    <head>
    <title>Broken boiler repair in south east London and Bromley</title>
    <link rel="stylesheet" type="text/css" href="boilerrepair1.css">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="Description" content="broken boiler repair in south east london and Bromley">
    <meta name="Keywords" content="south east london, boiler broken, Bromley, gas">
    <meta name="viewport" content="width=device-width">
    <meta name="geo.region" content="UK">
    <meta name="geo.placename" content="London">
    <meta name="geo.position" content="51.427364;-0.160074">
    <!-- Place this tag in your head or just before your close body tag -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-28748983-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <style type="text/css">
    /* Place any local/temporary css styles here. */
    </style>
    </head>
    <body>
    <div id="wrapper">
        <h1>Is your boiler broken or not?</h1>
        <div class="topsection">
            <ul class="nav">
                <li><a href="index.html" target="_blank">homepage</a></li>
                <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html" target="_blank">waterleaks</a></li>
                <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html" target="_blank">gasleaks</a></li>
                <li><a href="http://www.boiler-breakdown-repair-london.co.uk/south-london-boiler-engineer.html" target="_blank">about me</a></li>
                <li><a href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li>
            </ul>
            <div class="imagebox floatright">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200">
                <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
            </div>
            <p><strong>Broken boiler</strong>, or just a glitch, would you know how to tell?</p>
            <p> It could simply be a matter of relighting the pilot, replacing  a fuse in the spur or plug, or just topping up the pressure.</p>
            <p> All too often, central heating engineers in <strong>Bromley </strong>and
                <strong>south east London</strong> are called out to households that
                have lost heating and/or hot water, only to find the <em>boiler</em>
                is not really <em>broken</em>.</p>
            <p> You can avoid paying for nothing and losing your valuable time waiting for the <em>heating engineer</em> to arrive by carrying out a few simple checks. It helps
                if you are aware of what the most common tricks are that are used to flog unnecessary repairs.</p>
            <p class="avoid"><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-and-central-heating-cons.html" target="_blank">
                How To avoid the most common cons and rip offs</a></p>
            <p> Unless you have money to burn, or are particularly concerned about plumbers' earnings, you may want to check first and see to make sure that there actually is a
                fault. If you have done all you can and you really do need a breakdown specialist who works in <em>South East London</em> and <em>Bromley</em>, call:</p>
            <div class="phone">
                <p>Mon-Fri 08.30-20.30 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0208&nbsp;265&nbsp;8822<br>Emergencies out of hours &nbsp; 0785&nbsp;273&nbsp;6626</p>
            </div>
        </div>
        <h2>Is electricity on or is the boiler broken</h2>
        <div class="midsection">
            <div class="imagebox floatleft">  <!-- DEMO ONLY. DELETE THIS IMAGE BOX. -->
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="240" height="160">
                <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
            </div>
            <p> When you turn the heating on or run the hot tap, and nothing happens, you can easily check the following items. Just
                follow the items below one by one.</p>
            <p> All <em>boilers</em> use electricity, in one form or another. Check if there is a control light on, or maybe you can
                see/hear the fan or the pump. Maybe you have to turn the
                system on and off, flip the switch or change the timer
                selector or turn up the thermostat. Check that the lead is plugged
                in, or the switch at the spur is turned on. If nothing happens when
                you do this, you can change the fuse in the plug or the spur for a
                new one. This must always be a 3 Amp fuse, unless the manual states
                specifically otherwise.</p>
            <p> Electricity, water and copper pipe make for a tricky combination.
                If you are less than totally comfortable with checking or doing even
                minor jobs on it, don't. Ask a friend, relative or a kind neighbour
                to have a quick look for you; anyone who is competent will
                only need one minute to do this.
            </p>
        </div>
        <h3>No gas makes it look like the boiler is broken</h3>
        <div class="midsection">
            <div class="imagebox floatright">  <!-- DEMO ONLY. DELETE THIS IMAGE BOX. -->
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="160" height="200">
                <p>CAPTION - Hey diddle diddle, the cat and the fiddle.</p>
            </div>
            <p> The next requirement is gas.
                Sometimes it can be interrupted, and if you have a gas cooker or a
                gas fire, just turn that one on for a minute to prove there is
                gas.</p>
            <p> If there is no gas, verify that the emergency control valve is
                on. This is the handle on a pipe near the meter. If it is installed
                correctly, it will face in the same direction as the gaspipe when
                open, and a perpendicular position indicates it is shut.</p>
            <p> Some <em>boilers</em> have a pilot light that must be on for it
                to work. Check to see that it is on, and if not relight it safely.
                Different <em>boilers</em> have different ways of doing this; the
                manual will tell you exactly how to relight yours. If it goes out
                occasionally, it does not automatically mean your <em>boiler</em> is
                <em>broken</em>.</p>
            <p> If the meter does work, double check that it has not run out of
                credit. Most if not all of these have a few pound of emergency
                credit that you can activate which should carry over until the next
                day. This is really easy to forget, and sometimes you just use more than you think.</p>
            <p> One of the most common causes of unnecessary callouts in
                <em>Bromley</em> and <em>South East London</em> for
                <em>boilers</em> that are not <em>broken</em>, is the card
                meter. Also known as a key meter and officially called a electronic
                token meter, there are two things to verify. The first is to see
                that the meter is working properly. They are delicate bits of kit
                and can go "tilt" when bumped too hard. In this case you need to
                call the Gas Emergency Service and tell them your meter
                doesn't seem to work. Their number should be on
                a label on or near the meter. You don't have to worry about whether
                or not you should call them. Just call and explain exactly what the
                problem is, and leave it to them to judge what the best line of
                action is. The number for <strong>Bromley </strong>and <strong>south
                east London</strong> is 0800111999.
            </p>
        </div>
        <h3>No pressure is as bad as a broken boiler</h3>
        <div class="midsection">
            <div class="imagebox edgeleft">  <!-- DEMO ONLY. DELETE THIS IMAGE BOX. -->
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="160" height="200">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="240" height="200">
                <p>&lt;div class="imagebox floatleft"&gt;</p>
            </div>
            <p> Most modern <em>boilers</em> have a pressurised system, invariably with a gauge that tells you the
                pressure. If it is very low, between 0 and 0.5, you probably need to
                top it up. The boiler manual will tell you exactly what the pressure
                should be. Most <em>boilers</em> will work fine with a pressure
                between 1 and 1.5, but the only way to be really safe and sure is to
                verify the value in the manual. Always err on the side of caution;
                if you are not sure what you are doing, don't do it.</p>
            <p> If your <em>boiler</em> is of the kind that has a tank to keep the system
                filled, check that it has some water in it. If you see two tanks, it
                will probably be the smaller of the two. It does not have to be
                full, normally about four to six inches is sufficient. If all these
                things are fine, the answer to the question is your <em>boiler
                broken</em>?, is probably yes.
            </p>
        </div>
        <h3>Fast help with a broken boiler</h3>
        <div class="midsection">
            <p>You need a boiler engineer who can repair central heating systems in <em>Bromley</em> or <em>South East London</em>, and can be there soon.</p>
            <div class="phone">
                <p>Mon-Fri 08.30-20.30 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0208&nbsp;265&nbsp;8822<br>Emergencies out of hours &nbsp; 0785&nbsp;273&nbsp;6626</p>
            </div>
            <p> I guarantee results or you don't pay a penny. If you can tell me over the phone exactly what boiler you  have
                so that I can verify parts are available if need be, I won't charge if I can't find the fault.
                Most people like that better than paying money when the plumber leaves,
                and the <strong>boiler</strong> is still <strong>broken</strong>.
            </p>
        </div>
        <h6></h6>  <!-- Read Boiler Blog -->  <!-- the h6 tags are being used as a convenient/consistent spacer between sections -->
        <div class="midsection readblog">
            <p>Read the Boiler Repair Blog for regular tips on saving money.</p>
            <p><a href="http://www.boiler-breakdown-repair-london.co.uk/wp" target="_blank">The Boiler Repair BLOG</a></p>
        </div>
        <!-- Please Click Red Button -->  <!-- No preceeding h6 tags?  This headerless section adds padding-top:66px via another classname, spacer66.  Could also have been added via .googlebutton more efficiently. -->
        <div class="midsection googlebutton spacer66">
            <p>Please click on the</p>
            <p class="redbutton">red g+1 Button  <g:plusone></g:plusone> </p>   <!-- Place this tag where you want the +1 button to render  <g:plusone></g:plusone>  -->
            <p>to let me know you found this page useful.</p>
        </div>
        <!-- Service Providers -->
        <div class="trailer">  <!-- Extra space via padding-top is provided in css for class "trailer".  No h6 tags required. -->
            <div class="imagebox floatleft">  <!-- DEMO ONLY. DELETE THIS IMAGE BOX. -->
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="160" height="200">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="240" height="200">
                <p>&lt;div class="imagebox floatleft"&gt;</p>
            </div>
            <div class="imagebox edgeleft">  <!-- DEMO ONLY. DELETE THIS IMAGE BOX. -->
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="240" height="200">
                <p>&lt;div class="imagebox edgeleft"&gt;</p>
            </div>
            <div class="imagebox floatleft">  <!-- DEMO ONLY. DELETE THIS IMAGE BOX. -->
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="240" height="200">
                <p>&lt;div class="imagebox floatleft"&gt;</p>
            </div>
            <p>
                <a href="http://www.boiler-breakdown-repair-london.co.uk/flue-gas-analysers-boiler-repairs-south-east-london-bromley.html" target="_blank">
                Flue Gas Analysers</a> The importance of flue gas analysers in boiler repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/baxi-combination-boiler-repair-bromley.html" target="_blank">
                Baxi combination boilers</a> Baxi combination boilers in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/combi-boiler-repairs-south-london.html" target="_blank">
                South London combi boiler repairs</a> South London combi boiler repair specialist
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/Potterton-Puma-Combi-Boiler-Repair-Dulwich.html" target="_blank">
                Potterton Puma Combi Boiler Repair</a> 100% successrate repairing Potterton Puma Combi Boilers in Dulwich South East London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/condemned-boilers-in-bromley.html" target="_blank">
                Keep the condemned boiler you have!</a> Condemned boilers in Bromley can mostly be repaired
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/south-london-emergency-boiler-repair.html" target="_blank">
                South London Emergency Boiler Repair</a> South London emergency boiler repair, almost ALL boilers can be repaired
                <a href="http://www.boiler-breakdown-repair-london.co.uk/plumbing-repairs-south-london.html" target="_blank">
                Local Plumbing Repairs South London</a> Plumbing repairs in South London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-repair-faqs.html" target="_blank">
                Boiler Repair FAQs</a> Boiler repair FAQs that I hear most
                <a href="http://www.boiler-breakdown-repair-london.co.uk/plumbers-in-Dulwich.html" target="_blank">
                Plumbers in Dulwich</a> Plumber in Dulwich for plumbing and boiler repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/saunier-duval/saunier-duval-thelia-boiler-repairs.html" target="_blank">
                Saunier Duval boiler repairs</a> Saunier Duval repairs
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-replacement.html" target="_blank">
                Boiler Replacement Or Repair</a> Boiler replacement or repair; is it beyond help?
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-faults-repaired.html" target="_blank">
                Boiler faults repaired</a> Repairing not replacing.
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-broken.html" target="_blank">
                Is Your Boiler Broken?</a> How to avoid an engineer call out when your boiler is not broken
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/Boiler-Breakdown-Repairs-Bromley-South-East-London.html" target="_blank">
                Boiler Breakdown South London</a> Some boiler breakdown checks you can do yourself
                <a href="http://www.boiler-breakdown-repair-london.co.uk/locations.html" target="_blank">
                Locations Covered for emergency boiler repairs</a> Including south east London, south west London, Dulwich, Croydon, Bromley, Kent, Surrey
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/south-london-boiler-engineer.html" target="_blank">
                South London Boiler Engineer</a> South London Boiler Engineer who really is an engineer.
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-repair-service-south-london.html" target="_blank">
                Boiler repair service; same day service throughout South London</a> Weekends, holidays, and out of hours
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/powerflush.html" target="_blank">
                Powerflush in South London</a> Powerflushing for central heating problems in south London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/heating-system-repairs-west-kent.html" target="_blank">
                Central heating System Repairs West Kent and South London</a> Central Heating system repairs in south London and West Kent
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/water-leak-repair-south-london.html" target="_blank">
                Water Leak Repair South London</a> Water leak repair South London is one of our key services.
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/central-heating-service-west-kent.html" target="_blank">
                Central Heating Service West Kent, Boiler Breakdown Repair London</a> Central heating service for West Kent
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/radiator-repairs-south-london.html" target="_blank">
                Radiator Repairs South London</a> Radiator repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/home-boiler-repairs-South-London.html" target="_blank">
                Home Boiler Repairs South London</a> Home boiler repairs in south London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/condemned-boiler-in-Croydon.html" target="_blank">
                Condemned Boiler In Croydon</a> A condemned boiler in Croydon can cost a lot less if you repair it.
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/GAS-boiler-repairs-in-Bromley.html" target="_blank">
                Gas boiler repairs in Bromley and south east London</a> Gasboiler repairs in Bromley and South East London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/back-boiler-repair-south-east-london.html" target="_blank">
                Backboiler repairs in south east London and Bromley</a> Repairing backboilers in Bromley
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-and-central-heating-cons.html" target="_blank">
                Central heating cons</a> Boiler and central heating cons in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk" target="_blank">
                boiler breakdown repair Homepage</a> South London boiler repairs homepage
                <a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html" target="_blank">
                Emergency gas leak repairs</a> Emergency gasleak repairs in Bromley
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-service-south-london.html" target="_blank">
                South London boiler servicing</a> South London boiler service
                <a href="http://www.boiler-breakdown-repair-london.co.uk/fitting-central-heating-controls.html" target="_blank">
                Central heating controls</a> Fitting central heating controls in Bromley
                <a href="http://www.boiler-breakdown-repair-london.co.uk/CORGI-gas-safe-register.html" target="_blank">
                Corgi GSR council</a> Facts about Corgi GSR and the council
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/index.html" target="_blank">
                boiler breakdown repair south  west London Index</a> South London boiler repair indexpage
                <a href="http://www.boiler-breakdown-repair-london.co.uk/potterton-boiler-repairs/potterton-profile-netaheat-repairs/potterton-profile-netaheat-repairs.html"
                target="_blank">Potterton Profile Netaheat</a> Potterton Profile Netaheat repairs in south London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/potterton-boiler-repairs/potterton-suprima-repairs/potterton-suprima-repairs.html" target="_blank">
                Potterton Suprima</a> Potterton Performa boiler repairs in south west London
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/potterton-boiler-repairs/potterton-performa-repairs/potterton-performa-repairs.html" target="_blank">
                Potterton Performa</a> Repairing Potterton Performa boilers in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/ideal-boiler-repairs/ideal-icos-repairs.html" target="_blank">Ideal Icos</a> Ideal Icos repairs
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/worcester-bosch-boiler-repairs/worcester-bosch-cdi-repairs.html" target="_blank">
                worcester Bosch CDI repairs</a> Worcester Bosch CDI repairs in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/broag-remeha-avanta/broag-remeha-avanta-repairs.html" target="_blank">
                Broag-remeha-avanta-repairs</a> Service and repair of Broag Remeha Avanta boilers in south east London
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/glowworm-boiler-repairs/glowworm-betacom-repair.html" target="_blank">
                Glowworm Betacom repairs</a> Glowworm Betacom repairs in south west London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-repair-south-london.html" target="_blank">
                Boiler Repair South London</a> Expert south London boiler repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html" target="_blank">
                emergency-waterleak-repairs-southeast-london</a> Repairing Emergency waterleaks in southeast London
            </p>
        </div>
    </div>
    </body>
    </html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?895775-Caption-not-going-where-I-want-it
    http://www.baxi.co.uk/Baxi-Bermuda-Back-Boiler.htm
      COMMENTS:
      1. The outermost div is .wrapper (per your design).
      2. Main content divs are: topsection, midsection, and trailer.
      3. The <h#> tags can preceed or be the first item inside each section.
      4. I recommend changing the name of all images so they contains no spaces.  It's a URI thing.  
         Without quotes around it, the URI would fail (just like the name of your page has no spaces).
    -->
    <head>
    <title>Backboiler Repair Bromley southeast London</title>
    <link rel="stylesheet" type="text/css" href="boilerrepair1.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Description" content="backboiler repair Bromley southeast London ventilation">
    <meta name="Keywords" content="backboiler repair, southeast london, bromley, ventilation">
    <meta name="viewport" content="width=device-width">
    <meta name="geo.region" content="UK">
    <meta name="geo.placename" content="London">
    <meta name="geo.position" content="51.427364;-0.160074">
    <!-- Place this tag in your head or just before your close body tag -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-28748983-1']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <style type="text/css">
    /* Place any local/temporary css styles here. */
    </style>
    </head>
    <body>
    <div id="wrapper">
        <h1>Baxi backboiler repair in Southeast London</h1>
        <div class="topsection">
            <ul class="nav">
                <li><a href="index.html" target="_blank">homepage</a></li>
                <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html" target="_blank">waterleaks</a></li>
                <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html" target="_blank">gasleaks</a></li>
                <li><a href="http://www.boiler-breakdown-repair-london.co.uk/south-london-boiler-engineer.html" target="_blank">about me</a></li>
                <li><a href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li>
            </ul>
            <div class="imagebox floatright">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200">
            </div>
            <p><strong>Baxi Bermuda backboiler repair</strong> in <strong>southeast London</strong> and <strong>Bromley</strong> is something fewer and fewer people
                want to deal with, let alone ventilation issues. The generation of youngsters that come out of "plumbing
                school" today, often have little or no experience with them.</p>
            <p>The central heating system that placed a boiler behind the traditional fire in the living room, was a revolutionary idea in its day.
                When it was introduced back in 1966, it took the market by storm. Not surprising when you add a very high reliability to an
                acceptable price and enormous durability.</p>
            <p>Even today, there are still many thousands of them around doing their job day in day out, and frequently being over thirty years old.
                The added bonus of not taking up any extra space, has no doubt added to the success of this model.
                It is estimated that 80% of all <em>backboilers</em> ever sold in the entire country, were Baxi Bermudas.</p>
            <p>For expert <em>backboilers repairs</em> of these and other makes in <em>southeast London</em> or <em>Bromley</em>, call:</p>
            <div class="phone">
                <p>Mon-Fri 08.30-20.30 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0208&nbsp;265&nbsp;8822<br>Emergencies out of hours &nbsp; 0785&nbsp;273&nbsp;6626</p>
            </div>
            <p> Apart from being hard work compared to working on modern boilers, there are other reasons why more and more installers
                are not keen to work on backboilers. Recently, the government decided to once again change the regulations. As was to be expected,
                the rules got tougher. This lead to the bizarre situation that some systems that were considered safe for many years, became technically unsafe.
                Due to the wisdom of some bureaucrats, we now have to tell you that what has served you fine for twenty or thirty years, is suddenly dangerous.
                This is now probably the most common "repair". What has happened, is that the ventilation details have been altered and now we have to shut
                backboilers down until the ventilation has been increased.
            </p>
            <div class="imagebox floatright">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/baxi backboiler repairs southeast london.jpg" width="200" height="151" alt="Baxi backboiler repairs Bromley southeast London">
                <p>Baxi backboiler repairs in southeast London</p>
            </div>
            <p>There are various other common problems with these and most of them can be solved.</p>
            <p>People frequently complain about lack of performance  in terms of rooms warming up too slowly or some not at all or heating being fine, but no hot
                water or vice versa. Details about this below.</p>
            <p>Slightly less frequent, but still happening a lot, is partial working. Hot water fine, but heating not coming on. Usually same cause but different complaint,
                is heating coming on, but not all radiators getting warm. The complete story behind this is on another page, for which you will find the link in the
                paragraph that gives a brief explanation on this page.</p>
            <p class="avoid"><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-and-central-heating-cons.html" target="_blank">Don't fall for the sales talk</a></p>
            <p>The next one on the list, is strange sounds. This can be different things from a quiet hiss to loud banging. More about this too.</p>
        </div>
        <h2>Repairing corrosion problems with backboilers</h2>
        <div class="midsection">
            <div class="imagebox floatleft">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/baxi backboiler repair southeast london.jpg" width="300" height="277" alt="Baxi backboiler repair Bromley southeast London">
                <p>Baxi backboiler repair southeast London</p>
            </div>
            <div class="imagebox floatright">
                <p>Baxi backboiler corrosion repair</p>
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/baxi backboiler corrosion repair.jpg" width="200" height="134" alt="Baxi backboiler corrosion repair">
                <p>Baxi backboiler corrosion repair</p>
            </div>
            <p>Repairing damage caused by corrosion, is more common than anything else on Baxi Bermudas and other makes of backboilers. The pump will suffer from it
                and the heatexchanger will deteriorate, which can all cause the radiators to cool down. It can  also lead to the burner being turned off more and longer, which adds to the
                problem. The logical result of this is often that the user turns up the thermostat. Now you have an increased chance of overheating of
                the backboilers themselves.</p>
            <p>Other common problems with corrosion are failing of the diverter valve and blocking of the feed and/or expansion pipes. The effect of this is either a more
                and more reduced working of the heating and hot water, or the failing of it altogether.</p>
            <p>The valves and the pump are often located in airing cupboard. Since these are usually the first suspects, they are the first things I check. So don't be surprised when the chap
                who comes out for a <strong>Baxi backboiler repair</strong> does not look at the boiler first. Luckily, most of the time the problems can be solved,
                but sometime it is just too late and big holes have rotted in essential parts of the boiler. The photos  below show the inside of a bbu as they are often called in the trade.
                The one on the left is the inside with the burner and the heatexchanger above it. You can clearly see the difference between the the part in the middle that is unaffected,
                and the sides that are rusted. The detail on the side clearly shows the bolt rusted down to less than half of its original thickness, and the big hole on the left.
            </p>
        </div>
        <h3>Backboiler ventilation repair</h3>
        <div class="midsection">
            <div class="imagebox floatleft">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/baxi backboiler repaired southeast london.jpg" width="300" height="276" alt="Baxi backboiler repaired Bromley southeast London">
                <p>Baxi backboiler repaired southeast London</p>
            </div>
            <div class="imagebox floatright">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/baxi backboiler corrosion repaired.jpg" width="200" height="134" alt="Baxi backboiler corrosion repaired">
                <p>Baxi backboiler corrosion repaired</p>
            </div>
            <p>Backboiler repairs of ventilation issues, is something I have found necessary in far too many homes in <strong>southeast London</strong> and
                <strong>Bromley</strong> where I went when called in for performance problems. One inherent downside of this type of heating system,
                is the inherent need for large amounts of fresh air to assure safe combustion. This can create a draft and people are tempted to block vents in walls and
                windows. Understandable as this is, it leads to dangerous and potentially lethal defects. The danger of this type of appliance is that when it is very easy to
                develop a defect that does not stop it from working, but keeps going in a dangerous way. You could compare it with a
                car that has a fine engine but a big leak in the exhaust. It will run fine, but the Carbon Monoxide enters the cabin and can kill you just as surely as
                failing brakes. Baxi Bermudas have the same risk. Blocking the openings needed to supply sufficient oxygen for clean combustion to reduce "draught", can
                cause CO production.</p>
            <p>What has happened, is that the ventilation details have been altered. For many years, if the ventilation opening was below a certain size, it was
                acceptable as long as it worked safely. Today, we have to shut it off if the opening is below 90% of the manufacturer's advice, end of story. It does
                not matter how many years you have had it. It does not matter if it works safely. We have to shut backboilers down until the ventilation has been
                increased. The result is that when we get called out we have to tell you that apart from repairing your Baxi backboiler, we have to do extra work. To
                many people, this will sound as an excuse for padding the bill. Since few of us are able to explain the necessity of this, it can very easily
                and very quickly damage your reputation when attending backboiler repairs.
            </p>
        </div>
        <h3>Repairing backboiler lack of ventilation</h3>
        <div class="midsection doublespace">
            <div class="imagebox floatleft">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/repairing baxi backboiler in southeast london.jpg" width="300" height="425" alt="repairing Baxi backboilers Bromley southeast London">
                <p>Repairing Baxi backboiler in southeast London</p>
            </div>
            <div class="imagebox floatright">
                <img src="http://www.boiler-breakdown-repair-london.co.uk/pics/repairing corrosion baxi backboiler.jpg" width="200" height="179" alt="Baxi backboiler corrosion repaired">
                <p>Repairing corrosion Baxi backboiler</p>
            </div>
            <p>What happens is that the lack of ventilation, lack of service or a small water leak in the heat exchanger can make the
                flames "dirty". By dirty I mean producing Carbon Monoxide. This is why ventilation is so importnt with backboilers.
                Not only is it absolutely necessary to make sure it works fine, it also helps to slow down the build up of CO.
                It only takes a very small amount of Carbon Monoxide to spill into the room to put your life at risk.</p>
            <p>A concentration of 0.1% is likely to make you sleepy, proceeds to render you unconscious and if the
                heating stays on, you are bound to end up dead.</p>
            <p>You should always have an approved CO detector in a room with a backboiler, and test it regularly to confirm it works.</p>
            <p>If there is any boiler that really needs a full strip down service every years, it is this type.</p>
            <p>Never block or reduce any ventilation openings; they are vital for your safety.</p>
            <p>Check regularly around and under the "fire" for lint and dust. The normal working of backboilers turn them into a natural vacuum cleaner.
                Household dust, lint and pet hair can clog up the ventilation openings. If you see any lint or hair,
                brush it off gently with a soft brush, or carefully hoover it up.</p>
            <p>If you are not sure your <em>Baxi Bermuda backboiler</em> is working safely, contact a local professional
                for advice in <em>southeast London</em> or <em>Bromley</em>.
            </p>
        </div>
        <h6></h6>  <!-- Read Boiler Blog -->  <!-- the h6 tag is being used as a convenient/consistent spacer between sections without a text header -->
        <div class="midsection readblog">
            <p>Read the Boiler Repair Blog for regular tips on saving money.</p>
            <p><a href="http://www.boiler-breakdown-repair-london.co.uk/wp" target="_blank">The Boiler Repair BLOG</a></p>
        </div>
        <h6></h6>  <!-- Please Click Red Button -->
        <div class="midsection googlebutton">
            <p>Please click on the</p>
            <p class="redbutton">red g+1 Button  <g:plusone></g:plusone> </p>   <!-- Place this tag where you want the +1 button to render  <g:plusone></g:plusone>  -->
            <p>to let me know you found this page useful.</p>
        </div>
        <!-- Service Providers -->
        <div class="trailer">  <!-- Extra space via padding-top is provided in css for class "trailer".  No h6 tags required. -->
            <p>
                <a href="http://www.boiler-breakdown-repair-london.co.uk/flue-gas-analysers-boiler-repairs-south-east-london-bromley.html" target="_blank">
                Flue Gas Analysers</a> The importance of flue gas analysers in boiler repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/baxi-combination-boiler-repair-bromley.html" target="_blank">
                Baxi combination boilers</a> Baxi combination boilers in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/combi-boiler-repairs-south-london.html" target="_blank">
                South London combi boiler repairs</a> South London combi boiler repair specialist
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/Potterton-Puma-Combi-Boiler-Repair-Dulwich.html" target="_blank">
                Potterton Puma Combi Boiler Repair</a> 100% successrate repairing Potterton Puma Combi Boilers in Dulwich South East London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/condemned-boilers-in-bromley.html" target="_blank">
                Keep the condemned boiler you have!</a> Condemned boilers in Bromley can mostly be repaired
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/south-london-emergency-boiler-repair.html" target="_blank">
                South London Emergency Boiler Repair</a> South London emergency boiler repair, almost ALL boilers can be repaired
                <a href="http://www.boiler-breakdown-repair-london.co.uk/plumbing-repairs-south-london.html" target="_blank">
                Local Plumbing Repairs South London</a> Plumbing repairs in South London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-repair-faqs.html" target="_blank">
                Boiler Repair FAQs</a> Boiler repair FAQs that I hear most
                <a href="http://www.boiler-breakdown-repair-london.co.uk/plumbers-in-Dulwich.html" target="_blank">
                Plumbers in Dulwich</a> Plumber in Dulwich for plumbing and boiler repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/saunier-duval/saunier-duval-thelia-boiler-repairs.html" target="_blank">
                Saunier Duval boiler repairs</a>Saunier Duval repairs
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-replacement.html" target="_blank">
                Boiler Replacement Or Repair</a> Boiler replacement or repair; is it beyond help?
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-faults-repaired.html" target="_blank">
                Boiler faults repaired</a> Repairing not replacing.
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-broken.html" target="_blank">
                Is Your Boiler Broken?</a> How to avoid an engineer call out when your boiler is not broken
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/Boiler-Breakdown-Repairs-Bromley-South-East-London.html" target="_blank">
                Boiler Breakdown South London</a> Some boiler breakdown checks you can do yourself
                <a href="http://www.boiler-breakdown-repair-london.co.uk/locations.html" target="_blank">
                Locations Covered for emergency boiler repairs</a> Including south east London, south west London, Dulwich, Croydon, Bromley, Kent, Surrey
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/south-london-boiler-engineer.html" target="_blank">
                South London Boiler Engineer</a> South London Boiler Engineer who really is an engineer.
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-repair-service-south-london.html" target="_blank">
                Boiler repair service; same day service throughout South London</a> Weekends, holidays, and out of hours
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/powerflush.html" target="_blank">
                Powerflush in South London</a> Powerflushing for central heating problems in south London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/heating-system-repairs-west-kent.html" target="_blank">
                Central heating System Repairs West Kent and South London</a> Central Heating system repairs in south London and West Kent
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/water-leak-repair-south-london.html" target="_blank">
                Water Leak Repair South London</a> Water leak repair South London is one of our key services.
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/central-heating-service-west-kent.html" target="_blank">
                Central Heating Service West Kent, Boiler Breakdown Repair London</a>Central heating service for West Kent
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/radiator-repairs-south-london.html" target="_blank">
                Radiator Repairs South London</a> Radiator repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/home-boiler-repairs-South-London.html" target="_blank">
                Home Boiler Repairs South London</a> Home boiler repairs in south London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/condemned-boiler-in-Croydon.html" target="_blank">
                Condemned Boiler In Croydon</a> A condemned boiler in Croydon can cost a lot less if you repair it.
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/GAS-boiler-repairs-in-Bromley.html" target="_blank">
                Gas boiler repairs in Bromley and south east London</a> Gasboiler repairs in Bromley and South East London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/back-boiler-repair-south-east-london.html" target="_blank">
                Backboiler repairs in south east London and Bromley</a>Repairing backboilers in Bromley
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-and-central-heating-cons.html" target="_blank">
                Central heating cons</a>Boiler and central heating cons in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk" target="_blank">
                boiler breakdown repair Homepage</a>South London boiler repairs homepage
                <a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html" target="_blank">
                Emergency gas leak repairs</a>Emergency gasleak repairs in Bromley
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-service-south-london.html" target="_blank">
                South London boiler servicing</a> South London boiler service
                <a href="http://www.boiler-breakdown-repair-london.co.uk/fitting-central-heating-controls.html" target="_blank">
                Central heating controls</a>Fitting central heating controls in Bromley
                <a href="http://www.boiler-breakdown-repair-london.co.uk/CORGI-gas-safe-register.html" target="_blank">
                Corgi GSR council</a>Facts about Corgi GSR and the council
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/index.html" target="_blank">
                boiler breakdown repair south  west London Index</a>South London boiler repair indexpage
                <a href="http://www.boiler-breakdown-repair-london.co.uk/potterton-boiler-repairs/potterton-profile-netaheat-repairs/potterton-profile-netaheat-repairs.html"
                target="_blank">Potterton Profile Netaheat</a>Potterton Profile Netaheat repairs in south London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/potterton-boiler-repairs/potterton-suprima-repairs/potterton-suprima-repairs.html" target="_blank">
                Potterton Suprima</a>Potterton Performa boiler repairs in south west London
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/potterton-boiler-repairs/potterton-performa-repairs/potterton-performa-repairs.html" target="_blank">
                Potterton Performa</a>Repairing Potterton Performa boilers in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/ideal-boiler-repairs/ideal-icos-repairs.html" target="_blank">Ideal Icos</a>Ideal Icos repairs
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/worcester-bosch-boiler-repairs/worcester-bosch-cdi-repairs.html" target="_blank">
                worcester Bosch CDI repairs</a>Worcester Bosch CDI repairs in south east London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/broag-remeha-avanta/broag-remeha-avanta-repairs.html" target="_blank">
                Broag-remeha-avanta-repairs</a>Service and repair of Broag Remeha Avanta boilers in south east London
                <br><a href="http://www.boiler-breakdown-repair-london.co.uk/glowworm-boiler-repairs/glowworm-betacom-repair.html" target="_blank">
                Glowworm Betacom repairs</a>Glowworm Betacom repairs in south west London
                <a href="http://www.boiler-breakdown-repair-london.co.uk/boiler-repair-south-london.html" target="_blank">
                Boiler Repair South London</a>Expert south London boiler repairs
                <a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html" target="_blank">
                emergency-waterleak-repairs-southeast-london</a>Repairing Emergency waterleaks in southeast London
            </p>
        </div>
    </div>
    </body>
    </html>

  17. #42
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Nice work, ronpat. Glad to see you back, and to hear that you have power again. That was quite a storm.

  18. #43
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Thanks, Ralph. It's good to be back in a world with electricity. I live about 35 miles inland. I imagine it was worse for those living closer to the shore.

    How does one create an "Off Topic" box?

  19. #44
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post

    How does one create an "Off Topic" box?
    You wrap [ot] tags around your comment.

  20. #45
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    You wrap [ ot ] tags around your comment.
    Very cool. Thanks.

  21. #46
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Hi Ron, welcome back in the 21st century. I hope your experience was limited to "just a power cut"; it might be an utter nuisance, but things can be worse.

    Quote Originally Posted by ronpat View Post
    ...I used the two pages that you posted and rewrote them using a "modular" or "boxy" approach that makes them easy to replicate, grow, or modify (in my opinion)....
    Easy is a relative term. Vertical welding, doing summersaults, doing a wheely on a roundabout and growing/modifying CSS are all very easy, once you've understood the principles and learned how to apply them.
    I will spend the next few days' bits of spare time on mastering this step, and no doubt will be back with more nooby questions.
    Many thanks for the above.

  22. #47
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Finally, after a bout of flu, a computer crash, and busiest time of year, I now have full access again and will try out uploading the changes.
    I'll keep you posted about the results.

  23. #48
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Sorry to hear you were bitten by the flu bug. Always a bummer. Hope you didn't lose any data when your computer decided to get sick, too. May you have better fortune in the new year.

  24. #49
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ron, best wishes for 2013 to you, too.
    It turned out be that Windows had collapsed completely rather than a hardware fault and I had to do a complete new install. No data lost as such, but I did lose all passwords, bookmarks ftp settings emails and so on. When I had it all going again and installed all access codes, I found that all the emails were still on the server and had to hack my way through nearly 10,000 of them to see which ones were obsolete in order to trim it back to a workable number.
    Between finding the fault, fixing it, sorting the mess out, and regaining access again, took about a month's worth of spare time.
    Now I have to get back into the routine of learning CSS so I can keep at least part of it in my head. My "handicap" is that I am great at learning stuff based on insight, but am very poor at retaining dry facts. I camp pick up stuff like how to use class and id to make something visible on a screen, but have to look up 100 times in books/notes which one should be used when; quite time consuming. I'll use it for new year's resolution to spend an hour each day to master what I need to know about CSS/HTML.
    And then another half hour to an hour to keep up to date with SEO. Work can really get in the way of drinking, as they say here.

  25. #50
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,534
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by benbob View Post
    ... My "handicap" is that I am great at learning stuff based on insight, but am very poor at retaining dry facts. I camp pick up stuff like how to use class and id to make something visible on a screen, but have to look up 100 times in books/notes which one should be used when; quite time consuming. ... Work can really get in the way of drinking, as they say here.
    Your "handicap" is quite a normal trait of adult learning. Adults tend to learn best when they can apply the knowledge immediately. Otherwise, things tend to "get lost". We aren't the sponges that youngsters are. I speak from considerable experience.


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
  •