Back To Website Design Forum

Hide button value through CSS

  • ajarantes
  • Born
  • Born
  • No Avatar
  • Joined: Dec 11, 2008
  • Posts: 1
  • Status: Offline

Post December 11th, 2008, 12:12 pm

I found a solution to this problem that I believe works on Firefox and IE. The solution I applied to my problem was to fix the width and height of the button through CSS and make the size of the font for the value equal to 0.1. This made it invisible and my background visible.(see below)

the html:

Code: [ Select ]
<input type='submit' name='submit' value='submit' class='submit' />


the css:

Code: [ Select ]
.submit {
    background-image: url('images/submit.gif');
    width: 35px;
    height: 25px;
    font-size: 0.1px;
    }
  1. .submit {
  2.     background-image: url('images/submit.gif');
  3.     width: 35px;
  4.     height: 25px;
  5.     font-size: 0.1px;
  6.     }
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 11th, 2008, 12:12 pm

  • kosh
  • Born
  • Born
  • No Avatar
  • Joined: Dec 19, 2008
  • Posts: 1
  • Status: Offline

Post December 19th, 2008, 2:25 pm

I had this same problem that the OP had. A site I was working on had a text label coded into the html that I could not change. I set the background image using css and set color:transparent and font-size:99999px. I guess it blew the text up so large that no part of it was in the visable area any more.

Worked for me in IE 6 and 7 and Firefox 3.0.4

Code: [ Select ]
font-size:0.1px

still gave me a 1px black stroke.
  • mindfuckx
  • Born
  • Born
  • No Avatar
  • Joined: Aug 30, 2009
  • Posts: 1
  • Status: Offline

Post August 30th, 2009, 8:12 am

crowbar wrote:
Hey Kami,

I tried this and magically it worked in IE7 and IE6 and FF3. I hope it helps ...

ps: won't work if text transform is removed...

Code: [ Select ]
 
#name
{
    color: transparent;
    text-transform: capitalize;
}
 
  1.  
  2. #name
  3. {
  4.     color: transparent;
  5.     text-transform: capitalize;
  6. }
  7.  



This works indeed ( for some unknown reason )
BUT only if you position your button "absolutly"

In other words:

Code: [ Select ]

#button{
  color: transparent;
  text-transform: capitalize;
  position:absolute;
}

  2. #button{
  3.   color: transparent;
  4.   text-transform: capitalize;
  5.   position:absolute;
  6. }


Just thought I would let you guys know ;)

1, 2

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 173 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.