Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Please Help!!

  1. #1
    Join Date
    Jul 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Please Help!!

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Hmm. Have you tried altering the margin?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Jul 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Jul 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey
    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.

    Code:
        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

  10. #10
    Join Date
    Jul 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •