but the only browser that it displays it (or anything afaict, especially CSS) correctly is Chrome. Firefox and IE both have problems with the banner section here:
Works great in Chrome, IE leaves a gap between the main banner and the gradient bar, and Firefox inserts random gaps in the banner itself. Arrgh. Why can’t browsers conform? ON SOMETHING AS SIMPLE AS DISPLAYING A TABLE?
Are they sadists? How does anyone develop web pages in this insane environment? Arghh Arghh Arghh. :mad::mad::mad:
Wow that’s image-heavy. I clicked it almost a minute ago and it’s still loading. And, of course, all the links are images. I mean, it’s better than an image map, but what are you going to do about people viewing on their iPhones and such? Images don’t scale nicely. I fear much of your content is going to look like pixelated ass on anything other than a laptop or desktop, which would have been acceptable in 2005 or so.
Well, I may make a simpler version if it detects a handheld device, but your criticism seems misplaced. Any website designed to look good on a real computer is going to suffer on something like an iphone. I am not concerned with that at this time. I just want the thing to display correctly on the common browsers in use on pcs and mac desktop/laptops under broadband. I am not designing the website to work on a phone or a 56k connection.
What I want to know is why Firefox is inserting random gaps in the banner graphic that I have broken down into a table.
You’re missing a doctype. A missing doctype triggers something known as quirks mode in modern browsers, which can often produce different results in different browsers. Pop this on the first line, before the html tag (which should then be on line 2):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I just don’t get it. I can understand why different browsers may not do some esoteric thing the same, but damn it, this is a simple table that should display the same across all browsers. This isn’t something new, this is something that has been part of HTML since the GODDAMN BEGINNING. IE sucks. The new Firefox is being almost universally panned. I wonder if there is a reason that I use Chrome as my personal browser? Maybe because it is the only one that is worth a shit. :mad::mad::mad:
Holy crap. This thing spins out dozens of errors. I thought I coded the thing pretty well. Leave it to some standards body to take something elegant and make it completely unusable. :rolleyes:
Well, me for one. Once I switched to Chrome, I never looked back. Why is it that my code looks fine in Chrome, and pretty much sucks in Firefox and IE? Why is it that my CSS works fine and as expected in Chrome and not in Firefox and IE? Firefox is a bloated dinosaur and IE is beyond hope due primarily to Microsoft’s stubborn attempts to make their own standards.
The fact is the code ALMOST works in IE and has bizarre alignment errors for the table graphics in Firefox that make no sense at all. It is a very simple page, and Firefox cannot render it properly.
This isn’t my first time at the rodeo. I have made pages in the past, and have never seen cross browser compatibility issues this severe. There is a reason that I don’t do web development any more. I am doing this page as a favor for a friend, and I am regretting the offer already. :rolleyes:
Well, if you fixed them you’d be on your way to making the page work on more than just Chrome. IE6 might be a lost cause, though, but Firefox and IE8 should follow pretty naturally.
masterBannerTop.png and bar.png both need to lose 1 pixel in width to become 2302 px
Also, you shouldn’t be specifying parameters in the HTML; that can conflict with the CSS. Do it like your code snippet here which has no formatting, not like your actual page which is full of widths and heights, etc.
And IMO standards compliance is vastly overrated. There are too many browser versions and too many undefined rendering ambiguities for the standards to have any real meaning. They’re kinda neat as sort of a baseline to work against, but useless for actual compatibility testing.
Well, I would love to, but I am probably way over my depth here. It is flagging errors that I have no idea about. This is a very simple page, and I don’t understand why it works great in EVERYTHING BUT FIREFOX. It has one simple table that runs the banner, and the CSS that I have retained since abandoning the idea of doing the banner in CSS works fine in all browsers as well.
Perhaps I will see the problem when I wake. Off to bed.
But why are you using a table for layout? Browsers handle tables differently, hence the issues you see. Not to mention all of those hardcoded td widths are pretty bad. The whole thing is a real mess. Start over and forget most of the advice from that other thread. Use real layout containers and css this time!
Tables aren’t bad, they are great for tabular data. They are not meant for layout, period.
And just to explain the fix, I believe this has to do with the way Firefox renders image borders – images that are links get rendered one way, and images that aren’t links get rendered another way, and they don’t line up right.
And the horizontal thing is because Chrome lays out a table differently than Firefox; in Firefox the extra pixel gets randomly placed in the center, whereas in Chrome it’s at the end, but if you scroll all the way right you can see that the ends don’t line up right.
FYI tables are just extremely awkward to work with these days. You might want to consider moving everything over to DIVs or SPANs and using margins to relatively position things.
This seems like a useful post. I will try your suggestions tomorrow. Thanks.
I threw in a lot of those parameters in the HTML that probably don’t need to be there out of desperation. Interesting that they DON’T BREAK THE PAGE IN ANY OTHER BROWSER BUT FIREFOX.
Why do I have the feeling that those folks at mozilla are messing with me?
What do ya expect? It’s what happens when a committee designs a browser to try and match the incompletely-defined standards set by another committee complicated by the pseudo-standards set by competitors’ committees and the de facto standards set by a user community who tried to work around all the other committees to make their page look right on a set of rules obsoleted ten years ago
Everyone is to blame – Netscape, Microsoft, Mozilla, Webkit… everyone does things just a LITTLE bit differently, but enough to make ya insane. “Standards” my ass. It’s better than it was a decade ago, but still far from trouble-free.
Is it really better than a decade ago? I could make a decent page that would render in all browsers then. Yeah we can do more now, but this shit is just insane. I am freaking over some small pixel shifts that Firefox is rendering for no reason that I can see.
My roomie uses Dreamweaver and thinks I am crazy to hand code my crap, and maybe he is right. He does awesome web pages and has a bunch of clients, but I want to know how it all works and do it in Notepad++
He makes money. I haven’t done this for a buck in years. Yeah, I am stubborn. I am not trying to do this for a living.
[rant]
Actually, thinking about it some more, I think it’s actually often worse these days.
We went from “IE4 vs Netscape Communicator” to “IE 6/7/8/9 vs Firefox 2/3/4 vs Chrome & Safari vs Opera”, all with different rendering capabilities and subtly-different incomplete implementations of various CSS versions and functions and rendering quirks for images, tables, forms, bullets… then you have differences in PNG rendering, SVG compatibility, HTML5 capabilities…
We end up with a vastly more advanced web that maybe 20% of users can fully appreciate – for a year or two, until everything changes again.
The Web is pretty amazing for what it is, but man, I sure wish either either FF or IE won out back then… and then damned Apple and Google just HAD to jump on board the Webkit bandwagon! Grrrrr. And now, just to make our lives easier, we have to contend with smartphones and tablets and Flash vs Javascript vs HTML5.
Thank god flexible screens aren’t an issue yet – “Your navbar disappears when I roll up my screen halfway!” :rolleyes:
