/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Strange display problem, LCD screen related?

Copy linkTweet thisAlerts:
Jun 29.2006

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:

[IMG]http://img421.imageshack.us/img421/2850/correct2wy.jpg[/IMG]

And here’s how it looks incorrectly on some LCD screens:

[IMG]http://img341.imageshack.us/img341/8083/problem5hj.jpg[/IMG]

(The rounded rectangle is supposed to be there at the bottom, it’s another DIV)

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@tomothyauthorJun 29.2006 — Here's the CSS code for this DIV:

[code=html]

.interests {
position:absolute;
top:545px;
left:50%;
margin-left:-370px;
padding:20px;
height:529px;
width:325px;
background-image:url(http://i37.photobucket.com/albums/e65/thomasmccarten/Generalbase.gif);
font-family:batang;
color:5B5B5B;
font-size:13px;
z-index:2
}


<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>



[/code]
Copy linkTweet thisAlerts:
@toicontienJun 29.2006 — 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:
    [code=html]
    <div class="interests">
    <div class="interestsTop">
    <div class="interestsBottom">
    Interests content
    </div>
    </div>
    [/code]
    And the following CSS:
    [CODE]
    .interests {
    background: #fff url(interestsBG.gif) repeat-y scroll 0 0;
    position:absolute;
    top:545px;
    left:50%;
    margin-left:-370px;
    width:325px;
    font-family:batang;
    color:5B5B5B;
    font-size:13px;
    z-index:2
    }

    .interestsTop {
    background: transparent url(interestsTop.gif) no-repeat scroll 0 0;
    }

    .interestsBottom {
    background: transparent url(interestsBottom.gif) no-repeat scroll 0 100%;
    padding:20px;
    }
    [/CODE]
    Copy linkTweet thisAlerts:
    @tomothyauthorJun 29.2006 — Thanks [B]alot[/B].

    I didn't even notice the fact that two different fonts were displayed. (I've still no idea why that's happened though)

    I completely understand your reply, I think that should work.

    ?
    Copy linkTweet thisAlerts:
    @toicontienJun 29.2006 — 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:
    <i>
    </i>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 ?
    Copy linkTweet thisAlerts:
    @tomothyauthorJun 29.2006 — No that's helpful. I mistook 'batang' to be a font that all computers had, I don't know why I have it yet some others don't, but that's another issue.

    Problem completely solved now, I'll make sure I'm not lazy next time and give a list of fonts rather than just presuming the one I specify will be fine. Thanks again (Y)
    Copy linkTweet thisAlerts:
    @toicontienJun 30.2006 — no prob ? any time
    ×

    Success!

    Help @tomothy 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.28,
    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,
    )...