padding, margin and text-indent set to 0 but there is still an indent on the legendany ideas?
| SitePoint Sponsor |
padding, margin and text-indent set to 0 but there is still an indent on the legend
LEGEND elements are notoriously difficult to style, especially cross-browser.
Birnam wood is come to Dunsinane
You can try putting the fieldset inside a div and floating it left, or float it within the fieldset, assuming you have used a fieldset.
Er ... and how, exactly, is that going to help styling the LEGEND?
Birnam wood is come to Dunsinane
Try using a negative left margin or negative indent and then use the :root selector to override it in Firefox, Netscape 6+, Konqueror 3, Safari, and IE5/Mac which do support :root.
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
This is bound to break when, for instance, Opera implements the :root pseudo-class but doesn't change the way it treats legends.Originally Posted by Kravvitz
Simon Pieters
ERRRRR, because (and without an example to look at) placing the legend inside another block level emenent (I am assuming its already a child of fieldset) and then floating it left may force it to align left more accurately. Ensuring of course that you then proceed to clear the following elements so that the legend doesn't break out of the bottom of the fieldset or div containing it.
Most browsers of course are programmed to give legend special treatment by default (some indent usually) it's a question of trying to alter what the browser is doing generically.
I admit that not everything will work and not everything can be tried and tested accuratley, but all ideas are offering potential solutions to everyone. Isn't that the idea of a forum?
Just because you have a nice flashy purple icon by your name and a mentor label doesn't mean you know everything I am sure. As knowledgable as you are I don't think you are going to be able to single handedly answer everyones questions even though I am sure you give the best answers
Last edited by simonpointer; Jun 22, 2006 at 16:08.
Ok, so here's the evidence and example.
OK, it's not not perfect yet, and doesn't function cross browser (IE and opera still place some indenting, which can be removed with a little text indent rule inside an IE only selector).
I am sure a little more playing and sorting out can fix that, and it works well in FF and Netscape now. Here's the code and styles for floating the legends.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> form { margin: 0; padding: 0; } #login legend { background-color: #CCCCCC; float: left; border: 1px solid #666666; margin: 0; padding: 0; } #login p { clear: left; } fieldset { margin: 0; padding: 0; border: 0; } </style> </head> <body> <form name="form1" method="post" action=""> <fieldset id="login" name="login"> <legend for="login">login</legend> <p> <label for="textfield">name</label> <input type="text" name="textfield" id="textfield"> </p> <p> <label for="label">email</label> <input type="text" name="textfield2" id="label"> </p> </fieldset> </form> </body> </html>
Sorry, I misunderstood what you were saying in your previous post. I thought you said to put the fieldset inside a div and float the div left.
(BTW, your example is invalid; there is no for attribute for legend. It's implicit, because legend needs to be the first child of a fieldset.)
Birnam wood is come to Dunsinane
OOO no, I wouldn't suggest that.......and you have a fair point about valid mark up, I just pulled some code to muc about with, like I said:
I assume that most guys can sort out some valid mark up! Although sometimes I wonder.........lolOK, it's not not perfect yet, and doesn't function cross browser
Posting Permissions
Bookmarks