http://howmanymilesinakilometer.com/ I'm trying to align the legend correctly above the input-field like you see correctly right now in firefox, but this fails to work in I.E 6.0 and 7.0, it seems like it's putting it inside or in wacky positions that make no sense. Any ideas? Not sure what I.E bug this is. I've been looking this up, but not sure if it's this bug or not, http://www.positioniseverything.net/explorer/inherited_margin.html, if it is this bug, how can I change my code to fix it, I tried what it suggested but I don't think it worked? edit* I actually just discovered that there is a 1px difference in firefox and safari between the legend , I'm scared...This means it's acting differently actually in 'all' browsers. - Joe
Fear not. Forms ARE the stubborn ones. Even experienced CSSers have to wrestle with form elements like Steve Irwin wrestled crocodiles. You definitely want to read this: http://www.tyssendesign.com.au/articles/css/legends-of-style/ and revised: http://www.tyssendesign.com.au/articles/css/legends-of-style-revised/ Basically, we've found that to really get a handle on legends, which are positioned seemingly willy-nillly cross-browser, giving them span children, and positioning them absolutley can give us much of the control we want. Problem is Firefox absolutely did NOT like getting top: 0, left: 0 for positioning. It's a bug. Using margin-top and margin-left does the trick. Opera and Safari seemed happy with either one. IE, on the other hand, needed top: 0 fer sure. I'm not done, but I've already tweaked my version of it: http://stommepoes.nl/Joe/converter.html Also, IE makes legends blue. I dunno why, they just do. So I can tell every browser to paint it black, since that's their default. For the top and left, though... I don't like sticking hacks in my HTML. I prefer them to be in my CSS if I need them. So I used an IE6 and an IE7 hack. I don't like using hacks, esp not for stoopid little things like legends, but I rationalise it to myself by saying "forms suck to style." : ) John uses the <!if IE comments to set new styles for IE, but problem with that is it needs to sit in the HTML (IE Conditional Comments) and I want all my stuff in the single CSS file... that way, when IE6 drops off the face of the earth, or IE8 comes out, and if I have to do something, change something, I only have to do it once in the single file, not track down every HTML file I've got. Cause I'm lazy.
I noticed some differences still in height of the words (kilometers) for the legend tag in I.E 6.0 and 7.0, know any way to deal with this? (ways to target just I.E 7.0 and 6.0, I have a feeling that is what will need to be done. On the plus side I think safari and firefox are displaying in sync now, *phew*, so at least some of the browsers problems were beaten back! (+2 points for us!) By the way, the CSS below you used...after reading chapter 4 in Bulletproof Web Design and learning about the self clearing techniques, it makes me wonder... * html legend span { top: 0; } *+html legend span { left: -2em; } am I to understand that the above * html legend span is for fixing I.E 6.0 only, and the *+html is something introduced into I.E 7.0 and therefor only targets that? Though those articles were enlightening. It seems 'forms' are indeed very stubborn to get working cross browser. Is there any advantage to using legend tags you think, I wonder if it's worth all the headache, or if I should just take a div and position it where the word kilometer is using that position:relative technique you taught me and then absolutely positioning from there. Also, what do you think of this article? http://www.tjkdesign.com/articles/how_to_position_the_legend_element.asp The way he fixed the legend placement issue is different from how you did, but it seems more elegant the way the guy did it in this article, but maybe it has problems the way he's doing it? - Joe
Yes. * html is a very "stable" hack, considered acceptable by everyone so long as it's not used excessively. There's a nice history of the hack and its various names here: http://css-discuss.incutio.com/?page=BoxModelHack You may see some of the goofy stuff for IE5.5 and below in some of my code (not for your site though) like w\idth. This is only because I bother to include IE5.5-- and I don't like using more than one stylesheet. You can set a different stylesheet to IE using IE Conditional Comments (CC's) however these need to be in the HTML, and then there's the (potential) problems of having style tags in a (true) XHTML page... (style tags are considered CDATA by a real XML parser, like Script tags, and would need a complicated escaping/commenting system around it... not that our XHTML pages will ever, ever really be XML...). I just don't like them, don't like styles in my HTML. I keep them separate except when doing a demo page or begin building a quickie (where later the CSS gets moved externally). *+html is not as stable a hack, because while we know for CERTAIN that IE6 and below do not see the *+html declarations, we do not know that IE8 won't (although we hope it won't, just as Microsoft removed the * html's ability to do anything in IE7). I do find myself still using it though, but 99% of the time it's either for Halsayout or display: table (which IE does not understand, but IE8 will supposedly understand display: table AND won't have Haslayout... eliminating the needs of my IE7 hacks). I think it may indeed be a better idea to use something else for that text, but not a div. Likely a p outside the fieldset or a span inside it possibly. There's another option: making the value of your input = "kilometers" though people would have to erase it before typing (without a Javascript to remove it when the focus goes there): <input type="text" name="convert" id="convert" value="(kilometers)" /> However, in general, a legend is very valuable. When you have multiple fieldsets, grouping form controls, the legend basically tells you WHY (and this is especially nice for the blind and new users). See my legends (the fieldsets are actually invisible here so the effect isn't as good): http://stommepoes.nl/Scooterverzekeren/scooterlogin.html There are two forms on that demo page, because only one or the other will ever show up (they'll either log in or register). The legends divide the sections of the form. Also, in HTML4.01Strict, you'll get a validation error if you have a fieldset and no legend. XHTML doesn't seem to care-- in this regard, standardistas just say you should have a legend with the fieldset anyway and hide the legend text off-screen if necessary. I dunno, usually with little search functions like on your page I don't bother with the fieldset but use a mindless div instead... we could substitute the whole fieldset/legend for a <p>. The rule is, a form cannot have an inline as a direct first child. So the p works as a block child. But it's a bit sloppy, and I wanted to show you the correct way to do a form (this is just not the best type of form to show correct forms!). We would NOT use relative or absolute positioning for a p though. The absolute positioning and the span are workarounds for a troublesome legend element. Using absolute positioning is pretty much relegated to tricks, hacks, and absolute necessities. A page where lots of stuff is aboslutely positioned is a brittle page. It will look okay, at a certain dpi, a certain resolution, a certian browser size, a certain text size, with a certain amount of content... a very delicate page, although I've done it: http://stommepoes.nl/Stichting/stichting.html which is what happens when a printed image is used as a website template. I've made it as flexible as possible, but it's prolly more code than is worth for that.
Hey I was doing a little test of this fieldset, legend error, and learned some valuable stuff. When putting a border around the fieldset it becomes apparent that I.E 6.0 and I.E 7.0 interpret where the legend resides in differently! Clearly in 7.0 the legend is correctly inside the fieldset (or at least I assume is correct behavior), as firefox and safari both reside correctly in the fieldset, but with a 1px difference in margin from the top, but that is minor and can be dealt with perhaps. On I.E 7.0 there is a mysterious top and bottom single margin that is added, in I.E 6.0 this appears to be a double margin from the containing form AND the legend element is outside the fieldset, and uses the form instead as it's margin reference point, which can clearly be seen in my site. Maybe this can help diagnose a fix. http://www.howmanymilesinakilometer.com/ View this in Safari, Firfox, then I.E 6.0 and I.E 7.0 to see what I mean. i'll leave it like this for a while.
You should show how they look by default-- without the IE padding. Forms are one thing that browsers have more control over. We've removed the default margins and padding on everything, yet the positioning of various form elements still varies per browser (although except with FF's stupid inability to deal with legend, the "modern" browsers show it the same). You also might want to see if there is a difference after triggering Haslayout on the form (currently it has no Layout for IE). Haslayout. Another thing that sometimes affects margins on things is when you float them (this can trigger bugz in IE too, and gives the element Layout). You are allowed float fieldsets.
The padding is just to adjust the 'red' box to be about the same, the red box is the form. The form size is different on I.E 6 from I.E 7, next the blue box is also different (blue box being the fieldset), and the rules how he it decides to show things from what I can see, I will read HasLayOut though and do some more tests. I have a feeling if I can restore the fieldset margins to match the redbox then the form will be perfect in all browsers! Just a guess though, don't know what side effects may occur in my attempt to fix it.
I got it to look 'pretty' close now in all browsers, got it looking good in I.E 6, Firefox, and Safari, I.E looks good except for extra margins I can't seem to get rid of on the fieldset =(, not sure, any ideas on how to make this picture pefect like the others but for I.E 7.0? My plan so far was to use a the * html hacks for changes needed to I.E 6.0 & *+html hacks for changes needed to I.E 7.0. As for firefox and safari I don't know any browser specific hacks for them, if you know any let me know, the only really difference between those two browsers is '1' pixel from the 'fieldset' in extra margins for firefox for some reason. http://howmanymilesinakilometer.com/ I'm considering just saying 'f**k it', and doing it all with divs soon haha, but at least I tried =).
I'd say F*** it to a 1px difference. Most pages are off a bit here and there, and you only notice it when you look closely (or in instances where it's simply more noticeable that something's different by a pixel). You may be able to solve inter-browser rendering by wrapping everything in a div, but be aware this this leads to unsemantic code (also called "tag soup" and sometimes "divitis"). Usually using the right elements for the job works just fine-- a few items are a bit difficult to style due to browser vendors retaining more control on them. Another set would be definition lists-- the differences between how Haslayouted IE show it without floats and modern browsers with floats can make the mind spin. You have the possiblity still of setting the word (kilometers) in the input itself. You can also take it out of the form completely and have it be a random piece of text (even though it's actually directing people to start with kilometers). A question, is the site ever planning on going the other way? Type in miles and get kilometers? And I'll encourage you to continue writing the page. It took me at least 5 sites to get wherever it is I'm at, and still have much to learn. And those 5 sites? 4 of them are still ongoing projects as one version goes online and then the coder/developer starts redoing his scripts and the database, and we start again. A bit aggravating, but probably good for me.
I changed the site again, to finish it off hopefully this time, what do you think now? http://howmanymilesinakilometer.com/