0

Hi Team,

I would like to increase the space between letters inside select tag. I am not sure how to achieve this.
what i would like to get is like below

** letter >> l e t t e r **

** Below is my html and external CSS code . **

Please advise what im missing to achieve the result.

HTML code

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="mystyle8.css">



</HEAD>
<body>

<form>

<select>
    <option value="apple"Saab</option>
  <option value="orange">Mercedes</option>
  <option value="mango">Audi</option>
</select> 


</form>

</body>
</html>

** mystyle8.css **

select {
  font-family: Cursive;
  letter-spacing:3px;

}
7
Contributors
16
Replies
68
Views
4 Years
Discussion Span
Last Post by diafol
0

Your problem may be the html - place a close '>' after "apple"

But anyway, this works for me:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
select {
  font-family: Cursive;
  letter-spacing:10px;
}
</style>
</head>

<body>
<select>
    <option value="apple">Saab</option>
    <option value="orange">Mercedes</option>
    <option value="mango">Audi</option>
</select> 
</body>
</html>

I believe a space between colon and value in css is optional.

0

Hi Diafol,

I have used ur code in ie 11 and ie 8 also. I do not see any space between the letters

In the drop down box it is displaying as saab only not like s a a b.

attaching the screen shot

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
select {
 font-family: Cursive;
letter-spacing:10px;
}</style>
</head>
<body>
<select>
<option value="apple">Saab</option>
<option value="orange">Mercedes</option>
<option value="mango">Audi</option>
</select>
</body>
</html>

Please advise what is happening .

Attachments nospace.jpg 90.54 KB
0

Ah OK. It's a problem specific to IE. Works fine on FF, Chrome and Opera. Trust IE to mess up another CSS prop. Sooner it dies a death the better. Sorry starting to rant. Search for an IE letter-spacing fix.

I've read reports that it should work on IE10, but it fails for me on IE11 (Win7). God knows why, it's IE that's all I know.

Edited by diafol

0

Trust IE to mess up another CSS prop. Sooner it dies a death the better.

lmao ... Amen brother!

Try this:

<style>
    select {
        font-family: Cursive;
        letter-spacing:10px;

    }

    * html select {
        letter-spacing:10px;
    }
</style>

Also, a generally accepted practice is not to force a font size on the user. Try using "em" values instead of pixels so they're scalable.

Edited by DJBirdi

0

Hi DjBirdi,

I have tried your above code also, it does not work in IE11.

Please advise

0

as they said its an IE problem.

as said:

Search for an IE letter-spacing fix.

0

On further investigation, it works in IE when used on <h1> and <h2> tags, just seems reluctant with the <select> element. Hmmm.

//EDIT

How very odd. This now seems to work...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
select {
  font-family: Cursive;
  letter-spacing:10px;
}
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

<select>
    <option value="apple">Saab</option>
  <option value="orange">Mercedes</option>
  <option value="mango">Audi</option>
</select> 
</body>
</html>

Reference
Additional markup from W3Schools: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_letter-spacing

Edited by diafol

-2

In select tag letter spacing of style code as given below:

    select {
    font-family: Cursive;
    letter-spacing:3px;
    }

If you want you letter-spacing style as

letter-spacing: normal|length|initial|inherit;
0

@veera100

Please read the complete thread next time. The user has already tried what you said.

0

Hi Diafol,

How very odd. This now seems to work...

did you mean your above code renders drop down menu with letter spacing applied ?

I tried it didnt work for me.

I tried for IE letter-spacing fix also in google but no luck

0

@murali, have you tried hard-refresh your page? Sometimes, browsers cache the CSS and will not apply new changes from the CSS. Hard refresh (Shift+F5) would force them to rerender again.

Edited by Taywin

0

Hmm, how odd. I never use IE, so it was not a cache issue for me - the first page view was the one with the letter-spacing code. So I'm at a loss.

0

Well, doesn't work now again. Not caching issue - tested it. Sorry murali, I don't seem to be able to help you with this.

0

This blog talks about IE11 issue with display words/letters (but more on a page rendered by a server). That said, it gave me an idea. Could it be that 'Cursive' font family is not totally valid in IE11 display? Could you change/add a common family (i.e. Serif) to your CSS?

Edited by Taywin

0

I tried a different font, no difference. :(

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.