Blogger Template Glitch

July 3, 2006 7:53 PM

I have a template/display glitch which is driving my html-ignorant frontal lobes a bit beserko.

My blogger site [yeah, yeah...perhaps that's 1/2 the problem] is image intensive and in the last couple of weeks I've been choosing 'large' as the display choice when using the automagic blogger uploader-of-image thingy. I just mention this because I believe that it may have been displaying some images wider than the 500px width specified in the template*, although they all seem under that on the front page at the mo'. [* now 510]

The other day someone wrote to say that the sidebar was displaying at the foot of the page in IE6 (FF was ok). I can't be certain when this started.

So I tweaked around a bit, widening the page slightly and narrowing the translator button and things seemed ok.

But for reasons that completely escape me, the googleads sidebar text box now won't display on the main page on either IE or FF and the footer googlead box doesn't display in FF and IE on Win but I'm told it's ok with FF on a Mac. However, everything displays properly for individual entry pages.

I tried moving and replacing the googleads code but there was no change.

Any ideas? Did I say that I was pretty well html-ignorant? So the lay version would be appreciated. [link]

posted by peacay to Computers & Internet (4 answers total)

Best answer: It's not HTML; it's your CSS. You have two floats, one to left (the main content) and one to right (the sidebar). When there's not enough room to float them side by side, the browser drops one below the other and continues floating main to left and sidebar to right.

510 px on your main div won't be enough if you (for instance) decided to drop a 500 px image into a blockquote: the blockquote is indented and you have a 1px border and a 4px padding on your images, so that puts it at 510 px + indentation. The best thing (as you've discovered) is not to overfill your divs, but to make sure that all of your images are under 500 px.

You can also add an overflow: declaration on the main div, which tells your browser what to do when the content is wider than the div allows. I'd recommend overflow:hidden; which seems to work well in both FF 1.5/win2000 and IE 5.0/win2000.

The modified section of the code would be like so:

#main {
width:510px;
float:left;
overflow:hidden;
}

Also, as a bonus [unsolicited] tip: if you put height and width declarations on your images, the browser will know how much space to allocate for them before they're done downloading, which will prevent the browser window from redrawing constantly as the images finish downloading. :-)

Neat site, btw.
posted by Tuwa at 8:51 PM on July 3, 2006

P.S. I have no clue about the Google Ads thing, sorry. But IE alarms about the Javascript, and Google Ads rely on Javascript, so I'd look over all the emails you got from various places advising on what to add where.

The first one it errors about is on line 10:
document.write('<li style="font-size:'+fs+'px;line-height:1;"><a style="color:rgb('+c[0]+','+c[1]+','+c[2]+')" href="http://del.icio.us/BibliOdyssey/'+encodeURIComponent(t).replace('%2F','/')+'">'+t+'</a> </li>');
posted by Tuwa at 9:07 PM on July 3, 2006

Response by poster: Thanks very much Tuwa. The fact that I wrote html for css should tell you something about why a lot of what you have written doesn't quite compute. I did go and skim through css basics however, and I've added the overflow:hidden property.

I also glanced at the w3 validator and its finding of >500 errors but my eyes just glazed over. It might be different if I actually studied it (and I'm quite partial to logic/problem solving) but occasional brushes with coding has never managed to develop any enthusiasm within me. I'm definitely one of those lazy bastados who are thankful for automated blogging and perhaps we shouldn't be allowed near the style sheet et al. I prefer to devote my energy to the content side of things.

But I'm still unsure where to go from here - I had no advice about placement of the googlead block: it's just a straight copy/paste of the code from google. And other changes to fix the original sidebar in IE problem were trial and error.

Obviously I've done something untoward but I thought I had retraced my steps of the past few days, changing back values and moving/removing things in the sidebar to see if the adblock would appear but nada - in other words, I really don't know what other changes I can make or how else to work out what is causing there to be a big empty space in the sidebar -- as I wrote in the [MI], the display on individual entry pages is normal.

So if anyone passing has 2 cents of further thought to contribute, I'd be happy to hear.
posted by peacay at 3:28 AM on July 4, 2006

Response by poster: With the posting of a new entry the ad units returned for some reason.

Just by the by, if anyone stumbles across this and experiences similarly weird problems, it was my intention to start another blog on blogspot choosing the same layout, as best I could remember and simply copy across the css code. I still might do this.

It might not be the 'logic of coding' but it strikes me as the best alternative to becoming further infuriated at my own woeful knowledge. But I intend being a bit more stringent with the way I operate (the 'height/width' thing at least) from now on.
posted by peacay at 11:06 PM on July 6, 2006