Crybaby Post - Safari HTML Rendering Problem

[anotherNitwit]

Hello, I am new to the forum and this is my first post. I believe I may have found a bug in Safari, maybe not. In any case, I would like some help in getting my website to render properly in Safari. Preferably, this would be achieved in the most mindless, least academic, easiest cut-and-paste way possible.

Background: I am a DIYer with only one site. It is fairly simple and is 100% valid in HTML 4.01 Transitional. It is rendering correctly in all the major OS/browser combinations except Safari. In anticipation of this post, yesterday I got 46 screenshots and revalidated every page.

The problem has to do with centering and tables, possibly treatment of an image. One look at the site in question in Safari and you'll see the problem. I'd put some code here to look at, but don't even know which part might be the issue. I've looked at similar posts here and elsewhere and remain stumped.

Here are a few pre-emptive, defensive disclaimers: I know little to nothing about XHTML or CSS and am not interested in suggestions regarding those, like I've seen elsewhere here, unless they also contain a solution in HTML 4.01 Transitional, or maybe a special instruction for Safari. Of course, the other browsers must remain unaffected. No offense meant, I am just being honest as I know my limitations and want a practical fix. I'll take those classes when I get a chance. Right now, I'd like to get this out of the way. Besides, I would think Safari and its users would want it to either conform with both the market and the W3 standards, or at least have an explanation for why it does not.

I should also mention that I am the type that regularly finds and falls into the cracks and walks in through the spinning out-door, so this would be typical. Have I done it again?

Thanks.

 

[coocooforcocoap]

I dont think the DTD u are using supports nested center tags, see firebug error message in your code:
Unknown property 'CENTER'. Declaration dropped.
http://www.suretyinsider.com/AboutUs.html
Line 0
Better just use css to place all the page elements...cheers..

 

[anotherNitwit]

Thanks coocoo, BUT

I am using the Firefox "Web Developer" plug-in, which I think is like Firebug, and I can't find any errors. The validator is showing a green check mark for HTML, and CSS for that matter.

Besides, the DTD passes its W3C validation, so why would the nested centers be a problem only in Safari?

 

[angelwatt]

Actually Safari may be the one displaying it right. The center tag is deprecated along with the font tag.

Also, validation only means the HTML is valid. It in no way indicates whether the page will be displayed as you intended.

Edit:
A solution though is to add style="WIDTH: 92%;" to the larger (or parent) center tag. It'll make that content area look a little narrow, but still looks OK. It's not great solution, but would take an overhaul of the page to really fix it.

 

[anotherNitwit]

Thanks angelwatt...

On my test page, I used the newer tags and still got the "CENTER" warning, which I finally found on the FF Error Console. The error remained, after I removed the tags, saying it was a "property," so I took the last "CENTER" out of the <IMG ..> area where its value was 0px and seemed to do nothing anyway.

The error console is now showing nothing at all regarded to "CENTER," or anything else at all, yet over on http://www.browsrcamp.com/ I'm still getting the same result.

See what you think of this: http://suretyinsider.com/screenshooter.html

I'll see what you think of that, then look at the 92% solution. Its time for me to knock off for the day.

I'd love to get back to classes and redesign this thing from the bottom up, and I will, but I appreciate your help with this one as it is.

Right now, I'm seeing no more deprecated tags and nothing on the FF Error Console, FF Web Developer plug-in or W3C validation page. So I am again at a loss.

 

[angelwatt]

Right now, I'm seeing no more deprecated tags and nothing on the FF Error Console, FF Web Developer plug-in or W3C validation page. So I am again at a loss.

Deprecated tags won't create validation errors. Deprecated means those tags are being phased out of the standard and so should not be relied on anymore. Knowing what is deprecated is simply something designers/developers are suppose to become familiar with, though the Web Developer tool bar in Firefox does have an option under Outline to show where there are deprecated tags on the page.

 

[anotherNitwit]

That begs the question even further...

Is there any sort of "validator" out there that might be Safari-specific? That would be of great help. Screenshots are only helpful to a point.

I am coming up clean in every way I know how, and getting that odd result only in Safari.

I am only a first-time DIYer, but would like to get this right. Is it worth a complete make-over for the (1.7%?) share? Probably, in my mind, eventually.

But I am also stubborn enough to want to know what I've done wrong to date. If Safari has a problem, preference, quirk or whimsy, I'd like to know about it before starting over, anyway. As Jack Nicholson once said, "Maybe this is as good as it gets."

 

[angelwatt]

I'm attaching a rework of that screenshooter.html page you linked to. I did it as tables so it resembles the way you were coding. I would have preferred to do it without tables, but said you'll learn that stuff later so wanted to keep it as close to your technique as I could. It looks the same in Firefox and Safari at least. The image isn't quite the same dimensions as before, but you can adjust that for your needs. There's some small differences, but for the most part it looks the same.

As far as a "Safari Validator," it's like I said before, valid code doesn't mean it'll look the way you expect, it's just that the HTML was written in the right syntax. Some parts of the standards are written without flexibility in their interpretation, but other parts can be interpreted differently, which is why browsers don't show the same page exactly the same always. Your code has a lot of empty tags and, not to be mean, bad coding techniques. You can't expect it to look perfect in every browser until you're more knowledgeable on the web standards and good coding practices. That's something that simply comes with time and practice.

Dang thing didn't attach. Attaching doesn't seem to be working. Well, here I'll host it at my site for a little bit.

-- link removed by poster --

OK, got it attached. Didn't realize you couldn't upload html files so had to rename with txt extension.

 

[anotherNitwit]

Thanks anglewatt...

You are very generous with your time and knowledge. I have saved those two files, so you can take down that web page whenever you are ready.

"Bad programming," while no one wants to hear it, is really no surprise and I thank you for your candor. It is a cut-and-paste Frankenstein of a site, partially done on an old WYSIWYG editor that came with my web host, so it is certainly far from elegant. That said, let me do a little more excuse-making and maybe actually contribute here by leaving a few questions hanging out there about Safari.

Empty tags and inefficiencies notwithstanding, it seems to me that the problem is essentially nothing more than percentages of percentages and centering (another percentage) within the remainder. Sure, empty deprecated FONT tags and a few <P> </P> left below out of sentimental reasons may cascade into something hideous, one could always argue and I'll just have to assume for now, but how such trivialities could supersede fundamental, percentages of percentages laid out in seriatum above remains puzzling.

I understand, and thank you for reiterating, that browsers reserve the right to interpret code within the rules, the code flexibilities, options and the like. Like any codified system, expectations and intentions remain unfulfilled and life is not fair. But is "unforgiving" a word Safari wants footnoted beside last month's 1.9% market share? That's up to them, as they are, once again, the only OS/browser combination that doesn't correctly parse the intention. Trivialities and unintended consequences may ultimately cascade their way, too. I don't know. But then, its a Crybaby Post from anotherNitwit, so maybe there is something to it, maybe not.

I could go on again about making sausage and all the hard-won validities that site has passed. After all, it is a Crybaby Post. I just checked the page I am looking at right now, a page by web enthusiasts for web enthusiasts, and its showing 31 errors, deprecated tags, etc. Whatever.

Coincidentally, I got the new catalog in the mail yesterday for the evening school, Emory in Atlanta, where I got what little I know in the first place. Maybe its a sign.

For now though, I'll try to learn from what you provided. How much time that 1.9% is worth right now is just something I'll have to consider.

I'd still like to know why me, and every other major, current OS/browser combination here http://browsershots.org/ sees this thing one way, but Safari another.

Thanks again for your efforts. I truly appreciate your help.

 

[angelwatt]

You are very generous with your time and knowledge. I have saved those two files, so you can take down that web page whenever you are ready.

Your welcome, and thanks for letting me know you got the file.

"Bad programming," while no one wants to hear it, is really no surprise and I thank you for your candor.

I felt you could handle the candor. You had already admitted you wanted to get to learning more later. There's a number of people that come through here seeming to expect web design to be as easy as writing a Word document, but the truth is people spend years at school learning this stuff (though, admittedly I'm self taught, but have been doing it for over 6 years now). Not too many people go out and buy a scalpel and expect to be able to do surgery, or at least good and safe surgery.

I understand, and thank you for reiterating, that browsers reserve the right to interpret code within the rules, the code flexibilities, options and the like. Like any codified system, expectations and intentions remain unfulfilled and life is not fair. But is "unforgiving" a word Safari wants footnoted beside last month's 1.9% market share? That's up to them, as they are, once again, the only OS/browser combination that doesn't correctly parse the intention. Trivialities and unintended consequences may ultimately cascade their way, too. I don't know. But then, its a Crybaby Post from anotherNitwit, so maybe there is something to it, maybe not.

I could go on again about making sausage and all the hard-won validities that site has passed. After all, it is a Crybaby Post. I just checked the page I am looking at right now, a page by web enthusiasts for web enthusiasts, and its showing 31 errors, deprecated tags, etc. Whatever.

Yeah, that's the other side of the coin. You can have invalid code that looks the same in all browsers as well. Just look at the Google homepage. The designer has to make the choice where they feel the "rules" can be bent. Like for Google, having pages that are hit hard all day long they need to minimize their code as much as possible to save on bandwidth, so they leave out pieces of code that would make it valid, but still lets it look correct.

I sometimes have mixed feelings about Safari's unforgivingness. The standards enthusiast in me feels while the realization that there are a number of sites that won't render as expected because of whatever and make people think it's Safari's fault makes me feel

For now though, I'll try to learn from what you provided. How much time that 1.9% is worth right now is just something I'll have to consider.
...
Thanks again for your efforts. I truly appreciate your help.

The fact that you were able to take my words without offense and that you're willing to ask questions and hear answers shows that you'll do better than most when you start studying this stuff more. Most won't put forth the effort needed.

I wouldn't spend too much time with the code I provided. Table layouts aren't something you want to get too comfortable with, and the inline styling I did should in its own CSS area, but that said, there's probably something you can still pick up from it.

Good luck with your site.

 

[anotherNitwit]

Why not?

You've probably tweaked my curiosity just enough to put me over the edge for an Emory CSS class next month. I've come this far, why not?

All I had before was HTML, Web Images, and Intro JavaScript, a couple of books and a lot of trial and error. My HTML teacher was entirely self-taught and is also teaching the CSS class. He is a full time web programmer, including databases for the military, and teacher. Maybe I'll go check up on him.

If only I were younger, I might go into this full time. I like the SEO aspect as well.


aN