Transparent divs incorrectly overlapping in IE

I'm new to CSS layouts and here's the page i'm working on:
http://host519.ipowerweb.com/~bridgest/cornmealrecords/releases2.html
everything looks fine in FF and safari - each of the
semi-transparent divs has an equal amount of space between them.
However, in IE, they start overlapping as you scroll down and end
up overlapping the footer. anyone have any idea what i'm doing
wrong?
thanks

Try changing the CSS
#wrapperwt {
width: 920px;
border: 1px dotted #900;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10px auto 0px;
background: #FFF url(../fabricrightside.jpg) repeat-y right;
z-index: 10;
height: 715px;
position: relative;
#windowall {
height: 510px;
width: 529px;
margin-top: 165px;
margin-left: 230px;
padding-top: 10px;
padding-left: 2px;
position: absolute;
top: 0;
left: 0;
vertical-align: top;
background: #FFF;
z-index: 50;
margin-right: 0px;
Since the entire position: absolute element is removed from the normal flow of the page, position: absolute needs coordinates (top, right, bottom, left - top and left/right are normally enough since the div expands to contain the content) to work as intended.
Top and left are relative to the first parent container on the page which has a position other than the default of static - in this case div#wrapperwt since we've added position: relative to that rule.
If there is no "position-other-than-static" rule in the CSS, then absolute positioning starts relative to the <body> of the document (top LHS of the browser window) which sometimes leads to unintentional layout results.

Similar Messages

Why PDF's with transparency display incorrectly?

Hi everybody
I used this script ( http://www.adobe.com/devnet/digitalpublishingsuite/articles/dps-pdf-to-indesign.html ) to create a magazine based on pdfs but I have a big problem.
The imported pdfs with trasparent elements display incorrectly but only in the vertical position as you can see in the images, in the horizontal and menu, display correctly.
I don't have control of the pdfs because the publisher send it already ready.
I used the v.22 for this pubblication because I can't update the app now but I installed the latest DPS tools.
Thanks in advance for help.

I know this is an old thread but i'd like to answer because it'll be helpful for someone looking for answers like I was today ;-)
This is an expected behavior for a PDF article. PDF Articles only supports transparency effects such as opacity and multiply, blending modes are not supported. However the same content if uploaded as a PNG/JPEG article should work fine.
It's also documented in this best practices document here Digital Publishing Suite Help | Best practices for creating overlays

Transparent Div with Solud text

How would I have to right my CSS and HTML toachive the above affect? Whenever I do it everything is transparent.

I saw this and that is what I tried to replicate so I think I'm missing something.
abouttext {
position: relative;
.content {
padding: 10px 0 10px 5;
width: 40%;
/* [disabled]float: left; */
margin-left: auto;
margin-right: auto;
height: auto;
margin-top: 25px;
/* [disabled]font-family: Candara; */
/* [disabled]color: #FFF; */
/* [disabled]font-size: 14px; */
background-color: #fdbe02;
opacity: .01
opacity: .5;
The content div is what I want transparent with th text solid.
<div id="apDiv2">Gary Steffy Lighting Design Inc. | GSLD™</div>
<div class="container">
<p> </p>
<div class="header">
<div class="title">
      <p class="titlecivic"><img src="images/bar2.jpg" width="1920" height="4" /></p>
      <p class="titlecivic">ABOUT</p></div></div>
</div>
<div class="content">
<p class="abouttext">Gary Steffy Lighting Design Inc. was founded in 1982 in Ann Arbor, Michigan, to advise clients on interior and exterior normal power architectural lighting that balances users’ vision and comfort needs with social and economic matters. The firm’s practice is well-rounded, using principles, experience, mockups, and modeling to achieve success regardless of application. Breadth of commissions ranges from boutiques, residences, classrooms, and hotels to halls of justice, hospitals, corporate facilities and historic landmarks. Explore some of our experiences categorized in the drop down menu under Portfoli at the left.
The firm is nationally recognized and has contributed toteams and buildings bestowed some of the highest design honors. The firm’s consistent successes are driven by a design discipline that respects and enhances rather than over-dazzles people, architecture, interiors, and landscape. Design aesthetics and objective lighting criteria are pursued vigorously in achieving lighting solutions appropriate to clients’ priorities. The firm’s design services, including design programming, concept and design development exploration, technical assessment, and contract documents, and construction administration services are well-honed based on principles identified in Gary Steffy’s writings.</p>
</div>
<div class="sidebar1">
<div id="AcrdMenuAbNTKFBDiv" class="AbNTKFB__Main" >
    <ul style="margin:0px; width:150px;">
      <li style="width:150px;">
        <div><a class="AbNTKFB__Top_SEL" href="index.html">Home</a></div>
      </li>
      <li style="width:150px;">
        <div class="AbNTKFB__Top">About</div>
      </li>
      <li style="width:150px;">
        <div class="AbNTKFB__Top">Portfolio</div>
      </li>
      <li style="width:150px;">
        <div class="AbNTKFB__Top">Contact</div>
      </li>
    </ul>
<script type="text/javascript">var AcrdMenu_ID="AcrdMenuAbNTKFB"</script><script type="text/javascript" src="cssmenutools/scripts/AcrdMenu11.js">/* AcrdMenuMenu script ID:AcrdMenuAbNTKFB */</script></div>



<div id="prevthumb"></div>
<div id="nextthumb"></div>

<div id="controls-wrapper" class="load-item">
<div id="controls">
<div id="slidecaption"></div>

How do I create a transparent div with 100% opacity text?

See my reference site in development at www.gogographics.ca/hh
I have a transparent menu but want to have solid opaque text on it so it shows up better. What I have so far is the text taking on the opacity of the div!
Here is the CSS I have on the div:
.navcontainer ul ul {
    background-color: #000;
    filter:alpha(opacity=60);
    opacity:.6;
    display: none;
    position: absolute;
    left: 0;
    color: #FFF;
Please help if you can!
Thanks!

This gets asked a lot.
Opacity effects everything inside it. Try using a semi-transparent.png.
http://forums.adobe.com/message/4241960#4241960
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Help: Added Transparency Div, now site won't center properly...

Good evening, i'm having some issues here on my bro's adult site i'm in charge of. In the "element div" is the instructions how the give the page a 50% transparency. The "content div" contains all my text/photos. For whatever reason that i cannott diagnos, my page is shifted to the left. the content fits over top of the element div so that the it doesn't dim that text.
In the screenshot provided, the site is so far pushed to left of the background image (1600 pixels) that you can't even see the 4th girl. My entire site is only 1100 px, so in theory, if centered properly, you should see a good amount of both of the end girls. The back bar is blocking out the obvious nudity. The 4th girl is so far out of the frame to the right, you can't even see her. Is my page just too wide. It seems that no matter what, the testers can still see the end of the bacground image on larger tvs used as monitors. So any advice on that would be cool as well.
Thanking you guys in advance for your asssitance.
-most of the relevan css below-
h1, h2, h3 {
          margin: 0;
          padding: 0;
          font-weight: normal;
          color: #FFF;
h1 {
          font-size: 3em;
          text-align: center;
          padding-bottom: 10px;
          font-weight: bold;
h2 {
          font-size: 2.4em;
h3 {
          font-size: 1.6em;
p, ul, ol {
          margin-top: 0;
          line-height: 180%;
ul, ol {
a {
          text-decoration: none;
          color: #4486C7;
#wrapper {
          width: 1100px;
          margin: 0px;
          height: 750px;
          position: fixed;
#element1 {
          position: relative;
          z-index: 1;
          background-color: #000;
          height: 1550px;
          width: 1100px;
          /**50% opacity**/
          background: #000000;
          /**for pre-IE8**/
          filter: alpha(opacity=50);
          /**for IE8 only**/
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
          /**for non-IE browsers**/
          opacity: 0.5;
          border: thin solid #999;
#content {
          z-index: 2;
          position: relative;
          top: -1550px;
          width: 1000px;
          color: #FFF;
          text-align: left;
          margin: 0px auto;

That code makes little sense to me - it's very messy. First, I would set the wrapper div to margin: 0 auto; to center it. Next, the background image would work best in the body tag with a background-position: center top;
And remove the fixed position on the wrapper. And the height. Work with the document flow, not against it.

How to prevent a DIV from overlapping another

Here's a link to the page in question:
http://www.outsource-network-it-services.com/proto/contact-us.html
I made a DIV, floated it right for the "send us more info"
form as you'll see. The form goes pretty long, and you'll notice it
doesn't kick the red footer down appropriately, but overlaps it! It
kicks the text in the red footer over nicely, but that's not what
I'm after.
The light gray area in the middle is it's own DIV, called
maincontent, and that's what I need to expand down to contain
anything, any size that I put in there.
Is it a float thing? Attached is my CSS file.

answered my own question. I applied a Clear:both to the
footer, not the DIV with form in it. That did it. Then I had to add
a 20pix bottom margin to the form DIV.
WHen I added a 20pix top margin to the footer, it didn't
work. The form box still touched...I had to apply the margin to the
form DIV instead.
weird.

Div overlapping footer

Instead of pushing the footer and bottomlinks divs down the info div is overlapping them. It doesn't do it if I take out some of the text but I don't think the client would appreciate that. I've tried clearing loats but nothing is working for me. What have I done wrong?
http://www.russellagency.com/t2/patrick.html
Thanks for any insight!

You've still got height in your CSS applied to your <div id="white">
Follow Nancy's suggestion and change it to min-height
#white {
background: #FFF;
min-height: 700px;

Overlapping divs

which css property do i need to use to allow 2 divs to overlap (dont worry about z-orders or other properties used to determine which ones shows for now)

CSS:
#wrapper {
position: relative;
#div1 {
position: absolute;
/**VALUES CAN BE EXPRESSED IN PX, % OR EM**/
top \ bottom: value;
left \ right: value;
width: value;
z-index: 1-10000;
#div2 {
position: absolute;
top \ bottom: value;
left \ right: value;
width: value;
z-index: 1-10000
HTML:
<body>
<div id="wrapper">
<div id="div1">
div1 content here
</div>
<div id="div2">
div2 content here
</div>
</div>
</body>
Working demo with text over an image:
http://alt-web.com/DEMOS/CSS-Sold-Out-Text-over-image.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

CS6 div problem

Hey,
I have a problem with transparent DIVs. In Dreamweaver CS6 Design view the background is displayed white. Therefore you can not see the background image of the body tag. If I view the page in a browser everything is displayed correctly. Is this a bug in CS6? When I open the same page with Dreamweaver CS5.5 eveything is viewed correctly, too!
Anyone an idea?

Ok, I've taken considerable personal time to document this bug. CS6 clearly introduced a background-related bug in its Design view that wasn’t there in CS5. The bug is simple to reproduce and has wideranging implications. I’m trying to submit a bug report, but their form is so brain-dead that it’s making it hard. I’m posting my bug report here, along with a link to the test file and then filing this thread in my report. I hope it works out and somebody at Adobe looks at it. (There’s always hope.)
This is a perfectly reproducible bug in Design view. Paste the attached HTML into a file and load the file into Dreamweaver 12 (CS6). Compare the Design and Live views. Compare against the behavior in Dreamweaver 11 (CS5).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5/CSS Dreamweaver CS6 Test Page</title>
</head>
<body style="background-color: black;color: #999;">
    <h1>DW CS6 Test</h1>
          <p>The background of this page is set to black and body color is set to #999.</p>
          <div style="background: transparent;">This is a div with <strong>background</strong> set to transparent.<br>In DW CS6 Design view, this div incorrectly renders as solid white.<br>Expected behavior: div should have the black background of the body showing through.</div>
          <br>
          <div style="background-color: transparent;">This is a div with <strong>background-color</strong> set to transparent.<br>In DW CS6 Design view, this div incorrectly renders as solid white.<br>Expected behavior: div should have the black background of the body showing through.</div>
          <br>
          <div style="background: linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);">This is a div with <strong>background</strong> set to "linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);".<br>In DW CS6 Design view, this div renders incorrectly as solid white.<br>Expected behavior: div should either have the correct gradient background as specified <strong>OR</strong> the black background of the body should show through.</div>
          <br>
          <div style="background: -webkit-linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);">This is a div with <strong>background</strong> set to "-webkit-linear-gradient(left, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);".<br>In DW CS6 Design view, this div renders incorrectly as solid white.<br>Expected behavior: the black background of body should show through (it would not be appropriate to emulate the vendor-specific CSS extension).</div>
          <br>
          <div style="background: blue; background: -moz-linear-gradient(top, #444 0%, #111 100%);">This is a div with <strong>background</strong> first set to "background: blue;" and then set a second time to "-moz-linear-gradient(top, #444 0%, #111 100%);".<br>In DW CS6 Design view, this div renders incorrectly as solid white.<br>Expected behavior: this div should have a blue background in design view, ignoring the second background declaration.</div>
</body>
</html>
Here’s the test file:
http://dl.dropbox.com/u/29197/dw6-design-view-bug.html

Having a JPanel 'float' semi-transparently over another component

I am a programmer of a java project for our company.
Managemnt decided that when a certain event happens, we need to 'semi-disable' a certain text area (in a JScrollPane), and have a floating message with a progress bar on top of this text area, but be semi-transparent, so you can still read the text under it.
(Basically, they want it to look like a html page with a floating, semi-transparent DIV, because that is how another group mocked it up).
I am trying to implement this, but am running into problems.
Here is what I have, below I'll tell you what is wrong with it.
     * The purpose of this class is to have a scroll pane that can have it's contents partially covered by another panel
     * while still being able to read both the original panel and the new covering content, and still being able to scroll
     *the content under the covering panel.
    public class JOverlayScrollPane extends JScrollPane{
        private JPanel overlay = null;
        private Insets overlayInsets = null;
        private java.awt.AlphaComposite blend = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.50f);
        private ComponentAdapter cl = null;
        public void setOverlay(JPanel pan, Insets inset){
            overlay = pan;
            overlayInsets = inset;
            if(cl != null){
                cl = new ComponentAdapter(){
                    public void componentResized(ComponentEvent e){
                        resizeOverlay();
            resizeOverlay();
            repaint();
        public void paint(Graphics g){
            super.paint(g);
            if(g instanceof Graphics2D && overlay !=null){
                Graphics2D g2 = (Graphics2D)g;
//                g2.setComposite(blend);
                //overlay.paint(g2);
                paintStuff(g,overlay);
        private void resizeOverlay(){
            if(overlay != null){
                Dimension size = getSize();
                int x = 0;
                int y = 0;
                if(overlayInsets !=null){
                    x = overlayInsets.left;
                    y = overlayInsets.top;
                    size.width = size.width - overlayInsets.left - overlayInsets.right;
                    size.height = size.height - overlayInsets.top - overlayInsets.bottom;
                overlay.reshape(x,y, size.width, size.height);
                overlay.doLayout();
                overlay.validate();
        private void paintStuff(Graphics g,Component c){
            if(c != null){
                c.paint(g);
                if(c instanceof Container){
                    Container cont = (Container)c;
                    for(int i=0;i<cont.getComponentCount();i++){
                        Component cc = cont.getComponent(i);
                        paintStuff(g,cc);
    }//end of overlay scroll pane(I am having problems, so for now, the alpha blend is commented out).
The first version didn't have the paintStuff() method (it just called paint). This just drew a big grey box, now of the sub-components of the passed in JPanel were drawing. I added the do layout and validate calls, without success.
Then I added the paintStuff call, and all the subcomponents now, draw, but they all draw at 0,0.
Questions
1. Is the the correct approach to do this, or sould I be playing with the glass pane or some other approach?
2. It seems that the overlay panel isn't being layed out / doens't paint it's children correctly. Is this because it isn't really part of the layout (i.e. it has no parent / is never added to a container) or am I just missing a step in 'faking' adding it to a layout?
3. I'm sure I could just override paint and paint my own stuff (hand draw the text and a progress bar), but I would really like to put everything on one JPanel as what we want to display my be different in the future. I know that I manually ahve to call repaint on this scrollpane if one of the components on the overlay JPanel change in appearence (the progress bar especailly), and that they won't get events (I don't care about this as they are all non-interactive for now). Is this a viable approach, or is there a better way to do this?
Thanks

Wow, good answer.
I never concidered using a root pane other than as it is used in JFrame.
Very cool answer.
Here is my origional code modifed with JN_'s idea, which cleaned up a repaint issue I was having.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class TransparentPanel extends JFrame implements ActionListener
    ProgressPanel progressPanel;
    int progressCount;
    public TransparentPanel()
        super( "TransparentPanel Test");
        setDefaultCloseOperation( EXIT_ON_CLOSE );
        JPanel panel = new JPanel( new BorderLayout() );
        JTextArea area = new JTextArea( 20, 40 );
        JRootPane pane = new JRootPane();
        pane.setContentPane( new JScrollPane( area ) );
        panel.add( pane, BorderLayout.CENTER );
        //panel.add( new JScrollPane( area ), BorderLayout.CENTER );
        progressPanel = new ProgressPanel();
        pane.setGlassPane( progressPanel );
        JPanel buttonPanel = new JPanel( new FlowLayout());
        JButton button = new JButton( "Show" );
        button.setActionCommand("SHOW");
        button.addActionListener( this );
        buttonPanel.add( button );
        button = new JButton( "Hide" );
        button.setActionCommand("HIDE");
        button.addActionListener( this );
        buttonPanel.add( button );
        panel.add( buttonPanel, BorderLayout.SOUTH);
        setContentPane( panel );
        pack();
        setLocationRelativeTo( null );
        setVisible( true );
    public static void main( String[] args )
        try
            UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
        catch( Exception e )
            e.printStackTrace();
        new TransparentPanel();
    public class ProgressPanel extends JPanel
        Color bg = new Color( 225, 221, 221, 100 );
        Color fg = new Color( 170, 234, 202, 100 );
        int progress;
               setOpaque( false );
        public void setProgress( int n )
             setVisible( n > 0 && n <= 100 );
            progress = n;
            repaint();
        public void paint( Graphics g )
            if( isVisible() )
                Rectangle bounds = getBounds();
                g.setColor( bg );
                g.fillRect( bounds.x, bounds.y, bounds.width, bounds.height );
                g.setColor( fg );
                int width = (int)(((double)progress/100)*bounds.width);
                int height = (int) (((double)bounds.height)*.1);
                int y = (int) (((double)bounds.height)*.4);
                g.fillRect( bounds.x,y,width,height);
     * Invoked when an action occurs.
    public void actionPerformed(ActionEvent e)
        String cmd = e.getActionCommand();
        if(cmd.equals( "SHOW" ) )
            progressCount+= 10;
            if( progressCount > 100 )
                progressCount = -1;
        else if( cmd.equals("HIDE" ) )
            progressCount = -1;
        progressPanel.setProgress( progressCount );
}

Trouble selecting text inside an AP Div

I've been having a problem every time I try to select text within an AP Div container. Instead fo placing the cursor inside the div, my cursor turns into the hand, and if I'm trying to select, I end up moving the div around. As far as I know, the "hand" icon should only be there if I hover it over the border of the div itself, or if it is selected at the bottom of the screen (which it is not).
What I've ended up doing throughout the past few weeks of class is double-clicking to select a word, and then from that point, I can select normally, even after I change divs. That is, until I close and reopen the file.
Anybody have any ideas why this is, or how to get around it otherwise?
Eric the Grey

David_Powers wrote:
The reason is probably because the text fills the full height of the AP Div. It's usually not a good idea to put text in an element that has a fixed height, particularly an AP Div. If the text size is increased, it will spill out of the div and overlap other elements below it on the page.
Double-clicking is the correct way to open for editing an element that has more content than its declared height. The alternative is to right-click and select Element View > Full from the context menu. After you have finished editing, press F5 to restore the page.
Well, the templates I've created had only a few lines within them, no where neare filling up the div's. Also, they all have overflow set to auto so they generate scroll bars.
However, if double-clicking is the correct way to open them for editing, I guess that's that. Your alternate doesn't seem to make any changes at all in respect to this behaviour.
Although perhaps I should mention that I'm using a Mac (OSX Snow Leopard) to do this, not windows.
Eric the Grey

Page dislays incorrectly

I did a web site
http://www.s--p--c.com/ in
Dreamweaver. I uploaded it and everthing works correctly except the
page reduces itself to about a quarter of the correct size and
places itself in the top left portion of the screen on some
browsers. This doesn't happen on my computer when I preview the
pages. Can this be correcrted?
HELP!

What browser are you using? With IE7 I see your text and a
couple of lines
dead center in my window. If I ctrl+mouse wheel, it gets
large and lower
right, or small and upper left.
In FF and NS, I get jumbled up text and lines all overlapping
each other
because when size is changed your text is spilling out of
your divs...
In Opera, the text is spilled out of the divs and overlapping
but the
Ctrl+wheel behaviour is like IE7.
I believe you have some work to do.
Michael Hager
www.cmhager.com
"bs1sulli" <[email protected]> wrote in
message
news:eo4ib4$r10$[email protected]..
>I did a web site
http://www.s--p--c.com/ in
Dreamweaver. I uploaded it and
> everthing works correctly except the page reduces itself
to about a
> quarter of
> the correct size and places itself in the top left
portion of the screen
> on
> some browsers. This doesn't happen on my computer when I
preview the
> pages. Can
> this be correcrted?
> HELP!
>
>

Help with ap div

Hi,
can anyone help a newcomer to dreamweaver?
Is it possible to add a hyperlink to an AP.Div ?
I have inserted imaged into my ap divs and overlapped them to
look how i want them, but i would like to be able to click on each
image to go to another link. Anyone help me?? Please??

function(){return A.apply(null,[this].concat($A(arguments)))}
Maybe I could write your code so it applies to just that section?
You can target just the anchors by adding an "a" inside apDiv2 as follows:
#apDiv2 a {
text-decoration: none;

Stacking a Div ontop of another Div inside of a div?

ok so i am not a programmer, just a designer doing a family a favor building him a website. In using divs i am trying to get a div to overlap another div, while inside another div. confused? ok in simple: i have a div "wrapper" that holds the website center since the design is off center, inside this div i have another div which holds my body of the website "main", also inside the wrapper div i have a second div called "element" which is to sit top left and overlap the main div. The idea is to have an image cutting into the top left of the website, while keeping the rest of the site centered. I have attached a sample picture, and will post the code. if anyone can help please let me know thank you.
CODE:
<body>
<div id="wrapper">
<div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
<div id="main">
    <div id="header">
      <h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
      <h3>text</h3>
      <h3> </h3>
      <h3>phone </h3>
      <h3>email</h3>
      <h3> </h3>
      <h3>address</h3>
      <h3>city</h3>
</div>
    <div id="content">
      <h2>Lorem ipsum dolor sit amet,</h2>
      <p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
   </div>
    <div id="footer">
      <table width="432" align="center" cellspacing="15">
        <tr>
          <td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
          <td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
          <td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
        </tr>
      </table>
      <p> </p>
    </div>
</div>
</div>
</body>

<head>
<style>
#page{
    width:100%;
    height:100%;
    text-align:center;
#wrapper {
    width: 860px;
    position: relative;
    float: none;
    margin: 0px;
    height: auto;
    padding: 0px;
    margin:0 auto;
#element {
    top:0px;
    left:0px;
    padding: 0px;
    height: 310px;
    width: 305px;
    position: absolute;
    z-index: 100;
#main {
    background-color: #333;
    height: auto;
    width: 550px;
    border: 1px solid 333333;
    position: absolute;
    float: right;
    padding: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    left: 155px;
    top: 125px;
#header {
    padding: 0px;
    height: 180px;
    width: 360px;
    float: none;
    position: relative;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 170px;
#content {
    color: 555555;
    background-color: #FFF;
    padding: 20px;
    height: auto;
    width: 470px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
#footer {
    background-color: #FFF;
    padding: 0px;
    height: 180px;
    width: 510px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
body {
    background-color: #CCC;
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 25px;
    color: #FFF;
    margin: 0px;
    padding: 0px;
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CCC;
    margin: 0px;
    padding: 0px;
h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    color: #000;
    padding: 0px;
    margin: 0px;
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #333;
    margin: 0px;
    padding: 0px;
.eng {
    font-size: 12px;
ul {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #333;
</style>
</head>
<body>
<div id = "page">
    <div id="wrapper">
      <div id="element"><img src="images/Gears.gif" width="305" height="310" alt="gear image" /></div>
      <div id="main">
        <div id="header">
          <h1><img src="" alt="" name="Picture" width="100" height="180" align="right" id="Picture" style="background-color: #00FF00" />Don Pike <span class="eng">B.Sc. P. Eng.</span></h1>
          <h3>text</h3>
          <h3> </h3>
          <h3>phone </h3>
          <h3>email</h3>
          <h3> </h3>
          <h3>address</h3>
          <h3>city</h3>
    </div>
        <div id="content">
          <h2>Lorem ipsum dolor sit amet,</h2>
          <p> consectetur adipiscing elit. Suspendisse vitae pulvinar enim. Nunc eget ipsum diam, quis commodo nisi. Donec blandit mi mi, sit amet facilisis magna. Mauris eget diam est. Sed condimentum, nisi nec volutpat tincidunt, massa elit faucibus arcu, at dignissim purus tellus et velit. Integer at fringilla lacus. Nullam egestas leo vel mauris pretium gravida. </p>
       </div>
        <div id="footer">
          <table width="432" align="center" cellspacing="15">
            <tr>
              <td width="144"><a href="resume.html"><img src="images/Gears_03.gif" width="144" height="144" alt="resume" /></a></td>
              <td width="144"><img src="images/Gears_05.gif" width="144" height="144" alt="portfolio" /></td>
              <td width="122"><img src="images/Gears_07.gif" width="144" height="144" alt="about me" /></td>
            </tr>
          </table>
          <p> </p>
        </div>
      </div>
    </div>
</div>
</body>
SORTED?

SWF integration into Safari

Hello All,
I have a problem with the way my page is displayed in Safari:
I have a few DIVs, some overlapping others.
One of these DIV is in the background (lowest Z-index) and contains an SWF. (a kind of liquid picture/video in Flash)
My problem is :
In all common browsers it's fine, the website is displayed correctly, with DIVs overlapping or being overlapped according to their Z-Index.
Though, in Safari, the DIV containing the SWF always show on the foreground and hide all other DIVs, whatever the Z-index attributed to all the DIVs.
Would you have an idea how to fix this ?
Many Thanks
Mike

Hi Ned,
Thanks for the reply.
Though I have tried this already, my code is already showing :
<param name="wmode" value="transparent" />
I changed from "opaque" in the past but cannot see any difference ...
I was wondering if I should use that famous library that takes care of integrating SWF properly (no longer remember the name of that library)
Could this also be related to the containing div being positionned as "absolute" with width=100% and height=100% ?
I use absolute but I may use "static" and "float" instead maybe. (I have never been able to spot the difference between "absolute" and "float")

Transparent divs incorrectly overlapping in IE

Similar Messages

Maybe you are looking for