Need some CSS help

c-unit

I need to turn this template http://img.photobucket.com/albums/v654/coopermor/dallasfinal2.png into a standards compliant design. I've got it looking (almost) all correct in Safari, but then tested it in others and it died on me (http://coopermor.com/dallas/navigation.html) You're free to use as much of my code as you need. If you can fix it for all browsers (I need it tonight) I'll PayPal you $45 and donate $45 to Mark for his Macbook. Updated: see below.

Oldmanpants

what exactly do you mean "it died on me"? i just quickly tried it in Mac FF, and Mac Safari, and it seemed to work fine in both. I don't have my windows machine handy until later this evening, but an idea of what exactly is wrong would help a lot. cheers, jb

c-unit

Of course - http://www.browsercam.com/public.aspx?proj_id=260623

Oldmanpants

ok, so its explorer for windows that is having trouble eh?

c-unit

Yeah...

Oldmanpants

ok, just looking veeery quickly, try changing the "float: right;" to "float: left;" in #topright if that doesn't at least get you started then i will take a look in about 2hrs when i get home from work ;)

Oldmanpants

ooops... judging by the browsercams, it looks like it'll take a bit more ;)

c-unit

edit: woops

Oldmanpants

c-unit, this looks like very good markup anyways which should make this rather easy to fix. I'll check back in when i get home and if you haven't gotten it by then, I will help out. unfortunately i havent got a windows box at work and i have a 1hr commute so it will be a little later. cheers, jb

c-unit

Thank oldmanpants, the client only gave me a day to code it, and now he's breathing down my neck.

Oldmanpants

just looking at your browser cam and it looks as tho you almost have it all except IE7beta. or is that wrong?

c-unit

Well, I'd just like them to be a bit tighter.

c-unit

I can't verify this (because I'm on a Mac) but the client says when they go to the site (http://dallasxtreme.com) it works fine the first time, but when they refresh it shows this-



The URL is http://dallasxtreme.com

Any idea what could be causing this?

c-unit

I got a reply off the css-discuss mailing list that I should apply margin:0 to my forms for IE. Can any reproduce this problem now - http://coopermor.com/dallas/ Thanks!

Felipe

IE6: as broken as on your screenshot, even on the first visit before a refresh (and still there after the refresh) EDIT: http://coopermor.com/dallas/navigation.html looks fine in IE6 btw.

c-unit

Felipe, would you be willing to try them both a couple of times? They said it happend on the refresh. I tested my version vs. my version with his updates. He mussed up the code somehow dammit. Thanks Felipe for pointing that out :).

Felipe

I just looked at both offline: if you apply margin: 0px; to "form" and not "form input", it should be fine with http://coopermor.com/dallas/ Now I'm going to try both :)

Felipe

http://coopermor.com/dallas/ seems to be ok while loading the page (half a second) and right before it's built, the div is translated by a few pixels downward (like if the form above was expanded to its definitive size after a margin-bottom not null was applied) http://coopermor.com/dallas/navigation.html is OK whatever I do ... BTW, you have 2 greens in your header (body.png and topbar_bg.png): is this intentional?

lech

One major quirk with offsets like this in ie6 is the result of 2 borders on elements which make contact with one another. IE specifying a border-bottom followed by the next element in line with border top having a border throws them apart. Even killing padding and margin will still make this appear.