Previous Message
Next Message

[css-d] Need help solving gap in box model

Sent by Stone, Timothy on 28 September 2002 17:05


List,

I'm trying to run down and elimate a gap that appears boxes in MSIE 5.x
Windows. I'm sure it's the funky box model, but I think I did the math right
and it should be fine. Maybe I have the math wrong on the width for
MSIE5(win).

A sincere thanks to anyone that can help. Link and code summary follow the
ASCII art.

Warmest regards,
Tim

PS: an unrelated question, note Opera's display of the bullets in the box (I
have read E.Meyer's notes on UL/OL on DevEdge, but do not believe an answer
was found that eliminates the bullets in Opera; come to think of it, the
bullets also appear in MSIE 5.0(Win)). I'm using UL/OLs for specific
purposes:

1. Accessibility (Sec. 508 and WCAG 1.0)
2. Management of Text spacing in long descriptive links
3. Great for text-only browsers.
4. Accessibility... oh I said that.

Again, thanks for any help! Comments are also welcome on the site as a
whole.


Moz 1, MSIE 6(Win), MSIE 5.x(Mac)
+--------------+
|.HEADER.......|
| item         |
| item         |
| item         |
| item         |
| item         |
| item         |
| item         |
| item         |
|..............|
|...bg image...|
+--------------+

Opera 6(Win), MSIE 5.0(Win)
+--------------+
|.HEADER.......|
|*item         |
|*item         |
|*item         |
|*item         |
|*item         |
|*item         |
|*item         |
|*item         |
|..............|
|...bg image...|
+--------------+
 ^................no Gap, but bullets. Any ideas?

MSIE 5.5(Win)
+----------------+
|...HEADER.......|
|   item         |
|   item         |
|   item         |
|   item         |
|   item         |
|   item         |
|   item         |
|   item         |
| .............. |
| ...bg image... |
+----------------+
 ^..............^..Gap!! Always 5px, both sides
                         (from measurement in PS)
 
 
*** viewable @ http://4.21.127.4 ***

SUMMARY:


*** The HTML (based on Blue Robot's 3 column layout)

<div id="leftSidebar">

<h2 class="sideBarHeader">HEADER</h2>

<!-- begin table of contents links -->
<div class="sideBarBox">
<h2>Table of Contents</h2>
<ul class="anchorList">
    <li><a href="item.html" title="A link to item.">item</a></li>
    <li><a href="item.html" title="A link to item.">item</a></li>
    <li><a href="item.html" title="A link to item.">item</a></li>
    <li><a href="item.html" title="A link to item.">item</a></li>
    <li><a href="item.html" title="A link to item.">item</a></li>
    <li><a href="item.html" title="A link to item.">item</a></li>
    <li><a href="item.html" title="A link to item.">item</a></li>
    <li><a href="item.html" title="A link to item.">item</a></li>
</ul>
</div>
<!-- end table of contents links -->

</div>



*** The CSS (relevant sections)

#leftSidebar {
    position:absolute;
    z-index:2;
    width:190px;
    top:144px;
    left:5px;
    padding:0px 5px;
    background-color:transparent;
/* Here is the ugly brilliant hack that protects IE5/Win from its own
stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.

IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value
is 
below. See http://glish.com/css/hacks.asp for details. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:168px;
}

/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds
correct 
length values to user agents that exhibit the parsing error exploited above
yet get 
the CSS box model right and understand the CSS2 parent-child selector.
ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack
(above). */

body>#leftSidebar {
    width:168px;
}

.sideBarHeader {
    margin:0px 0px 5px 0px;
    border: 1px solid #000;
    padding: 3px;
    color: inherit;
    background-color: #99f; 
}

.sideBarHeader a {
    font: bold italic 14px/16px Arial, Geneva, sans-serif;
}

/* sideBarBottom.gif h=34 w=166 */
 
div.sideBarBox {
    margin:0px 0px 5px 0px;
    border:1px solid #000;
    padding:0px;
    /* inner DIV class for the sidebar */
    color:#000;
    background:white url(/common/images/sideBarBottom.gif) no-repeat bottom
center;
}

div.sideBarBox h2 {
    margin: 0px;
    border-bottom: 1px solid #000;
    padding: 3px;
    color: inherit;
    background-color: #99f; 
}

div.sideBarBox h3 {
    margin: 0px;
    border-bottom: 1px solid #000;
    padding: 3px;
    color: inherit;
    background-color: #99f; 
}

div.sideBarBox p {
    padding:3px;
}

div.sideBarBox form {
    margin: 0px;
    padding: 0px 3px;
}

/* default list */
ul {
    margin:0px 0px 0px 8px;
    padding:0px 0px 0px 8px;
    
}

ul li {
    margin:8px 0px;
    font:normal 11px/20px Verdana, Arial, Geneva, sans-serif;
    vertical-align:baseline;
    list-style:disc outside url(/common/images/discBullet.gif);
}

/* menu-style links */
ul.anchorList {
    margin-left:0px;
    padding-left:0px;
}

ul.anchorList li{
    margin:10px 0px;
    padding:0px 3px;
    font: bold 11px/11px Verdana, Arial, Geneva, sans-serif;
    list-style: none outside none;
}
Previous Message
Next Message