|
CSS - Object Problem, Could Use Help!
Hello all. New here. Have an annoying problem that I can't seem to fix!
I did a DIV overlay for a myspace band page (www.myspace.com/thepeardevicetest) The youtube player and Shows widget show up in the right section in IE and Safari, but in Firefox it does not show correctly. I would appreciate if someone could help me with this problem. here is the code I am using Code: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="413" width="746" style="position:absolute;visibility:visible; left:60%; _left:55%; left:55%;margin-top: 0; _top:2800px; top:2800px;margin-left: -455px; _margin-left: -455px; width:430px height:400px;"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFOT4n8R8ViY9VNfA1e8mU1CheyM_baRR6E=" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/cp/vjVQa1PpcFOT4n8R8ViY9VNfA1e8mU1CheyM_baRR6E=" height="413" width="746" style="position:absolute;visibility:visible; left:60%; _left:55%; left:55%;margin-top: 0; _top:2800px; top:2800px;margin-left: -455px; _margin-left: -455px; width:430px height:400px;" wmode="transparent" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="250" width="746" style="position:absolute;visibility:visible; left:55%; margin-top: 0;_top:1920px;top:1920px; margin-left: -455px; _margin-left: -455px; width:430px height:400px;"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://cache.reverbnation.com/widgets/swf/10/schedule.swf?bandId=artist_509689&backgroundcolor=000000&font_color=FFFFFF&view=split&posted_by=artist_509689" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://cache.reverbnation.com/widgets/swf/10/schedule.swf?bandId=artist_509689&backgroundcolor=000000&font_color=FFFFFF&view=split&posted_by=artist_509689" height="250" width="746" style="position:absolute;visibility:visible; left:55%; margin-top: 0;_top:1920px;top:1920px; margin-left: -455px; _margin-left: -455px; width:430px height:400px;" wmode="transparent" /> </object> Similar TutorialsI've worked out most css problems but I can't find any css that will make the drop down menu on my site sit on top of the YouTube video that you can see he www the-bizness .co. .uk If you click on Home Page or Multimedia the drop-down menu is behind the video clip. Very annoying. Any help appreciated! Hi, If you place the below code in a blank HTML page and view it with Safari 2.0.4, you'll see a 130 pixel vertical gap between 1 and 2, and a 320 pixel horizontal gap between 3 and 5. I guess that CSS could fix it but I don't know how. Code: 1 <div> 2 <a> 3 <object> 4 </object> 5 </a> 6 </div> 7 Please test your own fix before suggesting it to me, thanks. Hi, I'm trying to implement a confirm box that darkens the page until the user clicks ok. I've got a div the size of the whole page with a black background and opacity .2. Inside that there is a div with the confirmation text inside with opacity 1.0, but it is not showing up fully opaque. It was my understanding that opacity is not inherited, so I shouldn't even have to specify an opacity at all for the inner div. Why isn't it showing up as fully opaque? http://evenhealth.com/test.html The confirm box is exactly in the center of the page. It's pretty hard to see because of the opacity problem. Code: <html>
<head>
<link rel="Stylesheet" href="/main.css" type="text/css">
</head>
<body>
<div id=confirmpage>
<div id=confirmdiv>
<div class=confirmbox>
<a href="#" onclick="document.getElementById('confirmpage').style.display = 'none';return false">Close Me</a>
</div>
</div>
</div>
<a href=# onclick="document.getElementById('confirmpage').style.display = 'block';return false">Click me to test confirm box.</a>
</body>
</html>
Code: #confirmpage{
position:absolute;
top: 0;
left: 0;
z-index:1;
width:100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
opacity: 0.2;
display:none;
}
#confirmdiv{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
filter:alpha(opacity=100);
opacity:1.0;
}
.confirmbox{
filter:alpha(opacity=100);
opacity:1.0;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
border: 1px solid red ;
}
Hey guys, It might be easiest if you see the example first: http://www.venusadvertising.com.au/ourwork.php See how the red tab overlaps the Flash element in Webkit browsers and under it in IE? I need the page to scroll rather than for the elements to overlap. CSS doc is he http://www.venusadvertising.com.au/_assets/css_venus.css Thanks for your help! Ham Hi all, I have come across this twice now within a new site I am building. I can not seem to be able to reference the img objects if they are within divs or other objects: page excert PHP Code: <ul Class="rsslink"> <li>Raw RSS Feed: <a href="feed.xml"><img src="images/rss.gif" alt="RSS Feed" border=none/></a></li> <li>Google: <a href="http://fusion.google.com/add?feedurl=http://www.houseofhawkins.com/feed.xml"> <img src="images/googlerss.gif" alt="Google RSS Application" /></a></li> <li>Yahoo: <a href="http://add.my.yahoo.com/rss?url=http://www.houseofhawkins.com/feed.xml"> <img src="images/yahoorss.gif" alt="Yahoo RSS Application" /></a></li> </ul> CSS excert PHP Code: ul .rsslink li img { border=none; margin-left: 50px; } I have attached the full page and the full CSS if that helps (didnt want to post ALL that looks messy. Thanks for your help Hi, I hope somebody can help me. I have a selected object #imgC1 {position:absolute; left:500; top:200; width:200; border:solid black 1px;z-index:2} var imgObj = window.event.srcElement (of type IMG) var selectedObj = imgObj.parentElement.style (of type CSSStyleDeclaration) Now when the image is clicked it can be dragged. I want to get the id of the selectedObj (imgC1). I can get the text between the curly braces using selectedObj.cssText but I can't find a way to get the id. Any ideas? Thanks in advance Brian In css I can get 2 objects to display on right hand side at top of page easy enough. I don't want to use absolute positioning for an object's position. I have to position an object relative to another object eg this object should go underneath this object, can i do this ? I use this , and is this the best way you can do it? position:relative; right=-240;top=0 is there a way of doing something like: css Code: Original - css Code .test{ width:auto; } .test2{ margin-right: .test width; }
??? thanks in advance. I am working on a slide show that uses css for formating. The problem is when I click on any of the navigation icons they jump down by about 10-15px when using IE6 or less. All I can do is direct you to the page and look at the source code. I worked on it all day yesterday without success. http://www.discovervoyages.com/ships/polar-star/12/ thanks for your help Please look at this page - http://www.thomashall.com/art-deco-tour.asp?pan=1 Once the panorama loads notice that the drop down menu nav bar is under the panorama and not above. Is is possible to layer the element such that the nav appears on top of the object element? I have a flash that is embeded inside a div. however, I only want to show the upper right corner first, when user mouse over, the div will expand. This works good in Firefox and chrome, but not in IE I put the flash to align to the right, but IE keep it in the left, and keep showing the upper left corner instead of upper right. Please help.. thanks If you've done anything with Google Maps, you'll recognize this is the DIV that the Google Maps JS plops the map object into: Quote: <div id="map_canvas" style="width: 870px; height: 500px"></div> In this case, I've set the map to be 870 by 500. There are a number of approaches to branding a custom Google Map application involving layer objects in the Google Maps API, that will allow you to drop an image onto the map itself. But for several reasons, I would like to not use those. Instead, I was thinking of positioning an image over the map object with CSS. But I'm not sure how to do it. Imagine a DIV that contains the map object, and a DIV that holds an image layer on top? Something like that? Can this be done, and if so, can someone point me in the right direction? Hi, I have a site where the main navigation is supposed to stay above the body in a static position. The body should scroll beneath the navigation, when the page is scrolled. In the body, I have a flash video that is embedded with swf object code. The video unfortunately appears above the main navigation when the page is scrolled. You can see an examplehere My code looks like this for the <div> that holds the video: Code: <div id="header_w_flash" style="margin-top:132px; z-index:2;">
<div>
<object id="header_w_flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="970" height="160">
<param name="movie" value="flash/UC_header1.swf" />
<!--#include file = "includes/uc.inc"-->
</object>
</div>
<!-- end #header_w_flash --></div>
And my CSS for the static header, which holds the navigation, looks like this: Code: #header_static{
z-index:999;
position:fixed;
top:0;
height:121px;
width:980px;
background:#ffffff;
}
How can I get the embedded flash video to appear below the header? I'm a bit puzzled as to how to resolve this. thanks Ok, well I have a simple flash movie embedded into my html like this: PHP Code: object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="160" height="199"> <param name="movie" value="images/welcome.swf"> <param name="quality" value="high"> <embed src="images/welcome.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="199"></embed></object> And I wish to add this style to it but Im not sure how ?? : PHP Code: img.right { border: 0.06em solid #FF66CC; border-right: 0em solid #FF66CC; border-bottom: 0em solid #FF66CC; } Thanks for your time. hello Is it possiable to position an image absolutly using its center as a the measurement refrence as opposed to the upper left corner. If so how would I do this. Thanks Nick Carlevaris Help I just can't get this thing to size. I've tried all sort of stuff This is so simple I must be missing something obvious. Here is what I want: on the left the rss feed link. to it's right the legend link with a button background behind it. I've gotten stuff like this to work before so I must be missing something. Here is what it does: The RSS feed link is fine, but the problem is the bg graphic is truncating and I want all of it to show. It also cuts it off in the vertical direction. Here is the current code (may change again by the time you look at it though!) Code: <a href="rss/calrecent.rss" ><img src="images/feed-icon-14x14.png" height="14" width="14" alt="rssfeed" border="0" /> Calendar FEED </a>
<span id="lar1" style="background: url(images/leg-button.gif) top left no-repeat; height: 31px; width: 183px; " ><a href="#" onclick="return dynpop('genrelegend',600,700);" style="text-align: center;"> Legend</a> </span>
I tried putting the background on the <a> element and setting its size with a style. and making it a#lar1 but that didn't work. So my latest try would be to size a span element. Here is the style of lar1 span#lar1 { height: 31px; width:183px; } Here it is in situ http://demo.tixrus.us/calendar.php Thanks I know I've made this kind of thing work before so what stupid thing am I missing in my blindness and frustration?? Thanks, and the one who answers will probably be Kravvitz but anybody can take a swing at it. GO SOX! I want to add a css drop shadow on flash object (embedded using the object tag) that works with Firefox, Internet Explorer and Safari... anyone know how I can code that or know where there examples of it? TIA hi, i am setting up a webstore with php and css and all that. FF is just fine and i love it. IE is a bad bad bad boy and does weird things when hovering over a button, like it makes the background of a certain object disappear ... when you scroll down the page just a little and then hover over the same button it re-appears. please someone tell me that it is not just me going nuts here? if i cannot resolve this issue, i am kinda forced to use tables and all this stuff i do not want to use, because i invested sooooo much time into this ... uh well, here is the url: www.chocolateriewanders.com/store and please - no purchases (yet) .... the whole payment thing is a worry for itself I have been trying various methods to change the color of the scrollbar of an object in my HTML page. However it remains at gray. The HTML code is as follows: <OBJECT NAME="foo" CLASSID="qeroeure" STYLE="scrollbar-base-color:red" CODEBASE="blah" WIDTH="700" HEIGHT="500" BORDER="3">"Cannot load image control." </OBJECT> This does not change the scrollbar color to red. What do I do to change the scrollbar color |
|||||||