White Space with DV tag in IE but not Chrome
i added css drop down menu 1 of images in website. seems fine in chrome when viewed in ie there white space between 2 div tags - 1 holds buttons , menu - , other body placed. here code...i've tried playing margins , z-index can't find right combination. great!
html
<style type="text/css">
{ margin: 0; padding: 0; }
#apdiv1 {
position: absolute;
width: 229px;
height: 174px;
z-index: 1;
top: 9px;
}
#apdiv2 {
position: absolute;
width: 680px;
height: 180px;
z-index: 2;
left: 283px;
top: 5px;
color: #fff;
}
#apdiv3 {
position: absolute;
width: 700px;
height: 430px;
z-index: 3;
top: 224px;
background-color: #ffffff;
border: 20px solid #bdecb6;
left: 9px;
}
#apdiv4 {
position: absolute;
width: 188px;
height: 470px;
z-index: 4;
left: 760px;
top: 224px;
background-color: #f75e25;
}
#apdiv5 {
position: absolute;
width: 942px;
height: 74px;
z-index: 1;
top: 710px;
background: #89ac76;
font-family: "arial black", gadget, sans-serif;
font-size: 12px;
color: #fff;
line-height: normal;
vertical-align: 0%;
letter-spacing: normal;
word-spacing: 0em;
font-style: normal;
overflow: auto;
padding: 0px;
}
#apdiv6 {
position: absolute;
width: 405px;
height: 42px;
z-index: 6;
top: 197px;
left: 344px;
}
#apdiv7 {
position: absolute;
width: 408px;
height: 28px;
z-index: 5;
left: 344px;
top: 197px;
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
vertical-align:bottom;
}
#apdiv5 table tr td {
text-align: center;
}
</style>
<link href="../dropdown.css" rel="stylesheet" type="text/css" />
</head>
<body onload="mm_preloadimages('../graphics/tlaa.png','../graphics/tlbb.png','../graphics/tlcc. png','../graphics/tldd.png','../graphics/tlee.png','../graphics/tlff.png')">
<!-- templatebegineditable name="editregion4" -->
<div id="apdiv7">
<ul>
<li><a href="#"><img src="../graphics/home01.jpg" width="101" height="28" id="image1" /></a>
<ul>
</ul>
</li>
</ul>
<ul>
<li><a href="#"><img src="../graphics/about01.jpg" width="101" height="28" id="image2" /></a>
<ul>
</ul>
</li>
</ul>
<ul>
<li><a href="#"><img src="../graphics/product02.jpg" width="101" height="28" /></a>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 1</a></li><li><a href="#">link 1</a></li><li><a href="#">link 1</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#"><img src="../graphics/contact01.jpg" width="101" height="28" id="image3" /></a>
<ul>
</ul>
</li>
</ul>
</div>
<!-- templateendeditable -->
<div id="apdiv5">
<table width="100%" border="0" cellpadding="2">
<tr>
<td width="33%" height="65">n.g. heimos greenhouses<br />
6627 rte. 158<br />
millstadt, il 62260</td>
<td width="33%"><p>phone: 1-866-444-4590<br />
fax: 618-476-9244
</p></td>
<td width="33%"> </td>
</tr>
</table>
</div>
<div id="apdiv1"><img src="../graphics/banner/orangecircle.png" width="236" height="174" /></div>
<div id="apdiv2">y<!-- templatebegineditable name="editregion2" --><img src="../graphics/banner/banner01.png" width="612" height="174" /><!-- templateendeditable --></div>
<div id="apdiv3"><!-- templatebegineditable name="editregion5" -->
<!-- templateendeditable --></div>
<div id="apdiv4"><!-- templatebegineditable name="editregion3" -->editregion3<!-- templateendeditable --></div>
</body>
</html>
applied css sheet
#apdiv7 {
padding: 0px;
width: 410px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
height: 29px;
z-index: 5;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#apdiv7 ul {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
z-index: 5000;
}
#apdiv7 ul li {
background-color: #bdecb6;
float: left;
position: relative;
list-style-type: none;
z-index: 5000;
}
#apdiv7 ul li {
font-family: "arial black", gadget, sans-serif;
font-size: 14px;
line-height: 32px;
color: #fff;
text-decoration: none;
text-align: center;
display: block;
height: 28px;
width: 101px;
z-index: 5000;
overflow: visible;
}
#apdiv7 ul ul {
position: absolute;
visibility: hidden;
z-index: 5000;
}
#apdiv7 ul li:hover ul {
visibility: visible;
z-index: 5000;
}
#apdiv7 ul li:hover {
background-color: #89ac76;
}
#apdiv7 ul li {
z-index: auto;
}
thanks in advance!
could share link actual page?
seeing code in action in browser best way see what's happening , input on how fix it.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment