Jump to content

Solution for inline-block in Firefox


elementalgrace

Recommended Posts

Having spent most of the day cursing Firefox for removing support for inline-block, I finally managed to find a solution. So far this works perfectly in IE6, IE7, Firefox, Opera and Safari Beta for PC. I hope it helps someone in the future because it's been driving me nuts all day:HTML

<div class='view-item view-item-tracker'><div class='view-label view-label-node-title'>Title</div><div class='view-field view-data-node-title'><a href="/drupal-5.3/?q=node/28">Standard Objectives 3</a> </div><div class='view-label view-label-users-name'>Author</div><div class='view-field view-data-users-name'><a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div></div>

CSS

/*label details*/ div.view-label{font-weight:bold; width:30%; display: -moz-inline-stack; /*firefox*/display:inline-block; vertical-align:top;}* html div.view-label{display:inline;}* + html div.view-label{display:inline;}/*data details*/ div.view-field{ width:69%; display: -moz-inline-stack; /*firefox*/display:inline-block;}* html div.view-field{display:inline;}* + html div.view-field{display:inline;}

1. Opera and Safari understand display:inline-block as they should so no problems there. 2. Setting display to inline using the *HTML and the *+HTML hack means that IE6 and IE7 now behave as if it was inline-block. 3. That just leaves Firefox. Using display: -moz-inline-stack should make Firefox work but you must be careful to put it before the display:inline-block declaration otherwise Internet Explorer gets confused and forgets to do anything.If anyone has a better solution, then please let me know!EG

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...