Solved

overlay or stack divs

Posted on 2006-07-04
5
1,186 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
Comment Utility
<!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
Comment Utility
works like a charm, thanks mate
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
Comment Utility
cheers  :)
0
 

Author Comment

by:redcable
Comment Utility
does not work in IE.
0
 

Author Comment

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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: blockā€¦
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

763 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

11 Experts available now in Live!

Get 1:1 Help Now