elementalgrace Posted December 18, 2007 Share Posted December 18, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.