www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Strange display problem, LCD screen related?

  1. #1
    Join Date
    Jun 2006
    Posts
    8

    resolved [RESOLVED] Strange display problem, LCD screen related?

    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:

    http://img421.imageshack.us/img421/2850/correct2wy.jpg

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

    http://img341.imageshack.us/img341/8083/problem5hj.jpg

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

  2. #2
    Join Date
    Jun 2006
    Posts
    8
    Here's the CSS code for this DIV:

    HTML Code:
    .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>
    
    

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    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:
    HTML Code:
    <div class="interests">
      <div class="interestsTop">
        <div class="interestsBottom">
          Interests content
        </div>
      </div>
    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;
    }

  4. #4
    Join Date
    Jun 2006
    Posts
    8
    Thanks alot.

    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.


  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    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:
    Code:
    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

  6. #6
    Join Date
    Jun 2006
    Posts
    8
    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)

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles