PDA

View Full Version : Dreamweaver Letter spacing problem


maisiefantaisie
03-11-2009, 07:13 PM
I have been trying this for 2 days!!
I have a horizontal line of text that i am trying to fit in a simple table 12 pixels x 958. My font is 11 points but at this size doesn't fit the table nicely. I am trying to finely adjust the line using letter spacing in CSS. It seems that some of the value entries I make don't have any effect. For instance if i use a letter spacing of 1 pixel then that is too much and my line wraps. If a use 0.5 pixels that is too little and my line is too short.

My problem is that the values between 0.5 and 1 pixel (0.6,0.7,0.8,0.9) have no effect on the text?

Any ideas?:x

d a v e
03-11-2009, 07:32 PM
firstly - you shouldn't be using a table for layout you should use a div.
you should use points only for a print style sheet and you should relative font sizes for screen, like ems or percentages

have you tried fully justifying the text?

e.g.
.tabletext {
text-align: justify;
}

maisiefantaisie
03-11-2009, 07:43 PM
Ok...I tried a test page and used a div. But the same problem. Is it just that dreamweaver can only make letter spacing adjustments in increments of 0.5?

I also tried justifying the text but it didn't help.

d a v e
03-11-2009, 09:10 PM
can you post a link to what you're trying to do?
why does it have to be so exact? if someone resizes the text or uses a different OS/browser then it may not fit anyway ;)
when i try it works - in firefox at least - e.g.
http://pp.kpnet.fi/prescott/stuff/spacing.html with a letter spacing of 1.6 px

maisiefantaisie
03-11-2009, 10:15 PM
Here is a graphic of what I'm trying to do. basically i want to fit the Nav buttons exactly as i have them here http://www.cake-weddingcakes.co.uk/maisietester/index.html But when i use text and CSS and try to fit the Nav using letter spacing i don't seem to have the control i need for the fine adjustment.

d a v e
03-12-2009, 05:33 AM
post a url of what you have so far - need some code to work with ;)

d a v e
03-12-2009, 09:55 AM
this is what i managed so far - though they're just plain list items not links yet

http://pp.kpnet.fi/prescott/stuff/spacing.html

but i think that unless you use image(s) you're not going to get it exactly right - or even if you do - to *stay* exactly right cross-browser and cross-user. using real text as opposed to images is far more desirable as far as usability, accessibility and SEO goes though so i would aim for that.

mangofreak
03-12-2009, 05:24 PM
Try adding this to your idea Dave:

#nav li {
display: inline;
margin:0;
padding:0 2px 0 3px;
/*letter-spacing: .3px;*/
word-spacing:1px;
border-left:1px solid black;
}

d a v e
03-12-2009, 05:30 PM
mango - i used the letter spacing to add a bit more room in the text as it's quite small but maybe the word spacing would work better. it's all a bit of an intellectual excercise for me as i wouldn't do it this way anyway - i would prefer for it to be almost there for most people, but to allow for fluidity ;)

mangofreak
03-12-2009, 08:47 PM
Dave, diversity of thought its a wonderful thing. I wouldn't like it any other way ;)

Fluidity, it's for me a quest that I am striving to get to but it's proving a bit harder than I expected. Although sometimes I feel closer.

blah blah time to get off my arse and do something physical. Cheers.

Javier

maisiefantaisie
03-12-2009, 09:54 PM
So, my letter spacing problem - Dreamweaver CS3 doesn't show CSS letter spacing changes in the design window. you have to view the changes in a browser to see them!!! Doh!!

But now i have found that my letter spacings are considerably different when viewed in safari than in firefox. :( So i think i am going to give up hoping that CSS can do this reliably and just use images for the buttons.

Thanks for all your help.:)

mangofreak
03-12-2009, 10:42 PM
How much difference is there on Safari compared to IE and Firefox?

One thing that I know is that using adjustable sizes are displayed differently but if you use fixed sizes - saying pixels- the display should be the same in all browsers.

You can try that and if that is not satisfactory then go for the images.

All the best,

Javier

maisiefantaisie
03-19-2009, 09:13 AM
I tried using fixed sizes but still no luck. Safari and Firefox display considerably different text sizes. In Safari the text wraps a couple of words longer!!! I am very surprised. I expected to be able to make more precise adjustments, it's very clunky!!!! Thanks for everyone's help!:)