Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mozilla masking text in select boxes

    Hi guys,

    I am currently attempting to implement a CSS version of my old site that is predominantly frames and html.

    * {
    padding:0;
    }

    in my css file unfortunately causes select box control buttons to overlay text that fills a select box in MOZILLA only.

    I have experimented with padding values on the select boxes to restore the "default" but to no avail. If I try and pad from the right the select control moves with the padding. Does anyone know what these default settings are.

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    can we get a link to yr site?
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.tifozi.net/doozer/test/wa...k.jpg&print=no

    demonstrates the problem.

    see the select box. well mozilla is the only browser to mask the D with the drop control.

    If I remove the *{padding:0} from the css the problem disappears so I know that is the culprit.

    Cheers

  • #4
    New Coder
    Join Date
    Jul 2005
    Location
    detroit area
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    looks to me like the text-align="center" on the select box is not centering in IE. maybe that is the cause.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    could just add this to your css
    Code:
    select {
    width:175px
    }

  • #6
    New Coder
    Join Date
    Feb 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I could but as the select boxes on these pgaes are dynamically generated from a database by php if the database behind changes a longer text value for the card set name in the future this 'fix' will truncate the box and obscure longer text values.

    I have realised with some tinkering that padding:0 in the select tag does not have this effect. Altering the padding value of * is doing something weird to the select boxes.

    I am not 100% certain but I am assuming * refers to EVERY OBJECT on the page unless otherwise defined in the css.

    Could it be changing the padding value on the drop down control button?

    Anybody expert enough in the way Mozilla generates select boxes on the screen to know what is going on here?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yeah your right, the * {padding:0;} removes the padding on every element if it isn't specified. By default there is a default padding, you can either lose the global reset (the * padding thing) and just go from there.


  •  

    Posting Permissions

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