CSS positioning when you can't even find the !*$%& error

fm1234

WF Mega Premium Member
Sep 8, 2007
1,405
63
0
I am working on a page and it shows up as a train wreck on several different browsers. But not on any that I use --

Firefox 3.6.10 and Epiphany 2.30 for Ubuntu
Chrome 7, Firefox 3.0 and IE 8 for Vista

BrowserShots insists that the page is screwy, specifically that the images in the header and footer are severely displaced to the right, with the header image "underlapping" the image to the right of the header. And unfortunately the person for whom I put the page together sees the same problem, although she is unable to answer the question "What browser and OS do you use?"

If you could at least click here and tell me what you see I would appreciate it. The CSS is largely a template from Glish that I've used as the framework for dozens of pages and never before encountered this problem, but it's hard to see what I've changed to cause this issue, doubly so since I can't duplicate the issue on a local machine to save my life.


Frank
 


Hey, not sure what this page is supposed to look like but it seems ok to me. Checked in IE6, 7 and 9 in addition to what you did above. One thing I did notice though, is the doctype declaration. You use shorttags in there in a few places e.g.

<link rel="stylesheet" type="text/css" href="style.css" /> (the trailing / closing the tag)

It's sort of a weird little thing that I don't think would be causing you problems, but it will cause it to throw validation errors:

[Invalid] Markup Validation of http://www.diversified-domains.com/accutrace/index.html - W3C Markup Validator

If you're going to do it that way, I would change the doctype from

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

After you do that, there will still be a handful of minor errors that it throws. Mostly missing quotes around widths, missing alt tags etc. I'm not sure if that stuff is causing you any problems, but I always like to start w/ code that passes compliance.

Also, a few random problems in your CSS that should be easy to cleanup

W3C CSS Validator results for http://www.diversified-domains.com/accutrace/style.css (CSS level 2.1)

PS> If you need something to check all the flavors of IE, you can download this free tool:
My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9
 
Random aside, as far as compliance goes this is what I do

- Check in IE 7-9. If IE 6 is causing problems, unless it's something simple I don't fix it anymore out of principle. If the client gets pissy, I just tell them that Google, YouTube, Digg etc have stopped supporting IE 6, so I have too. It just takes too much time to hack stuff for IE 6, time I'd rather spend on higher value initiatives. That thing needs to die, seriously.

- Check FF, Chrome, Opera and Safari

- Make sure the code validates

The above is going to cover the vast majority of traffic a site is going to receive. Just the way I handle it, not sure about anyone else.
 
Also, another thing

<div style="position:relative; width:750px; margin: 0px 160px 20px 220px; background-color:#002e82; border:1px solid white;">

Are you setting relative position with margins? Different browsers have weird intricacies with the way margins are handled sometimes. Maybe try using something like:

<div style="position:relative; width:750px; left:220px; margin-bottom:20px; background-color:#002e82; border:1px solid white;">

And see if that helps (if you can figure out what browser it's choking on).
 
I just had a look. Try narrowing your browser to 1/3 of normal and you'll see the underlapping header your client is seeing.
 
What is this "be nice to Opera 5" rule the code speaks of?

Also these don't validate:

line 37 a.main:link {color:##002e82;}
line 99 #h2 {font-color:red;}
 
Thanks so much for all the feedback guys. I'll be running through these suggestions in the morning and imagine that the answe is above.


Frank
 
CSS is craptastic...you'll always have discrepancies amongst different browsers...even between versions of the same browser CSS will still fuck you over

it's partly due to the developers of these browsers that don't properly implement the CSS interpreters...but that's a different story

i avoid CSS when possible...rending of HTML5 on the other hand, for those browsers who support it, is actually pretty damn good and i'll take over messing with CSS
 
Partly due? Come on now, don't blame CSS...blame software companies that can't write a standards compliant browser. Firefox has been rock solid with it forever, Microsoft just got their shit together with IE8. Regardless, if you write good code and use a global reset your issues should be minimal.

More info on standards compliance - Acid2: The Guided Tour - The Web Standards Project
 
CSS is craptastic...you'll always have discrepancies amongst different browsers...even between versions of the same browser CSS will still fuck you over

it's partly due to the developers of these browsers that don't properly implement the CSS interpreters...but that's a different story

i avoid CSS when possible...rending of HTML5 on the other hand, for those browsers who support it, is actually pretty damn good and i'll take over messing with CSS

What a load of bollocks. If you use a reset and know what you're doing there are almost no discrepancies between browsers, even back to IE6. Forms are about the only area where there are issues, and even then it's not terribly difficult to get them looking more or less the same across browsers. And tell me, how exactly do you put an HTML5 website together without using CSS to style it? Still using <font> tags are we? Or do you do everything in black and white?

OP, browser shots is cool and all for quick checks, but you should really install a copy of all major browsers on your local machine and IE6 on a spare somewhere under XP for testing. Download and install the IE Developer Toolbar (from MS) on IE6. It's basically like Firebug.

There is a good reset here from Eric Meyers, Eric's Archived Thoughts: Reset Reloaded and another one for HTML5 which is derived from his reset here CSS Reset – Refreshed • KINGdesk

There's another for HTML5 here which I haven't tried yet HTML5 Reset Stylesheet | HTML5 Doctor

It's easy to say abandon IE6 but when I and my clients still have upwards of 20% of customers on it, I can't afford to force them into an inferior experience because I was too lazy to make the site work. (not insinuating that's what's being said here, I completely understand the desire to get away from IE6 and let it die, and I agree that's what should be done in all but ecommerce type situations)
 
Hey, agree about the IE6 thing. Honestly, it's pretty rare that I have a problem that I can't figure out really quick. And of course, it all depends on the business case. E.g. if it's going to be a huge pain in the ass and usage is a few %, fuck IE6 basically. If it's an e-com site and the layout is seriously fucked (not a few pixels off or something), of course I would get it worked out.

Here's another good reset resource - http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
 
Pretty much shows up as a you described on the latest Safari, Chrome, and FF for me. (OS X)

This is not a CSS reset issue...this is a clusterfuck.

1) You've defined a bunch of z-indexes when there appears to be no need for that in your design.
2) You've absolutely positioned the visa/mc/amex logo graphic so that it's always going to be in the top right corner of the page, which is why it will overlap those banners when the window is too small. Don't use absolute positioning if you don't want this to happen.
3) You've thrown in <p> tags all over the place where they shouldn't be (around images for instance).
4) Half of your css is in the HTML and the rest is in style.css, which is just stupid and really annoying when I'm trying to help you.
5) I don't know why you've assigned margin-right on your banners...what are you trying to do? I'd remove that. If you're trying to center them, do margin-left:auto and margin-right:auto (they will move as window resizes to be in the center).
6) Your banners and that image near the bottom are too far to the right because your margin-left is too big...drop it so they line up.

I'm really curious as to how this could look right on your machine.
 
jordanj77 is on the right track. Without even going over your code, it's obvious that it's poorly coded. Things are moving around as you resize the window when there's no need for that. Try to clean up your code, this is not a CSS issue.

Are you charging for this or doing it for a friend?
 
What a load of bollocks. If you use a reset and know what you're doing there are almost no discrepancies between browsers, even back to IE6. Forms are about the only area where there are issues, and even then it's not terribly difficult to get them looking more or less the same across browsers. And tell me, how exactly do you put an HTML5 website together without using CSS to style it? Still using <font> tags are we? Or do you do everything in black and white?

I was wondering this as well what with all the deprecated tags now. Going back and reading it he said "whenever possible" I would imagine that means using the minimal css and then html on tables and forms and such.

Hasn't this css vs html fight been going on for years? Pretty soon they'll be men in bandanas and greased back hair singing about using CSS till their last dyin' day.
 
I was wondering this as well what with all the deprecated tags now. Going back and reading it he said "whenever possible" I would imagine that means using the minimal css and then html on tables and forms and such.

Hasn't this css vs html fight been going on for years? Pretty soon they'll be men in bandanas and greased back hair singing about using CSS till their last dyin' day.

I understand the whenever possible part, but that doesn't mean a whole lot. CSS isn't going anywhere. All the new HTML5 tags need to be styled with something... header, footer, sidebar, nav, plus all your usual text elements, like p, h1 through h6... forms, etc. etc. etc. It takes CSS to make anything look like something. CSS vs HTML fight? Not really, they go hand in hand.

Anyways, we're off on a tangent that has little to do with the problem at hand.

Props to Jordan for reverse engineering the OP's code.