SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding Button Text in IE7

    How do you hide the button text (value) in IE7?

    My CSS

    Code:
    #main_body input.button_text
    
    {
    	width:85px;
    	height:29px;
    	border:0;
    	padding:0;
    	margin:0;
    	cursor:hand;
    	cursor:pointer;
    	text-indent:-9999px;
    	background-image:url(your image);
    	background-repeat:no-repeat;
    	background-color:none;
    
    }
    My HTML

    Code:
    <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
    Works in all browsers except IE7 Any ideas...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could work around IE's failings by using a <button> element instead, and wrap the text in a span before sending it left:

    Code:
    <!DOCTYPE html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
        button {
    	width:85px;
    	height:29px;
    	border:0;
    	padding:0;
    	margin:0;
    	cursor:hand;
    	cursor:pointer;
    	background-image:url(image.gif);
    	background-repeat:no-repeat;
    	background-color:none;
    }
    
        button span {
            text-indent: -9999px;
    }
    </style>
    	
    </head>
    
    <body>
    
    <button id="saveForm" type="submit" name="submit" value="send"><span>Submit</span></button>
    
    </body>
    
    </html>
    That's my take on it, anyhow.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    To hide the text in iE use this trick.

    Code:
    input {
        text-transform: capitalize;
        text-indent:-999em;
        display:block
    }
    The capitalise allows the text-indent to work for some strange reason

  4. #4
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also found that this works too.

    Code:
    font-size:0; line-height:0;
    I wonder which is a better approach?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Probably Pauls since the text wouldn't be hidden (font size 0) and it's only one line of code
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by PenGwnFistOfFury View Post
    I also found that this works too.

    Code:
    font-size:0; line-height:0;
    I wonder which is a better approach?
    If I remember correctly that will still leave a tiny line in the button. I can't remember if that was IE6 or 7 though.

  7. #7
    SitePoint Zealot PenGwnFistOfFury's Avatar
    Join Date
    Feb 2005
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not seeing it in IE7 so it might be IE6. Thanks for the info

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    So, question, if it takes me a good several minutes to load all images, and the image doesn't show up when I get to that button, do I know to click it without text?

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    So, question, if it takes me a good several minutes to load all images, and the image doesn't show up when I get to that button, do I know to click it without text?
    If you have images disabled in the browser then you wouldn't have a clue what the button is for.

    At least doing it that way would provide the text for when CSS styling of forms is disabled - I have seen lots of sites where if you visiit usiing Opera and have unchecked the option allowing styles to be applied to form field that the buttons appear blank.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I came up with an almost full-proof version some time ago that seems to satisfy all the requirements (apart from transparent images).

    http://www.pmob.co.uk/temp/form-submit-image.htm

    Works with images on/off and css on/off or any combination.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Is the clickability preserved because the input is also pos: absolute (and last-in-source)?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Is the clickability preserved because the input is also pos: absolute (and last-in-source)?
    Yes it's transparent and sits on top of the text underneath so remains clickable. It's similar to the normal gilder/levin replacement except that you place the input on top of a label instead of placing a span image on top of the text you want to hide.

    Usually submits don't have labels because they are self explanatory but adding one does no harm (and in theory could enhance accessibility).

    The only downside is if you wanted transparent images and then you would see the text underneath which is the same drawback fro Gilder/Levin method (which I was already using before they claimed ownership of it )

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Should we call it the O'Brien method then ? : ) Wait, no, there'd be 50 other things with the same name!

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Uhm, silly question....

    But why not <input type="image" /> ???

    Then you can just alt text it and not have to screw with CSS trickery in the first place...

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Historically the type="image" was very unreliable so some of us still avoid it for historical reasons although things are better these days. The main reason to avoid its use these days is that type="image doesn't send it's name/value pair in the same way that the normal submit does and you would need to add scripting to rectify this. the normal submit button has none of these problems.

    You can include the alt attribute in the type="image" but safari and chrome will only show a question mark (or blank image placeholder and won't show the alt text) if the image is missing. The input shrinks to accommodate the question mark and the alt text is missing. You could add height and width attributes to the input and then the text will show but that is invalid for the input type="image". There is a solution in that you could set the width and height via css for this and then you will see the alt text.

    All in all I think my method wins out

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Historically the type="image" was very unreliable so some of us still avoid it for historical reasons although things are better these days.
    Ah, since the ONLY major browser that had problems was Netscape Heritage BEFORE firefux was a twinkle in a FLOSS fanboys eye I stopped caring about that eight years ago.

    Quote Originally Posted by Paul O'B View Post
    The main reason to avoid its use these days is that type="image doesn't send it's name/value pair in the same way that the normal submit does and you would need to add scripting to rectify this. the normal submit button has none of these problems.
    Ok, that makes sense.

    Quote Originally Posted by Paul O'B View Post
    You can include the alt attribute in the type="image" but safari and chrome will only show a question mark (or blank image placeholder and won't show the alt text) if the image is missing.
    Doesn't do that here... I get alt text. Recent fix?

    Quote Originally Posted by Paul O'B View Post
    All in all I think my method wins out
    Except Opera's minimum font-size is making the white input text render OVER your image, and you cannot trust the different browsers to make the width and height end up the same size on the input...

    THOUGH - I think you were on the right track... I dislike all the excess absolute positioning and messing with z-index though, and overcoming opera's min-font-size means needing a slightly different approach...

    something like:

    Code:
    #sub {
    	position:relative;
    	overflow:hidden;
    	width:100px;
    	height:50px;
    	text-align:center;
    	margin:0 auto; /* auto both directions causes some handhelds (Nokia) to pad the top == screen height! */
    }
    
    #sub label {
    	display:block;
    	text-align:center;
    	line-height:50px;
    	color:#FFF;
    	background:#F00;
    }
    
    #sub label span {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100px;
    	height:50px;
    	background:url(images/submit.gif) top left no-repeat;
    }
    
    #sub input {
    	position:relative;
    	margin-top:-50px; /* == #sub height */
    	padding:50px 100px;
    	/* 
    		top/left padding equal to container height and width pushes
    		the text outside our overflow:hidden parent container
    	*/
    	background:transparent;
    	border:0;
    	cursor:pointer;
    	cursor:hand;
    }
    Rather than absolute positioning the input just ride it up with a negative margin, rather than try to hide the input text with font-color and font-size, make the parent container overflow and then just pad the **** out of the input. We don't need z-index since a position:relative after the absolute in the source order will depth sort automatically.

    The big thing I think I like this approach for would be that you can then add hover states. Beats what I was doing which was to put input[image] inside a overflow label and slide the input up and down with absolute positioning. (looked like ass images off)

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Beats what I was doing which was to put input[image] inside a overflow label and slide the input up and down with absolute positioning. (looked like ass images off)
    I was using type="image" where the image was a transparent gif with alt text. Underneath was a CSS background that slide around on states.

    Hm, was. Still am, actually. I should check this version out.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Doesn't do that here... I get alt text. Recent fix?
    Hmm I don't get alt text unless I set a size a size in the CSS and that's in Safari 4.05 PC & Mac. I wonder if its your large font/120dpi settings allowing more room for the text to show (or have you got a newer nightly build).

    On another matter I've also just noticed in Safari that if you disable images from the develop menu you don't get any alt text either unlike Firefox. It's just blank.

    Except Opera's minimum font-size is making the white input text render OVER your image, and you cannot trust the different browsers to make the width and height end up the same size on the input...
    That's a good point and I missed out the negative text-indent trick I posted right at the start in post #3

    Also there's something strange going on in Opera 10.53 (and 9.55) because I don't see any text anyway (and again this may be your settings so I accept that you may be seeing it). In my versions the minimum font-size is only obeyed if you set a font-size greater than zero. If you set font-size:1px you get 9px (the default min size) but if you set font-size:0 you get nothing. This happens in 10.52 and 9.55 but not in 9.2.

    Firefox's minimum font-size is the same also and if you set font-size:0 you get nothing but if you set 1px or greater then you get the minimum font-size. Safari seems to obey the minimum even if you set zero though.

    The negative text-indent trick works for me in opera 10.53 and 9.55 (but not in 9.2) and also works for me in Safari.

    THOUGH - I think you were on the right track... I dislike all the excess absolute positioning and messing with z-index though, and overcoming opera's min-font-size means needing a slightly different approach...

    Rather than absolute positioning the input just ride it up with a negative margin, rather than try to hide the input text with font-color and font-size, make the parent container overflow and then just pad the **** out of the input. We don't need z-index since a position:relative after the absolute in the source order will depth sort automatically.
    Yes I have no problems with that alternative and the padding method for hiding text seems to work fine.

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Also there's something strange going on in Opera 10.53 (and 9.55) because I don't see any text anyway (and again this may be your settings so I accept that you may be seeing it). In my versions the minimum font-size is only obeyed if you set a font-size greater than zero. If you set font-size:1px you get 9px (the default min size) but if you set font-size:0 you get nothing. This happens in 10.52 and 9.55 but not in 9.2.

    Firefox's minimum font-size is the same also and if you set font-size:0 you get nothing but if you set 1px or greater then you get the minimum font-size. Safari seems to obey the minimum even if you set zero though.
    Consistancy - great when the specification doesn't even say you have to obey font-size much less what zero actually means


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
  •