Paizo logo misaligned


Website Feedback


In my Firefox, the Paizo logo in the top left, with the golem, is about 2 pixels higher than the rest of the blue bar across the top.

This doesn't happen in Chrome or in Internet Explorer.

This has been going on for a while now, definitely since the Great Golem Sale, if not before.


Playing around in the Firefox inspector pane, shoving a "vertical-align:bottom" on the img tag in stylesheet-2004.css seems to fix it without breaking anything else (although putting it as a style attribute on the specific paizo img works too.)


Paizo Charter Superscriber; Pathfinder Companion, Pathfinder Accessories Subscriber; Starfinder Charter Superscriber

Yeah this is bugging me too. Weird.

Digital Products Assistant

The space is actually caused by a bug in Firefox (the browser places a space around images stuffed into link tags and is fixed by changing it to display: block;). This is on our radar for things to fix.


Paizo Charter Superscriber; Pathfinder Companion, Pathfinder Accessories Subscriber; Starfinder Charter Superscriber

Good to know! :)


Firefox is rendering the white space characters around the IMG tag. To fix it, just remove the carriage returns, tabs, and spaces separating the IMG tag from the A tags on either side. For example:

<a href="/foo"><img src="whatever.png" alt="stuff" /></a>

Instead of:

<a href="/foo">
<img src="whatever.png" alt="stuff" />
</a>

No CSS required.

The alt text "Paizo top nav branding" does not seem terribly useful for blind visitors.

Also -- tables for layout? In 2014? Really?

Sovereign Court RPG Superstar 2009 Top 32

Tinalles wrote:
Also -- tables for layout? In 2014? Really?

Yeah, really. IE 8 (or even earlier!) still have substantial market share. CSS3 is far from universally supported. As much as me likes fancypants layouts, if I was called to develop a webstore with associated forums, I'd also be very conservative about the layout. If there is any even halfway-popular browser having trouble with an element, style or script, it's out.


TerraNova wrote:
Yeah, really. IE 8 (or even earlier!) still have substantial market share.

GS Stat Counter shows IE8 hovering around 9% at the moment. That's significant, but not "substantial". IE 7 shows up in the top 12 at about 1% market share, which is negligible.

That said, those are global stats, and thus only a general guide. The profile of Paizo-specific visitors could differ from that global average. Perhaps Paizo's customers are significantly more conservative than most people when it comes to browser versions.

I'd be interested to see. Chris, would you be willing to share a general breakdown of Paizo visitor browser versions?

TerraNova wrote:
CSS3 is far from universally supported.

That's true. But you don't need CSS3 for layout. The only properties CSS3 introduced that are even useful for layout are the multi-column properties, and you're quite right to suggest that support for those is not ready for primetime yet.

Most layouts, however, still rely entirely on CSS2 properties. Margins, padding, borders, floats, and the occasional judicious application of positioned elements (either relative or absolute) are entirely sufficient. They're not without their occasional problems, but neither are tables.

Tables, however, come with some significant downsides:

1) Leading the list is that they make the page more difficult for blind visitors to navigate, because screen reading software announces the presence of each and every cell.

2) They tend to bloat the HTML. Paizo's use of tables is fairly moderate on this point.

3) They have to be transmitted with every page load, which uses bandwidth. Compare to CSS, which can be stuck in an external file and cached by the browser.

TerraNova wrote wrote:
If there is any even halfway-popular browser having trouble with an element, style or script, it's out.

Neither you, nor I, nor anyone else on this planet is capable of designing a web site that will work equally well in ALL circumstances. It's simply not possible to account for every possible factor.

So it's a matter of choosing where to draw the line, to supporting the conditions that most commonly occur amongst the visitors of the site you're maintaining. How much time and effort does it make sense to sink into supporting the less common circumstances? I would be astonished if any significant portion of Paizo's customers were stuck on browsers so old that they can't handle CSS2.

In the past, I myself once produced a design which nested tables seven deep. That was, however, in 2000. Or possibly 1999. I've moved on since then. So has the web design industry. It would not be a world-shattering move for Paizo to follow suit.


Who runs GS Stat Counter? I find it interesting that they combine all Chrome versions into one line and break out all IE versions into seperate lines. Seems like that skews the perseption doesn't it?


GS Stat Counter is run by StatCounter.com -- they provide a web analytics service, roughly similar to Google Analytics.

As for combining Chrome and Firefox, that's because I clicked the checkbox in the config section to make it do that. Try for yourself -- it's the little drop-down at the bottom left of the graph. You can slice and dice the data quite a lot of different ways. Here's one that excludes mobile platforms and breaks out all browsers by version (NOT combining Chrome and Firefox):

http://gs.statcounter.com/#desktop-browser_version-ww-monthly-201301-201401 -bar

And now you can see why it's useful to combine versions of Chrome and (to a lesser extent) Firefox. There are just so MANY of them. Chrome went through 8 version numbers in 2013; Firefox did 9 versions. If they're split out individually, 8 of the top 12 are 2013-era versions of Chrome, and the most common browser by a large margin is "other" -- meaning mostly other versions of Chrome, plus a bunch of Firefox.

This is because Google decided it would be a good idea to increment the version number every time they release an update, even comparatively minor ones. Then Firefox followed suit. It makes a hash of the stats.

You can also limit to more specific regions or time frames. Here's Norway from October to November 2012:

http://gs.statcounter.com/#desktop-browser_version-NO-monthly-201210-201211 -bar

GS StatCounter is a neat little tool. Just bear in mind that the important thing is what YOUR site's visitors are using.


Thank You so much Tinalles. I will play with this a little. Fun the things we learn from each other on the forums. :-)

Sovereign Court RPG Superstar 2009 Top 32

Tinalles wrote:

Neither you, nor I, nor anyone else on this planet is capable of designing a web site that will work equally well in ALL circumstances. It's simply not possible to account for every possible factor.

So it's a matter of choosing where to draw the line, to supporting the conditions that most commonly occur amongst the visitors of the site you're maintaining. How much time and effort does it make sense to sink into supporting the less common circumstances? I would be astonished if any significant portion of Paizo's customers were stuck on browsers so old that they can't handle CSS2.

ALL the circumstances? No. Build something that works reasonably well in the target segment? Yeah. If that means staying well within the limits of "tried and true", even if a somewhat better alternative exists, then I'll stay there.

Like it or not, tables remain a staple of web layouts. Just look at what the JSF core tags do. Can tables be replaced making all the tags divs instead? Yeah. The advantage of div-soup is... questionable. Some screen readers may benefit, and IME that's most of the story. Layouting div orgies usually requires just the right number of wrapper parents, which completely counteracts any claims of separation of content and layout.

So where is the benefit of breaking a site that (despite hickups) has been able to handle lots of visitors with good performance apart, other than nerd aesthetics?

And all that is not even touching on the fact that there are still... differences in opinion... on how to handle CSS. ;)

No offense intended, but I for my part understand why paizo hasn't moved to a html5 bleeding edge site.


TerraNova wrote:
If that means staying well within the limits of "tried and true", even if a somewhat better alternative exists, then I'll stay there.

Well, that's up to you.

I would point out, however, that using CSS 2.1 to control layout is tried and true. Good heavens, I don't think I've made a tables-based layout since ... it might have been as late as 2004. But I think 2002 is probably closer to the mark.

TerraNova wrote:
Like it or not, tables remain a staple of web layouts.

It feels like we're both arguing based on faith, rather than evidence. Let's put that to the test.

Some reasoning:

1) If there is ever ANY page in a site that you absolutely have to get right for as many people as possible, it's the home page.

2) The more visitors you have, the greater the chance that some of your visitors will be using crufty old browsers that can't handle styles properly.

3) Therefore, companies with large amounts of traffic will have a powerful incentive to use the most conservative possible design approaches in order to ensure their home pages render well for as many people as possible.

So, let's take a look at the home pages of some of the most-visited sites on the web and check for tables.

According to Wikipedia,[1] the top 10 web sites by traffic for February 2014 are:

Google
Facebook
Youtube
Yahoo
Baidu
Wikipedia itself[2]
Tencent QQ (a Chinese portal site, apparently)
Windows Live
Taobao (the Chinese Amazon.com)
LinkedIn

I initially planned to do the top 100, but life is short, and some of the top 100 were, uh, of an adult nature unsuited to this forum.

In order to test for the presence of tables in their home pages, I will use three methods:

1) View Source, and use CTRL+F to find "table" in the source code.

2) Use the Web Developer Toolbar (Firefox extension) to outline table cells. This should catch any tables inserted via JavaScript after page load.

3) Use Firebug to inspect anything puzzling or unclear from the previous two steps.

Results:

Google - uses 1 table to control the horizontal spacing of the search box.

Facebook - uses 2 tables, one for the layout of the login form in the header, and one to control the spacing of the links in the footer.

Youtube - no tables present.

Yahoo - contains one table. I'm not sure what it's being used for -- it's present in the source code, but not rendered. Somebody used CSS to set it to "display: none", which prevents it from appearing. It might intended to be revealed by some JavaScript trigger I failed to find.

Baidu - no tables present.

Wikipedia - no tables present. However, that was the language disambiguation page where it wants to know which Wikipedia to go to. I also checked the home page of the English-language Wikipedia, and it had 9 tables, some of them nested within others, controlling the layout of the main page content.

Tencent QQ - contains 3 tables, none actually rendered. I couldn't figure out what they were for. It might help if I spoke Chinese.

Windows Live - I got directed to their "log in" page for this, and not even for science will I create a Microsoft account. However, I can report that their login page uses 3 tables to control the layout of the footer links.

Taobao - no tables present. On a whim, I compared with Amazon, since they're direct competitors. Amazon used 26 tables on their home page, in really weird ways. Almost all of them were a single table cell. The basic layout of Amazon's home page is done entirely with CSS, but for some reason, a few of their images are wrapped in table cells. It's odd.

LinkedIn - no tables present.

Results:

Used tables: Google, Facebook, Windows Live

No tables: Youtube, Baidu, Wikipedia, Taobao, LinkedIn

Tables present but not rendered: Yahoo, Tencent QQ

Yahoo and Tencent QQ could arguably be counted as "No tables". The tables they did have weren't rendered, and I couldn't figure out what I had to do to make them appear. "Display: none" effectively causes the page to render as though that bit of HTML code doesn't exist.

As noted above, Wikipedia actually does use tables on its English language home page, so you could count it in the "Used tables" category as well.

I found these results interesting. It surprised me that any of these sites were using tables at all.

The other thing that popped out is that none of them -- with the exception of Wikipedia's English language home page -- is doing heavy lifting with their tables.

Take Facebook, for example. The tables are used only for the log-in form and the links in the footer. Everything else is done via CSS. Take away the style sheet and it renders as a plain white page with blue links and no images of any kind. Even those tables have been styled pretty heavily. So it's interesting that retained the tables at all.

The others seemed pretty similar in their use of tables -- they're there, occasionally, but rarely for the main content of the page. They seem to appear most commonly in small areas

So, as for the point of this -- are tables a "staple" of web design? Based on these results, I would argue that they are still used, but rarely for controlling primary page layout.

TerraNova wrote:
Just look at what the JSF core tags do.

I'm mostly a PHP type myself. But they serve the same basic purpose. Maybe we should get a Ruby person and a Python user in here so we can have a proper language war. Mwa ha haaaaaa! The forum will never know what hit it!

TerraNova wrote:
The advantage of div-soup is... questionable.

No it's not. "Div Soup" is just as bad an anti-pattern as tables layout. It generally indicates that the coder hasn't fully wrapped their head around CSS concepts like inheritance, sibling selectors, and the box model. Or sometimes that there are too many cooks in the kitchen, so to speak -- too many developers working on it without hammering out shared coding standards.

TerraNova wrote:
So where is the benefit of breaking a site that (despite hickups) has been able to handle lots of visitors with good performance apart, other than nerd aesthetics?

Let me get back to you that. I'm going to save a copy of the HTML from a forum page, strip down the HTML to bare content, and rebuild it using CSS alone for layout and formatting, then post my results.

I am enjoying this thread immensely, by the way. ^_^

[1] Yea, Wikipedia, whose authority is so far beyond question that anyone who dared raise even the tiniest doubt about its accuracy shall surely be struck down by lightning thrown from the jealous hand of Jimmy Wales, blessed be his name.

[2] Verily, question not the word of Wiki, amen.

Sovereign Court RPG Superstar 2009 Top 32

Just to throw in another data point: Looking at Gmail, I see several tables, and a whole heaping helping of "purely structural" divs (I actually gave up counting the divs without any actual content of their own).

So I think my point stands well. We've got tables in roughly half of the websites you sampled. Tables are a staple of web layouts as potatoes are a staple of my diet - not in every meal, not the most tasty part, but not brussels sprouts either (that would be <blink> or <marquee> ;) )

Full disclosure, I am not really a UI designer. One of my coworkers does that (and frequently calls for more tables, not less ;) ). Maybe he is frequently wrong, but at some point I've got to admit that the odd "lines break even when display: table-row is specified" cursing is starting to get to me.

Community / Forums / Paizo / Website Feedback / Paizo logo misaligned All Messageboards

Want to post a reply? Sign in.