www.webdeveloper.com
Results 1 to 6 of 6

Thread: N00b ? - Why is my text all jacked up?

  1. #1
    Join Date
    May 2014
    Posts
    2

    N00b ? - Why is my text all jacked up?

    It was fine one minute...the next minute it was messed up.
    I was for the most part making my site in Chrome. The way my text looks in Chrome is the way it's supposed to look. Problem is, when I look at the site in Firefox and Safari the text is smaller. I've been trying to search around but I can't find the answer. Any code or something I can put in to make it stay the same throughout these other browsers?

    Also, on another note regarding text, question number two -
    Not sure how to word it really, but I have text that when clicked (not released), just if i click and hold the click down, while holding down on the mouse the text disappears. When releasing the click it reappears. It only lasts as long as the click in other words….maybe someone can lead me in the right direction to where to look….thanks.

  2. #2
    Join Date
    Feb 2013
    Posts
    109
    Kind of hard telling what your problem is without any code. Show show HTML/CSS code and maybe you will get some help.

  3. #3
    Join Date
    May 2014
    Posts
    2
    Quote Originally Posted by Strider64 View Post
    Kind of hard telling what your problem is without any code. Show show HTML/CSS code and maybe you will get some help.
    I figured I didn't need to post a code as this would be something that could be diagnosed without a code as it is a compatibility issue right?....

    either way here it is in full.

    https://gist.github.com/anonymous/fede33d22326d377b145

    thanks to anyone who can help.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Validate your CSS here and correct as needed.

    Validate your HTML here and correct as needed.

    Without any font sizes set anywhere, browsers use 16 pixels by default. What that even looks like in all browsers depends on the font family being used and whether bold/italic/etc. is being used.Even if you spend time setting the size for "all" browsers, the size is still going to vary from browser to browser. See:

    CSS Font-Sizing: a Definitive Guide

    Font Rendering Differences: Firefox vs. IE vs. Safari

    On font rendering consistency across browsers

    Make my text look the same in all browsers

    Try using a CSS Reset to normalize all browsers after you corrected any code.

  5. #5
    I'm seeing a number of problems here:

    1) px metric fonts are an inaccessible train wreck. There's a reason accessibility guidelines say to use %/em.

    2) why the devil would you EVER declare the miniscule illegible 10px on body, completely breaking the chance of EVER having dynamic fonts

    3) 10px and 13px are known to have size issues across browsers... really though anything smaller than 14px has NO BUSINESS ON A WEBSITE IN THE FIRST PLACE. (though again, why are you declaring px?)

    4) No matter what the ignorant dufus' at SitePoint say, omitting the metric on line-height does NOT inherit properly across all browsers, font rendering engines, etc... saying "line-height:1.5;" IS BROKEN no matter how many times it's advocates blindly claim otherwise even when you shove the proof that it's broken up their noses. I no longer have any respect for ANYONE over on that site...

    5) You have an invalid letter-spacing declaration. "1.px" is not a valid value. "1.0px" or "1px" would be. Also beware that different font rendering engines handle letter spacing differently -- Freetype (linux, BSD, etc) in particular with it's "handling of font kerning like a sweetly retarded rhesis monkey on crack" can really choke on it depending on what font-family it ends up falling back on.

    6) you have invalid use of closing semi-colons. Even though you can split properties apart where spaces are allowed, some browsers choke on semi-colons being alone on a line; STUPID since the specs say what you have is valid, but like the specifications actually mean anything to the browser makers. (PARTICULARLY IE and Apple)

    7) You have incomplete font-family stacks. Unless you're on windows or have office installed, it's unlikely a machine with Safari on it is going to even HAVE arial... you could be getting different default font-family values across browsers. Try "arial,helvetica,sans-serif" -- though this is also why I test win/lin/osx as they all use different font renderers, so it is effectively impossible to have pages render the same across them.

    8) Avoid numbered font-weights, they don't work. The only two values that seem to work consistently cross-browser is "normal" and "bold" -- anything else? The rendering engines weren't designed to do. (really numbered and the other named values are for PRINT, not screen!)

    9) You might want to get in the habit of constantly using the condensed font properties; it can result in less code, and being 100% certain that when you change the font size everything else is set properly... for example where you have:

    Code:
    body {
    	background: #000000;
    	color: #ffffff;
    	font-family: arial
            ;
    	font-size: 10px;
        font-weight: normal;
    	letter-spacing: 1.px;
    	line-height: 1.50
            ;
    }
    I would have:

    Code:
    body {
      letter-spacing:1px; 
      font:normal 85%/150% arial,helvetica,sans-serif;
      background:#000;
      color:#FFF;
    }
    10) that massive stretched backgroung throws up warning flags, might be one of those "images too big to even belong on a website in the first place" moments.

    11) CSS without the markup it's styling is pretty much gibberish, doesn't entirely tell us what's really going on.

    Bottom line though, you're using inaccessible font metrics (px), with a broken line-height method (no px/%/em), with incomplete font-family stacks, with an invalid letter-spacing, and font-weights that are guaranteed not to work in all browsers. Not sure where you got that any of that would work or was good practice...

  6. #6
    Oh, and that 85% font-size I had in that code -- gives 12px to legacy *nix users, 14px to the majority of people, and 17px to 8514/large/20px/120dpi/125%/Win7+ Medium/WhateverTheDevilTheyAreCallingItThisYear users like myself... and 27px on my 200% "10 foot interface" media center rig.

    That's why you're supposed to use dynamic (%/em) fonts; so users don't have to dive for the zoom or deal with broken layouts when they do so.

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