Bold fonts not working with buttons in IE. 1

[lcs01]

I am having a very simple question that I don't know how to solve it:

<b>
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" />
</b>

Why can I not get the bold fonts in IE 6 and 7? It works fine in Firefox. What do I miss here?

Thank you.

 

[vacunita]

That doesn't work for me in FF. anyway:

Form elements in general, are rendered by the OS, and as such will hardly ever adhere to formatting throughout every browser. Add to that that wrapping form elements in html tags is not the correct way of doing it. Well i can only guess at the varied results you would get doing that.

I would suggest something in like:

<input type=submit style="font-weight:bold;">

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[lcs01]

Thank you, vacunita. Your way works very well.

As for my way, I tested it again and here is the detail.

First of all, I wrote a perl code using CGI.pm under cgi-bin subdir like this:

print Tr(td([b][COLOR=red]b([/color][/b]submit(-value=>"Submit"), reset(-value=>"Cancel")[b][COLOR=red])[/color][/b]));

which produces an html code like this:

[b][COLOR=red]<b>[/color][/b]<input type="submit" name=".submit" value="Submit" /> <input type="reset" value="Cancel" />[b][COLOR=red]</b>[/color][/b]

And the perl code works fine with Firefox 1.5. However, if I save the html file as a pure ascii file and open it in firefox through file:// protocol, the bold font does not work any more. How strange is that!

 

[Olavxxx]

I would rather use an image submit button if looks are important:

<input type="image" name="submit" src="submit.gif" border="0" />

To make it even cooler, you define the border:0; in css instead and you also define that hover will change position of the image by the width of the image (negative) and you make the image submit.gif twice as wide as the button will be.

The idea here, is that you make an image at let's say:
100 x 30 px

The button will be 50x30px and the 50 next px (invisible) will be the hover-state (x-pos). When hovering, the CSS moves the image to the left.

This means you get flicker-free hovering!
If you wish to do even more advanced stuff, you would have to go through JS I believe.

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

 

[lcs01]

Thank you for your suggestion, DaButcher.

It's indeed a better solution using a gif file. however, I just want to learn how to do it through html/css.

Thanks again.