I'm working on a site where I want a div to horizontally overlap another div. FF works flawlessly, IE's another story. I've attached two jpegs to show the issue.
The main white box on the left is a div class=body and the other is div class=nav. Inside the nav div are several styles a tags that form the boxes that actually show.
Any thoughts would be appreciated.
Style sheet
div#body
{
margin-left: 20px;
margin-right: 100px;
background-color: white;
font-family: Georgia, Times New Roman, serif;
}
div#nav
{
float: right;
width: 125px;
margin-right: 10px;
display: inline;
}
div#nav p
{
position: relative;
}
div#nav a
{
display: block;
border: 1px solid black;
margin-bottom: 10px;
margin-top: 0px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
background-color: white;
color: #009900;
text-decoration: none;
position: relative;
}I'm going to do the very politically incorrect act of bumping this. Please look at <!-- m --><a class="postlink" href="http://www.hi-photo.net">http://www.hi-photo.net</a><!-- m --> to see what I am talking about.
Thanks,div#body
{
margin-left: 20px;
margin-right: 140px;We're talking backwards
I want them to overlap, which they do in FF, but IE shrinks the width of the main div so that they don't overlap.Sorry, I really should read more carefully. In that case, a negative left margin on the nav div will work.
div#nav
{
float: right;
width: 125px;
margin-right: 10px;
margin-left: -25px;
Edit: you still need the margin-right on the body div by the way. Or Firefox will put the body div across the whole page.
Edit2: it might be better as 25px instead of 20.display: inline;
do something with that because it is saying that the div is inline with whatever is on the same 'line'
also the float property is a tricky one
Internet Explorer expands boxes if the contents are too wide. It's an incorrect implimentation of the standards. What you've got to do is hide the overflow of the overlapping DIV's parent, then position the overlapping DIV relative. Works in IE6, but not 5.5 and 5.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
#container {
background-color: #ccc;
width: 200px;
}
#overlap {
background-color: #fcc;
position: relative;
width: 120px;
z-index: 2;
}
#overlapParent {
background-color: #ffc;
float: left;
overflow: hidden;
width: 100px;
}
html>body #overlapParent {
overflow: visible;
}
#underlap {
background-color: #fcf;
margin-left: 100px;
position: relative;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="overlapParent">
<div id="overlap">
This content overlaps the other box.
</div><!-- end overlap -->
</div><!-- end overlapParent -->
<div id="underlap">
This content should be covered up by the overlapping box.
</div><!-- end underlap -->
</div><!-- end container -->
</body>
</html>
OR --- why not use a background image?Thank y'all. The negative margin seems to do the trick.Now I'm having issues with IE and floating. It happens on this page (<!-- m --><a class="postlink" href="http://www.hi-photo.net/portfolio">http://www.hi-photo.net/portfolio</a><!-- m -->). If the browser window is dropped too narrow, the content drops below the navigation. So, is there any way to have this layout without floats? I'm sure there is, just don't know where to start.
Thanks,
The main white box on the left is a div class=body and the other is div class=nav. Inside the nav div are several styles a tags that form the boxes that actually show.
Any thoughts would be appreciated.
Style sheet
div#body
{
margin-left: 20px;
margin-right: 100px;
background-color: white;
font-family: Georgia, Times New Roman, serif;
}
div#nav
{
float: right;
width: 125px;
margin-right: 10px;
display: inline;
}
div#nav p
{
position: relative;
}
div#nav a
{
display: block;
border: 1px solid black;
margin-bottom: 10px;
margin-top: 0px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
background-color: white;
color: #009900;
text-decoration: none;
position: relative;
}I'm going to do the very politically incorrect act of bumping this. Please look at <!-- m --><a class="postlink" href="http://www.hi-photo.net">http://www.hi-photo.net</a><!-- m --> to see what I am talking about.
Thanks,div#body
{
margin-left: 20px;
margin-right: 140px;We're talking backwards
I want them to overlap, which they do in FF, but IE shrinks the width of the main div so that they don't overlap.Sorry, I really should read more carefully. In that case, a negative left margin on the nav div will work.div#nav
{
float: right;
width: 125px;
margin-right: 10px;
margin-left: -25px;
Edit: you still need the margin-right on the body div by the way. Or Firefox will put the body div across the whole page.
Edit2: it might be better as 25px instead of 20.display: inline;
do something with that because it is saying that the div is inline with whatever is on the same 'line'
also the float property is a tricky one
Internet Explorer expands boxes if the contents are too wide. It's an incorrect implimentation of the standards. What you've got to do is hide the overflow of the overlapping DIV's parent, then position the overlapping DIV relative. Works in IE6, but not 5.5 and 5.0.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
#container {
background-color: #ccc;
width: 200px;
}
#overlap {
background-color: #fcc;
position: relative;
width: 120px;
z-index: 2;
}
#overlapParent {
background-color: #ffc;
float: left;
overflow: hidden;
width: 100px;
}
html>body #overlapParent {
overflow: visible;
}
#underlap {
background-color: #fcf;
margin-left: 100px;
position: relative;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="overlapParent">
<div id="overlap">
This content overlaps the other box.
</div><!-- end overlap -->
</div><!-- end overlapParent -->
<div id="underlap">
This content should be covered up by the overlapping box.
</div><!-- end underlap -->
</div><!-- end container -->
</body>
</html>
OR --- why not use a background image?Thank y'all. The negative margin seems to do the trick.Now I'm having issues with IE and floating. It happens on this page (<!-- m --><a class="postlink" href="http://www.hi-photo.net/portfolio">http://www.hi-photo.net/portfolio</a><!-- m -->). If the browser window is dropped too narrow, the content drops below the navigation. So, is there any way to have this layout without floats? I'm sure there is, just don't know where to start.
Thanks,