CSS - Ie6 Hides Flash And H4 Content - Please Help

i'm attempting to use a dropdown menu which applies css and javascript to a list
whilst everything usually works fine, i notice that if the page contains a <select> form element the dropdown menu hides behind it, while it covers text box form elements (see attached)

i've tried applying z-index to no avail

any idea what i can do about it ?

the HTML code looks as follows :
Code:

<div id="links">
<ul id="nav">
  <li class="first">
    <table><tr><td><div><a href="index.asp">Home</a></div>
    <ul>
      <li><a href="...">Old Home Page</a></li>
      <li><a href="...">New Home Page</a></li>
      <li><a href="...">Traffic Light Home</a></li>
      <li><a href="...">Process Review Home</a></li>
      <li><a href="...">Switchboard</a></li>
    </ul></td></tr></table>
  </li>
</lu>
</div>

and the CSS that handles it looks as follows :
Code:

#links {background-color: red; padding: 0; border: none; height: 20px; 
         border-bottom: 1px solid lightgrey;}
#nav {height: 90%;}

#nav li table {width: 100%; height: 100%; margin: 0; padding: 0; 
                   border-left: 1px solid lightgrey;}
#nav li td {text-align: center; vertical-align: center; margin: 0; 
              padding: 0; font-size: 8pt;}

ul {list-style: none; padding: 0; margin: 0;}

#nav li div {font-weight: bold; color: white; text-decoration: none; 
                border: none; background: red;}
#nav li li a {display: block; font-weight: normal; color: navy; text-align: left; 
                padding: 3px 10px 3px 10px; width: 100%;}
#nav li li a:hover {padding: 3px 10px 3px 10px; color: white; 
                         background-color: #7d6340; width: 85%;}

li {float: left; position: relative; text-align: center; cursor: default; 
    background: red; border: 1px solid red; border-width: 1px 0;}
li.first {border-left-width: 0.5em; border-right-width: 0.5em; 
          height: 100%; width: 12.5%;}

li ul {display: none; position: absolute; top: 100%; left: 0; width: 180%; 
       font-weight: normal; background-color: orange; padding: 0.5em 0 1em 0; 
       border-style: solid; border-width: 1px; 
       border-color: red #7d6340 #7d6340 #7d6340; z-index: 10;}
li>ul {top: auto; left: auto;}
li li {display: block; float: none; background-color: transparent; border: 0;}
li:hover ul, li.over ul {display: block;}

the javascript bit is nicked straight from SuckerFish, so i assume that's nothing to do with my problem

Please look at this page

http://www.tmhdesign3.com

and this one

http://www.tmhdesign3.com/real-estate-broker.asp

The first one used a flash file, the second does not.

On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success...

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so:

Code:

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel.

Does anyone know of a way to control the inter-div spacing when "clear" is defined?

Thanks

Ken


---------------------------------------------------------------
Original post
---------------------------------------------------------------
I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems.

The first row renders perfectly but the text of subsequent rows overlaps the text of first row.

Here's the html:
Code:

<div id="contentBlock" class="bodyText">
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">New</div>
	</div>
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">Open</div>
	</div>
</div>

And here's the CSS:
Code:

#contentBlock {
	position: absolute;
	top: 130px;
	left: 200px;
	height: 101%;   /* Hack to force vertical scroll bars */
	right: 280px;
	min-width: 400px;
	visibility: visible;
	display: block;
	}

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

.disclosureCollapsed {
	background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
	display: block;
	text-align: right;
	/*position: absolute;*/
	float: left;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 20px;
	}

.disclosureCollapsed:hover {
	cursor: pointer;
	}

How would I make the text in each subsequent row (statusDiv) line up?

Thanks for any help

Ken

http://www.hybridillusions.com/wordpress/?m=200712

Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like...

http://www.hybridillusions.com/wordpress/

For CSS reference, here is where the css file is located:
http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css

Thanks in advance!

Hi,

Is it possible to place a div on top of a flash animation? When i place it on top of the flash, it dissapears, but shows up on the rest of the page.

this is the code i am using:
Code:

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:100; left: 114px; top: 359px; visibility: visible; overflow: visible;"><img src="flap.gif" width="146" height="18"></div>

I am using a basic css layout but i am having a problem when it comes to adding the flash. I need it to stay in the wrapper.here is the code im using
:-


Code:

body {
	background-image: url(bg2.jpg); font: 76% verdana,arial,tahoma,helvetica,"sans serif";
}

* {
padding: 0px;
margin: 0px;
}

HTML {
	MARGIN-BOTTOM: 1px; HEIGHT: 100%;
}

#wrapper {
	MARGIN-LEFT: auto; WIDTH: 700px; MARGIN-RIGHT: auto; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left;
}

ul {
margin-top: 1.1em; margin-bottom: 1.1em; line-height: 130%;
}

ul li {
	padding-left: 13px; list-style-type: none; margin: 0px 0px 0.15em 1.5em; color: #327EBE;
}

a {
color: #4f9cef; text-decoration: none;
}

a:visited {
	COLOR: #FF9523; TEXT-DECORATION: none;
}

a:hover {
	COLOR: #FF9523; TEXT-DECORATION: none; border-bottom: 1px dotted #7CD300;
}

a:active {
	COLOR: #333333;
}

#img {
padding-bottom: 0px;
}

#nav {
background-image: url(gradientbg.gif); height: 34px;
padding: 0px 0px 0px 0px;
}

#navlist li {
	display: block; 
	list-style-type: none;
	padding: 0px 0px 0px 0px;
    font-weight: bolder;
    float: left;
}

#navlist a {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 15px;
    padding: 10px 10px 10px 10px;
    font-weight: bolder;
}

#navlist li a:hover {
background-color:#FFFFFF; padding: 12px 10px 12px 10px;
font-weight: bolder;
}

#navlist a:hover {
	color: #AF9981;
    background-color: #FFFFFF;
    font-weight: bolder;
}

#col1 {
	float: left; WIDTH: 700px;
}



#col1content P {
	FONT-SIZE: 10pt; Font-family:tahoma, sans-serif; MARGIN-BOTTOM: 10px; MARGIN-LEFT: 10px; COLOR: #666666; LINE-HEIGHT: 140%; MARGIN-RIGHT: 10px; TEXT-ALIGN: justify;
}

#col1content {
	PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 15px; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS", Tahoma;
}

#footer {
	CLEAR: both; background-color:#333333; WIDTH: 700px; HEIGHT: 65px; text-align: center; padding-top: 15px; padding-bottom: 0px; BORDER-TOP: #a4d0ed 2px solid;
}

H1 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #003333; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

H2 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 20px; PADDING-BOTTOM: 0px; COLOR: #b4aa9e; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

H3 {
	FONT-SIZE: 20px; PADDING-BOTTOM: 25px; COLOR: #b4aa9e; PADDING-TOP: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; padding-left: 13px;
}

#footer P {
	PADDING-LEFT: 15px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 10px; COLOR: #71AB6B; PADDING-TOP: 10px; text-align: center;
}

#footer a {
	COLOR: #00cc00; text-align: center; padding-top: 10px; padding-bottom: 0px;
}

#copyright {
font-size: 0.9em; color: #FFFFFF; padding-top: 15px; padding-bottom: 7px;
}

#contentterms {
font-size: 0.8em; color: #FFFFFF;
}

It is when i add the css that it doesnt work the way it should.

How would I put the flash into column one without it messing up?

The size of the flash is the same width as the column and wrapper.

If anyone can point me in the right direction it would be very appreciated. Thanks in advance.

I've been looking around for hours now, and I can't find a way to get rid of a slight gap to the left of my flash nav bar (which is inserted in a nested div). Everything is centered and verticaly fluid.

code for flash div= #flash {
vertical-align: top;
margin: 0;
padding: 0;
height: 111px;
width: 875px;
}

code for centercol div= #centerCol {
margin: 0 auto;
padding: 0px;
width: 875px;
background-color: #ffffff;
height: 100%;
background:url(top_04.jpg) repeat;
}

html for embeding= <div id="centerCol">
<div id="flash"><OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="100%" HEIGHT="100%" id="top_bar" ALIGN="center">
<PARAM NAME=movie VALUE="top_bar.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="top_bar.swf" quality=high scale=exactfit wmode=opaque bgcolor=#FFFFFF WIDTH="100%" HEIGHT="100%" NAME="top_bar" ALIGN="center"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT></div>
some content
</div>

Thanks.

Hello! I have a flash header and I'm wondering how to make an img (jpg/png) overlap a flash header? It seems that the flash keeps covering my img when i use positionsomething)

Thanks!

If i create a flash like button using CSS, does anyone know if it's cross compatible with all browsers? Or, has anyone already tried this and found it more trouble than it's worth?

I have three Flash Movies (contained in one DIV with a fixed width of 600px and height of 415px) on my XHTML page, one above the other. They look fine in IE and Netscape but in FireFox for some reason it leaves a gap between the movies which I haven't asked for. I'm sure it is just a simple something I am missing in the CSS, any ideas?

I have a site with a menu that works perfectly in every single browser except IE6. Instead of the menu going over top of the flash, it enlarges the menu bar and just displays within that. I've tried SWFObject, as well as wmode=transparent and opaque for the flash movie, and they work great for all browsers other than IE6.

Does anyone know a fix for this?

hi.. i am totaly new to this and don't know what I'm doing!

can anyone help me centre my games with css not with tables? at the momment it looks fine in firefox and ok in some resolutions on internet explorer
http://www.free-online-games-player.co.uk/police-chopper-game.html

thanks

Well I'm using a dropdown menu type of thing off of dynamicdrive.com... well everything seems good except i can't get the drop down menu to show over the flash image that is directly below, it always get's hidden below it. You can see what i'm talking about by going to http://www.upbeetmusic.com/test/template.htm and putting your mouse over where it says features in the nav bar. View the source and you'll see i even tried puttin gthe flash element in a div tag and changing the z-index, and still no luck. Any suggestions?