Forum Moderators: open
(My apologies for the last two messages which have since been erased...the no linking to code policy makes perfect sense)
Can someone please help me to get IE to include the second red line which Firefox renders perfectly,
And to make Firefox line up everything on the right flush as IE renders perfectly.
I'm trying very hard to make the page well-structured and useable in both browsers, and I appreciate any help. I appreciate any brainpower you can lend me.
-Mike
Code:
----------------------------------------------------
<!--http://tutorials.alsacreations.com/deroulant -->
<!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>Horizontal expanding menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0 0 0 5px;
padding: 0;
background: white;
font: 12px verdana, arial, sans-serif;
}
dl,dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
dt{
padding: 5px 0 5px 0;
font-size: 11px;
}
#menu {
position: relative;
z-index: 999;
width: 760px;
}
#menu dl {
float: left;
width: 20%;
margin: 0px 0px 0px 0px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #20436B;
color: #fff;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover{
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
width: 760;
}
a {
text-decoration: none;
color: black;
color: #222;
}
.hrtop {
line-height: 2px; /*needed for IE/win*/
font-size: 2px; /*needed for IE/win*/
height: 2px;
background: #BF2A2E;
margin: 5px 0 3px 0;
width: 760px;
}
.hrbtm {
line-height: 2px; /*needed for IE/win*/
font-size: 2px; /*needed for IE/win*/
height: 2px;
background: #BF2A2E;
margin: 28px 0 0 0;
width: 760px;
position: absolute;
z-index: -100;
}
-->
</style>
</head>
<body>
<div>This is a header test</div>
<div class="hrtop"></div>
<div id="menu" style="margin-top: 0;">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href='#'>Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href='#'>Master</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');">
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">Details</a></li>
<li><a href="#">List</a></li>
<li><a href="#">Saved</a></li>
<li><a href="#">Create</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href='#'>Bills</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">Details</a></li>
<li><a href="#">List</a></li>
<li><a href="#">Confirm</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');"><a href='#'>My Account</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');"><a href='#'>Customer Service</a></dt>
</dl>
<div class="hrbtm"></div>
</div>
<!--<hr class="headerbottom">-->
<div id="site">
<h1 align="center">Lorem ipsum dolor sit amet, </h1>
<p>consectetuer adipiscing elit. Vivamus posuere
varius mauris. Duis malesuada fringilla sapien. Praesent dapibus, dui sit
amet convallis bibendum, nibh magna congue libero, ac fermentum sem leo id
massa. Vestibulum ut mauris nec justo dignissim dignissim. Fusce lacinia.
Mauris neque. Integer non turpis. Phasellus iaculis. Praesent blandit congue
neque. Proin nec pede nec urna scelerisque iaculis. Cras turpis.
Pellentesque venenatis. Aenean lobortis. Duis vitae orci. Aenean sodales.</p>
</div>
</body>
</html>
To use the W3C Validator, and to have browsers use standards compliant rendering, you need to install a
DOCTYPE [htmlhelp.com] declation at the very top of each page mark-up (above <HTML>)
For the width issue on div id="site" I'd suggest a little research on the box model. For starters, with the doctype you're using and to avoid outright hacks try setting the padding to 0 for that div and assign it to the contained elements, eg. #site p, #site h1 {padding: 5px;}
I have fixed the width problem, and made sure that the page validates for the doctype and for the css, however I am still having a great deal of difficulty with making IE show the stupid little red line that Firefox picks up just fine.
I have tried to change the second line to an absolute position and fiddle with the z-index, but as soon as I change the positioning to absolute the red line dissappears in IE, and I'm not sure why or how to make it come back without changing the positioning to something else (which causes other problems anyway).
I was also wondering why my #hrbtm class will not fall under the drop down menu, based on z-index, unless I set it to a negative value. If I set it to 1 and the menu to 2, it doesn't follow that logic, and 1 falls above 2. However, if I set it to -1 and 2, then it works fine.
I would appreciate any more guidance anyone can offer me so that I can solve this problem and get a better understanding of an important web design topic
thank you,
Mike
CODE:
------------------------------------------------------
<!--http://tutorials.alsacreations.com/deroulant -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Horizontal expanding menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
body {
margin: 0 0 0 5px;
padding: 0;
background: #f2f2f2;
font: 12px verdana, arial, sans-serif;
}
dl,dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
dt{
padding: 5px 0 5px 0;
font-size: 11px;
}
#menu {
position: relative;
z-index: 3;
width: 760px;
}
#menu dl {
float: left;
width: 20%;
margin: 0px 0px 0px 0px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #20436B;
color: #fff;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
padding-left: 2px;
padding-bottom: 5px;
background: #fff;
}
#menu li a{
color: #000;
text-decoration: none;
display: block;
height: 100%;
/*border: 0 none;*/
border-bottom: 1px dotted #000;
}
#menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover{
background: #eee;
}
#site {
position: absolute;
z-index: 2;
width: 760px;
top : 115px;
color: #000;
background-color: #fff;
padding-right: 0;
padding-bottom: 7px;
border: 1px solid gray;
}
a {
text-decoration: none;
color: black;
color: #222;
}
.hrtop {
line-height: 2px; /*needed for IE/win*/
font-size: 2px; /*needed for IE/win*/
height: 2px;
background: #BF2A2E;
margin: 5px 0 3px 0;
width: 760px;
}
.hrbtm {
line-height: 2px; /*needed for IE/win*/
font-size: 2px; /*needed for IE/win*/
height: 2px;
background: #BF2A2E;
margin: 28px 0 0 0;
width: 760px;
position: absolute;
z-index: -1;
}
a .arrow {
margin-left: 10px;
margin-bottom: -1px;
vertical-align:top;
border: 0;
}
-->
</style>
</head>
<body>
<div><img src="" width="760" height="60" alt="" /></div>
<div class="hrtop"></div>
<div id="menu" style="margin-top: 0;">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href='#'>Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href='#'>Master<img src="images/arrow.gif" class="arrow" alt="" /></a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');">
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">Details</a></li>
<li><a href="#">List</a></li>
<li><a href="#">Saved</a></li>
<li><a href="#">Create</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href='#'>Bills<img src="images/arrow.gif" class="arrow" alt="" /></a></dt>
<dd id="smenu3">
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">Details</a></li>
<li><a href="#">Copy List</a></li>
<li><a href="#">Confirm</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');"><a href='#'>My Account</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');"><a href='#'>Customer Service</a></dt>
</dl>
<div class="hrbtm"> </div>
</div>
<div id="site">
<div style="padding: 0 7px 0px 7px;">
<h1>Lorem ipsum dolor sit amet, </h1>
<p>Consectetuer adipiscing elit. Vivamus posuere
varius mauris. Duis malesuada fringilla sapien. Praesent dapibus, dui sit
amet convallis bibendum, nibh magna congue libero, ac fermentum sem leo id
massa. Vestibulum ut mauris nec justo dignissim dignissim. Fusce lacinia.
Mauris neque. Integer non turpis. Phasellus iaculis. Praesent blandit congue
neque. Proin nec pede nec urna scelerisque iaculis. Cras turpis.
Pellentesque venenatis. Aenean lobortis. Duis vitae orci. Aenean sodales.</p>
<p> Vestibulum rutrum congue dolor. Morbi vel justo sed leo malesuada tempor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in quam. Aenean interdum. Nunc ac lacus non turpis mollis scelerisque. Nulla vitae ligula. Sed in nulla. Nunc mattis diam nec metus. Praesent rutrum porta nisl. </p>
<p>In nisl. Vivamus luctus. Sed iaculis mattis nibh. Mauris facilisis libero et nibh. Vestibulum dignissim ornare wisi. Quisque non nunc. Nullam elit nibh, mollis a, commodo vitae, molestie in, lectus. Aenean eu neque sed nibh luctus imperdiet. Nulla facilisi. In luctus turpis a tellus. Integer eu leo. Cras ut ipsum in lacus feugiat interdum. Vestibulum et nulla. </p>
<p> Vestibulum rutrum congue dolor. Morbi vel justo sed leo malesuada tempor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in quam. Aenean interdum. Nunc ac lacus non turpis mollis scelerisque. Nulla vitae ligula. Sed in nulla. Nunc mattis diam nec metus. Praesent rutrum porta nisl. </p>
<p>In nisl. Vivamus luctus. Sed iaculis mattis nibh. Mauris facilisis libero et nibh. Vestibulum dignissim ornare wisi. Quisque non nunc. Nullam elit nibh, mollis a, commodo vitae, molestie in, lectus. Aenean eu neque sed nibh luctus imperdiet. Nulla facilisi. In luctus turpis a tellus. Integer eu leo. Cras ut ipsum in lacus feugiat interdum. Vestibulum et nulla. </p>
</div>
</div>
</body>
</html>
