|
CSS - Flash File Shows Up On Top Of Hidden Layer In Firefox
http://www.pricedigital.com/ejs/advanced/0009/weight-loss-am-i-a-candidate-for-weight-loss-surgery.htm
Check it out in IE and then firefox. It shows up great in IE but in firefox its not hidden. Similar TutorialsHello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating. I am using the following command to set a DIV element with transparent background; Code: filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot. (the light red line is the extra 1px I am referring to) If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem; Code: <!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>
<style>
body {
margin: 0px;
padding: 0px;
/*
* IE hack to center .content div (part1).
*/
*text-align: center;
}
div.content {
width:600px;
margin: 0px auto;
/*
* IE hack to center .content div (part2).
*/
*text-align: left;
}
div#a {
border-bottom: 1px solid grey;
border-top: 1px solid grey;
padding-bottom: 5px;
padding-top: 5px;
}
div#a div#b {
overflow: hidden;
height: 280px;
position:relative;
}
div#a div#b div#c {
position: absolute;
}
div#a div#b div#c img {
border: none;
display: block;
}
div#a div#b div#e {
background-color: red;
color: #fff;
position:absolute;
padding: 20px 10px;
width:260px;
height: 240px;
margin-left: 500px;
/* IE8 hack for background colour with alpha value */
filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
</style>
</head>
<body>
<h1>Test 5</h1>
<div id="a" class="content">
<div id="b">
<div id="c">
<img src="pic.png" />
</div>
<div id="e">
hello
</div>
</div>
</div>
</body>
</html>
Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great. Hi, I need to add some content (small div) over the top of a flash banner. I tried adding wmode="transparent" to both the object and embed tag but that didnt work. Any other suggestions? thanks I have some drop-down menus that are hidden behind a flash movie. I have set the z-index way up to 6 on them, but they still stay hidden. Anybody have any ideas? http://www.husbandman.org/2baptist/ Hi all, I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage. The general layout is as follows: Code: <div id="wrapper"> <div id="banner"></div> <div id="nav">links etc</div> <div id="content">Content text etc</div> <div id="flashMovie">Flash movie here</div> <div id="footer"></div> </div> The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer??? I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success. Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine. Thanks in advance, Duncan 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, why Firefox shows it wrong and IE right? The website is www.theoutsourcingcompany.com If I change the value of margin-top to zero for the divs div-logo and div-text it looks good on both browsers but there's too much white space on top of the logo and the text... I am very frustrated, please help me. Here's the code for the HTML: Code:
<!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=utf-8" />
<title>The Outsourcing Company - Web design, copywriting, programming. | Outsourcing Services</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
text-align: center;
margin: 0;
background-color: #9e0b0f;
background-image: url(images/back.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="div-header"></div>
<div class="div-middle">
<div class="div-logo">
<p><img src="images/logo.jpg" alt="The Outsourcing Company" width="193" height="55" /></p>
<p><span class="div-menu"><img src="images/home.jpg" alt="Home" width="96" height="26" /><br />
<img src="images/about-us.jpg" alt="About Us" width="96" height="26" /><br />
<img src="images/ourservices.jpg" alt="Our Services" width="96" height="26" /><br />
<img src="images/contactus.jpg" alt="Contact Us" width="96" height="26" /></span></p>
</div>
<div class="div-text">
<p>The Outsourcing Company is your business partner for:</p>
<p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Software Development<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Content Generation / Article Writing<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Internet Marketing<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Search Engine Optimization (SEO)<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Pay-Per-Click (PPC) Campaigns Management<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Professional Copywriting Services</p>
<p>We have two goals:</p>
<p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you make more money by increasing your revenues<br />
<img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you save money by optimizing your costs and processes</p>
</div>
</div>
<div class="div-footer"></div>
</body>
</html>
And this is the CSS: Code:
.div-header {
background-image: url(images/header-blank.jpg);
background-repeat: no-repeat;
margin: auto;
height: 164px;
width: 800px;
}
.div-footer {
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
margin: auto;
height: 48px;
width: 800px;
}
.div-logo {
height: 55px;
width: 193px;
margin-left: 40px;
text-align: right;
float: left;
margin-top: -120px;
}
.div-text {
float: left;
text-align: left;
width: 485px;
padding-left: 30px;
font-family: "Myriad Pro";
font-size: 13px;
margin-top: -108px;
}
.div-middle {
background-image: url(images/middle.jpg);
background-repeat: repeat-y;
margin: auto;
width: 800px;
height: 1000px;
}
a site im working on .. (apparently I cant post URLs....) it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end. works fine in Firefox. I validated with transitional. In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost. Quote: #bg { position: absolute; top: 0px; left: 0px; background: #fff url('images/bg.png') no-repeat; width: 747px; height: 264px; } #wrapper { position: relative; width: 747px; margin: 0 auto; background: #fff url('images/abg.png') repeat-y; } that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.) any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to. thanks in advance. On my website, my menu shows dots on FireFox, but none in Chrome and ie, I would want to remove the dots , is there any way i can do that? www.willietsang.co.cc Thanks in advance.! Hello, I was wondering if anyone could help me get this background image to show up in firefox. It shows up in IE. It's the first #header image. I included the other code in case something is conflicting. *edit... nvm. I have the following code which works fine in IE but not in firefox. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"> <tr><td></td></tr> </table> IE displays just white space as intended, but firefox displays a black border line. I need a white border of 1 pixel around the table. The website Quote: downloadwarez.org CSS Quote: /* default styles */ body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; } a { color: #2F637A; background: inherit; } a:hover { color: #808080; background: inherit; } p { margin: 0 0 5px 0; } h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; } h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; } h1 a, h2 a { color: #000; background: inherit; text-decoration: none; } ul { margin: 0; padding : 0; list-style : none; } img { border: 0; } /* layout */ #content { margin: 10px auto; width: 960px; } #logo { margin: 0 0 10px 0; } #slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; } #top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; } /* round blue login button */ #loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; } #loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;} /* main horizontal menu */ #tablist{ padding: 3px 0; margin: 0; float: left; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ text-decoration: none; padding: 4px 22px; margin-right: 2px; background: #808080 url(images/corner.gif) no-repeat top right; font-weight: bold; color: #fff; } #tablist li a:hover{ background: #6495AB url(images/corner.gif) no-repeat top right; color: #fff; } #tablist li a.current{ background: #9FC7D8 url(images/corner.gif) no-repeat top right; color: #2F637A; padding: 6px 22px; } #tablist .key { text-decoration: none; } /* main menu topics */ #topics { clear: left; float: left; width: 640px; background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom; padding: 8px 5px; margin: 0 0 5px 0; color: #fff; height: 59px; } #topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; } /* main menu search */ #search { float: right; text-align: right; background: #fff url(images/searchbg.gif) no-repeat; color: #000; padding: 32px 20px 12px 20px; min-height: 32px; /* FF height */ height: 25px; /* IE height */ width: 270px; } /* search form styling */ form, form p { margin: 0; padding: 0; line-height: 25px; } .search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; } .button { padding: 4px; font: bold 1em Arial, Sans-Serif; } /* left side */ #left { float: left; width: 635px; margin: 0 0 10px 0; } .subheader { margin: 0 0 10px 0; padding: 8px; background: #f4f4f4 url(images/bgshade.gif) repeat-x; color: #808080; border-bottom: 1px solid #ccc; } .left_articles { margin: 0px 0 10px 0; background: #fff url(images/bgshade.gif) repeat-x; color: #454545; padding: 15px 15px 5px 10px; } .date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; } .bigimage { float: left; clear: left; border: 1px solid #ccc; background: #eee; color: #000; width: 200px; height: 150px; margin: 0 15px 10px 0; } .left_box { background: #f4f4f4; color: #808080; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 15px; margin: 0 0 15px 0; } .thirds { float: left; width: 186px; padding: 0 10px 0 15px; } /* right side */ #right { float: right; width: 310px; margin: 0 0 10px 0; } .right_articles { border: 1px solid #ccc; padding: 8px; margin: 0 0 10px 0; background: #eee; color: #454545; } .image { float: left; margin: 0 9px 3px 0; } .notes { border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 17px 10px 17px 80px; margin: 0 0 10px 0; background: #fff url(images/notes.gif) no-repeat center left; color: #454545; } /* footer */ #footer { clear: both; color: #808080; background: #FFF; padding: 10px 15px; border-top: 1px solid #ccc; } #footer .right { float: right; } The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera. The code looks ok, so i think it must be CSS. Can anyone help I fixed it. Had an absolute div tag that was overlapping. So, I'm workin on a site that has a drop down menu in CSS. It worked fine when I had a banner (gif). Dropped down over the image perfectly. But now I changed the .gif to an animation and made it an .swf file. Now the drop down menu drops down behind the flash banner. How do I make the drop down appear over the swf? Thanks. Hello I thought I could make it, but what I got so far is jumping over the screen, so please a need some help. I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Now the issue, image 2 and 3 should be dynamically replaceable. Please help Thanks Hello. I am going to change my site to using a CSS file for font color and display and such. I am pretty new at using CSS files with my web site, other that messing with it in modifying my blog skin. I created one I want to use at: http://rhodesfamily.org/style.css, but I can only get it to work with IE. Here is my test page: http://rhodesfamily.org/index_test.htm. It will not display in Firefox, which is my main browser . Your help would be greatly appreciated! Thanks, Carl Hi, Here is the page I am having trouble with: http://mccalebconstruction.anchorwave.com/slices/index2.php If you view source, the CSS should be in the file as well. It is very basic because I have stripped out everything else on the page to make it simpler to identify the problem. But I don't know what the problem is! In Firefox it looks fine. In IE there is a line on the left of the content area. The line is caused by the background-image of #content. I don't understand why it's showing up, though, since the images are supposed to be floating left (thus, covering the background image)... but it appears they aren't floating ALL THE WAY to the left, there is a gap. I made sure all the padding and stuff was 0 but that doesn't help. Thanks in advance, ~wz Hey Guys, Im kinda stuck, my site here -beta.thenpcs.com just displays the backround in IE6. The CSS validates so im not sure what im doing wrong :/ Thanks! Edit: Problem solved This topic can be locked or deleted. I tried everything and figured out the problem Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html Any help pointing me in the right direction will earn you a friend for life. |
|||||||