For some reason, the text I've entered into a DIV layer appears to overlap the element that it's been typed into. I think it's related to LCD screens as the problem only came up on these. It's driving me mad. Also, one of the links on the page appears as it should do when I view it on my computer, yet is the default blue colour on the other monitors I tested it on.
Here's a small example of the page, of how it should look, and how it appears to me:
<DIV class="interests"><br><h1>Interests</h1><br><br><font color="red"><b>General:</b></font color>
computers, old amiga games, music, footy, coke, pro evo, photoshop, making new designs for my profile all the time because i have nothing better to do
<br><br><font color="red"><b>Music:</b></font color>
oasis, radiohead, doves, the strokes, the white stripes, pink floyd, the clash, the beatles, coldplay, eels, love, arcade fire, the raconteurs, the stone roses, the cure, happy mondays, the streets, the futureheads, kings of leon, green day, arctic monkeys, maximo park, editors, interpol, elbow, ziggy stardust, my bloody valentine, the charlatans, rem, belle & sebastian, jeff buckley, velvet underground, old stereophonics, the kinks, mylo, bloc party, dirty pretty things, sigur rós, british sea power, random dance music
<br><br><font color="red"><b>Films:</b></font color>
hardly ever watch them but fight club, pulp fiction, trainspotting, gladiator, all the naked guns
<br><br><font color="red"><b>Television:</b></font color>
the office, the royle family, have i got news for you, never mind the buzz****s, brasseye, i'm alan partridge, the soaps, big bloody brother
<br><br><font color="red"><b>Heroes:</b></font color>
you are my hero</div>
I noticed a couple differences in the screenshots.
In the "correct" pic the text is a serif font, looks like Georgia perhaps. The incorrect pic shows a sans-serif font, most likely Verdana. The differences in fonts mean text wraps different and takes up more lines, making the "incorrect" screen shot have a longer column.
The answer to this, unfortunately for your design, is to remove the height from .interests. Just let it flow man You'll need to cut the rounded box graphic into several pieces and use repeated background images to achieve the effect you want with the flexibility you need.
1. The top rounded corners can be one graphic.
2. The bottom rounded corners can be the second graphic.
3. A repeated background image can be used to fill in the remaining box. It should be 1px high by as wide as the box, including the outer shadow.
You'll find the following markup structure usefull:
HA ha! I didn't even think to look at the font-family property in the CSS you used! You always want to specify a list of acceptable fonts, starting with your most preferred to your least, and lastly be sure to include a generic font. In your case, you might like:
font-family: batang, Georgia, "Times New Roman", Times, serif;
Batang is your preferred font, so browsers will always look for it first. From your screenshot, it looks like Georgia is a similar looking font, so I listed that next, thinking if someone's computer didn't have batang (which mine doesn't) then it would likely have Georgia (a common windows font). I listed Times New Roman (in quotes because the font name is more than one word) next because it's a fairly common windows and mac font, with Times following that. Most times, if a Mac doesn't have Times New Roman, it will have Times and both are very similar.
At the tail end is the generic font serif. All the previous fonts listed had serifs on them (the curly ends of each character). If a browser doesn't have any of the specified fonts and it gets to serif, it will use the default serif font specified in the browser preferences, so at least the user will see a font of the same design philosophy as your intended font.
If you already knew this and it was a long-winded review, my apologies