View Full Version : slick "floating" box -- IE/mac woes

01-27-2004, 11:11 PM
Here's what I'm building: http://muledesign.hoologic.com/heya.html

All CSS is internal to this file. My problem is on IE/Mac: the widths of the two colored vertical edges are different.
It's perfect on Windows: IE6, NN7, and Opera.

If I remove the DIV around the image, the problem goes away.
For a variety of reasons, I need this DIV (I have gutted a bunch of code for clarity).
Even if you just have a plain DIV wrapper around the image (removing the ID attribute),
it messes with the widths of those edges.

[Another minor thing I noticed: on Opera, for #outer, I can't have "right: 2px; bottom: 3px;".
I have to have "left: -2px; top: -3px;". Other browsers don't seem to care. Is this an Opera bug?]

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0px; padding: 10px; }
#column { float: left; width: 200px; }
#box-shadow { background-color: #CCC; }
#outer { background-color: #E6C88C; border: 1px dashed #960; left: -2px; padding: 9px 4px 4px; position: relative; top: -3px; }
#image { font-size: 1px; padding-left: 2px; }
#inner-border { background-color: #E6C88C; border: 1px dashed #960; margin-top: 8px; }
#inner { background-color: #FFF; padding: 10px; text-align: center; }
<title>MULE &raquo; Off the Hoof &raquo; January 2004 Archives</title>
<div id="column">
<div id="box-shadow">
<div id="outer">
<div id="image"><img alt="" height="12" src="/i/mule_recommends_s.gif" width="148"></div>
<div id="inner-border">
<div id="inner">