Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
kbear

Listbox Spacing

Recommended Posts

Hello All,

 

I have an app underdevelopment, that can be seen here.

 

http://74.208.77.106:8080/UnlockSpanish/

 

I am posting with a question about the listbox that is seen in the column along the left side.

 

This box displays different spacing on different browsers.  On Firefox there is a large spacing between lines (about 1/8 inch gap between each line).  Very nice appearance.

 

However on Chrome, Safari and IE, there is almost no gap at all.  The result is the listbox looks very crowded.

 

I would like to check here with the forum if there is any options availble to adjust spacing, or if some possible hack would accomplish this result.

 

 

Very appreciative for any advice.

 

 

 

 

Share this post


Link to post
Share on other sites

You can try using a CSS reset to initialize the CSS for select elements and option elements across all browsers.

However, it should be noted that input elements (including select elements) are quite often very unique in appearance across browsers and impossible to make look exactly the same no matter what CSS properties you reset.

 

A common way to get around this is to do something like create an unordered list of a links instead of a select element with options. The downsides of this is that it's not nearly as semantic, and it relies on JavaScript being enabled to capture onclick events, etc. In other words, if JS is disabled, the thing won't work.

 

Over time, I've learned to just accept the fact that things can't (nor need to) look exactly the same across all browsers.

Just try to get it as close as possible within a reasonable amount of time and looking decent in all browsers.

I think that's the best you can do.

 

By the way, I remember some time ago seeing the Flash site you started with before, and I must say, your JS-only version is looking a lot nicer and smoother.

Good work!

Share this post


Link to post
Share on other sites

Yes, I am aware of normalizing, but at the end of the day, it's all essentially the same thing.

When I said "CSS reset", I didn't mean use a full-on CSS reset, I meant reset some of the properties for select and option elements.

Share this post


Link to post
Share on other sites

I know, Jon, but given how you phrased it, I wanted to clear that up. It's a natural next step to search for "CSS reset", and I wanted to clarify for anyone else reading the post moving on.

 

I actually think we discussed resets vs normalizing something like a year ago, and it was then I switched over myself. ;)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...