scriptygoddessI'm not sure that "Lessons Learned" is the most appropriate category for this, as all I've really learned from this little exercise is that IE on the Mac SUCKS.
1) When testing changes to a stylesheet on the Mac – I can't just hit refresh and have it load in the new/revised stylesheet. I have to actually QUIT IE completely (not just close all browsers – actually QUIT the program) then open it again – and THEN it will load the new stylesheet
2) That little trick they talk about with doing CSS forms – making an outer "row" div – and then two inline "label" and "formw" spans inside. This will only work in Mac IE (and sit all on one line) if I add an extra unlabeled, unstyled div… so instead of this:
<div class="row">
<span class="label">First Name</span>
<span class="formw"><input type="text" name="First_Name"></span>
</div>
I have to do this:
<div class="row"><div>
<span class="label">First Name</span>
<span class="formw"><input type="text" name="First_Name"></span>
</div></div>
UPDATE: HERE IS A BETTER WAY!!! – I'll leave all the above up here too, if for no other reason than just because it's interesting that this works also – but ideally, less code is better. I previously left a comment in this post that I would try it – and I did – and this new link has a solution that's better than mine. 😀 (found via the CSS Help Pile.)
3) In addition to the above, if that last </span> and the two </div></div> are on the same line – it gets messed up again. So if that last line looks like this:
…etc. etc….</span></div></div>
it'll get messed up. So it has to look like this:
…etc. etc….</span>
</div></div>
4) I also ran into a really weird problem with links completely disappering (on Mac IE only) when you hovered over them. I'm not talking like you hover, it turns to white, then you hover off, and it comes back. I'm talking about you hover over it, and then it's gone… and the only way to make it reappear on the page was to refresh. I DID fix this – but I'm not sure how. I have a suspicion that it had to do with too many nested divs styled with IDs instead of CLASSes. But I'm not sure. All I know is that I changed many of the styles to use CLASSes and it went away.
Again – like I said – I think the only thing I'm sure of here is that Mac IE REALLY sucks. I've only been doing my layouts in CSS for a few weeks now – and already I see a trend. Every browser is happy – pages validate – but Mac IE kicks the bucket.
