O
OAM
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>
-------------------------------------------------------------------
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>
-------------------------------------------------------------------