This time, CSS problems in firefox!

[Zacrifice]

Hello again.
I'm back with a problem, and considering my last problem was corrected by another forum member (whom i gotta thank again) I'm hoping someone can answer this question.

if you go too
http://www.zacrifice.com/site/index.html
http://www.zacrifice.com/site/index.txt <-- Text file of the html file.

in firefox it doesn't show properly, the bottom image has about 4 pixel space where there shouldn't be.
If you look at it in IE, its perfect.
I have fiddled around with it most of the day (after getting the last problem fixed) and I haven't gotten anywhere.
Also there is a bar up the right hand side that shouldn't be there either.
I'm just stumped.

Can anyone sugest anything?

[Vin DSL]

in firefox it doesn't show properly, the bottom image has about 4 pixel space where there shouldn't be.
If you look at it in IE, its perfect...

Can anyone sugest anything?

Heh! I gotta go to bed, so I don't have time to play detective, however...

I've had this conversation a dozen times, with other ppl, and the problem is sloppy coding on your part, not Firefox.

The bottom line is: MSIE is VERY tolerant of coding errors. Firefox is not!

If I had the time, I'd go find the problem for you, using the Web Developer extension in Firefox, but I don't, so you're on your own...

Good luck!

[Zacrifice]

if it was so sloppy why do they both validate?
there is one errorin the body {} tag but, removing it, leaving it, doesn't make any difference!!!

I ponder, if you just jumped to a conclution without thinking it thought!

[jason]

There's no end to your problems is there? How many things are you going to make me fix? (just kidding...)

First off, there are two images that don't have the closing / at the end of them so FireFox (using the HTML Validator extension) so the page doesn't validate properly as XHTML, but I doubt that's your problem.

<img src="img/foot.png"> => <img src="img/foot.png" />
<img src="img/heading.png"> => <img src="img/heading.png" />

I notice that in your footer class you don't have any margin or padding definitions set. Try setting both of those to 0 and see what happens. You might have to set the margin-bottom setting on the p-bg as well.

For the bar on the right--I'm not sure but I think it may be your background image repeating. Try adding "background-repeat: repeat-y;" to the p-pg class definition. This will force it to repeat vertically but not horizontally. I've found that IE somehow treats pixels differently than other browsers because when I try to do things specific to pixel sizes I always end up with things being off in IE. I suspect something similar here.

Try those fixes and if they don't work I'll take another stab at 'em. I like a challenge.

--Jason

[Zacrifice]

hahahaha.
What can I say, when I'm onto a good thing I stick with it to the end :-D

OOH I should have updated the html file hehehe.
I logged in before posting then got distracted and didn't actually end up uploading the latest file so there where them things (I don't bother being completely strict with alt and ending / untill I have the results I want in that section)

Sorry about that

And DAMN you are just bloody good!!!!
Putting in the repeat-y fixed the thin bar on the side.

Still have the space happening on the bottom image.
Man you are just good hahaha.

[jason]

Still have the space happening on the bottom image.

Did you try setting "padding:0;" or "padding-top: 0;" in the footer class? In used Firefox's web developer toolbar to outline block level elements and the attached image is a screenshot of the result (magnified to show detail). Since the spece falls within the blue line it looks like a padding issue to me.

--Jason

[jason]

Also try removing the position: relative from the footer. It doesn't appear to be necessary and that might be causing the problem.

--Jason

[Vin DSL]

I ponder, if you just jumped to a conclution without thinking it thought!

Just passing thought [sic]...

Um... sloppy coding, definitely! Better stick with MSIE!

[Zacrifice]

Hi Jason, sorry its taken so long to responed, I had to go to bed hahaa

anyway, I tryed the padding and padding-top I also tried margin and margin-top with no success.
I removed position:relative. Nothing worked.
I keep wondering thy this is happening, its exactly the same as the header and it does what I want.

very odd!

Vin, really, its grate that you can post to this forum, I mean really, brilliant!
But unless you have something useful to add please... refrain your impulses!

[Vin DSL]

Vin, really, its grate that you can post to this forum, I mean really, brilliant!
But unless you have something useful to add please... refrain your impulses!

Just curious... Are you shaving yet?

[Zacrifice]

oh vin, do grow up and go away.
I have no interest in listening to you.

[tank]

if it was so sloppy why do they both validate?

Validated code doesn't make it good design nor does it make it display the same across all browsers regardless if you use HTML 4.0 Transitional or XHTML Strict. It just means your syntax is correct.

[Zacrifice]

true, but then how do you define sloppy code?

[Spathiphyllum]

div.footer {
 border: none;/*optional abbreviation*/
 background: transparent url(img/foot.png) no-repeat 0 0;
 position: relative;
 width: 696px;
 height: 11px;
}

Try this for footer style and remove the image from the XHTML. The border abbreviation is optional (and is the default for no border). Using div.footer rather than just a class .footer narrows the scope to div elements exclusively. I find it to be a bit better style to limit scope on most elements and use classes for much broader application. Not required, just my bias.

[Zacrifice]

Hey that worked!!!
I need to learn CSS better hahaha.
You wouldn't be able to recommend a good book could you? :-D

Thank you so much for that too!