MetaChat - CSS troubleshooters help!

MetaChat is an informal place for MeFites to touch base and post, discuss and chatter about topics that may not belong on MetaFilter. Questions? Check the FAQ. Please note: This is important.

10 January 2007

CSS troubleshooters help! So I redesigned my site with CSS instead of tables, but it displays inconsistently between browsers. Firefox is perfect, IE sucks rocks in hell. This was my first CSS attempt (it shows in the code! ACK)I'm willing to pay someone to take a look and straighten it out. Also posting on MeFi jobs...

post by: chewatadistance at: 10:17 | 23 comments

I will page sciurus to this thread, maybe he can help.

posted by LunaticFringe 10 January | 10:55

Thanks LF!

posted by chewatadistance 10 January | 11:07

No prob chewy. He's uber-busy at work so may not get the email until he gets home. I hope you're not looking for a speedy answer.

posted by LunaticFringe 10 January | 11:25

Try putting float: left; into hilite1 and float: right; into hilite2. It looks like there isn't anything in the code to show their relative position to each other and since hilite1 comes next in the code, IE is parsing it below hilite2. That's the only problem I see...

posted by sciurus 10 January | 12:07

And you're a genius if that is your first CSS attempt. Kudos.

posted by sciurus 10 January | 12:08

I am so very very very much NOT a genius. I stole some code and mangled it until it looked somewhat like I wanted. my little o'reilly CSS pocket reference is looking pretty frazzled! But thanks. :) I will throw the float in and see what happens. Thanks for looking at it!

posted by chewatadistance 10 January | 12:15

Wow. That sure looks like First Direct. Is that where you stole it from?

posted by seanyboy 10 January | 12:30

Oh, chewy, it looks great! Nice job!

posted by taz 10 January | 12:42

When I'm home this afternoon we can get on IRC and hash it out if we need to.

posted by sciurus 10 January | 12:48

taz, may I ask how that CSS project you were working on last month is going?

posted by danostuporstar 10 January | 12:58

Thanks taz! That means alot coming from the image and webby whiz on the Greek isles. seany - I stole it from urlgreyhot. sorta.

scuirus - yeah I dropped the floats in but nada. I should be around.

posted by chewatadistance 10 January | 12:58

ooh, dano! It's done, but I haven't finished the static pages, just because I've been buttlazy during the holidays while mr. taz was here. Now he's not, but I'm still buttlazy. I'm going to finish them tomorrow, I swear! :)

posted by taz 10 January | 13:09

Actually, it looks mostly ok in IE(6) here? Is the problem mostly that "What have you uncovered lately?" and image aren't lining up correctly and have too much whitespace around them?

on preview.....awesome, taz!

posted by danostuporstar 10 January | 13:12

Err, substitute a period for the first question mark. :)

posted by danostuporstar 10 January | 13:12

yeah that's it, dano. and it wigs out on the apostrophe's in the text below.

posted by chewatadistance 10 January | 13:40

Actually, chewie, I'd blame the markup more than the CSS. I don't see the point of having so many 'hilite*' divs. (This is somewhat a matter of personal taste of course.)

Replacing lines 43-57 with the following seems to come close:

    <div style='background: white; margin: 0; padding: 0; border-bottom: 1px solid #ccc;'>
        <h1 style='float: right; height: 5em; margin:0; padding: 100px 20px 0 0;'>What have you uncovered lately?</h1>
        <img src="common/edgerton-apple.jpg" />
    </div><!-- /#hilite -->

But it messes up the top margin in the 'teasers' div below it a bit.

I moved the style inline (and out of the css file) because #hilites seems to be defined, and redefined, in a couple of places. It should go back in the css file eventually, of course. Actually, I think the #hilites thing is kind of symptomatic of the problem .... there's just more code there than there needs to be. A little more clean up and I think you'd be good to go.

It does look pretty!

posted by danostuporstar 10 January | 13:57

The apostrophes can be fixed just by removing the entity and typing a literal ' mark. (Though the opposite would be true of the copyright mark...add the & copy; entity in place of ©.)

posted by danostuporstar 10 January | 14:00

Thanks for looking at it dano. If I ever get brave enough to code something from scratch it's going to be much cleaner than this go round!

posted by chewatadistance 10 January | 14:44

Wait, is it fixed now? I'm home, and can chat on IRC now...

posted by sciurus 10 January | 15:55

not exactly - dano is looking at it also...I'll email. one moment...

posted by chewatadistance 10 January | 16:15

I'm just playing around for my own amusement mostly. There's probably an easier fix.

posted by danostuporstar 10 January | 16:32

I fixed a couple of things, but not the display issue in IE>7.

posted by sciurus 10 January | 17:46

IE6 is still wiggy but IE7 and FF are magnificent.

Can I just say that you guys are the classiest, most wonderful people in the intertubes? I wish we were all in the pub up the street and I was buying everyone rounds. And it could be snowing. And the gas fireplace would be on.

posted by chewatadistance 11 January | 08:12

← Eponysterical! || Let's write letters! →

HOME || REGISTER || LOGIN