HTML - Weird Image Map Problem
After fixing the code for my image maps after my question yesterday, I got an email from a user saying this:
"I just noticed one thing when viewing the site using IE. on the pages, IE is shrinking the image and rather than giving me the option to click on a link, it gives me a magnifying glass to enlarge the image. When i enlarge the image, I still can't click on the links. Instead I get the magnifying glass to shrink the image back down." Here is an example of the code: <img src="About.jpg" width="1100" height="825" border="0" usemap="#about" /> <map name="about" /> <area shape="rect" coords="285,29,316,50" href="http://www.com" title="HOME" alt="Home" /> <area shape="rect" coords="383,29,460,50" href="http://www.com/teachers" title="FOR TEACHERS" alt="For Teachers" /> <area shape="rect" coords="469,29,516,50" href="http://www.com/support" title="SUPPORT" alt="Support" /> </map> It works fine with Safari and Firefox. What could be causing that problem with IE? Similar Tutorialswhy does my local copy of my site look like this http://img106.imagevenue.com/aAfkjfp...m_122_61lo.JPG but after I upload it to my webserver at http://shellsite.okinawapc.com it looks correct?? I recently developed the following site: www.stripburgerlv.com If you view it in Firefox it may look just fine. However, in Safari, Opera or IE you'll notice that the right side of the white bounding box disappears. I dont understand?! Part of the image file includes that white edge so why would it not show up in those browsers? Thanks! This is the page: [edited out link after problem solved] In Internet Explorer and Opera (not FF as far as I can see), under the 3rd 4th 5th 6th and 7th menu image there is a very small black line between it and the next. I don't know why these are there and how they appeared. I think it is something to do with the stylesheet rather than the page html as they are not there when I exclude it. The style is he [edited out link after problem solved] Can anyone shed some light on this? thanks. aaaaaaaaaaaaaaa Here is my CSS: Code: #awardcontainer { width: 700px; margin-top: 20px; margin: auto; padding: 0; } #blueheader { background: url('http://www.forumbuff.com/fpacolor1top.png') no-repeat; width: 700px; height: 50px; margin: 0; padding: 5px; } #bluecontent { background: yellow; max-width: 700px; margin: 0; padding: 2; } #bluefooter { background: url('http://www.forumbuff.com/fpacolor1bottom.png') no-repeat; width: 700px; height: 50px; margin: 0; padding: 5px; float: left; } Here is my HTML: HTML Code: <html> <head> <title>Test</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="awardcontainer"> <div id="blueheader"> </div> <div id="bluecontent"> Testing 1 2 3 </div> <div id="bluefooter"> </div> </div> </body> </html> The error can be found at: http://zenrer.com/fptest/awards.html I have never seen this problem before, the gap between the header and the content. Can someone help me please. Can someone please check my site in IE6? I think the text in the navigation menu on the left doesn't shows up besides "Pictures"... I saw this problem on my client's computer (yikes! ). It was really weird, the boxes were just green with no writing until you hovered over them. I don't have access to 6 myself and I'd really really appreciate it if someone could check this: http://www.salemnhconservation.org Let me know if this problem happens with you! Thanks!!! website- http://webtvdeluxe.com/home.php It's not really a problem but an annoyance. I just set up my page so it is html 4.0.1 strict. I don't have any errors or anything. Everything is viewed perfectly on a windows computer(no matter what the browser as far as I can tell). However on a mac I get this problem.... If you have a mac, use safari or firefox to view the page. At first glance, you will say "Well what's the problem?" The bottom of the middle table below fashion expert should be the bottom of the page. However the page continues further down alittle bit. If I didn't have those tables in the middle filling that empty space, the page would still be that long. For example, on one of my pages, I only have one table in the middle but my page still scrolls down right to that spot. Even if there is no content to push the table down that far which is the weird part. Has anyone ever encountered this? Is this possibly a bug with mac browsers? Is there maybe a fix? Hi I've got a weird problem. Basically, I've created an effect where an image (designed to look like the front of a record sleeve) flips when clicked, and then shows a different image (which looks like the reverse of the same sleeve). There are nine "albums" on the page, however, the effect only works on one image at any one time (by default "album1", but delete this album and the effect will work exclusively on "album2" and so on). Changing "div id" to "div class" throughout the HTML document, style sheet etc. doesn't help, it only rearranges the images. I've pasted the relevant code below. I can't understand the problem, and it's creating a serious roadblock. Any ideas? Thanks - Chris HTML: <!-- Album pictures (front sleeve on left, zig-zag sleeve reverse on right) --> <div id="album1"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album1.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div> <div id="album2"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album2.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div> <div id="album3"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album3.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Reverse.png" </div> <div id="album5"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album5.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album6"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album6.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album7"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album7.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album9"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album9.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album10"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album10.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> <div id="album11"> <a class="opacity"/> <img id="flip1" img src="Top_16/Album11.png" /> <!-- Flip --> <img id="flip2" img src="Top_16/Album2.png" </div> CSS: /* Image flip code (applies to album divs, decreases then increases width and opacity, hiding one image then the other, producing a "flipping" optical illusion) */ #flip1{ position:absolute; cursor:pointer; width:104px; height:104px; } #flip2{ display:none; position:absolute; cursor:pointer; } I am just about to ship this template off to a customer but I am having a problem with my footer. The footer is supposed to expand the width of the page at the very bottom of the page. However, the footer is cramming itself in below the content on the right side panel. However, if I add 2 </div> tags in the HTML code directly above the footer code than it works perfect. The problem is that this invalidates the code and I can't figure out why. The validator claims these </div> tags aren't matched with enough <div> tags. Im going nuts and I know this is a really simple issue. Can anybody see what is going on?! Here is the page I am talking about: http://current-post.com/refractive/inner.html Wzup Got a little issue on my site. is showing everything great in firefox. IE is a little off but i'm still working on that. but in safari i doesn't show anything. This is the site try it out. click on the Events button in the nav bar. in FFX my stuff shows up safari it doesn't i used div tags to show it and css sheets site created in dreamweaver. checked with w3 validator thanks for any help greetz robin Hello, I've got a weird problem that I've never come across before... I've created a page with a hidden div on it that is displayed at certain times (after a button is clicked). The div is displayed on top of a semi opaque div that covers the whole of the page (this is created and added to the page when the hidden div is shown). The effect is very similar to the lightbox technique. To prevent select boxes showing through the opaque overlay in IE6 I'm also using an iframe shim. The only problem I have is that in FireFox, the text input fields on my lightbox div do not have the flashing carat in them. You can select the inputs and enter text into them, it just looks a little odd not having a carat in them when they are selected. Anyone else come accross this? Hey, I've just recently up-loaded a new site i have put together, and i'm having a wierd problem with some of the images on the site. Whats happening is that when i view my site, some of the images don't appear, i just get the right hand corner red cross box. And a friend of mine who viewed the site had exactly the same problems, with exactly the same images. But two other people who viewed the site had no problems with any of the images not showing! The other wierd thing, is that i will have an image which works on one page, but then won't work on another page, even though it's exactly the same image file. This is only the case for one image which i'm aware of, all the other images which aren't working are consitant throughout all pages. I have contacted my hosting company and they have mentioned it's most likely something to do with my site coding. I don't understand what i could have done to have made this happen though. If one image works, the others should too... or so i would have presumed. All my images are in the same image folder and they are all either jpg or gif files. My website is feedthefitness.com i hope it's ok i mention it on this forum. I think it would be good to be able to have a look at the site to see what i'm talking about. Any ideas of what could be the problem would be greatly appreciated. I've tried up-loading my site a few times and it's made no difference. Thanks in advance. Hi Guys, This is my first post on this forum. Basically, Ive agreed to turn someone website, into a joomla template, and then format articles and such until it looks exactly like the original site. This would give them the ability to add their own content without my help(I offered to redo the site, but they like their current one even though its quite bad). All was going well, and I sent out an email to check the progress of the site to the client, and he replied to me that the site was all distorted in Safari. Being a windows programmer, I was used to IE/firefox, Safari and the other browsers never really crossed my mind. Anyway, I downloaded safari, chrome and opera, and tested the sites out. Opera they were fine, but chrome and Safari, some things align WAYYY to the left, almost off screen. I'm guessing it may be a CSS issue, but Ive checked, rechecked, deleted, restored almost everything and its still messed up in those browsers! This is a paying client, so I need to get this sorted out as soon as possible. The pages in question are he http://www.longboardcapital.net/inde......7&Itemid=27 http://www.longboardcapital.net/inde......48&Itemid=2 Ive paused on content creation, as this is a big problem. Have any of you ever experienced the same or similar problem? can you all offer any suggestions? Thank you so much for your help, -Tim Ok look at these two links. Here everything lines up: http://www.hfhpulm.com/schedules/staffcallnext.php however here the date does not line up in the table: http://www.hfhpulm.com/schedules/staffcallcurrent.php Now the WEIRD thing is that the two codes are EXACTLY the same except: link 1: Code: <?php $next_month= date("F", strtotime("+1 month")); $curr_month = date ('F'); $consultsq1 = "SELECT * FROM `staffsched` WHERE `which_month`='".$next_month."'"; link 2 (the one that doesn't line up): Code: $next_month= date("F", strtotime("+1 month")); $curr_month = date ('F'); $consultsq1 = "SELECT * FROM `staffsched` WHERE `which_month`='".$curr_month."'"; Why would changing to the current month (which also happens to be the value on the database) make the lines not match up? Hi, I have got a weird problem with a page I'm writing: whenever I zigzag between my tabs inside the page, each tab's content moves a little bit to the right. you can clearly see it, if you zigzag between the "Friends" tag and the "Mail" tag, and notice how the title of the content moves a little bit to the right each time... I'm attaching my two files. Does anyone has an explanation? Thanks Ok, I am creating a calculator with html and javascript. I am using a table to format the buttons and text displays. The code is posted below with the table itself. It is supposed to be 3 cells height and 1 cell width but it turns out as 2 cells width and 2 cells height. I can't figure out the error in my code so can someone please figure out what is wrong with my tags: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type=text/css> input { background-color: black; color: white; } th { background-color: black; color: white; } td { background-color: green; } </style> <script type="text/javascript"> var a; var b; var c; var d; var e; function inputtext(inputtext) { a=document.getElementById("inputcalculation").value; b=inputtext; c=a+b; document.getElementById("inputcalculation").value=c; } function Evaluate() { d=document.getElementById("inputcalculation").value; e=eval(d); document.getElementById("outputcalculation").value=e; document.getElementById("inputcalculation").value=""; } </script> <title>Help-In-Math Calculator</title> </head> <body> <table border="1"> <tr> <th colspan="11" style="background-color: black"> <center> <input type="text" id="inputcalculation" value="" /> </center> </th> </tr> <tr> <td colspan="11" rowspan="5"> <center> <input type="button" value="1" onclick="inputtext('1')" /> <input type="button" value="2" onclick="inputtext('2')" /> <input type="button" value="3" onclick="inputtext('3')" /> <input type="button" value="+" onclick="inputtext('+')" /> <br /> <input type="button" value="4" onclick="inputtext('4')" /> <input type="button" value="5" onclick="inputtext('5')" /> <input type="button" value="6" onclick="inputtext('6')" /> <input type="button" value="-" onclick="inputtext('-')" /> <br /> <input type="button" value="7" onclick="inputtext('7')" /> <input type="button" value="8" onclick="inputtext('8')" /> <input type="button" value="9" onclick="inputtext('9')" /> <input type="button" value="X" onclick="inputtext('*')" /> <br /> <input type="button" value="0" onclick="inputtext('0')" /> <input type="button" value="." onclick="inputtext('.')" /> <input type="button" value="00" onclick="inputtext('00')" /> <input type="button" value=÷ onclick="inputtext('/')" /> <br /> <input type="button" value="EVALUATE" onclick="Evaluate()" style="background-color: blue"/> </center> </td> </tr> <tr> <td colspan=11> <input type="text" id="outputcalculation" onfocus="blur()" /> </td> </tr> </table> </body> </html> Hello, I have a problem this code has a problem. The first paragraph's email code doesnt show correctly. It seems to extend past the </a> to the next one it is very weird. Code: <html> <head> <!-- New Perspectives on HTML and XHTML Tutorial 2 Case Problem 3 Diamond Health Club Membership Options Author: Dustin Williams Date: March 9, 2011 Filename: members.htm Supporting files: diamond.jpg --> <title>Diamond Health Club Membership</title> </head> <body> <div><img src="diamond.jpg" alt="Diamond Health Club" usemap="#diamondmap" style="border-width: 0" /> <map id="diamondmap" id="diamondmap"> <area shape="rect" coords="225, 4, 333, 40" href="classes.htm" alt="Classes." title="View our classes" /> <area shape="rect" coords="258, 44, 437, 82" href="members.htm" alt="Memberships." title="View our membership options." /> <area shape="default" coords="0, 0, 548, 150" href="index.htm" alt="Home Page." title="Return to the Home Page." /> </map> </div> <hr/> <div> <a href="index.htm#fac" title="Learn more about our facilities">Facilities</a> ♦ <a href="index.htm#staff" title="Meet the DHC staff">Staff</a> ♦ <a href="index.htm#hours" title="View the DHC hours of operation">Hours</a> </div> <hr /> <h1>Membership Options</h1> <p>Diamond Health Club offers a variety of membership programs, including one sure to meet your specific needs and budget. Pick up a membership form at the club or <a href="mailto:rchi@dmond-health.com>e-mail Ron Chi </a> to request one.</p> <h3><a name="ind">Individual memberships</a></h3> <p><i>You must be eighteen or older to qualify for an individual membership.</i></p> <ul> <li><b>Gold</b>: Full access to the club and access to special Gold Member areas.</li> <li><b>Full</b>: Full access to the club during all open hours.</li> <li><b>Weekdays</b>: A low-cost option that allows you full access to the club from 10 a.m. to 3 p.m., Monday through Friday.</li> <li><b>Evenings</b>: A discount program, allowing you access to the club from 5 p.m. to 10 p.m. every day of the week.</li> <li><b>Early Bird</b>: A discount program, allowing you access to the club from 5 a.m. to 8 a.m., every day of the week.</li> <li><b>Weekends</b>: Enjoy the club on Saturday and Sunday. Perfect for <i>weekend warriors</i>.</li> <li><b>Seniors</b>: We provide special membership rates for individual seniors.</li> </ul> <h3><a name="fam">Family memberships</a></h3> <ul> <li><b>With child care</b>: This option is best for families who plan to use the children's play room, which is available for children ages 6 weeks to 12 years. The play room is open every day.</li> <li><b>Without child care</b>: Save a little on your membership if your family won't need access to the play room.</li> <li><b>Couples</b>: Memberships for married couples or domestic partners. Pick up a membership form for specific rules regarding eligibility.</li> <li><b>Seniors</b>: We provide special membership rates for senior couples.</li> </ul> <h3><a name="temp">Temporary memberships</a></h3> <ul> <li><b>Monthly</b>: For our long-term visitors this membership provides access to the club for one month.</li> <li><b>Weekly</b>: For short-time visits, this membership provides one week of access to the club.</li> <li><b>Daily</b>: A daily pass to the club and all of its facilities.</li> <li><b>Punch cards</b>: Our punch cards allow guests complete access to the Club (except child care facilities) for a specific number of full days. Punch cards make great gifts and are available for 5, 10, and 20 visits.</li> <li><b>Special events</b>: Plan your parties and special work outings at the Diamond Health Club. Our onsite coordinator can meet your every need.</li> </ul> <hr/> <div> <b>Diamond Health Club ♦ 4317 Alvin Way ♦ Boise, ID 83701 ♦ (208) 555-4398</b> <br /> <i> Your Year-Round Source for Fun Family Health </i> </div> </body> </html> Would anyone have any idea why, sometimes when I refresh this page www.bopia.com or browse random pages within the site, the right div will show inside the left div? It happens in different browsers and different computers. In other words, the main content is showing inside the sidebar after the sidebar's content... Only happens sometimes, you may need to refresh a couple of times before you may see it happening. The pages are php, I figure the servers know how to serve php pages, have you ever seen this problem? Do you know if I need to specify any special Content-type? I triple checked the source and all divs are opening and closing correctly. Thank you! I'm not sure how MySpace is viewed on this forum, but I figured that posting here would be my best bet for help. I'm using HTML to place a table composed of several GIFs over my normal page. It changes the look completely, while still maintaining the functions I wish to keep. I normally use FireFox and the table I made works perfectly fine with it. The issue is most of my friends use Internet Explorer, and I realized the table has weird gaps when viewed in IE. It used to have vertical gaps too, but I turned the table code into one long line and that was fixed. I'm still left with horizontal gaps, though. http://www.MySpace.com/NeoApollo My HTML experience is limited, so lots of the code is borrowed from this site or that generator. Because of this, the code isn't very readable and I apologize. |