• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1217
  • Last Modified:

overlay or stack divs

Hi guys,

i am having some cross browser issues with this. http://www.innergatedesigns.com/work/roundbox/roundbox.php

it works fine in firefox, but IE the title div does not float over the following div.

<style>
/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }


/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 25px;
font-size: 1px;
}
.rbcontent { padding:10px; background-color:#ffffff;  border:1px solid #3a3a3a;}
.rbroundbox { width: 100%; margin: 1em auto;}
.rbTitle {
      float:left;
      position:relative;
      top:5px;
      left:10px;
      font-size: 12px;
      font:tahoma;
      color: #F0D900;
      font-weight:bold;
      }
</style>
</head>

<body>
<div class="rbroundbox">
      <div class="rbTitle">test</div>
      <div class="rbtop"><div></div></div>
      <div class="rbcontent">Content</div>
</div>
</body>
0
redcable
Asked:
redcable
  • 3
  • 2
1 Solution
 
GrandSchtroumpfCommented:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

div.section {
  background: url(http://www.innergatedesigns.com/work/roundbox/nt.gif) repeat;
}

div.section h2 {
  margin: 0;
  font-size: 100%;
  background: url(http://www.innergatedesigns.com/work/roundbox/tl.gif) no-repeat top left;
}

div.section h2 strong {
  display: block;
  padding: .2em 10px;
  background: url(http://www.innergatedesigns.com/work/roundbox/tr.gif) no-repeat top right;
  color: #F0D900;
}

div.section div.content {
  padding: .4em 10px;
  border: 1px solid #3a3a3a;
  background-color: #ffffff;
  color: #000000;
}

</style>
</head>
<body>

<div class="section">
  <h2><strong>Title</strong></h2>
  <div class="content">Content</div>
</div>

</body>
</html>
0
 
redcableAuthor Commented:
works like a charm, thanks mate
0
 
GrandSchtroumpfCommented:
cheers  :)
0
 
redcableAuthor Commented:
does not work in IE.
0
 
redcableAuthor Commented:
oops this does work in ie, posted to wrong question sorry
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now