Question

This is the HTML formatted text I’m sending to a UIWebView instance.

"This is my sample
<br>
question text." And
<br>
<a style="padding:2px; font-family:'Futura-CondensedExtraBold',Georgia,Serif; color:white; border:0px solid;border-radius:10px; background-image: -webkit-linear-gradient(bottom, rgb(102,184,24) 4%, rgb(197,228,71) 52%); ">"The sample</a>
<a style="padding:2px; font-family:'Futura-CondensedExtraBold',Georgia,Serif; color:white; border:0px solid;border-radius:10px; background-image: -webkit-linear-gradient(bottom, rgb(102,184,24) 4%, rgb(197,228,71) 52%); ">
<br>
<a style="padding:2px; font-family:'Futura-CondensedExtraBold',Georgia,Serif; color:white; border:0px solid;border-radius:10px; background-image: -webkit-linear-gradient(bottom, rgb(102,184,24) 4%, rgb(197,228,71) 52%); ">answer text goes</a>
<a style="padding:2px; font-family:'Futura-CondensedExtraBold',Georgia,Serif; color:white; border:0px solid;border-radius:10px; background-image: -webkit-linear-gradient(bottom, rgb(102,184,24) 4%, rgb(197,228,71) 52%); ">
<br>
<a style="padding:2px; font-family:'Futura-CondensedExtraBold',Georgia,Serif; color:white; border:0px solid;border-radius:10px; background-image: -webkit-linear-gradient(bottom, rgb(102,184,24) 4%, rgb(197,228,71) 52%); ">here"</a>.

And here is the image of an output in the UIWebView.

DEMO HERE

I’m seing a same color vertical bar next to each formatted line in the webview.

I highly appreciate any tips/advices on this. Thanks.

Answer 1

Because your code has 2 <a> which does not contain any text and even it has no </a> end tag (syntax error). And you have given style="padding:2px" to them. So it will pad 2px inside <a> tag and will show background color.

Remove that 2 <a> and it will work as you want.

Working Demo