When I open http://thecoccinella.org/ on a lower resolution, or when I make the window smaller, the whiteboard image overlaps with the right side bar. You can see the same problem on the Download page. It seems it has anything to do with tables. How can I fix this issue? Would it help if I give the columns a fixed size? And how can I do that while keeping W3C compliancy in mind?


JirkaRybka’s picture

I was dealing with quite a similar problem at our site. I see that your theme uses CSS for the formatting of sidebars, just like our old theme used to. I have probably bad news: There's no point in seeking clean W3C compliancy, with the used web-browsers being not compliant, and even not fully compatible with each other :-( Perhaps the CSS concept itself is not ready for this kind of use yet, I'm not sure, but I see it all as a "try-and-error" process. More specifically I tried a lot to make our site working stable on at least the most used browsers (IE and FF), and failed. Then I reverted to the old concept of table-formatted website (which meant sadly to rewrite the theme completely, and load PHP with all the necessary structures instead of just loading a CSS file) - and this old concept finally gave the stability.

So my conclusion is that CSS-formatting is not a stable thing, and old table-model still wins. Anyhow, you need to edit your theme.

dfgfdgdfgdfg’s picture

I prefer staying W3C compatible and filing some bug reports for the browsers, than loosing my time with helping to sustain an entry barrier to the web browser market.

dman’s picture

It's a reasonably common problem.
The question is, what would you expect to happen here?

Your screen is (eg) 1000 px wide.
The CSS says there is a left and right column each 20% (200px) wide, plus some margins leaving about 500 px free in the centre.
So into that centre, you put a table that contains, side by side, images that are - 200px, 240px, and a taskbar that's about 200 px wide.

You are now telling the computer to add :

200 + 25 + ( 240 + 200 +240 )+ 25 + 200 = 1000

What is it supposed to do in this circumstance?
If you tell a robot to push 1130 items into a bag that only holds 1000 - something's gonna break.

If you need to come up with advanced logic to explain "make it x wide unless that is wider than this and the other thing + this one is no wider than that, in which case make it y wide, or as wide as the screen, whichever is bigger" You'll need to learn some really tricky CSS.
Otherwise, do it in tables, or just

Make sure your content isn't too wide

How to troubleshoot Drupal | http://www.coders.co.nz/

dfgfdgdfgdfg’s picture

Yes, but how can I make that there appear scroll bars much faster, instead of the overlapping? Shouldn't this be possible with the W3C specifications?

PS: I don't care if a CSS method to do this actually is implemented correctly by all web browsers. I prefer using correct W3C compatible code and file a bug report (if possible) for the browser(s) that has problems with this, instead of losing my time with workarounds.

dman’s picture

#content {overflow:auto;}
is adequate.
It's a spec way to do it, although the UI is less-than perfect.

How to troubleshoot Drupal | http://www.coders.co.nz/

JirkaRybka’s picture

Ah, so things are a bit more clear... I'm sorry for not examining the site so deep at the first look, I just noticed that this is a pretty common trouble with CSS formatting. Now it's clear there's no bug to report, there's just the very nature of CSS being weird. What the poor robot is supposed to do? Users expect the oversized content to either widen the whole site or not, either show scrollbars or in worst case just hide part of the content, but not to overlap & mix all together, that looks really wrong and broken, throwing user-complaints to the webmaster (and not to browser or W3C). In the other hand W3C (and browsers) think that overlapping is OK and correct. Given that the oversized content is sometimes unavoidable (what with user submitted contents and resizable browser-windows), I have to deal with this paradox in a way...

My priority number one is a working site and happy user, any kind of compliance is also important to me, but is the second on the list. Using table-formatting is even compliant as far as I know, it's just deprecated. Therefore I leaved CSS and switched to tables, which are (I believe) the only formatting method really addressing the users' needs. (Shame to W3C)

BTW Anything about filing in bug-reports generally makes me mad, because this kind of stuff usually takes days of work to precise the report (how to reproduce the bug etc.), which is then rejected or ignored, because you're unable to collect more detailed information (such as variety of debug-logs), because you overlooked some duplicate reports already existing (usually years old, talking about a completely different issue that only developers know is caused essentially by the same bug, with typos making it invisible for search engine etc.), because you're not running the latest beta-version, or just because you can't supply the patch yourself (or you do, being then accused of breaking some "clean coding" conventions). The very best to expect is not to be called a lamer, having the bug fixed in a years' time is a miracle. I don't blame the developers, because I know they've quite a lot to do, mostly without of being paid for it - I just say that filing bug reports is usually very ineffective way to deal with present-time problems on a live site or system.

Sorry for allowing my personal opinion to take such a big space here, just thought it might be interesting.

dfgfdgdfgdfg’s picture

To me compliancy is the most important thing, for next reasons:
* I don't want to loose time on creating workarounds in the web browsers or standards. They should fix the problem, not me. I want to focus on creating web content.
* My website is about an open-source Jabber client. So, I want to promote open standards also by sticking to open standards for the website conservatively.
* I hate "be liberal in what you accept" paradigm, it's the main cause why there are only a few "complete" web rendering cores in the wild. This paradigm created a tag soup entry barrier for competing web browser rendering cores which is a bad thing IMO. (compare it e.g. with the Jabber/XMPP protocols, which are NOT liberal and for which there are a lot of good clients and servers available...my bet is also that the Jabber/XMPP world is much better protected for EEE strategies (see wikipedia) as done in the past by Netscape and Microsoft)

PS: Do someone knows why there is no option in Drupal called "Be conservative in dealing with open standards". If I enable this option, Drupal will just show an error if a web browser sends wrong HTML e.g. Oh, yes, I don't care if this actually would make my websites useless in some or even most web browsers. It will be much easier for me to report bugs in web browsers and to make the web a better place... (compare this with some use cases from the Jabber world: some Jabber clients that were/are not compatible with XMPP, just couldn't connect with some XMPP compatible servers. To fix this, the Jabber clients were patched, instead of making the Jabber server incompatible or by adding some work around to the server that even could break other XMPP complaint clients that worked before)

JirkaRybka’s picture

That's all very nice and correct, my applause (although you mentioned a bit of stuff I don't understand fully). But then, you must just accept that your pictures will be overlaping. (Unless W3C accept your suggestion and introduce a brand new CSS version...)

dman’s picture

I'm a standards evangelist also, but not a zealot.

Therefore figure out what you mean by compliancy.

  • You can get a result thats 100% XHTML-strict, and still even use tables.
  • You can build a validated, 'compliant' page that's still semantically wrong. Or, as in your case, just doesn't look like you want.
  • You can push all your content styling into CSS and get a warm green glow from the W3C validator even though what you've done is the total opposite of the seperation of form from content. As seen at its worst in css zen garden.
  • Not that I think that tables are a solution, but W3C standards are guidelines, not rules. Structural table deprecation is a recommendation, not a syntax error. If you want squeezy, table-like behaviour that css columns can't give you - you have to choose a table, or choose not to have that visual effect.
  • The HTML that's happening is totally clean. Turn off css and you have a semantic page. It's a precise css effect that you are seeing.
  • The CSS is likewise valid and compliant. It's just the visual result of all that compliancy you don't like. And even that is not the browsers fault.

PS: Do someone knows why there is no option in Drupal called "Be conservative in dealing with open standards". If I enable this option, Drupal will just show an error if a web browser sends wrong HTML

That makes no sense. At all. Drupal creates the HTML, and is not involved in the browser rendering at all. Most modules that create parts of the page (should) attempt to produce valid XHTML and any HTML mistake attributable to Drupal should be flagged against the appropriate module.

The result you are seeing is the result of the spec being followed correctly whereby a large element put into a small container will visually overlap out of it. So by your own criteria, where you wish to ignore the realities of browsers and users, your result is just fine.

So set the overflow to scroll.

Otherwise you may just have to develop your own style sheet. Frankly, I think the Garland layout is hard to extend, as the percentage-width columns vary where I don't want them to, but fixing their widths causes css collapse at lower sizes. To achieve your purist goals, you can throw out the existing theme css (although the theme HTML is fine) and do your own.

How to troubleshoot Drupal | http://www.coders.co.nz/