|
CSS - Object Jumps When Clicked <= Ie6
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 Similar TutorialsEvery time I switch Web pages, the display starts at the far left and jumps to center. Is there a way to correct this and still allow for variations in screen sizes and resolution. http://www.madjazz.org/index.html http://www.madjazz.org/CSS/RobustLayout.css Thank you I'm a bit baffled on this issue. Please visit this page - www.atrachapter.com Focus on the main image in the body of the page and mouse over the left hand navigation. The image jumps to the left. I have tried looking at all the css to see what is causing this but am baffled. Any help would be apprecaited. Thanks. Tom Please look at this page - http://www.maineasp.com/default.asp in IE 7. When I load the page and then go to move my mouse of the left navigation the image on the main body jumps to the left. Can someone shed some light? Tom 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 ;
}
Hi all, Not Sure if this is an css issue but when you click on a menu item for example a hyperlink. How do you get rid of the dotted box when a item is clicked. Stephen It works fine in FF but in IE the buttons stick. I can't figure out what to do. I've searched and read the sticky on resources. Please don't mind the unordered list. It will be a drop down menu I'm working on. Your help is much appreciated. -Garrick- 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=iso-8859-1" /> <title>Untitled Document</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <!-- Header --> <div id="header"></div> <!-- Top Navigation --> <div id="nav"> <div id="top_nav"> <div id="top_nav_home"><a href="#"></a></div> <div id="top_nav_shop"><a href="#"></a></div> <div id="top_nav_bag"><a href="#"></a></div> <div id="top_nav_account"><a href="#"></a></div> <div id="top_nav_checkout"><a href="#"></a></div> <div id="top_nav_service"><a href="#"></a></div> <div id="top_nav_email_signup"><a href="#"></a></div> </div> <!-- Product Category Navigation --> <div id="lower_nav"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div id="content"> <p>Content goes here.</p> </div> <div id="footer"></div> </div> </body> </html> CSS Code:
body {
background-color: #DBE6F2;
color: #373737;
font: normal 18px Verdana, Arial, Helvetica, sans-serif;
height: auto;
margin: 0 auto;
padding: 0;
width: 760px;
}
table, ul, li {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
a:link, a:visited {
color: #FF0000;
text-decoration: underline;
}
a:hover, a:visited:hover {
color: #FFFF00;
text-decoration: underline;
}
#header {
background: url(images/header.jpg) scroll no-repeat;
height: 89px;
margin: 0;
padding: 0;
width: 760px;
}
#nav {
background: url(images/nav.jpg) scroll no-repeat;
height: 58px;
margin: 0;
padding: 0;
width: 760px;
}
#nav a {
float: left;
}
#nav li {
display: inline;
text-align: center;
width: 13%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#top_nav_home {
background: url(images/top_nav.jpg) no-repeat scroll;
width: 80px;
height: 27px;
display: block;
float: left;
}
#top_nav_home a {
width: 80px;
height: 27px;
display: block;
}
#top_nav_home a:active {
background: url(images/top_nav.jpg) no-repeat scroll 0 -27px;
}
#top_nav_shop {
background: url(images/top_nav.jpg) no-repeat scroll -80px 0;
width: 110px;
height: 27px;
display: block;
float: left;
}
#top_nav_shop a {
width: 110px;
height: 27px;
display: block;
}
#top_nav_shop a:active{
background: url(images/top_nav.jpg) no-repeat scroll -80px -27px;
}
#top_nav_bag {
background: url(images/top_nav.jpg) no-repeat scroll -190px 0;
width: 105px;
height: 27px;
display: block;
float: left;
}
#top_nav_bag a {
width: 105px;
height: 27px;
display: block;
}
#top_nav_bag a:active {
background: url(images/top_nav.jpg) no-repeat scroll -190px -27px;
}
#top_nav_account {
background: url(images/top_nav.jpg) no-repeat scroll -295px 0;
width: 95px;
height: 27px;
display: block;
float: left;
}
#top_nav_account a {
width: 95px;
height: 27px;
display: block;
}
#top_nav_account a:active {
background: url(images/top_nav.jpg) no-repeat scroll -295px -27px;
}
#top_nav_checkout {
background: url(images/top_nav.jpg) no-repeat scroll -390px 0;
width: 90px;
height: 27px;
display: block;
float: left;
}
#top_nav_checkout a {
width: 90px;
height: 27px;
display: block;
}
#top_nav_checkout a:active {
background: url(images/top_nav.jpg) no-repeat scroll -390px -27px;
}
#top_nav_service {
background: url(images/top_nav.jpg) no-repeat scroll -480px 0;
width: 125px;
height: 27px;
display: block;
float: left;
}
#top_nav_service a {
width: 125px;
height: 27px;
display: block;
}
#top_nav_service a:active {
background: url(images/top_nav.jpg) no-repeat scroll -480px -27px;
}
#top_nav_email_signup {
background: url(images/top_nav.jpg) no-repeat scroll -605px 0;
width: 155px;
height: 27px;
display: block;
float: left;
}
#top_nav_email_signup a {
width: 155px;
height: 27px;
display: block;
}
#top_nav_email_signup a:active {
background: url(images/top_nav.jpg) no-repeat scroll -605px -27px;
}
#content {
background-color: #ffffff;
margin: 0;
padding: 0;
width: 760px;
}
#footer {
background: url(images/footer.jpg) scroll no-repeat;
height: 10px;
margin: 0;
padding: 0;
width: 760px;
}
Hi there, I was wondering how I would go about creating input fields have a different colour background when teh user has clicked on it and ins typing. I tried using :active, bit it didn't work. Any ideas? Good day all, I have set up my index page for my site with css rollovers instead of javascript rollovers, and I really like the loading time, the problem that I am having is that when I click on the image rollover link there appears a white box around the image. how can this be avoided? Please see the link below for what I am trying to explain... http://www.karmaimports.net/indexcss.htm thanks in advance... Brook Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move">
<form name = form2>
<span style="float:left;">
<select name= theDay size=1>
<option value=0 selected>Default [themes]
<option value=1>White</option>
<option value=2 onClick = "red()">Light Blue</option>
<option value=3>Aqua
<option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option>
<option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option>
<option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option>
</select>
When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? 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> 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 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 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 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 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 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 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? |
|||||||