Solved

overlay or stack divs

Posted on 2006-07-04
5
1,197 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html date format 9 30
html form layout 4 53
html link offset in page with umlaut character in address 5 32
adding straight up HTML to drupal 7 2 9
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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

752 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