External stylesheet not displaying correctly using a blogger blog

Get Started
1

Hi,

I’m getting my feet wet with web design. I have been following Ian Lloyd’s Build Your Own Website the Right Way with CSS and XHTML but I have run into a bit of a stumbling block with the adding a Blogger blog to the site:

  1. I have managed to get the blog hosted and working on a sub-domain. - As FTP publishing had been disabled I needed to jump through the hoops to get it associated with CNAME - but that has been done successfully so I am pretty sure that is not my problem.

  2. I am referencing an external CSS stylesheet as shown in the book. The background navigation and non-blogger items are displaying correctly. In other words I have changed my index.html page to incorporate the blogger code.

  3. The Blog portions of the page are not displaying correctly:
    It is using a different color font.
    There is a large amount of white space between the heading of the blog post and the content. (But only for the first post).

  4. My markup does not validate. However the errors all relate to the blogger specific aspects of the markup.

Anyone got any ideas about what I am doing wrong?

Thanks :slight_smile:

2

Well it turns out that there are two separate issues.

  1. Blogger had a stylesheet overwriting my paragraph formatting rules. I solved that issue by adding another selector to the stylesheet:
p, .post-body  div {
	font-size: 1.2em;
	color: navy;
}

So, while I have no idea why my stylesheet was overwritten the problem is solved.

  1. With the text of the blog posts starting further down the page I have managed to isolate the cause. My navigation background is formatted with a height of 484px (to allow the full image to be displayed) - and the blog post’s text is starting at the end of the navigation.

What is rather confusing is the fact that it is only Blogger’s html that is behaving this way and only the post-body class.

So:

  • I tried clearing the float but that did not make any difference.
  • I set the margin and padding properties to 0 without it making any impact. When I set the top-margin to a negative number all that happened was that my text stacked on top of each other without moving up.
  • Absolute positioning was quite a mess with the posts being stacked upon each other (again).
  • With relative positioning I have not been able to move it above the bottom of the navigation bar.

Any suggestions on how to fix this? I’m sure I’m missing something quite obvious…

3

Alas, Blogger has discontinued FTP publishing since May :frowning:

The only thing that I can think of is creating additional rules in the style-sheet using .post-body as the selector.

But I am really confused about what is overwriting the stylesheet rules.

4

Hi Donboe,

Thanks for the reply.

Sorry about not including a link - classic newbie mistake :). Here is the link to the blogger blog not displaying correctly

I see that Blogger has inserted an additional stylesheet in the page - but none of the rules seem to overwrite mine.

Blogger also has inserted some additional code towards the top of the HTML - including some more links, the new style sheet and some javascript. Is it possible that the javascript would overwrite the stylesheet?

5

Hi trishacornelius. Welcome to Sitepoint. It is way easier to help if we see an example. Can you add a link?

6

Fixed the text display anomaly with this rule:

.post-body div {
	display: inline;
}

Hooray. Now for my next question:

Is this a “good” fix?

Initially I thought it was not because I expected Blogger to be using the <p> element - but I see that blogger is using <br> to mimic paragraphs instead of marking them up as paragraphs. So my concern about displaying block elements within the inline element is unwarranted.

I think it is a good fix because it is one little rule that makes the page look the way it is intended with valid CSS.

I found a reason it’s a bad fix: It doesn’t work in IE6. Any ideas/ hacks that I should be applying to sort that little one out?

Any inputs from more experienced CSS masters out there as to why this fix is good/ bad/ belongs in Satan’s toolbox?

7

Unfortunately the code you refer to has been inserted by blogger and I have not been able to remove them by editing the HTML in the template.

Any ideas for a work-around?

8

Hmm, not sure then.

If you can get FTP access you should be able to get to those files, depending on permissions.

9

I see an extra


<div></div>

on the blog page right after the closing iframe on the top. Are you able to remove that?

There are also references to


<div style="clear: both;"></div>

and an extra div container above your post.