Please Help!!

[chris_bcn]

This seems like an odd 'un to me.

In firefox there's a big gap between the header, the content and the footer divs. If you put a border round each div, then the gap goes away. Which would be fine if I wanted a border on it, unfortunately...

If you remove the image in the content div it seems ok in FF.

The site looks how I want it in IE, and I can't for life of me see what teh problems is

So can anyone of you, with way better css skills than I, see what the problem is?

Thanks a million

ttp://www.geocities.com/clbasey/ffodd.html

[jscheuer1]

A kludge fix would be to add a 1px border that is the color of the background of the page.

[chris_bcn]

Cheers,

I thought of that, but the background image has a gentle fade, so the colours don't line up right.

I keep staring at the CSS figuring it's something really obvious, but I still can't see it

[Twey]

Hmm. Have you tried altering the margin?

[chris_bcn]

yep - every which way but loose!

It's really starting to do my head in

I guess I'll just start from scratch and see if a stupid error crept in somewhere. Never had this problem before

[Twey]

No, no need for that. Set border-style to "hidden." The difference between hidden and none is that hidden does everything as if the border was there - it just doesn't show the border.

[chris_bcn]

great idea!

Doesnt work though unfortunately. As soon as the border is hidden the gap reappears.

All very odd - I usually have a problem getting pages to look good in IE rather than this way round!

[Twey]

Oh...
That is very strange. border-style: hidden should perform just like border-style: solid. Did you set all the other border-related options the same?
If so, that might be a bug.

[mwinter]

Set border-style to "hidden." The difference between hidden and none is that hidden does everything as if the border was there - it just doesn't show the border.

The hidden value is the same as none, except with tables where it has different semantics for border-conflict resolution.

The problem is with margins, but not the ones you're thinking about. The gap between header and content is caused by the margin on the heading element, and the gap between content and footer is caused by the margin on the last paragraph.

The style sheet below fixes this and a few other problems. One thing I would like to draw attention to is the pullquoteRight class. The alterations there allow greater flexibility when used with non-standard font sizes. Compare the behaviour of the two by pressing Ctrl++ (control-plus) in Firefox and you'll see overflow in yours.

    body {
      background: #ffffff url(ffodd_files/bluefog.gif) repeat;
      color: #000000;
      font: normal 100%/120% "Trebuchet MS", verdana, arial, sans-serif;
      margin: 0;
      text-align: center;
    }

    p {
      margin: 0.5em 0;
    }

    h1 {
      background-color: transparent;
      color:#666666;
      font-size: 130%;
      font-weight: normal;
      margin-top: 0;
    }

    #header,
    #wrapper,
    #footer {
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      width: 769px;
    }

    #header {
      background: transparent url(ffodd_files/newmast_copy.gif) no-repeat;
      height: 190px;
    }

    #wrapper {
      background: #A88528 url(ffodd_files/newbody2.gif) repeat-y 0% 0%;
      padding-bottom: 0.5em;
    }

    #leftnav {
      float: left;
      width: 160px;
      border: 1px solid red;
    }

    #content {
      margin: 0 50px;
    }

    .pullquoteRight {
      border: 2px #000;
      border-style: solid none;
      float: right;
      margin: 0 0 1ex 1ex;
      padding: 0 1ex;
      width: 12em;
    }

    #footer{
      clear: both;
      background: transparent url(ffodd_files/wornfooter.gif) no-repeat;
      height: 69px;
      text-align: center;
    }

Hope that helps,
Mike

[chris_bcn]

Thanks for that - I'm going to give it a go now