|
CSS - Debugging Javascript Generated Css
I've inherited a page that uses CSS and Javascript to drag and drop objects. For reasons unknown, this feature has stopped working. My investigation has determine that there is a CSS error involved:
Error in parsing value for 'left'. Declaration dropped. Error in parsing value for 'top'. Declaration dropped. Since this is an inherited page I am not sure what the problem really is but the only references to left and top a Code:
floater = document.getElementById("floater");
.
.
.
floater.style.left = fx;
floater.style.top = fy;
.
.
.
fx = floater.style.left = active_card.x;
fy = floater.style.top = active_card.y;
I'm pretty sure it must be from one or both of these statements. I tried adding +"px" to each just in case but that didn't help (nor did I expect it to because it was working at some point in the past and no, I don't know what may have changed). Not being a CSS expert I need some help debugging this problem. FWIW, here is the "floater" HTML object: Code: <img id=floater src=../cards/large/bottom01.gif class=hidden style="position:absolute"> Any help pointing me in the right direction would be greatly appreciated. Similar TutorialsHello all, I was almost all done with my web site until I ran into a few surprises in IE... http://pages.infinit.net/emilierv/branding.htm http://www.ervdesign.com/styles.css These are my example pages. I have 2 main problems. First, when I hover on a text link, I mean for its background color changes. In Firefox, this behaviour doesn't seem to be transmitted to images but in IE, it is! This makes a line of color appear when you hover over either arrow buttons. I understand the logic behind this, but I don't know what I can do to exclude images from this behaviour. Second, I have a whole lot of mess going on in the spacing of my text. Both browsers seem to be consistant in the way they display the text but they differ so much from each other. I have some relative positioning going on because I want to keep the numbers (1/7) and the arrow buttons lined up to the coordinates in the nav bar. -IE seems to ignore the fact that the PDF links and the comments are in seperate cells. If I add no space, they overlap! This results in too much space in Firefox. -IE seems to push everything up top as the projects are browsed, resulting in a constant change of height in my arrow buttons. My knowledge of CSS is limited. I really don't know a lot about div, clear, float. I am wondering if my solutions might lie in one of these tags? I would appreciate any help! Thanks a lot, Emilie In my Error console I am getting this: Expected ';' to terminate declaration but found '}'. Declaration dropped Expected declaration but found '-6px'. Skipped to next declaration. Expected ":" but found ";". Declaration dropped Below each error message is a url from the app NOT a style file name and no line number so I assume those are inline style declarations not separate files. I could fix these if I knew how to find them. The -6px is kind of unusual so I found it and fixed it, sure enough it was a typo, but the other errors don't really give me anything I can search for. Please give me some pointer how to debug this. Thanks Hello i created a website for my trainer and i am having pretty much trouble fixing a bug with the menu li:current and the compatability in various browsers. If someone please could check my website for errors and correct them? Its really a small website. I dont know what to do anymore, i tryed so much and nothing seems to work. Thanks in advance. my site is located at Code: http://hexagon.110mb.com/index.html I'm almost finished with my first page, the others should be easier but before moving on, I would like to debug some problems and truthfully I'm not sure where to even begin. I'm ready to debug issues is IE6. It looks nothing like it should. My main menu is vertical and I'm really confused as to why? I know that IE6 does not support fixed footers, so i was curious as to how I could work around that? my embedded video in my #right div in FF overlaps the fixed footer, and putting a z-index on #object did not work? Lastly, I would like to know if there is a way to make my #mainbody div the same size as my #left and #right depending on which has more content. Basically I would like all three the same size at all times. Thanks for your advise http://www.lonniebruhn.com/sitelab LB i have a question about blockquote styles. its being used in my blog: http://www.insanityonline.blogspot.com/ this is the css thats used: Code:
blockquote {
margin: 0 0 0 30px;
padding: 10px 0 0 20px;
font-size: 88%;
line-height: 1.5em;
color: #666;
background: url(http://www.blogblog.com/tictac/quotes.gif) no-repeat top left;
}
ok i made 2 new images of smaller quote marks and rotated. now is there a way to get say the pics to have one in the top left AND bottom right as the words were in a quote?? Hi all.. i'm new to php... ive got a php genereated page that i need to display in a css generated font... i can kind of get it to work using the normal <class="font"> at the top of the page but it seems to ignore the pixel size. Am i doing it completely wrong? i need a *simple* solution if thats possible, and without too much jargon much appreciated.. adi I am trying to develope http://www.hotlinkforums.com/, but why does the doctype that is generated by the forums screwup my styles. When I take it out of my homepage it makes my stylesheet work correctly, but when I use it it doesn't. Does it matter if I don't use the doctype? Will that screw up search engine ranking or anything? Also what the heck is all of this in my homepage?: <html dir="ltr" lang="en"> <head> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>HotLink Forums - powered by vBulletin</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="generator" content="vBulletin 3.0.0 Release Candidate 3" /> <meta name="keywords" content="vbulletin,forum,discussion,bulletin board,hotlink,hosting,linux,vb,domains,reseller,affordable,cheap" /> <meta name="description" content="Message Boards for HotLink Hosting" /> Does the direction and lagnuage statements in the html tag matter towards anythign important? What do all these weird meta tags such as pragma, expires, cache-control, generator do and do I need them there? Do the meta tags below the title need to be below the title because I know I can put them above it with the others. Also, why is there a blank white space at the top of the forums? And why does the background to my td at the bottom not work? Hi everyone, I have some text generated from my database as a menu and it automatically puts it in a list. I want it to go side by side so I can overlay it onto an image. My code that generates the text is: Code:
<?php
$sql = "SELECT * FROM cms_recent_news ORDER BY timestamp DESC LIMIT 5";
$result = mysql_query($sql) or print ("Can't select entries from table cms_recent_news.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$date = date("l F d Y", $row['timestamp']);
$title = stripslashes($row['title']);
$entry = stripslashes($row['entry']);
$id = $row['id'];
if (strlen($entry) > 0) {
$entry = substr($entry, 0, 0);
$entry = "$entry<a href=\"journal_rn.php?id=" . $id . "\">$title</a>";
}
?>
<?php echo $entry; ?><br /><br />
<?php
}
?>
Is there anyway for me to do this? Thanks in advance I'm trying to get a dynamically populated logo to center in a div. I've found a solution which works in FF, IE7 and safari, but I've tried everything and I can get this to sit centered in IE6. The html looks like this: <div> <table width="100%" height="100%"> <tr> <td> <a href="/somelink/"> <img src="dynamicallyGeneratated.jpg"/> </a> </td> </tr> </table> </div> The URL is sportsmembership.com.au/boxhillhawksfc/ and the logo is in the top left corner The dtd is valid xhtml transitional, and IE6 is rendering in standards compliant mode. I've tried display block, and margin:0 auto on the image, and i've tried text-align center on the td, a and img tags, and I cannot get this to sit properly in ie6. The image vertically aligns correctly but always sits to the left of the div, no matter what text-alignment I give it. I can't find a way to center this with margins or padding because the image is dynamically called from a database, and can have different dimensions. Hi all, I have created a tree menu that is dynamically loaded from the directory structure on my web server. Because it takes a while to load, I was wondering if there is any way to cache the menu so that the browser doesn't have to load it again and again. My idea is to cache it twice a day maybe (to keep up to date as it is accessing the report). Does any one know a way of doing it? Regards, Sameer. Hi, First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/ Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty. I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla Could you look at the code and tell me whats wrong? http://serve5.net/xcage/nav/ http://serve5.net/xcage/nav/styles/xcage.css http://serve5.net/xcage/nav/scripts/sfhover.js Thanks. Hi, did not know if to post this in css, html or javascript forum Anyway, I have done a slideshow wich uses css, javascript and mootools. Works like a charm, however if I turn javascript off I have the small images and url of the large images all over the content of the page, awful. noscript does not work, If I add a noscript, I get the noscript text, but also all images and url all over the page. I did found a way adding a css rule inside the noscript tag, however that dont validate, you cant put css there, and I want the site to validate. So how should I do it? Been trying many ways and none works. The images are displayed in the html like this: Code: <div id="dg-image-gallery" class="dg-image-gallery">
<div class="dg-image-gallery-image">
<img class="dg-image-gallery-thumb" alt="Images properties for rent in Marbella." src="nuevas/casa_blanca_4_house_pool-2.jpg">
<span class="dg-image-gallery-caption">The house and heated pool</span>
<span class="dg-image-gallery-large-image-path">nuevas/casa_blanca_4_house_pool.jpg</span>
And the javascript in the html page is like this:
<script type="text/javascript">
var gallery = new DG.ImageGallery({
el : 'dg-image-gallery',
autoplay : {
pause : 2
}
});
</script>
Thanks in advance, Helen Hello, When validating my site a syntax in javascript causes the error Code: if (lyr & & lyr.css) lyr.css.visibility = "visible"; so I replace the ampersand with & as what the validator suggested and so I did this if (lyr && lyr.css) lyr.css.visibility = "visible"; but the script now won't work I have a problem. I'm not even sure if coding today can do this. I think I need CSS to do this, but then again maybe Javascript. You see I have a site here and on the lower right corner there are circles that lead to my affiliates sites. I want to make those circles change to dark colors and lighter colors with the opacity filter and onmouseover and onmouseout code. The thing is I don't want to cut up my layout to do so. Is there a way I can keep the entire layout intact(my whole layout is one big image) and just make the circle parts use the opacity filter (I would like each one to be separate, but still part of the main image) For example: when I go over one of the circles it would change to a lighter shade, but when I go off of the circle it would change back to normal. Is that possible? Hi. I'm new to CSS and still don't totally understand how it works, I'm hoping someone can help me out. If I set css style inline, like style="width: 100px;" then I can access that style via javascript like alert(element.style.width); But once I set the style in a class, like, class="test" and the css is .test { width: 100ps;} now my alert(element.style.width); is nothing. Maybe some code will help explain: Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
.test {
width: 100px;
}
</style>
</head>
<body>
<div onclick="alert(this.style.width);"class="test" id="test">
<p>text</p>
</div>
<div onclick="alert(this.style.width);" id="test2" style="width: 100px;">
<p>text</p>
</div>
</body>
</html>
If I click the div with inline style, I get the(my) expected behavior, that is I see 100px alerted on my screen. If I click the div with the class call, I see an empty string alerted. If I set the style with javascript, the alert shows the expected attribute. Could anyone explain why this happens, and a possible way around it? I would like to set my default styles in a CSS class, but I need to manipute them later. Thanks for your time and help, CJB Hi, I have some links that act as a navigation bar. I used .leftLink:hover so that when mousover, they change color. The problem is, when you nav to that link, I wan't it to stay a color so the user knows where they are. The only way I know how to do this is js onpageload. Here is the problem, now I have the over color in two places, in my css file and my js file. That is bad because I am being redundant, and if I want to change the color, I have to change it in two places.(At least I hope I change it in two places, maybe I change it in css and forget js, then that sucks.) So can anyone help me? 1.) How do you personally solve this problem? 2.) Is there anyway js can read the style.hover.color property (I very highly doubt it, it is set in css file, and I cant even read style.width) 4. Is there something in css that adresses this issue? Can I maybe use some global variable in css that js can access too? 3.) Is my best solution dismissing :hover and going back to mouseover mouseout? Then I can have my color in one place. Thanks for your time, CJB Is it possible to disable JavaScript with CSS? For instance, I need to disable a JavaScript popup on this site. The popup is triggered if the searched word isn't found in the dictionary. This site isn't mine, but I'd like to load it in a kind of frame. Sorry if this is in the wrong section but i'm not sure if it should be here or in the javascript section. Here is the CSS code that I am making. I am trying to make a javascript drop down but the css is preventing the code from becoming a vertical dropdown. It justs goes to the left. Here is the beggining css for it and I am having trouble making it like that. Sorry if I can't be more descriptive but i've been trying to work for 5 hours and got nothing. Can any one please help. CSS code Code:
#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
background-image:url(images/agency2.gif);
border:0px;
width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
background-image: url(images/agencyup2.gif);
border: 0px;
width: 54px;
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
background-image: url(images/services2.gif);
border:0px;
width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
background-image: url(images/servicesup2.gif);
border: 0px;
width: 56px;
}
Java Code Code:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = function() {return false;}
allLinks[i].onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
document.getElementById(thisMenuName).style.display = "block";
this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}
function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}
function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}
Html code Code:
<div id="nav">
<ul>
<li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
<li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></a></li>
<ul>
<li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
<li><a href="#.html">As You Like It</a></li>
<li><a href="#.html">Love's Labour's Lost</a></li>
<li><a href="#.html">The Comedy of Errors</a></li>
</ul>
</nav>
I wasn't sure whether I should post here or in the Javascript forum, but it's a display issue, so I'm putting it here. I have a problem with a trivial project that's driving me crazy. I'm using javascript to display a list of the last songs I've listened to. I want that list to display within a div. The problem is that it doesn't at all -- it seems to ignore all CSS positioning altogether. You can see the problem here . You can view the script that's generating the text right here. It's all pretty obvious -- the list of songs that's in the background should be in the "i'm listening to" box. Anyone seen anything like this before? I've searched all over Google and these forums and I can't find anything quite like it. |
|||||||