Question on positioning div elements

I have a wrapper div and a footer div below that. I want to
center the wrapper div in the middle of the page and then position
sub elements within this wrapper div. For example, I would like to
create a "nav" div and an "actual content" div within the wrapper
div. I learned that I can relatively position the wrapper div to be
in the middle of a page regardless of screen width and then
absolutely position the "nav" div and "actual content" within the
wrapper div. The problem with this is that as soon as I absolutely
position the "actual content" div within the wrapper div then the
footer div jumps up the page to be right in the middle of the
wrapper div when it should be located completely below the wrapper
div. The other way of doing it would be to relatively position (or
don't specify) both the nav and actual content divs and just float
the nav to the left. This seems to work but I am wondering why the
footer jumped up when I tried to absolutely postion divs in the
wrapper div. Is there a way to not make the footer jump up and also
what is the standard way of doing this?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Johnny the boy" <[email protected]> wrote
in message
news:[email protected]...
>I have a wrapper div and a footer div below that. I want
to center the
>wrapper
> div in the middle of the page and then position sub
elements within this
> wrapper div. For example, I would like to create a "nav"
div and an
> "actual
> content" div within the wrapper div. I learned that I
can relatively
> position
> the wrapper div to be in the middle of a page regardless
of screen width
> and
> then absolutely position the "nav" div and "actual
content" within the
> wrapper
> div. The problem with this is that as soon as I
absolutely position the
> "actual content" div within the wrapper div then the
footer div jumps up
> the
> page to be right in the middle of the wrapper div when
it should be
> located
> completely below the wrapper div. The other way of doing
it would be to
> relatively position (or don't specify) both the nav and
actual content
> divs and
> just float the nav to the left. This seems to work but I
am wondering why
> the
> footer jumped up when I tried to absolutely postion divs
in the wrapper
> div.
> Is there a way to not make the footer jump up and also
what is the
> standard way
> of doing this?
>

Similar Messages

How to position two buttons on top of div element inside a div container?

Hello!
Good news...
I have created my very first thumbnail slider for my website that actually works!
Bad news...
The buttons that help scroll the div element, which is wrapped inside a center container, are no longer positioned on top of the div.
Here is the html:
<div id="centerContainer">
<div id="aemcSlider">
 <ul>
 <li>
 <a class="aemcPkgBut" href="" target="" alt="AEMC Packaging" title="AEMC Packaging"> </a>
 </li>
 <li>
 <a class="aemcGroundFlexBut" href="" target="" alt="GroundFlexAd" title="GroundFlex Ad"> </a>
 </li>
 <li>
 <a class="aemcClampBut" href="" target="" alt="Clamp-On Ad" title="Clamp-On Ad"> </a>
 </li>
 <li>
 <a class="aemcMetrixBut" href="" target="" alt="Metrix Ad" title="Metrix Ad"> </a>
 </li>
 </ul>
</div>
<div id="leftBut">
<a class="arrowLeft" href="" target="" alt="Left" title="Left"> </a>
</div>
<div id="rightBut">
<a class="arrowRight" href="" target="" alt="Right" title="Right"> </a>
</div>
</div>
Here is the CSS:
Main container:
#centerContainer
{width: 800px; margin: 0 auto; background-color:#0e210e; position:relative}
Div Element:
#aemcSlider
 text-align:center;
 list-style:none;
 width: 450px;
 height: 114px;
 margin: 0 auto;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 top: 67px;
 position: relative;
 overflow: hidden;
#aemcSlider a {margin-right: -12px;}
Left & Right Buttons:
a.arrowLeft
 width: 29px;
 height: 96px;
 float:left;
 position:absolute;
 margin: 0 auto;
 display: block;
 background-image: url(../Images/arrowLeft.png);
 background-repeat: no-repeat;
 left: 311px;
 top: 91px;
 opacity: 0;
a.arrowLeft:hover
background-image: url(../Images/arrowLeft.png);
opacity: 0.5;
a.arrowRight
 width: 29px;
 height: 96px;
 position:absolute;
 float:right;
 margin: 0 auto;
 display: block;
 background-image: url(../Images/arrowRight.png);
 background-repeat: no-repeat;
 opacity: 0;
 left: 720px;
 top: 92px;
a.arrowRight:hover
background-image: url(../Images/arrowRight.png);
opacity: 0.5;
Here are the things I've done to troubleshoot:
If I put the div element as an absolute container, the left button disapears.
I get the same effect when I change the position to relative.
I tried changing the position to relative for both buttons.
I also tried to position the buttons outside the Main Div container and no go.
How can I position the relative div element under these controller button?
Any help would be muchly appreciated.
~LA

OK,
Got the site onto a public web space.
Here sre the links...
http://www.aliciaalmeidagraphicdesigner.com/Work.html
http://www.aliciaalmeidagraphicdesigner.com/style/Body.css
http://www.aliciaalmeidagraphicdesigner.com/js/functions.js
Anyone can help me out, please?
Thanks!
LA
PS: Dissapointed...my website looks much better from my local file than remote

Position div's with a table

I've been struggling quite a while trying to properly
position div's using CSS. However being from the old FrontPage
school (shrugg....) I can solve it in 3 minutes by putting a 3
column, 3 row table in the wrapper div. I merge the cells in the
top row and put my header div's in it. Do the same with the bottom
row and put my footer div in it. If I now put the left sidebar,
main content and right sidebar div's in the 3 cells in the middle
row, I now have a page that formats perfectly in different screen
resolutions and browsers.
Since this seems too simple to do, what am I missing?
What is wrong with this approach?
//jonas

Hello,
If you're going to use tables, you don't need the divs. Just
put the content
into the table cells.
If you're going to use divs, the order of divs in the code
for your layout
could be:
1. Your header div.
2. Your left sidebar div given a width and floated left.
3. Your right sidebar div given a width and floated right.
4. Your main content given a width and assigned a margin
value on each side
equal to the width of the sidebar div on that side.
5. A clearing element, to clear the floats.
5. Your footer div.
DW CS3 has canned layouts including this one.
File>New>Pick from the Layout
list (This one is 3 Column fixed, header, footer)
You can see how it works and change the design to yours.
Take care,
Tim
"netwood" <[email protected]> wrote in
message
news:gdtngp$89p$[email protected]..
> I've been struggling quite a while trying to properly
position div's using
> CSS.
> However being from the old FrontPage school (shrugg....)
I can solve it in
> 3
> minutes by putting a 3 column, 3 row table in the
wrapper div. I merge the
> cells in the top row and put my header div's in it. Do
the same with the
> bottom
> row and put my footer div in it. If I now put the left
sidebar, main
> content
> and right sidebar div's in the 3 cells in the middle
row, I now have a
> page
> that formats perfectly in different screen resolutions
and browsers.
>
> Since this seems too simple to do, what am I missing?
> What is wrong with this approach?
>
> //jonas
>

How to update Spry-table and present the updated table in a div element?

Hello!
I am using a very interesting AJAX-framework called Spry when designing a web page. Here the web page is: Link.
I need some help.
Every time a new project or shift is added, the changes are written to an xml-file. When the page is reloaded, Spry reads data from xml-files.
This is caused by this code:
dsProjects = new Spry.Data.XMLDataSet("timetable/projects.xml", "projects/project");
dsShifts = new Spry.Data.XMLDataSet("timetable/{dsProjects::url}", "project/shift"); //look inside projects.xml and //extrac xml-file. url
dsName = new Spry.Data.XMLDataSet("timetable/{dsProjects::url}", "project");
I call this function that I have written: loadProjectsIntoDivElement ().
This function does the following: [See attached code.]
It iterates through the Spry-datastructure and puts the data in a table inside of the div-element called 'projectsList'.
Now, when I add a new project, I want it to be inserted into the Spry-datastructure and then cause the new data to be written into the div element called 'Specials_DIV'.
I have found out how to update a Spry-datastructure (e.g. dsProjects above), but I don't know how to update the table containing the data without refreshing the page. This should be done using Spry.
Some code:
1:
2:
3:
function loadProjectsIntoDivElement () {
$('#projectsList').html('');
$('#projectsList').append('<table id="Specials_Table"><tr><th spry:sort="id">ID</th><th spry:sort="NAME">Name </th><th spry:sort="hoursestimated">Nr. of hours estimated</th><th spry:sort="hoursworked">Nr. of hours worked</th><th spry:sort="costperhour">Cost per hour.</th></tr>{function::init_hours}<tr spry:repeat="dsProjects" onclick="chooseProject({ds_RowID})"><td>{id}</td><td>{NAME}</td><td>{hoursestimated}</td><td>{hoursworked}</td><td>{costperhour}</td></tr></table> {function::get_hours} ');
I have tried to accomplish this in various ways but I don't succeed.
I want to do it without refreshing the page.
Update: I found some code here that I will try: Link
Thanks in advance!
Anders Branderud
My blog

Hello!
Thanks!
I don't succeed with the implementation in any browser.
I have found a way to it, but I would like a way that updates the data quicker and without reloading all of the page. After all, I am only adding one row on the end of the data structure, so there should be no need to read in all data again.
Now I do it like this:
When a project is added, do this:
1. Store a new row in the project file through a php script.
2. When the post-call to the php-file returns, do refresh of the whole page.
Then the newest version of the xml file will be read in.
However, I don't want to read the data from a xml file each time that a new project is created.
I know how to add the new data to a Spry-datastructure [in my code 'dsProjects'], but I don't know how to display the updated data without reloading the whole page.
I have tried some various ways to do it, but haven't succeded.
Thanks!
Anders Branderud

Invalid IHTMLTxtRange::text value in contentEditable DIV element

I have a BHO on C# which works with text and selection on editable HTML elements. I observe a problem with getting a correct text using
IHTMLTxtRange interface on editable DIV element (contentEditable=true).
Here is my code:
IHTMLSelectionObject selectionObj = m_doc2.selection;
if( selectionObj != null )
IHTMLTxtRange txtRange = selectionObj.createRange() as IHTMLTxtRange;
if( txtRange != null )
txtRange.moveToElementText(
m_element );
String sText = txtRange.text;
m_element is the IHTMLElement which I'm getting text for. m_doc2 (IHTMLDocument2) is the document containing m_element.
The problem is with DIV element only and if it contains empty new lines at the end of the text. It does not depend on version of IE (at least 9 and higher)
IHTMLTxtRange::text property returns the whole text but without new lines at the end. How is it possible to get entire text for contentEditable DIV including last empty lines.
Thank you.

Hi,
\r and \n and 'C string' control characters for js strings.
JS Control Characters
'whitespace' (eg. ' ') is a textnode (in IE10 and higher) and is not equivalent to  
so you will have to change your decoding to replace the whitespace characters to  
eg. received text: "Sun\r\nMon\r\n\r\nTue" =>Sun    Tue
Sun[blank][blank]
[blank]Tue
what you need to do is to use the IE11 developer tool to inspect the generated html from your control.
f12>DOM Explorer>Find tool.... select the generated markup from your control....
the computed source will be displayed in the DOM Tree....

Sun 
Tue

in the console tab, you can query the value of the text nodes.
document.getElementById('test').textContent
Sun Tue
but because whitespace is treated as a textnode
document.getElementById('test').firstChild.tagName
#textnode
here is the content of a pre element that I use for a typing tutor, that highlights the current character that the user must keypress.
<div class="uc" id="txtscript" lang="id" dir="ltr" contenteditable="false">Semua orang dilahirkan merdeka dan mempunyai martabat dan hak-hak yang sama. Mereka dikaruniai akal dan hati nurani dan hendaknya bergaul satu sama lain dalam semangat persaudaraan.</div>
the above is pure html and javascript.... note that in the html markup [blank] spaces are replaced with   and all characters are wrapped in spans.
from the selectionstart value of the text range object (in the above text input field at the top), gives me the index of the collection of t elements. So I can use the selection start value to select the matching span element for
the keycode the user is to type next.
Rob^_^

May (HTML/HTML5) in a DIV element may have as border an image repeated along the border

May (HTML/HTML5) in a DIV element may have as border an image repeated along the border?

Browser do not support images for borders yet.
Use the CSS border properties.
Nancy O.

How the find the name of each div element for Android firefox

Hi guys, I have been trying to customize the ui of my Android firefox. I think the first step is to find the name of each element so that I can add my own css via stylish. For example, I wanna move the tab count beside the address bar to the right bottom for easy one hand use. Can anyone advise me where I can find the name of each div element?
Thanks a lot.

Firefox for Android UI is written in Java not XUL so stylish will not change the UI colors. We provide limited support for light weight themes. Depending on what you are attempting to accomplish it may be doable that way. https://addons.mozilla.org/en-US/developers/docs/themes

ExternalInterface not working when swf file is embed inside a dynamically cloned DIV element.

ExternalInterface not working when swf file is embed inside a dynamically cloned DIV element.
It seems that flash movie is identifed as 'undefined' inside document.
//a statically placed div
var staticdiv=document.getElementById('PropDiv');
//dynamically placed div with object tag
var dynDiv =staticdiv.cloneNode( true );
var xD=50;
var yD=50;
if(dynDiv)
dynDiv.style.display = "block";
dynDiv.innerHTML="<object classid=" + "\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\"" + "codebase=" +
"\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0\"" + "width=" + xD + "height=" + yD +
"id=" + "\"external\"" + "align=" + "\"middle\"" + ">" +
 "<param name=" + "\"allowScriptAccess\"" + "value=" + "\"sameDomain\"" + "/>" +
 "<param name=" + "\"movie\"" + "value=" + "\"external.swf\"" + "/>" +
 "<param name=" + "\"quality\"" + "value=" + "\"high\"" + "/>" +
 "<param name=" + "\"wmode\"" + "value=" + "\"transparent\"" + "/>" +
 "<param name=" + "\"bgcolor\"" + "value=" + "\"#ffffff\"" + "/>" +
 "<embed src=" + "\"external.swf\"" + "quality=" + "\"high\"" + "wmode=" + "\"transparent\"" +"bgcolor=" + "\"#ffffff\""
+ "width=" + xD + "height=" + yD + "name=" + "\"external\"" + "align=" + "\"middle\"" + "allowScriptAccess=" + "\"sameDomain\"" +
"type=" + "\"application/x-shockwave-flash\"" + "pluginspage=" + "\"http://www.macromedia.com/go/getflashplayer\"" + "/>" +
 "</object>";
 dynDiv.style.top=50;
 dynDiv.style.left=100;
document.body.appendChild(dynDiv);
In above situation communication is not establised when a funtion which is retruning boolean is called from flash using
ExternalInterfcae.call.The return value of this function is getting as false inside flash.But the value is true in javascript.
if (navigator.appName.indexOf("Microsoft") != -1) {
 return window[movieName];
} else {
 return document[movieName];
window["external"] is returning as 'undefined'.
Please give a solution to solve this.

Note that you have different file names for the object (images/banner.swf) and the embed (images/banner1.swf)
You also placed the embed in the middle of a param tag and nested all param tags.
Because you didn't include a MIME type and the object doesn't have a classid for an ActiveX control for IE, I'm not sure what Firefox will be using. 
The object doesn't have a data attribute to specify the file. 
A separate embed is only needed when you specify a classid in the object.
<pre><nowiki><div class="bannercontainer">
<object width="940" height="445" type="application/x-shockwave-flash" data="images/banner.swf" >
<param name="wmode" value="transparent" />
<param name="movie" value="images/banner.swf" />
</object>
</div></nowiki></pre>

Question. I have Elements 10. My photos have a questions mark in the upper left hand corner.What is

Question. I have elements 10 My photos have a question mark in the upper left hand corner of the photo. Why? What do i do to get rid of it?

No, you will have to replace the switch or do an out-of-warranty replacement at an Apple Store.

Adding a Layer (absolute position div) to a locked page

Maybe I am just not understanding templates but I have a
really simple one that has one editable region called "content". I
want to add a absolute positioned div to the content area but DW
tells me this would require changing code that is locked by the
template. I thought that the editable area automatically put in by
DW would accommodate the added code (css) that DW puts in when
adding a template to the page.
So what is the Editable area called "Head" used for anyways
if not for situations like this?
Thanks

Here's the problem with layers in template child pages, and a
simple
solution.
When you DRAG a layer onto the page in DW (this means you
click on the layer
icon in the Insert Toolbar and drag the layer on the page),
DW wants to put
the code for that layer immediately under the body tag, e.g.,
BEFORE DRAG -
<body...>
<table>
AFTER DRAG -
<body ...>
<div id="foo" style="position:absolute; ...>LAYER
STUFF</div>
<table>
In a template child page, this region is usually not part of
your editable
region, and so the layer's code is rejected by the template
engine. This is
a bad thing.
If instead of dragging the layer onto the page, you use
INSERT | Layer, that
should work provided your cursor is in an editable region,
but since
editable regions are usually within tables or other layers,
you have just
broken one of the rules listed above. This is also a bad
thing.
THE SOLUTION -
Open your template page in DW, and create a special place
where it is SAFE
to put your layers. In code view, find this -
</body>
and click so that your cursor insertion point is just to the
left of
</body>.
Now, use INSERT | Template Objects > Editable Region, and
name this region
"Layer Pad" or something like that.
When you save your template page, all your child pages will
now have the
LayerPad editable region on them.
THE BIG FINISH -
On any child page where you need a layer, just click in this
editable
region, and use INSERT | Layer. Bada bing, bada boom.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"htown" <[email protected]> wrote in message
news:[email protected]...
> Maybe I am just not understanding templates but I have a
really simple one
> that
> has one editable region called "content". I want to add
a absolute
> positioned
> div to the content area but DW tells me this would
require changing code
> that
> is locked by the template. I thought that the editable
area automatically
> put
> in by DW would accommodate the added code (css) that DW
puts in when
> adding a
> template to the page.
>
> So what is the Editable area called "Head" used for
anyways if not for
> situations like this?
>
> Thanks
>
>

How to programmatically position an element in a cluster

Hello
I was wondering how I can programmatically position an element (e.g. numerical control) which is a part of a cluster.
My goal is to position the control to:
Case 1: Bottom Center of the cluster
Case 2: Bottom Left of the cluster
Thanks.
v-k
Solved!
Go to Solution.

Hi v-k
You can do it using property nodes of the control.

Question on video edit Elements Premier 8

Can the software
crop and pan within a video? I know other software can do this but can Elements P 8? If so how? I
want to try it first and then activate the product I purchased in the store if it can do it.
Thanks
Eric
[email protected]

Eric,
I think that the answer will be yes, that Premiere Elements can crop and pan within a video. However, consider that it you crop too much or use too small a portion of the frame when panning, your image quality may get signficiantly worse.
For this question and future Premiere Elements questions, I recommend that you post your question over on the forum specific to Premiere Elements at http://forums.adobe.com/community/premiere/premiere_elements
At that forum, also take notice of the information about a Premiere Elements 8 update

How do I resize a div/element that's position fixed with css ?

Supper,
I set up a fixed element using this code in stage/ composition ready :
sym.$("body").append(sym.$("Group").css({"position":"fixed"}));
The element does "position:fixed" but its size has changed.
How do I resize it to its previous size?
I tried the same css insertion method with size properties as I used in "fixed"( example above) .
It Failed.
So second question is based on that it also loses its "responsive scaling" properties
(just the "fixed" element not the rest of the project)
and no longer zooms in scale.
Can I fix an elements position and maintain scaling with the rest of the project at 100% width?
My objective is to scroll under a fixed element scaled to fit browser.
Thank You,
Henry

According to the InDesign Help file:
Do one of the following:
(Windows) Start InDesign, and then press Shift+Ctrl+Alt. Click Yes when asked if you want to delete preference files.
(Mac OS) While pressing Shift+Option+Command+Control, start InDesign. Click Yes when asked if you want to delete preference files.

Why does my footer background colour change when adding a float to a DIV element?

Bear with me as I am a student learning dreamweaver....
I am trying to insert a series of 4 DIVs into a footer area with a black background. WHen I insert a float to constrain them to a horizontal position, the black background disappears and the body background shows through. A strip of the footer displays on top of the area where the DIVs are placed. The float works but the problem is with the background colour. It's almost as if the divs have been pushed down below the footer area. I have tried placing my cursor in several locations before inserting the float but it doesn't change anything.
Can anyone help?

It all depends on the code you're working with. In the following example, I applied overflow:hidden to the <footer> element.
Copy & paste this code into a new, blank HTML page to see how it works.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Layout</title>
<style type="text/css">
body {
 font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
 background-color: #CCC;
 padding: 0;
 color: #000;
 width: 1000px;
 margin: 45px auto;
header {width: 100%; display:block; background: #A5C9C9; min-height: 100px}
section {width: 100%; display:block; background:#FFF; min-height: 300px}
footer {width: 100%; display:block; background: #FF9; overflow:hidden;}
aside {width: 22%; float:left; display:block; margin-right: 4%; background:#D8E9B6; min-height: 200px;}
aside:last-child {margin-right:0}
</style>
</head>
</body>
<header>
<h1>Content for header goes here</h1>
</header>
<section>Content for section goes here</section>
<footer>
 <aside>aside 1</aside>
 <aside>aside 2</aside>
 <aside>aside 3</aside>
 <aside>aside 4</aside>
</footer>
</body>
</html>
Nancy O.

Firefox for windows won't display absolute positioned divs over flash video

I have a website that has a brightcove video player. About a month or so ago, I was able to float divs over the video player so that they would display on top of the video player, using absolute positioning.
You can see the player here:
lifeminute.tv/evv/8+9+10+11+12+34/widget300s
In Firefox (mac), Chrome (windows), Internet explorer (windows) and Safari (mac) it all still displays properly. In Firefox (windows) the video player ignores the Z-index I assign it, and always places the divs underneath it, UNLESS I give the floating div a solid background color.
When I assign the following styles to the div containing the overlay, I can see the text properly, but of course the video is obscured.
background-color: #FFFFFF;
height: 158px;
position: absolute;
top: 4px;
width: 275px;
If I remove the background-color element the whole overlay pops to the back of the stack behind the video again.
Is this a FF windows bug or am I just missing something obvious?

At times you have to add wmode="transparent" attribute to the flash video embed code.

Question on positioning div elements

Similar Messages

Maybe you are looking for