ie7 CSS fun

  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

I am working with a dropdown and just had an addition requirement to add some descriptive text to the options.

I really like how FF renders this - the selected value honors the width in the style, but when you click on the dropdown it expands to make everything readable.

IE on the other hand will take the width and continues to apply it when choosing a new value. Anyone know how to get IE to behave like FF in this instance? This is an internal app, so everyone runs ie7 - no firefox except for us developers
Code: [ Select ]
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head></head>
 <body>
    <select style=" width:80px; ">
      <option>01300002  . Truck And Haul</option>
      <option>01300007  . Technology</option>
      <option>01310001  . General Superintendent</option>
      <option>01310014  . Safety Personnel</option>
      <option>01500001  . Temporary Field Offices</option>
      <option>01580000  . Project identification</option>  
    </select>
</body>
</html>
 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  3. <html>
  4. <head></head>
  5.  <body>
  6.     <select style=" width:80px; ">
  7.       <option>01300002  . Truck And Haul</option>
  8.       <option>01300007  . Technology</option>
  9.       <option>01310001  . General Superintendent</option>
  10.       <option>01310014  . Safety Personnel</option>
  11.       <option>01500001  . Temporary Field Offices</option>
  12.       <option>01580000  . Project identification</option>  
  13.     </select>
  14. </body>
  15. </html>
  16.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I don't believe there is a work around for this. I think your best bet would be to use a CSS drop down instead of the form element.
  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

Could you send me a link of an example? All of the css dropdown results I get from google are for a menu, not for a select box.

http://www.flickr.com/photos/33382673@N02/3110093871/

This is an example of what I'm talking about. Work lets me upload images but not view them, so if something weird happened I won't know until I get home tonight.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I knew what you were talking about.

Is it for a FORM? I assumed you were trying to restrict the width because it was a sidebar item. Maybe you could explain what this is for - its context.

I don't believe your going to be able to change IE's behavior on this.
  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

Yep, its for a form. The original design was to just have the numbers shown on the screen, which allowed me to design the form to fit a targeted screen size with all of the other elements.

Well someone just suggested it would be nice to also see the description that goes along with the number. I agree with the idea, but it would wreck the existing form. As you can see from the image there is a large amount of variability in the descriptions. To further complicate matters, the list is not fixed, so in a week someone could add a code with 50 chars for the description.

When I saw how FF rendered it, it looked perfect but it wasn't until a day or so later that I checked everything in IE to my disappointment. I think you are correct that there isn't really a work around for IE on this one.


Longer description to give you context
Developed an equipment tracking system, that ties in data from a budget management system and accounting. A user would assign some equipment to a job, and then pick which cost code the charge - the drop down in question. The codes are based on an 8 digit numbering system. The description is whatever the Project Manager chooses, and while most are reasonably short there is no guarantee.

So on a job's page there could be any number of these rows with the same list of cost codes. A different job could have a completely different set of codes in its drop down, so there isn't any sort of master list this could be based off of.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Ah! I hate when the game changes midway through. ;)

Theoretically, you could still use a CSS drop-down - the same type you would otherwise use for navigation. You could use the onClick of the link(s) to set a variable that you would otherwise be collected with the <select>.
  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

Managing the changes is the game! :)

Hmm, I might be able to use that. I haven't tried anything but one worry I'd have is if the positions would change on stuff when a user clicks. So if the area expands to 200px instead of 100, would the row shift while the user was choosing?

Of course if its more like a menu that should work as long as there isn't issues with rows being stacked - trying to choose something from the top row and it activates a lower row as you move down.

Will have to play around a bit. Regardless, thanks for you help!

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 76 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.