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.
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,
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
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.
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.