|
|
Posted by Breklin on 10/24/06 18:11
IE 6 doesn't know what min-height is. You can hack it using IE
"conditional comments" (google it) and creating an style element for
#content2 called "_height: 50px;"
Understand that that is a hack is not a valid css markup. It will blow
up in IE7 so, based on your conditions for the conditional comment tag
you wrap it in, make sure you are telling IE to only display it for 6 or
lesser versions.
OAM wrote:
> Hello,
>
> Why does this code work on FF or OPERA and not on IE ?
> The problem is the property margin-right (id: contents2) if I use at the
> same time the property heigth (without height, it's OK).
>
> Thanks.
>
> tabs.css
> -------------------------------------------------------------------
> body {
> font-family: verdana,sans-serif;
> font-size: small;
> color: #333;
> }
>
> #contents {
> margin-right: 26px;
> border: 1px solid #666;
> background: #FFF3B3;
> }
>
> #contents2 {
> padding: 1.5em;
> background: #FFFDF3;
>
> /* permet de fixer une hauteur mini sur les navigateurs modernes */
> min-height: 50em; /* Utilité ? */
> /* pour obtenir le meme effet sur IE, sachant que si le contenu depasse, il
> "poussera" la hauteur en ne respectant pas la norme. On se joue de ses
> lacunes */
> height: 50em;
>
> margin-right: 20px;
> text-align: justify;
> }
>
> #index {
> position: relative;
> float: right;
> width: 27px;
> }
>
> #index ul {
> margin: 0;
> padding: 0;
> }
>
> #index ul li {
> list-style: none;
> }
>
> #index ul a, #index ul span, #index ul a.current {
> margin: 0px 2px 1px 1px;
> padding: 5px 4px;
> display: block;
> height: 12px;
>
> text-align: center;
> font-family: tahoma, verdana, sans-serif;
> font-size: 85%;
> text-decoration: none;
> color: #333;
>
> background: #FFFDF3;
> border: 1px solid #AAA;
> border-left: none;
> }
>
> #index ul span, #index ul a.current, #index ul a.current:hover {
> padding-left: 5px;
> margin: 0px 0px 1px 0px;
> background: #FFF3B3;
> border: 1px solid #666;
> border-left: none;
>
> font-weight: bold;
> }
>
> #index ul a:hover {
> margin: 0px 0px 1px 0px;
> padding-left: 5px;
> background: #FFF3B3;
> border-color: #666;
>
> font-weight: bold;
> }
> -------------------------------------------------------------------
>
> -------------------------------------------------------------------
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <title>Example Tabs</title>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
> <style type="text/css" media="screen">@import "tabs.css";</style>
> </head>
>
> <body>
> <div id="main">
> <div id="index">
> <ul>
> <li><a href="javascript:void(0);">A</a></li>
> <li><span>B</span></li>
> <li><a href="portfolio.html">C</a></li>
> <li><a href="javascript:void(0);">D</a></li>
> <li><a href="javascript:void(0);">E</a></li>
> <li><a href="javascript:void(0);">F</a></li>
> <li><a href="javascript:void(0);">G</a></li>
> <li><a href="javascript:void(0);">H</a></li>
> <li><a href="javascript:void(0);">I</a></li>
> <li><a href="javascript:void(0);">J</a></li>
> <li><a href="javascript:void(0);">K</a></li>
> <li><a href="javascript:void(0);">L</a></li>
> <li><a href="javascript:void(0);">M</a></li>
> <li><a href="javascript:void(0);">N</a></li>
> <li><a href="javascript:void(0);">O</a></li>
> <li><a href="javascript:void(0);">P</a></li>
> <li><a href="javascript:void(0);">Q</a></li>
> <li><a href="javascript:void(0);">R</a></li>
> <li><a href="javascript:void(0);">S</a></li>
> <li><a href="javascript:void(0);">T</a></li>
> <li><a href="javascript:void(0);">U</a></li>
> <li><a href="javascript:void(0);">W</a></li>
> <li><a href="javascript:void(0);">X</a></li>
> <li><a href="javascript:void(0);">Y</a></li>
> <li><a href="javascript:void(0);">Z</a></li>
> <li><a href="index.html">All</a></li>
> </ul>
> </div>
> <div id="contents">
> <div id="contents2">
> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur
> viverra ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean
> vulputate sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue
> in ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed
> elit.</p>
> <p>Sed purus neque, suscipit vitae, cursus vitae, porttitor non, dui.
> Mauris volutpat dui vitae sapien. Duis laoreet nibh vitae sem. Phasellus
> ornare. Morbi sollicitudin mi ut nibh. Morbi egestas elementum tellus.</p>
> <p>Suspendisse magna dui, porta in, condimentum at, molestie nec, augue.
> Quisque vulputate facilisis ipsum. Aenean sollicitudin quam sed ante. Donec
> at nunc. In hac habitasse platea dictumst. Suspendisse quis lorem sit amet
> eros congue volutpat. Nam laoreet ultricies pede. Nulla vestibulum, pede
> eget varius vestibulum, nisl mi aliquet nisl, eget eleifend quam dui
> faucibus tortor. Maecenas justo. In lacus nisl, tempus at, aliquam nec,
> ornare in, metus. Maecenas hendrerit mauris vitae purus. Cras id sem.</p>
> <p>Curabitur vel urna vitae nunc bibendum porttitor. Nam tortor quam,
> luctus id, convallis sed, rutrum ac, ante. Proin euismod lacus vitae elit.
> Nullam vel diam in metus consectetuer facilisis.</p>
> <p>In mauris enim, suscipit a, consequat quis, porta ut, diam. Vivamus
> tempor. Donec nec enim quis ante ullamcorper mollis. Praesent dictum. Donec
> arcu arcu, tincidunt a, placerat sit amet, porta eget, erat. Aliquam erat
> volutpat. Aenean egestas, dolor ut consectetuer pulvinar, mauris ante
> volutpat leo, non pulvinar erat justo vitae mauris. Donec laoreet dui at
> quam. Pellentesque habitant morbi tristique senectus et netus et malesuada
> fames ac turpis egestas. Mauris id libero. Morbi luctus sapien vitae dolor.
> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
> cubilia Curae; Nullam pharetra vestibulum leo. Maecenas magna velit, porta
> eu, viverra quis, cursus non, sapien.</p>
> </div>
> </div>
> </div>
> </body>
> </html>
> -------------------------------------------------------------------
>
>
>
>
>
>
[Back to original message]
|