SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)

    Form dropdowns being obscured in some browsers

    As far as I can tell, this is not a CSS thing. It's definitely a FireFox thing, but I've seen it in other browsers too.

    When I use select-option dropdowns, unless there's something bigger (longer text) further down than the first option, my last numbers and letters get cut off by the drop-down arrow.

    Currently I'm getting around this in a very stupid way: adding a final option made of -----dashes---- which is longer than the first (or selected) option. I've seen this on other websites (years ago I remember wondering what the hell that was).

    What do people do about this? Leave it because only some browsers obscure the word? Use & nbsp;? (Also seems stupid) Is there a CSS solution (don't think so)?

    *Edit, the pages I'm slowly replacing have these selects in a table. With the same browser, there is no problem. It's only when they're set in a proper HTML form that they seem to do this.
    http://stommepoes.jobva.nl/Guis/wonenbereken.html Look at 5 jaar. On my FireFox, it's 5 jaa.
    Tabled version: http://www.guis.nl/cgi-bin/GPPO/main...pagina=Bereken

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because you're using the * selector to remove all the padding and margin's from all elements on a page.

    It's recommended that you don't do this when dealing with forms as they remove the default styling.

    However, the problem you are experiencing is because Firefox uses right padding on the <option> to create the space between the option and the select arrow.

    You can fix this by using

    Code:
    option {
     padding-right: 1em;
    }
    However, you should consider using a different reset method and explicitly set the elements you want resetting if you're dealing with forms as it makes things much easier.

    Hope that helps.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Thanks. I'd heard something about problems with the star selector and forms but this is the first one I've actually seen.

    Unfortunately I can't seem to bring myself to write a paragraph listing every element in possible existance (as this site is big enough that it probably does) because it looks and smells so wrong. I'd rather reset any margins and padding in a form than the other way around-- and I'm already fighting the default styling with extra bs like spans in my legends and divs called "fieldset." (so wrong so wrong.... who wrote this stuff?? Not programmers!) I'm sure someone's going to find a way to continue to use the star and somehow except forms from it. We used to think we couldn't embed Flash and stay valid at the same time...

    Again, thx.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The trouble with that approach is that some form elements once reset you can't reapply styling to them so it's best to not touch them in the first place.

    This is a snippet from Meyer's reset reloaded and should reset everything you need whilst leaving form styling well alone.

    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    }
    http://meyerweb.com/eric/thoughts/20...eset-reloaded/

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yeah that's what I was referring to (Dan Schulz had it in a page he did for someone and I was like wtf? and he was like, form controls, ack!, etc).

    There's gotta be another way around this. Just a while ago everyone was encouraged to use the star selector unless the page was really small or if caused problems... it seems the form problems were found recently?

    There's absolutely no way to make exceptions in CSS? Ack! And they already took the not (!) and made it mean something else...

    Do you understand what I mean? Doesn't it just seem wrong? Inefficient?

    Eh, I've considered (after advice) to have a seperate stylesheet for my many many forms anyway... then this wouldn't be a problem as I wouldn't star anything then...

    Maybe I'm just being crusty.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In future you may be able to use something like this

    Code:
    *:not(option):not(select):not(fieldset):not(legend):not(input):not(textarea) {
    	padding: 0;
    	margin: 0;
    }
    I believe that Opera, Firefox and Safari will support this now but IE7 will just ignore the reset completely.

    Personally, if you know that you're going to be using forms somewhere on your site then I'd use a reset method like the Meyer one above.

    It may look like a lot of extra code but it'll be much smaller than if you need to provide a whole new CSS file for your forms pages not to mention the maintenance problems you may get yourself into with having two stylesheet to maintain.

    You can obviously tweak it to your needs as well as there's probably quite a few elements in that CSS list that you aren't using so you could in fact just end up with...

    Code:
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li
     {
    	margin: 0;
    	padding: 0;
    }
    ... which isn't all that much more than just using the star selector

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Out of curiousity I tried the :not but it seems to affect many other things... padding was added to p's, li's, images, and a few other things. IE6 and 7 seem to get the most confused. Opera renders the page properly.

    I should make an extremely simple page and test more :nots. It's at least a step in the right direction. CSS could definitely be more powerful and flexible with something like :not.

    My tables have just doubled my table-and-form section of my css sheet. Looks like the forms and tables are getting their own sheet anyway : )

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Out of curiousity I tried the :not but it seems to affect many other things... padding was added to p's, li's, images, and a few other things. IE6 and 7 seem to get the most confused. Opera renders the page properly.
    That's because I said above that IE7 will just ignore it completely as it doesn't support :not at the moment. (This obviously means that older browsers don't support it yet either).

    Quote Originally Posted by Stomme poes View Post
    I should make an extremely simple page and test more :nots. It's at least a step in the right direction. CSS could definitely be more powerful and flexible with something like :not.
    I can see uses for it in future but as IE7 and IE6 don't support it at all then unfortunately it's pretty pointless using it at all at this present time but as it's part of the CSS3 spec, it will make its way into future releases of IE (eventually)

    Quote Originally Posted by Stomme poes View Post
    My tables have just doubled my table-and-form section of my css sheet. Looks like the forms and tables are getting their own sheet anyway
    It shouldn't do. You only have to reset the elements on the page that you're using so should only add a few lines at the most so I'd be interested to see what you've done that's doubled your stylesheet?

    Unless your CSS file is huge then I'd keep it all in one place otherwise what you're saving on convenience of having it in two places, you'll be losing in load time due to http requests.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    because I said above that IE7 will just ignore it completely...
    Yeah I saw that but misunderstood you. I thought IEx would still see the * but ignore the :not... instead it decides to ignore the whole thing!

    Unless your CSS file is huge...
    It's starting to get kinda huge. Partly because of my still-standing ineptness at CSS (I'm sure an expert could pare it down quite a bit) and partly because the forms have various parts that seem to only obey when I give them explicit names.
    Every time I think I can remove some divs and tidy things up, one browser or another takes my forms (or some other thing) and makes it looks like a short-bus-aligned child played in it.

    I'm also sure that I'm re-declaring stuff, and this probably has to do with my naming structure. I'm starting to get really long names in my CSS because I can't tell who's going to override what, so I'm getting more and more specific (ridiculously so).

    I expect to look at these pages and this sheet after like a year or two and say, "wtf was I doing???"

    If you're curious, the (still growing and still being reworked) CSS page is here:
    http://stommepoes.jobva.nl/Guis/gppo.css It's setting the styles for many different sorts of pages.

    Yes, I tried to remove the stupid div around Stu's menu but I can't get it to obey without it.

    I wonder if I can rewrite this page from scratch and get it much smaller.

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't say that this CSS was huge although for the page it's displaying it could certainly be a lot smaller but you're heading in the right direction at the moment so you shouldn't really expect your CSS to be as minimal as someone who's been doing it for a good number of years as you will get better with practice

    I expect to look at these pages and this sheet after like a year or two and say, "wtf was I doing???"
    I'm sure you will. I still look back at code I did a few months ago and look at ways I could have done things better.

    You may be able to tidy the html up a little by changing the way you create them to something like this

    Simple accessible form

    I certainly wouldn't worry about using the Meyer reset method over the global reset method though as it doesn't add that much code that you should be concerned and you can make those savings elsewhere in your code


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
  •