(I'm not real happy with how the text in the "All events are 21+" box looks, but I'm not sure how to re-arrange that.)
Dear Lazyweb, fix my CSS:
In Safari, when you move the mouse over one of the clickable calendar boxes at the top, the background color changes. In Firefox, this doesn't work. The CSS in question is
.ccell:hover { background: #040; }
Please tell me how to make this work in Firefox too. (Does it work in IE?)
Update:
To make Firefox work, add a <!DOCTYPE>. To make IE work, only use :hover on <A>.
Next question: can someone tell me why the "Calendar Overview" table on the front page is not wrapping its text in Firefox? Works fine in Safari. It should be constrained to be 180px wide, but it's not.
Update: That table needed "white-space: normal" in its CSS after I added the doctype; no idea how it got auto-set to "nowrap".
Firefox doesn't support .class:hover when in "quirks mode". Insert
<!DOCTYPE html>before the first line of your HTML file to force "standards compliance mode". You can tell what mode you're in by viewing the page info, which is available from the Tools menu (on Windows, anyway).This makes it work on Firefox.
It does not work on IE.
Like it!
.ccell a:hover { background: #040; }should fix it in Firefox and IE; can't check it on Safari as the Mac is at home.I noticed that, but then the part that highlights is the part inside the interior margin instead of being the whole cell.
Ah. So it does.
Declaring a DOCTYPE, like others have mentioned, fixes this as well, but the rest might not be valid HTML.
However, trying to write valid HTML is usually more trouble than it's worth.
Dunno, found that IE6 behaves a LOT better when I do it. If you write xhtml 1.0 strict, you have to omit the optional xml version declaration and even margin: auto works...
It's easier to write fully valid HTML4 and CSS than it is to write invalid HTML-something and try to make your CSS work.
I recommend the HTML Validator add-on for Firefox: without any further effort it will tell you if your page passes validation using two different methods, and show you what the problem is.
Seriously: CSS only works reliably with valid HTML. Don't leave home without it.
Obviously this problem can be solved by breaking out the DOCTYPE delclaration into a third file, so that the html and css files can understand each other.
I have absolutely no idea what you're talking about. Is that a joke?
at least MSIE<6 only supports hover on As and other clickable things. So you either work with that in pure CSS, or you add onmouseover to the As to change the class of the element above it (yuck).
You could remove the padding from the cell and put it in the link; it isn't exactly the same, but closer.
Or you could just ignore it.
Using http://www.dnalounge.com/calendar/2007/04.html as the original link requires a password:
With Firefox 1.5.0.5 on Windows XP SP2, this is apparently a side-effect of quirks mode. Adding a doctype fixes this (I used
to test).
With IE6 on the same, it doesn't work. :hover in general is defintely broken under versions of IE before 7 (I don't have access to IE 7). If you're interested in fixing this in IE, then there are workarounds involving javascript and/or 'css behaviours' (basically, .htc files containing javascript to fiddle with css). http://www.xs4all.nl/~peterned/csshover.html contains more details, along with a LGPL htc file that fixes this (note: I haven't tested this file).
With Opera 9.02 on the same, it works as you describe.
(LJ chose not to escape the doctype in my comment)
The doctype I used was <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
What might break if I just splat that doctype on top of all of my documents?
Not sure.
If I remember correctly, quirks/standards mode is mostly to do with how bits of CSS are interpreted and how things like the box model are calculated.
Two things change, not much breaks:
* IE's broken box model (funny widths if you ever used CSS padding) behaves itself. This is good, as it's then consistent with the rest of the world.
* CSS syntax errors (typically missing dimensions) then cause the rule to be ignored, not error-corrected and guessed for. This only happens if something was already broken before.
To get to this standards-mode good stuff you should refer to the right doctype (HTML 4.01 Strict, accept no other) and you must use one of the magic doctype declarations to invoke it. Spelling etc. is fussy.
I suggest that you ask stuff like this back on good old Usenet. The text-only steam internet is still the best place to discuss HTML seriously. Besides which, you vs. Jukka Korpela is going to be like watching a huge Nazi Robot Fight.
IE only does
a:hovernotspan:hover. The usual hack is to usea:hoverand force the width of the<a>to be 100% of its container. Another way is to use JavaScript event handlers to do the highlight as well / instead.Looks good.
The horizontal nature of the detailed date descriptions on the bottom half of the page didn't register with me right away, though. I start reading each column top-down. Maybe it would be more obvious if there were some kind of horizontal rule / line between each day's row? Although it seems like that's probably something you would have already tried and probably rejected it for some other reason.
Fuck all that doctype noise, mang.
To fix your CSS problem: I usually find that you need to specify the element name as well as the class to make hover work. Instead of ".foo:hover", make it "td.foo:hover". Yeah, it means your class is constrained to whichever element, but nobody ever claimed that web development was in any way sensible.
On the other hand, I know nothing about IE quirks.
No, td.foo:hover doesn't fix Firefox. The doctype noise does, however.
To do stuff like this cross-browser, I generally just say screw it to the stupid CSS support, and just use Behaviour (http://bennolan.com/behaviour/). It's a JavaScript library that uses CSS selectors to apply event handling to elements on page load. It's also super-easy to use, it took me about 2 minutes to understand.
Just include the js file in your header, and use the rules to switch between two different css classes on the hover event. In your case, just have one class for non-hover, and the other for hover.
Put the style on the anchors themselves.
IE doesn't support letting you hover on anything but links. By the time I got here, it looks like you've already been told to add a doctype (super important and easy), and make the links display as block.
By moving the style of the boxes to the links themselves instead of the parent divs, you get more control over what changes on hover, as well as browser support.
Brief notes in CSS file, but I'd be happy to elaborate on anything if you care....
Cool, thanks! I've updated it; does what I have up there now work in IE?
Any idea why the "Calendar Overview" table on the front page is not wrapping its text in Firefox? It is in Safari...
I'm not near a windows machine at the moment. Browsershots shows the layout of the boxes as being consistent in various versions of IE, which is the part that could have been off. I can't test the hovers, but based on the code, I'm extremely confident they work as they should.
I have to walk away from the problem box on the home page....
Styling the div won't do anything because divs don't constrain their contents. The div hangs out and is the correct size, but the table is growing to handle the longer text. Forcing the size on the table strangely makes the whole column of tables grow to be the same larger/wrong size. I played for a while, but I don't know all the intricacies of working with tables in XHTML.
If it were me, I would change it to not use tables...so I've never needed to know how to make tables bend to my will with CSS. You like tables more than CSS, so maybe you can whip them into shape better.
You won't like this (well, part of you will, but it won't make you happy), but removing the doctype declaration on that page makes the table behave. A better solution, I think, would be to just force a <br> when you know the event is more than however many characters....
Also, the div wrapping around the overview to center the link under the youtube video is problematic. Try making the text bigger and you'll see it pushes the overview table away from where it's supposed to be. This is defeatable by defining margin and padding, but I suggest striking it altogether and centering the link with CSS, or by wrapping it in its own paragraph with centered text-align, or...with a table.
If something springs to mind about that box, I'll come back....
Any time I've ever tried to do table-layout things with CSS, it's taken 3x as much code, been more confusing, and just utterly failed on half the browsers, with varying degrees of spectacularity. And then the CSS fanboys start bleating, "oh, well that browser's buggy! You can work around it with 500k of Javascript!"
I did notice that the DOCTYPE is what made this start breaking, but since that's the fix for other things, I'd rather find a way to leave that in.
In the css for the cells in the right column to have "white-space: normal;" and it should wrap in Firefox.
Well, that's puzzling... Setting that on the <table> does fix it (thanks!) but, how was white-space:nowrap getting turned on there in the first place?
Have you tried validating your page?...
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dnalounge.com%2F
There's a lot of simple HTML errors. Any one of them could cause odd rendering issues on different browsers.
it would seem that you are not happy with the meaning or the appearance of "All events are 21+."
I did a calendar widget with similar hover behavior, but I used onmouseover and onmouseout events. I guess the abovementioned Behaviour is already one step beyond that.
You can see my version here: http://www.acme.com/javascript/#Calendar