Solved

overlay or stack divs

Posted on 2006-07-04
5
1,192 Views
Last Modified: 2008-01-09
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
Comment
Question by:redcable
  • 3
  • 2
5 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 500 total points
ID: 17039436
<!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
 

Author Comment

by:redcable
ID: 17039517
works like a charm, thanks mate
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17040615
cheers  :)
0
 

Author Comment

by:redcable
ID: 17048900
does not work in IE.
0
 

Author Comment

by:redcable
ID: 17048996
oops this does work in ie, posted to wrong question sorry
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now