Results 1 to 3 of 3

Thread: Cross-browser font height

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Cross-browser font height

    As you see the outline is collapsed in the following sample:

    Code:
    var input = document.getElementById('input');
    var output = document.getElementById('output');
    input.addEventListener('input', function() {
      output.value = input.value;
    });
    
    output {
      display: block;
      font: 20px Arial;
      outline: 1px solid green;
    }
    
    <input id="input">
    <output id="output"></output>
    DEMO

    How can I prevent it? Do I need to give the output a fixed height? If so, what value should I give to the height if I want it to be just as high as the text height not an arbitrary number? Is there a cross-browser solution?

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

  3. The Following User Says Thank You to molendijk For This Useful Post:

    Rain Lover (03-22-2019)

  4. #3
    Join Date
    Mar 2019
    Location
    Romania
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    To prevent the output box do disappear when delete everything using backspace update the css with :
    output {
    display: block;
    font: 20px Arial;
    outline: 1px solid green;
    min-height: 27px;
    }
    and also don't need the
    <output id="output">&nbsp;</output>
    you cand use:
    <output id="output"></output>
    Hope that is what you needed.

Similar Threads

  1. Cross Browser Height Alignment Issues
    By johnwboyd in forum CSS
    Replies: 3
    Last Post: 08-04-2015, 06:32 PM
  2. Cross-browser Iframe Height
    By Rain Lover in forum CSS
    Replies: 7
    Last Post: 03-31-2015, 05:45 PM
  3. Changing the font color of the Hyperlink in the Cross Browser Marquee
    By VictoriaSkimboards in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-26-2010, 10:24 PM
  4. Cross Browser II, changing font size, color add blank line between scrolls
    By MarioGian in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-02-2008, 06:48 AM
  5. Cross Browser marquee font control
    By Playfla in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-10-2006, 07:55 PM

Bookmarks

Posting Permissions

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