Text doesn't show correct on my site

[Filliz]

I'm having some difficulties with getting the post title and -footer to show up right on the background image on my blog.

When I added the background images to the title and footer and previewed it,everything looked alright.

You can see what it looks like in the preview in the screenshot:

http://img185.imageshack.us/img185/1801/prevg3uz.th.gif (http://img185.imageshack.us/my.php?image=prevg3uz.gif)

But when I save the changes I made,the text is totally out of place and the images seem to have gotten smaller too :blink:
You can see that here (http://dvilicious.blogspot.com/).

I tried changing the padding and margin stuff for the text,but that doesn't help.
Again,it looks good in the preview but looks like crap when I save the changes.

Here's the code for that area,if that helps:

/* Posts
----------------------------------------------- */
.date-header {
margin:1.5em 5 .5em;
}
.post {
margin:.5em 0 1.5em;
background: url("http://i8.photobucket.com/albums/a40/ThemG/post-bckgrnd.png");
padding-bottom:2em;
}
.post-title {
margin:.25em 0 0;
padding:5 5 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
background: url("http://i8.photobucket.com/albums/a40/ThemG/title-bck4.png") no-repeat;
color:#660000;
border-bottom:3px double #9C9A9A;
}
.post-title a, .post-title a:visited, .post-title strong {
display:block;
text-decoration:none;
color:#c60;
font-weight:normal;
}
.post-title strong, .post-title a:hover {
color:#333;
}
.post div {
margin:5 4 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-1em 0 0;
background: url("http://i8.photobucket.com/albums/a40/ThemG/title-bck4.png") no-repeat;
padding:14px;
color:#ccc;
border-top:3px double #9C9A9A;
}
.post-footer em, .comment-link {
font:78%/2em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
border:3px double #000;
}
.post img:hover {
border:3px solid #999;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

Anyone here that could help me out with th

[tesco]

The preview screenshot isn't there. :huh:

edit: just looked at the site... looks good in FF, in IE i think i see what you mean (text is like behind the image)?

[Filliz]

The preview screenshot isn't there. :huh:

edit: just looked at the site... looks good in FF, in IE i think i see what you mean (text is like behind the image)?

Forgot the screenie.
It's up now though.

Yes,I just noticed too that the text is behind the image in IE. :blink:
In firefox it's on top of it though.
But the text isn't where it's supposed to be.
Now that you have the screenshot you can see what I mean.

Anyway this is how it looks like on my side after I saved the changes:

http://img146.imageshack.us/img146/7550/blogfin7wm.gif

Strangely enough the images are the right size now :wacko:
But the text is still out of place.
It should be a bit more to the right and not over the footer either.

What to do?

[tesco]

Try adding:


.post-body {
padding:5px;
}


To your css.

[Filliz]

Thanks.
That helped me get the text in place like I want it.

But now I still have a problem with the title background image .
It's exactly the same image as used in the footer,but it gets cut off halfway. :wacko:

And again I can't seem to find the thing I should change to fix this.
Looks ok in the preview but not in the final.

Any ideas?


Oh,and does IE suck or what?!
It just cuts off the general background at the bottom! :dry:
Firefox doesn't.




edit: Fixed it! :)

[tesco]

It looks good. :)