IE/WIN The IE Doubled Float-Margin Bug on admin pages
| Project: | Drupal |
| Version: | 5.1 |
| Component: | admin.module |
| Category: | bug report |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Similar to the "content getting pushed down" issue. As in good css tradition, IE bugs never come alone, and it can be difficult to separate them. I'll describe here one symptom and open up another bug report for another to keep things clear.
Working in: IE6 / WinXP
On the admin pages, depending on the size of my viewport (browser window), either the right sidebar drops under all the content, or the .right admin panel drops. The right panel should never drop under, unless the viewport is ridiculously narrow.
I researched IE CSS bugs, and found this demo at www.positioniseverything.net. A bug is described where a margin in a float, in the same direction of the float, is doubled by IE.
Comparing the layout in IE and Firefox, as shown in the attached screenshot, seems to confirm that this is what is happening. The solution is to apply display:inline to the float.
I applied the following fix in style.css of the Zen Theme:
/**
* Fix for the IE Doubled Float-Margin Bug as described on
* http://www.positioniseverything.net/explorer/doubled-margin.html
*/
div.... .left, div.admin .right {
display: inline;
}and it solved the problem. However I am aware that this is an override of the css rules of admin.css, of the core system module. Perhaps this issue is then better reported over there?
For the record, I am working with the Zen developement snapshot that was released on 19 january, and I applied the patch that fixes textarea.js.
| Attachment | Size |
|---|---|
| admin_ie_firefox.png | 52.02 KB |
#1
Moving the issue to Drupal core admin.module, because the margin inside the admin panel floats is applied in admin.css. Reset the status to minor, because while it is a bug (of IE6 on windows), it doesn't necessarily break any layouts.
I will try to learn how to make patches this week, so I won't assign this to myself yet. In any case, I don't know if this should be fixed, and if yes, what the policy/guidelines are on including IE6 hacks in css files.
#2
I'm also seeing the div.admin .right being pushed down and rendered below and to the right of the left admin panel in a fixed width theme.
One way to fix this is to make a change to admin.css to change the margin-left and margin-right to be a % instead of fixed 1em.
div.admin .left {admin.css (line 24)
float:left;
margin-left:1em; /* change this to 1% since the width's are specified in %'s */
width:47%;
div.admin .right {admin.css (line 29)
float:right;
margin-right:1em; /* change this to 1% since the width's are specified in %'s */
width:47%;
}
#3
This is fixed in D5.x-dev..
#4
Automatically closed -- issue fixed for two weeks with no activity.