CSS styles Text "Shifting" on rollover!

It seems that each time I develop a project I run into a new bug or inconsistency with regard to Flash CS3 ’s handling of text/embedding/css etc. This is despite an almost identical setup for each! Very strange.

Anyway, this time the probelm is that I’m using CSS styled dynmic text (paragraph), in which there are hyperlinks. I’m giving the links a general style and the hover a different color only (no size change or font change). When I rollover these links in the live swf, the other text in the paragraph around the links jump or shift, just like as if the rollover state text requires less space than when its normal style.

Anyone come across this before?

Some further details: AS3 , Flash CS3 , html text is in XML file. Textfield has autosize left applied and has a fixed width. Font is embedded, CSS therefore calls this font specifically rather than a font family. P tags, a tags and a hover are all same font size, same font. The only difference is the color.

Thanks, Donagh

Its a bug, i’ve had this so many times and see it quite alot on the templates here I dont think theres much you can do to get around it…

Hey MSFX ,

I’ve had this same setup many times, or perhaps minro differences and I’ve never come across this bug before. So there must be something that can be done. I just have to tweak a few thing and see what happens.

Cheers for the reply.

This issue is from early version of flash coming back to 2000 it’s a sure flash bug like the U.K man state.

Its more to do with the font type that apply this bug issue with CSS I didn’t find a better solution yet, i saw once P&K talk about a solution but i cant remember when was it or if it was my imagination.

// fmt.font              = _Arial.fontName;
/******************************
* "XML Attribute\TextHelper" 
This will override the CSS
and add on the xml for 
more easy life  
 *******************************/
fmt.leftMargin        =_leftMargin;                  
fmt.rightMargin       =_rightMargin;                  
fmt.letterSpacing     =_letterSpacing;                
fmt.leading           =_leading;                         
return fmt;

Also set you AntiAliasType.NORMAL since Using AntiAliasType.ADVANCED makes copy on render

Hi tsafi,

Thanks for your reply. Nothing is working, so I think I’ll have to just say goodbye to the hover style, and hope the hand cursor and link tag style on their own are enough. Quite annoying.

I’m hopeing that the CS5 text framework will fix this nonsense once and for all.

Donagh

I assume your using an image in your html text right? Here’s one solution:

First set your text field’s auto-size:

txt.autoSize = TextFieldAutoSize.LEFT;

Then add a few extra pixels to the “hSpace” property of the image tag:

<img src="image.jpg" hspace="10" />

The default “hSpace” is 8 pixels but in a project I did I was able to get rid of the bad behavior by bumping it up to 10. But try adding more until it works.

Not the best solution but it worked for me once.

Had this many times before too. Changing the anti-alias for the textfields did make a difference.

Hi guys,

CJ , I’m not using an image in the html textfield, text only.

Enroni, I’ve tried changing the AntiAliasing of the textfield and it’s not making any difference.

I saw a hack solution via google about inserting non-breaking spaces into the hyperlink, but that didn’t work either.

Thanks for the attempts, anyway.

Donagh

if “Auto kern” is checked then uncheck it.

I remember someone posting a solution for this here, around 2 months ago, maybe more. Tried to search for it in the forums, but well, we all know is not the best search engine for a forum…