|
HTML - Ie 6 And 7 "onmouseover" Alignment Problem
Gidday gang,
I'm currently trying to iron out some bugs in a site I'm working on, and one of them really has me stumped. The problem exists in both IE 6 & 7 - it does not exist in Firefox, Opera, Netscape or Safari. Explanation: (it's probably easiest to see this for yourself: Go to the page When a user mouses over a thumbnail, it triggers the "onmouseover" event, which changes the source of 'image380' from nothing to the (full-size) thumbnail image. The problem is that in IE, the mouseover also causes the margin-left and margin-top CSS to disappear, and the thumbnail re-aligns itself into the top-left hand corner (not centered). The margin-left:4px;margin-top:2px; CSS is in the thumbborder class. I've tried adding .thumbborder a:hover with the relevant margins to my css (no difference) If anyone has any suggestions I'd be really appreciative - this one really has me stumped. :-S Cheers, - JB HTML: Code: <a class='thumbnail' href='template.php?templateid=380'> <img src='images/bid_andreas02_thumb.png' class='thumbborder' border='0' onmouseover='document.images.image380.src="images/bid_andreas02_full.png"' alt='bid_andreas02' /> <span> <img name='image380' src='' alt='bid_andreas02' /> <br /> bid_andreas02 </span> </a> CSS: Code: .thumbborder {
border: solid 1px #CCC;
margin-left:4px;
margin-top:5px;
width:140px;
height:112px;
}
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffe0;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
Similar TutorialsA customer gave me a Word doc that they want turned into a printer friendly web page. I understand that there are tons of ways to do this but I really want the answer to the subject. What i'm referring to is a form that someone can print from the browser and "fill in the blanks" on the page where there are "underscores". My question is how to code those underscores. I tried manipulating the <hr> tag but it's putting way too much space in between each <hr>. I've already coded a "fill in the blank" line using <u> nbsp;</u> but that looks very messy. What do you guys/gals think? http://www.colletts.co.uk/winter_dolomites.htm I have the above page that redirects users to my Winter Website - the HTML below isn't valid W3C does anyone know of a better and valid way to get this done? Cheers, Mas HTML Code: <META HTTP-EQUIV="Refresh" CONTENT="2.5;URL=http://www.colletts.co.uk/winter/winter_dolomites.html" /> I was hoping someone could clue me in as to whether or not this would be possible. I'm thinking it isn't but I need to make sure. I'd like to provide a file for people to download on my website, but when they click on the link and the download window appears I don't want them to have the option of opening it. Is it possible to only give them the option to save the file? Sounds incredibly unlikely but I gotta know. hi, i am working on <div> i have to hide some part of the table. I am not able to hide that table part can anybady tell me where is the error. Code: <html>
<head>
<script type="text/javascript">
function callme(){
document.getElementById("hid").style.visibility="visible";
}
function hideme(){
document.getElementById("hid").style.visibility="hidden";
}
</script>
</head>
<body>
<form name="myform">
<table width="100%" border="4" cellpadding="2" cellspacing="2">
<tr>
<td class="tableheader" colspan="9">TS </td>
</tr>
<div style="visibility:hidden" id="hid">
<tr>
<td width="17%" class="labeltext">Tran Code</td>
<td width="1%" class="blanktext">:</td>
<td colspan="4" class="blanktext">Name</td>
</tr>
<tr>
<td width="17%" class="labeltext">Product Type</td>
<td width="1%" class="blanktext">:</td>
<td colspan="4" class="blanktext">
</td>
</tr>
</div>
<tr>
<td>
</td>
</tr>
</table>
<input type="button" onclick="callme()" value="show">
<input type="button" onclick="hideme()" value="hide">
</form>
</body>
</html>
thx in Adv, Hanm. Hello, I want to load a page in a iframe, and when i do this, i want that page to be displayed not at the begining of that page, i want that page to be displayed at a "x" and "y" position specificated by me. How can i do that? Thank you. Hi all, I am currently working on a website using Dreamweaver CS3. Whenever I view the (currently very basic) site in Firefox I get the line of code I entered as the title of this thread at the top of the page (directly above the banner) as if I had just typed it into the canvas area (correct term?). Whenever I view it in IE it appears just fine, not sure about other browsers though. I began by creating a template and adding it to the page you see he HTML Code: http://www.geocities.com/makotronic/indexx.htm Here is the code for the template: Code: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Template for Parish Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial Narrow, Verdana, Arial, sans-serif;
}
.style5 {font-size: 14px}
-->
</style></head>
<body>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><img src="../Images/welcomebanner.gif" width="750" height="125" /></td>
</tr>
<tr>
<td width="160"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td width="590" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top"><!-- TemplateBeginEditable name="Main Body" -->Main Body<!-- TemplateEndEditable --></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And for indexx.htm (I added a second 'x' because I already had a 'index.htm' file in GeoCities): Code: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!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"><!-- InstanceBegin template="/Templates/template.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Welcome to the Greencastle Parish Website</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style8 {
font-size: 36px;
font-weight: bold;
}
-->
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Arial Narrow, Verdana, Arial, sans-serif;
}
.style5 {font-size: 14px}
-->
</style></head>
<body>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><img src="Images/welcomebanner.gif" width="750" height="125" /></td>
</tr>
<tr>
<td width="160"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td width="590" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><!-- InstanceBeginEditable name="Main Body" --> <span class="style8">Header</span>
<p class="style3">Main Body</p>
<!-- InstanceEndEditable --></td>
</tr>
</table></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>
Cheers for any help! Niall Hey, I'm trying to write some code for expanding and concealing text You can see this in action at youtube when you click the (more) button to expand text. Suppose I had a heading: MyHeading and a body of text: MyTextHere How do I make it so that when you click MyHeading it makes MyTextHere (initially not visible) appear, and when you click MyHeading again, it makes MyTextHere disappear? Thanks Alot. Rather than write them out i took a screenshot. So how do i get past those? Hi, I have a problem with validating Strict XHTML 1.0 ... The tag: "option" doesn't have an attribute: "onchange" in currently active versions.[XHTML 1.0 Strict]... Is there a way around this? Here's the code:. <select name="birth_month" onchange="form_d('yes');" size="1" style="width:8em"> <option<?php echo empty($a_birth_month)?' selected="selected"':''?> value="" onchange="form_d('yes');" >Month</option> Thanks Only another million pages to go. Hello folks, I have written some html, xhtml possibly, which has an href to another page, the second page being in frames and in a new window. It worked fine on an Me but now in XP it won't open the 2nd window (from the link in the first) saying it can't locate file bla bla bla, check the address.... The odd thing is where there were gaps in the address which I blocked in with a " %20 " for the browser to recognise, its saying its looking for the right address but with a 25 where all the %20's are, as well as the twenties themselves, so they now appear as "html%2520code" for example. When I open the file that is the target of the link I get the typical white file not found page, but it is dividing the screen as the frames of that file tell it to do. I would appreciate somebody telling me what the error could possibly be hello, can you please give me a sample code showing the difference between ismap and usemap. I need to give a seminar on it !!!!! hello, please help me! I created my wesbite using Dreamweaver 8, and i am having problem with a "form/submit" option. I've created a form inside a "DIV layer"(inorder to be able to move around). I want the form to be able to ALERT the customer that he/she is missing a "required" field, when they hits SUBMIT BUTTON and be able to go back and "enter it" and then when they hit the SUBMIT BUTTON and all the required field are listed then it will SUBMIT the form and OPEN the POP UP WINDOW. NOW here is the problem both scrips are working but they are conflicting each other, When I go to my site and HIT the SUBMIT BUTTON without entering any fields A POP UP WINDOWS comes up and tells me i am missing the field "WHICH is what i want" but then instead of letting me go back and enter the field, it automaticly submits the form and a NEW WINDOWS comes up with the "forms submission result" and I then recived an email.. Now what can I do to correct this? How can i make it work properly? is there another simple script? i thought maybe the problem is on the ONSUBMIT action? If i have to re-write everything again i am willing to do so! I just don't understand, why does it submit the form if there are "required" fields missing? why doesn't it let me go back and type in the field and then do the rest? Please HELP here is the page where my form is located at : http://www.towone.com/formstest56.html and here is the script: </style> </head> < form action ="http://towone.com/cgi-sys/FormMail.cgi" method="POST" onsubmit="return (checkrequired(this)|createTarget(this.target));" target="formtarget"> <input type="hidden" name="recipient" value="danay@towone.com" /> <input type="hidden" name="subject" value="FORM REQUEST" /> <script> function checkrequired(which){ var pass=true if (document.images){ for (i=0;i<which.length;i++){ var tempobj=which.elements[i] if (tempobj.name.substring(0,8)=="required"){ if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().cha rAt(0)=="s"&&tempobj.selectedIndex==-1)){ pass=false break } } } } if (!pass){ alert("One or more of the required elements are not completed. Please complete them, then submit again!") return false } else return true } </script> <script type="text/javascript"> function createTarget(t){ window.open("", t, "width=600,height=550"); return true; } </script> <body> -------------AND THEN FOR THE FORM IN WHICH IS INSIDE A DIV LAYER------ ------------------------THIS IS THE SCRIPT:------------------------------- <div id="Layer8"> <form action="" method="post" name="form1" class="style3" id="form1"> <strong>Request form to be sent to you via?</strong> </p> </strong> <label>NAME: <input type="text" name ="requiredNAME" /> </label> <p> <label>EMAIL: <input type="text" name ="requiredEMAIL" id="email_add"/> </label> </p> <p> <label>FORM: <select name="Form"> <option selected="selected">Select FORM</option> <option>Pickup Order Form</option> <option>Credit Card Form</option> <option>Quote Request</option> <option>IRS W-9</option> <option>Company Package</option> <option>Truck Insurance</option> </select> </label> </p> <p> <label>SEND VIA: <select name="Recieve_Via"> <option>Email</option> <option>Fax</option> </select> </label> </p> <p> <label>FAX: <input type="text" size="3" maxlength="3" name="area" /> - <input type="text" size="3" maxlength="3" name="prefix" /> - <input type="text" size="4" maxlength="4" name="extension" /> </label> </p> <p align="center"> <input type="submit" name="Submit" onSubmit="return checkrequired (this)" "value="Submit" /> <input type="reset" name="Reset" value="Reset" /> </p> </form> </div> I have this: Code: <script language="Javascript1.2">
document.write('<a href=onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_email','','images/nav_email-over.gif',1)" "javascript:void(0)" onclick=window.open("/recommend/recommend.php?loc='+window.location.href+'","","height=280,width=230,top=150,left=300,toolbar=no,menubar=no,location=no,status=no,resizable=0")><img src="images/nav_email.gif" alt="email page" name="nav_email" width="29" height="24" class="imgborder1"></a>');
</script>
but the image wont show up. I have an image that has a mouseover/out rollover effect. I also have it pop up a new window with a "recommend this page to a friend" script. I can't figure out why the image wont show up, it's like it's invisible. I just got my code to validate under the strict doctype ... but once I changed the doctype, Firefox started rendering something different, so that now there's a black gap below the header bar. i checked by putting the transitional doctype back in, and with that it looks perfect. ... but IE doesn't render it differently when i put in the strict doctype. so what's going on here?!?! Hey everyone. I'm a 25-year old graphic designer living in Virginia with my wife and daughter. I've been designing websites for a few years now. (not developing... I'm sure my code is hideous... I still use tables too...) I've been putting together a site for an orphanage in India that I help support and for some PERPLEXING reason, it doesn't show up in IE or Safari. Only Firefox! http://www.rustbucketbingo.com/itm Maybe you can answer the question here. If not, please advise as to where it should be posted. Many thanks. Mates, hi.... I am having a hard time trying to fix a simple problem... I have a checkbox that does not return null when it is unchecked... it is always returning "on". here the snippet <th> <td><input type="checkbox" id="test" name="test" onclick="javascript:test();"/></td> <th> function test() { alert($("#switchBox").val()); } could I get some help from here... tks Hi, I've got three buttons on a page and basically all I'm trying to do is put a BACK button as one of the three. But I'm having difficulties getting it to work. Code: <form name="reservationinfo" action="reservationcollected.php" method="post"> <input type="hidden" name="reservationID" value="<? echo $reservationID; ?>"> <center> <table width="400" border="0" cellspacing="5"> <tr> <td><input type="submit" value= "Reservation Collected" class="button" name="submit"></td> <td><input type="submit" value='Cancel Reservation' onclick="reservationinfo.action='admincancelreservation.php'; return true;"></td> <td><input type="submit" value='Back' onclick="reservationinfo.action='history.go(-1)'; return true;"></td> </tr> </table> </center> </form> The solutions Ive been trying either take me to reservationcollected.php OR says history.go(-1) CANNOT BE DISPLAYED. Any ideas? Cheers Hi there, I m using dom with css in my web page. Using the document type <!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"> My dom effect is not visible in mozilla 2.0. In stead if I am using the document type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> the dom effect is visible. Is this vaild using w3c standards? Any help in this issue would be appreciable. Thanks in advance Hi there, I m using dom with css in my web page. Using the document type <!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"> My dom effect is not visible in mozilla 2.0. In stead if I am using the document type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> Is this vaild using w3c standards? Any help in this issue would be appreciable. Thanks in advance Hi Gang, I'm currently trying to clean up my webpage code and for the most part it's going well - there's only one small problem: Many parts of my site link to external URLS with long "$_GET"-inspired addresses. (For example, "abc.php?id=xyz&itemid=frog" The problem is that W3C validation throws up a red flag whenever it sees an "field=xyz" part of a url, giving the messages: Quote: general entity "field" not defined and no default entity. every time it stumbles across an ampersand in the URL and: Quote: reference to entity "field" for which no system identifier could be generated. every time it stumbles across an equals sign. I'm *sure* there must be some way around this - surely W3C can acknowledge _GET URLS somehow? If anyone can offer any suggestions I'd be very appreciative. Many thanks, - SuperGrover :-) |
|||||||