/    Sign up×
Community /Pin to ProfileBookmark

text spacing

Copy linkTweet thisAlerts:
Jan 19.2008

I have a very simple site – which is validating OK – and I have strange text issue.

The links are spacing strangely on some browsers. On FF and Netscape I’m having the links too far to the left so that they are overlapping the last letter of the previous word.

Stranger still it’s not happening in my version of FF in my office – only here at home.

Could someone take a look and suggest a cause/solution?

thanks in advance

The offending page is : [url]http://www.lpamag.com[/url]

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJan 19.2008 — <p [B]style="font-size:12px; line-height:1%;"[/B]><a title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>
Copy linkTweet thisAlerts:
@sticklebackauthorJan 19.2008 — sorry - but I don't understand the reply....

where should this code go?? Since my text size is all being controlled by my CSS I'm not sure where to add it
Copy linkTweet thisAlerts:
@WebJoelJan 19.2008 — sorry - but I don't understand the reply....

where should this code go?? Since my text size is all being controlled by my CSS I'm not sure where to add it[/quote]

...<body>

<div id="wrapper">

<div id="header">

<h1>Welcome to the LPA Magazine website</h1>

</div>

<div id="left_col">As a member of the LPA you are able to use this website to upload and review your property listings and make editorial suggestions.<p>To contact us directly please send an e-mail to:</p>

[B]<p><a href="mailto:[email protected]">[email protected]</a></p>[/B]

<p>or telephone us on:</p>

<p>95 278 3677</p>

</div>

<div id="content">....[/QUOTE]Replace the BOLD, herem with what I showed in my first post. It is called "inline-style".
Copy linkTweet thisAlerts:
@GronskiJan 20.2008 — Basically, firefox and (most likely netscape does the same thing) adds some type of padding to the <p> attribute. It can be very annoying, you have to code around it for some browsers.
Copy linkTweet thisAlerts:
@WebJoelJan 20.2008 — As used here, you don't even need the "<p>" and "</p>", -the anchor will suffice as it's the only thing being used, and it comes after, and before, another "<p></p>" which is block-level, and thus, -on it's own line.

Reducing the font-size works, but the line-height has to be minimized too. Something about not being able to make element small than the container. Without making "line-height:1%;" you are stuck with a font-size that won't go smaller than a certain size/height..

I only know that this works for IE and Fx, and stops the perculiar overflow that you were seeing..
Copy linkTweet thisAlerts:
@sticklebackauthorJan 20.2008 — can this be done at CSS level so as to avoid having to hand code every line that has a link in it?

It's not an issue on this page which only has three links or so, but I can imagine it being a huge issue on a complex site.
Copy linkTweet thisAlerts:
@WebJoelJan 20.2008 — can this be done at CSS level so as to avoid having to hand code every line that has a link in it?

It's not an issue on this page which only has three links or so, but I can imagine it being a huge issue on a complex site.[/quote] CSS:
[B]a.special[/B] {[B]font-size:12px; line-height:1%;[/B]}[/quote] HTML:<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>

<p><a [B]class="special"[/B] title='Request information at "mailto:[email protected]"' href="mailto:[email protected]">[email protected]</a></p>[/quote]
Copy linkTweet thisAlerts:
@sticklebackauthorJan 20.2008 — OK thanks - I'll try this
×

Success!

Help @stickleback spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...