April 18, 2009

Why do I get an unwanted new line in this simple HTML?

I have a problem that I haven't been able to figure out. I have hundreds of web pages that include a Google AdSense block followed by an image. The ads and image should appear side by side if the browser window is maximized and if the screen resolution is at least 800x600 pixels. Here's a reduced copy of a sample page that shows how the page should look.



The above image is from Firefox 3.0.8, but the page also displays properly in my old Mozilla 1.7.12 browser. Next is how the sample page looks in Firefox 2.0.0.20, Internet Explorer 6.0.2800.1106 and Internet Explorer 7.0.5730.13.



The total width of the ad block plus the picture is less than the screen width of 800 pixels. Plus, the code has the same problem if I use a smaller picture or if I increase the screen resolution to 1024x768. So it's not a wraparound problem related to width.

The code is very simple HTML as follows.


<p align=center>

[javascript Google AdSense code]

<img src="brp-sunset.jpg" alt="Picture of a sunset from the Blue Ridge Parkway"></p>


There is no <br> nor paragraph change between the ad code and the image, so why does it start a new line?

Here's a link to the actual page on the Internet:
http://www.jdmpics.com/trails/hiking-trails.htm

Thanks to anyone who can explain this and tell me an easy way to fix it. I could rewrite the code with a table or something and force it to not go to a new line, but like I said I have hundreds of pages so the simplest solution is what I'm looking for.

2 comments:

  1. I've done a lot of tests using Internet Explorer 7.0. I've tried using the undocumented nobreak tag. I've tried using a non-breaking space and a zero-width non-breaking space. I've tried the nowrap attribute in the html and white-space nowrap in css. I've tried using div instead of p. The only thing I've tried that works is making a table. Argghhh!

    ReplyDelete
  2. I posted this problem on CodingForums.com and received excellent help from abduraooft. The thread can be viewed here:
    http://www.codingforums.com/showthread.php?t=164281
    The suggestion was to assign float left to nested inserts. Abduraooft examined the code generated by the Google AdSense script (something I had no idea how to do) using the Firebug add-on to Firefox, available here:
    http://getfirebug.com/
    Simply adding

    ins ins {
    float:left;
    }

    to my Cascading Style Sheet file, style.css, causes the blocks in nested inserts to display on one line, left justified, without having to alter any HTML pages. That was an easy quick fix to the immediate problem, but I didn't like the way it made my pages look. The ads, images, and text on my pages are centered, and designed to fit on an 800x600 pixel window without scroll bars. Most people now use higher resolutions, which creates empty areas on both sides of my content. That's fine, only using float left places the ads against the left margin while everything else on the pages remain centered.

    I ended up coding a centered table on about 15 of the worst-affected pages to solve the problem. I have hundreds of pages using the same format that display correctly. I used Firebug to examine the Google-generated code on one of my older pages that displays correctly. I was confronted with over 140 long, dense lines of code. It's not worth trying to figure out.

    I assume any new pages I make will have the newer generated code that causes an unwanted new line. Although I can manually code tables to solve the problem, it would still be nice to have simple solution that requires less coding.

    ReplyDelete