Formatting difference between Firefox and Safari

[wolf]

Hi,

I’m building my first wordpress site and most everything seems to be cool in Firefox. In Safari however there’s a glitch which I can’t find the reason for.
In a certain page I display title and excerpt plus post thumbnail for the posts. The formatting of the excerpt is screwed up in that there seem to be a couple of line feeds after a certain number of characters. On the similarly styled archive pages the same screw up shows up but after a different number of characters.

All is fine in Firefox and I can’t figure out – neither with Firebug nor Source View – what’s happening.
Any ideas what’s causing it or how to troubleshoot?

see>> http://blog.wolfsview.com/wordpress/articlesstories/

Thanks for all help

[TheDoc]

I can’t imagine it being the cause of the error, but I would run your page through a validator and fix those first.

Remember, an element with an ‘id’ can only be used once on a page, eg:

Will not validate – you should be using classes instead:

[soap]

What the doc said, plus these errors:

In this line

You should replace ; with />

There are several instances of repeated id’s. Please note that you cannot have more than one element with the same id on a page. You can achieve the same exact results using classes. A good analogy is if you take some product you bought and find the serial number, that is the id. There exists only one item with that serial number (id) but there exist many with the same bar code (class).

Some of those repeating id’s I happened to see were:
thumb-divider
excerpt-box
page-comment

In this line:

Another day in Paradise

The ordering of elements is off.

it would be

In this case you have the closing tags for

,  and 

out of order.

The div,

, according to w3 standards is not allowed to exist there. Style the ul in the same was as the div if possible.

In html 4&5 all elements need a closing tag, this includes elements that don’t have anything inside of them like

Since you are putting nothing in it you close it with a space like so

This applies to things like

 and 

as well.

In summary there are a lot of errors, none hard to fix. If corrected, these should handle your problem. Once they are corrected, if you have more problems just let us know and we’ll straighten you out.

Regards

[wolf]

Well, thanks a million guys!
I really appreciate your taking the time to look into my problems and coming up with very helpful suggestions.
I followed them to the best of my knowledge and the validation results are much better now.
However…. the problem mentioned in my first comment didn’t go away, unfortunately.

Still this strange formatting in Safari and not in Firefox.

Any other ideas?

[wolf]

Yeah, I know… simplicity = elegance = sign of true masters in any field. And I’m still a long way away from that distinct status! I still have to do things with kind of a brute force approach because a lot of the more intricate aspects of html and css are waiting to be discovered.
Anyway, a pragmatic combination of your and my version worked !!
So thanks so much, your comment was extremely helpful, not only with respect to the actual problem but also in my quest for more coding mastery..-;)
Thanks again,
Wolf

[soap]

Try to remember that if there are major differences in what browsers are displaying, it’s usually your fault (not counting old versions of IE). By writing clean and correct code you will be pretty much browser-difference free.

[Author]

Posts