|
HTML - Problem With A Table And Mouseover
For some reason in my website, my table moves over when you mouseover it. I do not have a mouseover code activated for that. So I don't know why it is happening. Here is a link to the page that it happens on:
http://white-candle.net/Business.html It is the box right above the form. Here is the code for my table: Code: <table width="327" border="6" cellpadding="1" class="text" style="line-height:12px ">
<tr>
<td><CENTER><p>If you are interested in joining a team that is dedicated to helping you succeed, please fill out the form below!</p>
<p>You will receive for free, a few scent samples, a brochure with the product price list, a business card, an informative mp3 pack, and a getting started PDF.</p></CENTER></td>
</tr>
</table>
I'm using dreamweaver if that matters. Similar TutorialsHi, just wondering how I can code a table which changes on a mouseover, like on this website? Tried looking at their source, but I can't seem to get the right bit! Cheers for any help Joe Hi, I need some code that will make cells in a table change colour (yellow) with mouse over. The problem is that i really need to avoid having to put the code in <TD> as there are about 5000 cells in total! and that will add alot of bytes to it. Needs to work in IE7 and firefox mainly. Any help would be great! Thanks Joe I'm trying here again 'cause last time I got some excellent help. I'm building an image-flipping thingy and i've got the mouse-overs and mapping done right but there's one thing I can't figure out. How can I make it so the image will NOT revert back to the first ("plumbing") one until another button is moused-over? I'd like the user to be able to move their mouse around the picture without it switching back. Here's the code: Code: <html lang="en">
<head>
<base href="http://fulfordsupply.com/frameset/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
body {
background-color:#666;
}
#org {
display:block;
width:570px;
height:269px;
border:2px solid #000;
margin:auto;
}
</style>
<script type="text/javascript">
pic=[];
pic[0]=new Image(570,269);
pic[0].src='images/plumbing.jpg';
pic[1]=new Image(570,269);
pic[1].src='images/heating.jpg';
pic[2]=new Image(570,269);
pic[2].src='images/design.jpg';
pic[3]=new Image(570,269);
pic[3].src='images/green.jpg';
function swapMapImage(){
obj=document.getElementById('org');
ar=document.getElementById('boiler-room').getElementsByTagName('area');
for(c=0;c<ar.length;c++) {
ar[c].number=c;
ar[c].onmouseover=function() {
obj.src=pic[this.number].src;
}
ar[c].onmouseout=function() {
obj.src=pic[0].src;
}
}
}
if(window.addEventListener){
window.addEventListener('load',swapMapImage,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',swapMapImage);
}
}
</script>
</head>
<body>
<div id="boiler-room">
<img id="org" src="images/plumbing.jpg"(570,269) usemap="#fancy" alt=" ">
<map name="fancy">
<area shape="rect" coords="1,1,144,66" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=712&_UserReference=4E72E30471320B6E4BB4C6CF" >
<area shape="rect" coords="1,64,144,131" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=712&_UserReference=4E72E30471320B6E4BB4C6CF" >
<area shape="rect" coords="1,132,144,200" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=812&_UserReference=4E72E30471320B6E4BB4C6CF" >
<area shape="rect" coords="1,201,144,267" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=817&_UserReference=4E72E30471320B6E4BB4C6CF">
</map>
</div>
</body>
</html>
Thanks in advance for your help! Hi all. I created a rating system for a web site. However, the same code is used on two diff pages, yet it acts differently. I do have a little change in design between the 2 pages, but not much. Its the stars on the middle right of the page. When you mouseover them, it should change them to the rating (1234 or 5) that you are moused on. However, on the 2nd link below, when you mouse over the 4th star, it doesn't work. It will work if you mouse over the space between the 4th and 5th star, but not the 4th star it self. The one that works is: http://www.bartending.com/drinks_rec...ini&parm=title The one that is having problems is: http://bartending.com/drinks_recipes...arm=ID&celeb=9 Any help you have would be much appreciated =) Thank you =) Light and Love and Healing to you, -Patrick Arden McNally Hello! I'm having trouble with a mouseover image I'm using. I've done mouseover before, but for some reason, it isn't working for me! It is a download button, and if you move your mouse over it, it is supposed to be highlighted. I have it on the page 11 times. If I use it just once, it works. If I use it more than once, it doesn't work. Can anyone tell me why? Much thanks!! http://slw.110mb.com/templates/tindex.html - the page http://slw.110mb.com/mainstyle.css - css page if you need it Hi guys, I am really new to this. Currently designing a site for an engineering firm and have come up against a slight problem. I am designing a table with links to the other pages, when any part of the cell is mousedover the text colour and background image are supposed to change and then revert back to the original when mousedout, thats no problem, but when I add the link in the whole thing goes to pieces. The background image changes but the text colour doesnt, as can be seen from the "relocation" link on the webpage. You can view the page here http://www.omdtestdomain2.co.uk/?id=93637&option=1485 Any help would be greatly appreciated. Thanks Simon Ok, I dont paticualy want to use flash for this as im not very good with it. I have these 4 images: Background.gif Background-Open.gif Background-Close.gif Background-Side.gif As you can see there is the completely closed, the opening, the closing, and the completly open. What im trying to acheive is an entrance page. On mouseover the image changred from background.gif to background-open.gif and then when the door has opened to stay at background-Side.gif. Then, once the mouse is taken off basicaly the reverse. So background-Side.gif change to background-Close.gif and then to stay at background.gif. Ive seen this on other websites...any ideas? Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language Hi, I have a table layout (I know I should be using CSS ... but it was a quick site!) I have table width 100% and then 2 columns with td both set to 50% There are many text and images / tables & tr & td within both of the above. I have ensured no table or td within the 50% ones have any width measurements. However, when I minimise the window it doesn't seem to be keeping them 50/50 the left column seems to stay the same size. From the looks of it (images etc) it should re-size far more before it stops. Can anyone advise of typical things i should be looking for in my code that may be causing this? Cheers, d HI and hello I am having a problem with a table i am using . before the table starts there is a > right above the table --like so LOOK at the PROBLEM attachment file. I think the problem is the > below...... but i cannot find a way to hide it or remove it I am editing in Dreamweaver i am a NOOB but learning my code is as follows : this is the live code. below at the bottom is the editable code which does not have the > seen HTML Code: <div class="features_list">
>
<table id="features_table">
<thead>
<tr>
<th height="57" class="fthead wide featcol">
<div class="titleth">
<span class="shead">Features</span></div>
</th>
<th class="fthead checkcol"><span class="pro">HostScott</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="featcol"> GB of Disk Space </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Hosted Domains Allowed </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Instant Activation </td>
<td class="checkcol"> Included FREE </td>
</tr>
<!--tr>
<td class="featcol">Domain Privacy</td>
<td class="checkcol"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td>
<td class="checkcol pro"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td>
</tr-->
<tr>
<td class="featcol"> POP3/POP3 Secure Email Accounts </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> IMAP/Secure IMAP Email Accounts </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> GB's of Site Transfer (Bandwidth) </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Forwarding Email Accounts </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Email Autoresponder </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr class="pro">
<td class="featcol pro"> Add-on Domains </td>
<td class="checkcol pro">Unlimited</td>
</tr>
<tr>
EDITABLE CODE: HTML Code: <div class="body_container">
<table border="0" width="860" class="columns">
<tr>
<td valign="top" width="608">
<div class="body_container">
<div class="title_bar">Hosting Features</div>
<div class="body_content" id="feat_content">
From the business owner to the individual who desires full functionality on a small budget, HostScott provides your complete web hosting solution. View a listing of what we offer below..
<br />
<br />
<br />
<div id="why_we_are_better">
<div class="star_header">
<span class="himgspac">Why Choose HostScott?</span>
</div>
<div id="better_features">
<div class="redcent">Outstanding Support, Speed and Flexibility:</div>
<ul class="gabul left">
<li>24/7 US-based Support</li>
<li>SimpleScripts 1-Click installs</li>
<li>Trusted by Millions of Sites</li>
<li>SSH Secure Shell Access</li>
</ul>
<ul class="gabul right">
<li>True Resource Management (<a target="_blank" href="resource_protection.html">more info</a>)</li>
<li>Avg Support Hold Times Under 30 Sec</li>
<li>Proven Track Record</li>
<li>Blazing Fast Servers</li>
</ul>
</div>
</div>
<br />
<br />
<div class="features_list">
<table id ="features_table">
<thead>
<tr>
<th height="57" class="fthead wide featcol">
<div class="titleth">
<span class="shead">Features</span></div>
</th>
<th class="fthead checkcol"><span class="pro">HostScott</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="featcol"> GB of Disk Space </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Hosted Domains Allowed </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Instant Activation </td>
<td class="checkcol"> Included FREE </td>
</tr>
<!--tr>
<td class="featcol">Domain Privacy</td>
<td class="checkcol"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td>
<td class="checkcol pro"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td>
</tr-->
<tr>
<td class="featcol"> POP3/POP3 Secure Email Accounts </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> IMAP/Secure IMAP Email Accounts </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> GB's of Site Transfer (Bandwidth) </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Forwarding Email Accounts </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr>
<td class="featcol"> Email Autoresponder </td>
<td class="checkcol">Unlimited</td>
</tr>
<tr class="pro">
<td class="featcol pro"> Add-on Domains </td>
<td class="checkcol pro">Unlimited</td>
</tr>
<tr>
<tr>
<td class="featcol"> Perl 5 </td>
<td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td>
</tr>
<tr>
<td class="featcol"> Python </td>
<td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="24/7 Network Monitoring" /></td>
</tr>
<tr>
<td class="featcol"> Ruby/Ruby On Rails </td>
<td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Courtesy Site Backups" /></td>
</tr>
<tr>
<td class="featcol"> Javascript/DHTML </td>
<td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td>
</tr>
<tr>
<td class="featcol"> Flash/Shockwave </td>
<td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td>
</tr>
</tbody>
</table>
</div>
<br />
<br />
<div id="feat_signup">
<a class="signup_btn" href="../../cgi-bin/signup.html"><img alt="Sign Up Now" class="signup_button" src="../../media/shared/general/_hs/signupnow_both.jpg"></a>
</div>
<!-- class="content" -->
</div>
<!-- class="frame center" -->
<div id="footer">
<ul class="footer_links">
<!--<li><a href="/cgi/info/awards">Awards</a></li>-->
<li><a href="https://my.HostScott.com/cgi/help">Help Center</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="../../cgi-bin/partner.html">Affiliates</a></li>
<li><a href="terms.html">Terms</a></li>
<li style="padding:11px 8px 8px 8px;"><g:plusone size="small" annotation="bubble"></g:plusone></li>
</ul>
<div id="copyright">©2011 HostScott.com<!--HostScott.com-->. All rights reserved.</div>
</div><!-- footer -->
I have a table problem where in table (A) and any tables under gets longer, links and content in table (B ) doesn't stay aligned to top, the whole content in table (B) and any others appears away from the top, even in the middle so the top part becomes blank I'd like the content in A as well as B stay on the top and no blank spaces appear on the top of them I'll appreciate any quick fix for this issue kind regards Here's the problematic table I have Quote: <table width="79%" height="100%" border="0"> <tr> <td width="63%" scope="col">A</td> <td width="37%" rowspan="3" >B<br /> </td> </tr> <tr> <td> </td> </tr> <tr> <td scope="row"><table width="100%" border="0" > <tr> <td width="230"> </td> <td width="230"></td> <td width="230" border="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table></td> </tr> </table> Hi.. i've got a table that doesnt do what i want it to do.. Page : http://www.yeltzin.net/test/index2.html One cell dont display the background (cell changes from time to time), and the page dont finish "loading".. The size of the cells/pictures have been triple-checked.. I tried narrowing it down and here is the part of the code i still have : PHP Code: index2.html --------------- <html> <head><link rel="stylesheet" type="text/css" href="styles.css"></head> <body> <table class="indextable"> <col style="width: 287px;"> <col style="width: 286px;"> <col style="width: 285px;"> <tbody> <tr> <td colspan=1 class="r1c1">row 1 cell 1</td> <td colspan=2 class="r1c2">row 1 cell 2</td> </tr> <tr> <td colspan=1 class="r2c1">row 2 cell 1</td> <td colspan=2 class="r2c2">row 2 cell 2</td> </tr> <tr> <td colspan=2 class="r3c1">row 3 cell 1</td> <td colspan=1 class="r3c2">row 3 cell 2</td> </tr> </tbody> </table> </body> </html> styles.css --------------- table.indextable{ table-layout:fixed; border-collapse:collapse;} td.r1c1{ background-image:url('R1C1_.jpg'); height: 184px;} td.r1c2{ background-image:url('R1C2_.jpg'); height: 184px;} td.r2c1{ background-image:url('R2C1_.jpg'); height: 182px;} td.r2c2{ background-image:url('R2C2_.jpg'); height: 182px;} td.r3c1{ background-image:url('R3C1_.jpg'); height: 180px;} td.r3c2{ background-image:url('R3C2_.jpg'); height: 180px;} Attached are 2 images of the footer of my website, one (displayed properly) in every browser except IE7 and the other (screwed up) in IE7. As you can see, I have 4 columns, inside which are links to a forums section. In IE7, column 2 is shifted over to the right and sits on top of column 3. The section is styled in CSS...I have attachments for the HTML and CSS code for the section. I'm hoping that one of the guru's here can suggest a fix (please let it be easy ). Thanks for the help. Rick When I enlarge my window my 2 tables that are next to each other move up and down on my page and end up different heights. Is there a way to keep them even with each other when a different window size is used? I tried changing the 100% widths to fixed numbers but then my background image doesn't fill the whole screen. Is there some code I can add to freeze the size of these tables without loosing 100% background image? on my home page i am using a table in this table i am including different files like header in first row ,nevigator,main part,and fottter throught following coding in php PHP Code: <html> <head> <Title> TECHOBOY::Home </Title> </head> <body> <table > <tr><td > <?php include("header.php"); ?></td></tr> </table> <table > <tr><td > <?php include("nevigator.php"); ?></td></tr> </table> <table> <tr valign="top"> <td valign="top"> <?php include("del.php"); ?> </td> </tr> </table> <table> <tr><td> <?php include("counter_footer.php"); ?></td></tr> </table> </body> </html> and i am having out put as follow in this image now as shown in above pic my DISCUSSION table is centered due to its besides main table .what i want is i want to make that discussion table to align top. can any one tell me how to do that? i am really waiting for your reply thansk you in advance OK Look I Have This Code: HTML Code: <table align="center" width="1010" border="1" cellpadding="0" cellspacing="0" name="table"> <tr> <td background="http://www.imageshack.com/up/mywyjwz3m4.png" width="1010" height="952" style="background-repeat:no-repeat;;background-position:center"> <img src="full.jpg" style="position:absolute;left:0px;top:0px;"> </td></tr> Now, What I Wanted To Know If With This Code: HTML Code: style="position:absolute;left:0px;top:0px;" Can I Move The Object Just In The Table If I Will Give Him For Example: HTML Code: left:0px;top:0px; So It Will Be Like That: And No Like That: Please Help Me! I've created my site using mainly Netscape and Mozilla. It looks fine, even though the code is a little messy. But one page won't display properly in IE, only in Mozilla: http://kukla.tv/cbs.html The top tables are constrained to the browser width in both browsers, but not the large bottom table (the list of films). I even made the bottom table 997 pixels rather than 100% of page width, but it still does not wrap the text in IE, only in Mozilla. What do I need to do? Thanks, Mark I am having a problem getting a table to render properly in IE (including version 7): Test Page Why does extra padding show up to the right of the "+ Select" button? I want the table to collapse to the size of the content, but I can't find ANY combination of CSS that forces IE to do this. Firefox renders the page OK. |
|||||||