SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    annoying indent on fieldset legends in opera/ie

    padding, margin and text-indent set to 0 but there is still an indent on the legend any ideas?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LEGEND elements are notoriously difficult to style, especially cross-browser.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Er ... and how, exactly, is that going to help styling the LEGEND?
    Birnam wood is come to Dunsinane

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    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.
    This is bound to break when, for instance, Opera implements the :root pseudo-class but doesn't change the way it treats legends.
    Simon Pieters

  7. #7
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    OK, it's not not perfect yet, and doesn't function cross browser
    I assume that most guys can sort out some valid mark up! Although sometimes I wonder.........lol


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •