Text resizing tears layout apart

Dear Experts,

I want to behave the text on my homepage like in this example:
http://tomasio.at/temp/korrekt.gif
The dashed lines on the left and right borders should continue
seamlessly while resizing the text.

Unluckily I always get a horizontal gap when I make text bigger in
Firefox. Internet Explorer even shows the gap at the default (=medium)
text size. Look here for the html page:
http://tomasio.at/temp

and here for the corresponding CSS file:
http://tomasio.at/temp/stylesheet3.css


Can anybody give me a hint what's wrong in my code?Also I would like
to know if my layout aim is not achievable with css and html only.

kind regards,
--
tomasio

On 2006-09-30, tomasio <damnit (AT) jan (DOT) net> wrote:

Dear Experts,

I want to behave the text on my homepage like in this example:
http://tomasio.at/temp/korrekt.gif
The dashed lines on the left and right borders should continue
seamlessly while resizing the text.

Unluckily I always get a horizontal gap when I make text bigger in
Firefox. Internet Explorer even shows the gap at the default (=medium)
text size. Look here for the html page:
http://tomasio.at/temp

and here for the corresponding CSS file:
http://tomasio.at/temp/stylesheet3.css


Can anybody give me a hint what's wrong in my code?

Your borders are just built into the images, they're not CSS borders at
all! You need something like border: 1px dashed orange around some of
your divs, and to take the dashed lines out of the gif images.