Can anyone account for these differences?

[Surefire Mechanical]

Hello again,

 

It would seem that the final piece of my puzzle doesn't want to play nice. I've wrapped my footer links and text in a <div> and styled everything so that the footer is nice and centered, filling the width of the site_wrap <div> it is all within nicely- that is in IE any way. In Firefox there are clearly differences between font width (which should just be font-size), line-height, font-weight, letter-spacing and word-spacing. To combat this, I tired styling each of these properties with exact values (in case browser-default stylesheets were slightly different) as follows in the bottom 5 properties:

#bottom_links { width: 1200px;	        align: center;	        margin: 0 auto;	        position: relative;	        top: -60px;	        left: 20px;	        font-size: 11.3px !important;	        font-weight: 300 !important;	        line-height: 15px !important;	        letter-spacing: 0px !important;	        word-spacing: 0px !important; }

Note- the !important's shouldn't even be needed as there are no other calls to #bottom_links any closer to the content, but I even tried it in case.

 

Yet none of this styling had any effect. The result didn't change a bit:

 

An example of this has been posted at http://www.surefireny.com/footer_problems.html as I am sure I must be missing something in the code or CSS

Edited April 5, 2014 by Surefire Mechanical

[newseed]

Adjust the font size: 11.3px You really can use decimal pixel and expect to get the same results for all browsers. IE seems to adjust it a 1/10th at a time (11.1px ; 11.2px ; 11.3px and so forth) whereas Firefox only adjust at 1/2 increments. So 11.1px; on up to 11.4px will still be 11px. Once it hits 11.5px then it displays as 12px.

 

The only time you use decimal for font is when you use em or percentages. You best and quickest solution is change your font size to 11px and the uses your current css positioning to center it.

Edited April 5, 2014 by newseed

[dsonesuk]

No such styling as align: center;

 

text-align: center; yes!

 

I think the problem maybe because you are using pixels with decimal places, and different browsers may render this differently to a integer value greater or lower than you want. either work with integer or use em instead that accept decimal.

[Surefire Mechanical]

Unfortunately, this problem existed long before I had decimal values in place. To be clear the problem existed when there was no styling in place, and also with whole number values as well.

When I saw how drastic the jump from 1 to 2 px was on word-spacing etc., that's when I started to use decimals.

[dsonesuk]

Seems its probably a browser text rendering problem, they use different methods so they will never be the exactly the same, but using decimal value for pixel unit is not going to help, I used verdana font once and the difference was very noticeable so i used different font and problem went away.

 

Just a note, don't use position: relative; for positioning (margins padding instead), its really really bad, and tables for layout is hundred times worse.

[Surefire Mechanical]

Thanks for all your help. I think I will try a different font, and I will stay away from relative positioning moving forward.

 

Typically, I never use tables. I hate them. The gentleman that is directing my marketing efforts had me use them as

a way to get the search engine optimized content before the menu links etc. It has to do with the way the web crawlers

read your code and helps you get ahead in the SERPs

 

I just find it odd that it's only with that footer section. When looking at differences between browsers, the rest of the page should, in theory, be worse since it uses larger text with bigger spans of writing but those differences at this point (now that I changed to px values, and set a value for line height) are barely noticable.

Edited April 6, 2014 by Surefire Mechanical

[dsonesuk]

Err??? changing it to div layout with content above menu is just as achievable, its more readable for accessibility reasons and loads quicker, which also becomes a factor in SEO ranking because with a table layout it has to identify the structure of table (table, tr, td etc to </table>) then after that display it and its content.

[Surefire Mechanical]

I don't claim to be an expert on SEO but this guy does, lol. According to him he doesn't just mean above it in the actual code- that would be easy to acheive any number of ways. He says that the crawlers read a webpage, as it appears graphically on your screen- left to right top to bottom (not reading straight through the code in this way). So, having a blank table (or in my case it has the company telephone number) above the left menu bar puts the top of the middle content table (with the optimized text) above the nav links so the crawler reads it first. That being said, there's always more than one way to skin a cat, so I'm sure there are other methods that work just as well. This guy showed me dozens of websites he optimized that are #1 with high competition, so I know whatever he's doing works.

 

Also if you test the load speed of my page, it loads faster than 99% of all web pages. It was kept simple for this very reason.