Problems with layout in Firefox

[charlesdavison]

Wondering if anyone could help me with this - it's driving me mad!

I've managed to get my page general layout to look pretty much as I want it in IE but Firefox presents some problems...

The page here (http://www.worldcycle.co.uk/testsite/test.htm) illustrates some of the issues I'm running into. The css file is here (http://www.worldcycle.co.uk/testsite/style.css).

First and most obviously, why is it I can't get the grey image to display in the second 'pod' as it does in IE? I want to use absolute positioning but in terms of the div it is actually in. Why is it positioned 10px from under the nav bar rather than from where the second 'pod' starts?

Is this an issue with nested DIVs? I've tried using relative positioning but that doesn't let me place it next to the text properly (even in IE)...


Other issues:
1. see the left sidebar (why is the padding here not working in Firefox?

2. why does the header image (the road) run over the border on the right side? I have a feeling the border is causing me lots of problems, is there a better way to create one?


many thanks for any help

[Exuro]

/* From style.css */
.leftpodText
{
position:relative;
top:0px; left:5px;
width:130px; min-height:1px;
z-index:1;
overflow: visible;
}
<!-- From test.htm -->
<p class="leftPodText">This is the left sidebar</p>
You just need to make sure your class names match exactly...

[BonRouge]

Add 'position:relative;' to #competitionPod. That will tell anything within that div to position itself relative to it (so your absolutely-positioned image will be relative to its parent).

And, it might not be the best solution, but if you add ' #header>#mainNavTable {right:2px;}' to your css, it should fix the overlapping border thing (for the main nav).

I'm not sure what you want exactly with the left nav...

I hope this helps.

[charlesdavison]

Thank you very much Bon Rouge - that's exactly what I needed to know!

Just out of interest - say the #competitionPod div needed to be positioned absolutely on a page, but I still wanted it's contents to be positioned relative to it as you showed me how to do, would the following work?

#competitionPod {
position: absolute;
top: 10px; left: 50px;
position: relative;
}

(i.e. does that code make 'competitionPod' position itself absolutely on the page - or within a parent div - and then switch back to relative for the positioning of child elements within it?)



And Exuro - thanks for that tip too, wasn't aware that CSS was strictly case-sensitive!

[BonRouge]

Erm... no.

[charlesdavison]

is it possible to do? if so how does it work?

thanks

[Ben Rogers]

If I am not mistaken, the position style is not inherited, and also Cascading Style Sheets, remember? Whatever rule has the most presedence (in this case, last declared) will be applied.