Wierd CSS/XML bug

Discussion in 'CSS' started by Josh Inno, Feb 23, 2007.

  1. #1
    I'm currently putting together a page inside of an existing site template.

    The page is The State Chamber’s Leadership Nebraska Class I and the style sheet for it is here.

    I have a rather interesting bug. For some reason there is a huge gap under the first picture/text set, even though the containing code is identical. If I insert some line breaks above that card it goes lower on the page, as I'd expect, but that gap under it compresses until it's as small as any of the other gaps between the picture/text sets.

    I was hoping I could get some help figuring out what's causing it.

    It shows up in both IE and Firefox as far as I can tell.
     
    Josh Inno, Feb 23, 2007 IP
  2. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #2
    Try adding;

    div.card { overflow:auto; }
    Code (markup):
    Looks like float problem, but unsure as to what's causing it. Try validating the CSS & HTML to correct the errors it flags up too.

    Take care,
     
    AdamSee, Feb 23, 2007 IP
    Josh Inno likes this.
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Adam's right. I prefer {overflow: hidden;}, but either works. Also, get rid of the empty .clear divs. I believe I gave you an example of how to do this in another thread. Apparently, you didn't try it.

    You're using an editor that's producing the windows-1252 proprietary char-set. It uses entity values that are invalid in ASCII, ANSI, iso-8859-x and utf-8. That's why my browsers, which default to utf-8, show a question mark in place of, for example, an apostrophe. That's also why the validator fails the page—well, that and a missing </p> on line 175.

    cheers,

    gary
     
    kk5st, Feb 23, 2007 IP
    AdamSee likes this.
  4. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you very much. And actually, I had started work on this page before I had gotten the link to you on how to get rid of the empty clear divs.

    I'll fix the <p> tag, and I was just using the text someone had sent me in a word file to enter it into the page. Obviously a mistake. I'll take a look at fixing the things you guys pointed out. Thanks.
     
    Josh Inno, Feb 26, 2007 IP
  5. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you both. I got the darn thing validated like I should have earlier, too care of some other various errors, and then added over-flow: hidden. It worked wonderfully.

    Next I'm going to try some tricks talked about in the other thread.
     
    Josh Inno, Feb 26, 2007 IP