|
HTML - Issues With Onmouseover And Clickable Area In Firefox
Hi -
I got a small issue with onmouseover and clickable area on images in Firefox. Things work fine in IE but don't work correctly in Firefox. With firefox there seems to be dead areas where there shouldn't be dead and detects mouseovers were it shouldn't. Same goes goes for clickable area of the button image. Go here and click on the one button - http://www.agile-x.com/bridgeway/ then try the buttons at the bottom of the window that pops up in Firefox and IE. Thanks. Similar TutorialsHello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. Hello, Having issuse with the browsers. Firefox I am all good but when I look at IE7 one page stops reading my CSS. I have NO idea y. PLEASE HELP!!! Hello, My website works fine in IE but when i open it in Firefox the small square images don't show up - can anyone give advice on what is causing this and a fix for it? http://www.turbulenceurbanwear.com/leilani.htm Thanks for your help Using the following code column within my datagrid. It gives me different results within firefox and IE. It should show some text and then the image should appear after the text. Within IE 7 it works fine but within firefox 3.6.10 the image is directly over the text. I'm not using a CSS file. This is a page I inherited and I'm asked to fix this. Any help would be appreciated. Code: <asp:templatecolumn headertext="Name" headerstyle-width="90px" sortexpression="varName">
<itemtemplate>
<asp:label width="10" id="lblName" runat="server">
<%# DataBinder.Eval(Container.DataItem,"varName")%>
</asp:label>
<img src='/Images/Info16x16.gif' border=0 />
</itemtemplate>
</asp:templatecolumn>
I know that means I have some errors in my code, but Im having trouble spotting them. The background isnt working right in Firefox and Opera. Link: http://killinghookers.net (Code has been changed slightly. View the source on the page for the latest code) For some reason as well, the copyright information isnt staying at the bottom of the page but is floating left of the main content under the right nav column. After messing around this is what I have: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Title" content="RSGOD.NET HOME" />
<meta name="author" content="I Hate My User Name">
<title>RSGOD.NET HOME</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="page">
<div id="logo"></div>
<div id="nav">
<ul>
<li><a href="/" title="Home">Home</a></li>
<li><a href="http://www.killinghookers.net/forum" title="Visit The Forum">Forum</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
<li><a href="#" title="#">Nav Item</a></li>
</ul>
</div>
<div id="side_left">
<div id="side_cat_title">
Navigation
</div>
<font color="#000099"><p>Home</p></font><br />
<p><b>Other Important Sections:</b></p>
<p> · <a href="http://www.killinghookers.net/forum" title="forum">Forum </a></p>
</div>
<div id="center">
<div id="cat_title">
News
</div>
Here's some news :)
</div>
<div id="side_right">
<div id="side_cat_title">
Useful Links
</div>
<p>· <a href="http://www.killinghookers.net/forum/index.php?act=Reg&CODE=00" title="Register to Enjoy the Benifits of Killing Hookers!"> Register </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?act=UserCP&CODE=00" title="Visit Your Profile"> My Controls </a></p>
<p>· <a href="http://www.killinghookers.net/forum" title="Visit the Forum"> Forum </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=36" title="Need a Game? Visit the Games Section!"> Game Downloads </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=39" title="Visit for the Best Movies!"> Movies </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=market" title="Market"> Store </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=sotw" title="Sig Of the Week"> Sig of the Week </a></p>
<p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=7" title="Visit for Awesome Music!"> Music Downloads </a></p>
</div>
<div id="footer">
<p>
©2007 Killing Hookers.net
<br />
Coding Help (Lots!) by <a href="http://bbmodding.com/about.php" title="I Hate My User Name's Website">I Hate My User Name</a> <- Super Tech :)
</p>
</div>
</div>
</div>
</body>
</html>
Code: /*
+---------------------------------------------------------------+
| |
| CSS and HTML Designed by I Hate My User Name |
| Contact: ihatemyusername [at] hotmail.com |
| Do not reuse without my permission! |
| |
+---------------------------------------------------------------+
*/
body {
margin: 0px;
padding: 0px;
height: 100%;
/*Have to reset those terrible browser defaults*/
background-color: black;
width: 940px;
margin-left: auto;
margin-right: auto;
}
#wrapper {
width: 940px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*Creates our fixed width and the margins center it*/
background-image: url("images/wrapper.png");
/*Borders*/
}
#page {
width: 922px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*This has the actual page centered between the borders*/
background-color: black;
font-family: verdana;
font-size: 12px;
color: white;
}
#logo {
width: 922px;
height: 200px;
background: url("images/logo.png");
}
#nav {
width: 922px;
height: 28px;
background: url("images/nav_bg.png");
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
font-family: verdana;
font-size: 12px;
color: black;
background-color: white;
}
#nav ul {
margin: 0px;
list-style: none;
display: block;
float: left;
padding-left: 0px;
margin-left: 0px;
}
#nav li {
margin: 0px;
list-style: none;
display: block;
float: left;
width: 99px;
height: 22px;
padding-top: 6px;
padding-left: 0px;
margin-left: 0px;
border-right: 1px solid #808080;
text-align: center;
}
#nav a {
color: #333333;
text-decoration: none;
}
#nav a:hover {
color: black;
text-decoration: underline;
}
#side_left {
float: left;
width: 150px;
height: auto;
margin-top: 10px;
margin-left: 5.5px;
margin-right: 5.5px;
background-color: white;
color: black;
}
#center {
float: left;
width: 596px;
height: auto;
margin-top: 10px;
background-color: white;
color: black;
}
#side_right {
float: left;
width: 150px;
height: auto;
margin-top: 10px;
margin-left: 5.5px;
margin-right: 5.5px;
background-color: white;
color: black;
}
#cat_title {
width: 591px;
height: 19px;
background: url("images/cat_title.png");
font-size: 12px;
padding-top: 5px;
padding-left: 5px;
border-bottom: 1px solid #808080;
}
#side_cat_title {
width: 150px;
height: 19px;
background: url("images/side_cat_title.png");
font-size: 12px;
padding-top: 5px;
border-bottom: 1px solid #808080;
text-align: center;
}
#footer {
width: 940px;
height: 28px;
margin-left: auto;
margin-right: auto;
/*Creates our fixed width and the margins center it*/
background-image: url("images/footer_bg.png");
}
#footer p {
text-align: center;
font-family: verdana;
font-size: 10px;
color: white;
/*Borders*/
vertical-align: bottom;
height: 28px;
}
Help much appreciated. I was making the template for my friend and didnt realize the Firefox bug. Hi guys, I've been working on a website for a friend for a while now and thought I had it complete. That was until I opened it with IE! Things don't look right in IE - and also IE crashes when some pages are loaded. Any chance you could look at this page: http://www.flatvision.name/de/index.php in both IE & Firefox and offer some advice as to why it does what it does? Thanks very much - help and advice much appreciated. ! Leigh Hi Everyone- I'm hoping someone out there might be able to solve a problem I've been having with my site for a number of years. The site was designed for IE but with the growing popularity of Firefox and Safari (to name a few), I want to insure that it works properly with those browsers. For the most part, it does -- except when displaying a background image in a table. For example - look at this page: http://www.cygnus-x1.net/links/rush/...anentwaves.php When viewed in I.E., the grey background image with the woman displays properly, as does the full image of the album cover within. However when viewed in Firefox or Safari, the background image repeats near the bottom for about 20 pixels. The problem also exists on a page like this one: http://www.cygnus-x1.net/links/rush/lyrics.php Where the brown background image which includes the words "Rush Lyrics" displays properly in I.E. but seems to repeat for 20 pixels in FF. This one's been driving me crazy for years and, due to some recent changes I've been making, it's come back to haunt me. If anyone has any suggestions as to why this is happening and what I can do to remedy it, I would greatly appreciate it... Thanks so much. Hi, I'm just learning html and I'm creating my website in Frontpage 2003. I looked in IE6 and my individual pages are exactly how I want them to look. However, viewing the same pages in Firefox presents me with a problem I'm not sure how to correct. It has to do with the center table. I originally copied and pasted the contents from Excel into the table (which I think was a mistake now). My workaround to this was copying and pasting the contents in the table into Notepad; and also shortening the length of each line; and then re-pasting the contents back into the table. It looks o.k. in Firefox but the alignment is no longer "justified". Can someone please tell me what I should be doing in the html code here? To see what I mean please open the link below in both IE and Firefox. http://www.prosperityteachers.com/ne...ew_thought.htm Much appreciated! Hey all, I was wondering if anybody had any pointers on this website I've been building. It looks alright so far in Firefox, but I've had some issues in IE. The link is: http://www.totaros.com/totaros new/index.html Specifically, -The image distortion on the menubar-what are the best types of images to save these as for compatibility in IE? -The menubar not resizing in IE with different resolutions -Aligning text next to pictures (such as on the Entertainment page). This works in FF, but not in IE. -Any other problems noticed. Thank you! Hi, I'm pretty sure there is a simple way of doing this but I have tried and cannot get great results. I want to be able to have the lower right logo on this page be clickable to a webpage. Thanks! Hi all, first of all i`m new here and my HTML experience is limited although I do work in the IT industry. Iv been asked to look at a piece of software called Proxy Pick which enables users to choose proxy information on thier laptops according to where they are i.e. at home or at work. Proxy Pick allows you to design your own custom inferface using HTML which im in the process of doing I`d like the options to be displayed as clickable images, and when clicked it enters the correct proxy details for you. at present I have the images which just link to a random website. I also have radio buttons which do enter the proxy information correctly when used, but obviously I want to have these radio button options as pictures. Can anyone help? Thanks Hi everyone, I'm trying to make tables clickable, simple right? Well I've tried all the solutions I could find on the net and none of them seem to work. If you look at my site (Bottleweb.org), I want to make the two tables (green and blue ones) on the main window clickable. I'd also like to change the background color and font color on mouseover. I'm already using java based rollovers to do the buttons. If you know how to do this please include all the java scripts I'll need too. Thanks Strange I'm going nuts trying to figure out what is causing this. On this page I have 4 links at the top (courses, reiki, etc) http://gocreatesocialmedia.com/fb/He...age/index.html two of them actually Link....and 2 don't. I have the links formatted exactly the same for all. Any suggestions on how to correct this ? HI 1) Is there a way to make a div with a logo and text clickable? 3) I read it was bad for seo? 2) Is there a way to make the background image change on hover? This is css or javascript ? Thanks for reading Does anyone have any easy javascript code for making clickable banners? Hey, i want to make an iframe Object invisible but still clickable. Is that possible, and if yes, how? Im using Dreamweaver CS5 greetings Phil Hi everyone, hope everyones well. I am desigining and coding an advanced myspace (the link to the space is: www.myspace.com/3face) and have ran into a problem, basically, The navbar on the page is set up using strategically placed divs for each button (i was trying to use tables but to hide the rest of the myspace content which I didnt want, the code used hide my table as well, so i couldn't use tables for it) So i am using DIV's for it now the problem I have is that some of the divs and parts of some of the divs arent clickable. I would change the z-index of them and it would fix it for that particular div but then would mess up on others, right now the divs which aren't/partially clickable a * Film * Favourites * Myspace TV the code for the navbar links is as follows: <div class="Home-navbar"> <div style="position: absolute; width:168px; left:153px; z-index:2; overflow auto; top: 1892px; height:42px; visibility: visible; background-color:transparent;"> <A href=http://home.myspace.com/index.cfm?fuseaction=user> <img src="http://i25.photobucket.com/albums/c99/3face/Home-navbar.jpg" style="border-style: none"/> </div> <div class="Browse-navbar"> <div style="position: absolute; width:168px; left:227px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://browseusers.myspace.com/Browse/Browse.aspx?z=1"> <img src="http://i25.photobucket.com/albums/c99/3face/Browse-navbar.jpg" style="border-style: none"/> </div> <div class="search-navbar"> <div style="position: absolute; width:168px; left:319px; z-index:2; overflow auto; top: 1895px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://search.myspace.com/index.cfm?fuseaction=find"> <img src="http://i25.photobucket.com/albums/c99/3face/search-navbar.jpg" style="border-style: none"/> </div> <div class="favourites-navbar"> <div style="position: absolute; width:168px; left:676px; z-index:2; overflow auto; top: 1893px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://favorites.myspace.com/index.cfm?fuseaction=user.favorites"> <img src="http://i25.photobucket.com/albums/c99/3face/Favourites-navbar.jpg" style="border-style: none"/> </div> <div class="film-navbar"> <div style="position: absolute; width:168px; left:471px; z-index:2; overflow auto; top: 1891px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://film.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Film-Navbar2.jpg" style="border-style: none"/> </div> <div class="mail-navbar"> <div style="position: absolute; width:168px; left:538px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://messaging.myspace.com/index.cfm?fuseaction=mail.inbox"> <img src="http://i25.photobucket.com/albums/c99/3face/Mail-navbar.jpg" style="border-style: none"/> </div> <div class="blog-navbar"> <div style="position: absolute; width:168px; left:600px; z-index:2; overflow auto; top: 1893px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://blog.myspace.com/index.cfm?fuseaction=blog.controlcenter"> <img src="http://i25.photobucket.com/albums/c99/3face/Blogs-navbar.jpg" style="border-style: none"/> </div> <div class="groups-navbar"> <div style="position: absolute; width:168px; left:217px; z-index:2; overflow auto; top: 1919px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://groups.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Groups-navbar.jpg"style="border-style: none"/> </div> <div class="invite-navbar"> <div style="position: absolute; width:168px; left:403px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://invites.myspace.com/index.cfm?fuseaction=invite"> <img src="http://i25.photobucket.com/albums/c99/3face/invite-navbar.jpg" style="border-style: none"/> </div> <div class="myspacetv-navbar"> <div style="position: absolute; left:401px; z-index:2; overflow auto; top: 1919px; visibility: visible; background-color:transparent;"> <A href="http://vids.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/MyspaceTV-navbar.jpg" style="border-style: none"/> </div> <div class="music-navbar"> <div style="position: absolute; width:168px; left:530px; z-index:2; overflow auto; top: 1920px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://music.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Music-navbar.jpg" style="border-style: none"/> </div> <div class="comedy-navbar"> <div style="position: absolute; width:168px; left:615px; z-index:2; overflow auto; top: 1920px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://comedy.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Comedy-navbar.jpg" style="border-style: none"/> </div> <div class="classified-navbar"> <div style="position: absolute; width:168px; left:710px; z-index:2; overflow auto; top: 1920px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://classifieds.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Classified-navbar.jpg" style="border-style: none"/> </div> <div class="forum-navbar"> <div style="position: absolute; width:168px; left:788px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://forum.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Forum-navbar.jpg" style="border-style: none"/> </div> <div class="events-navbar"> <div style="position: absolute; width:168px; left:315px; z-index:2; overflow auto; top: 1918px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://events.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Events-navbar.jpg" style="border-style: none"/> </div> If someone can help me and explain why it happens like this (im gonna be doing a computer science degree next year so I want as much knowledge as poss.) I would really appreciate it! Thanks Hi everyone, I'm new here and a total newbie - so please bear with me! I want to create a table with 3 rows x 5 columns: Row 1: basic text Row 2: clickable image Row 3: clckable text The image in row two would be in the forum gallery, but the destination when the user clicks the image should be to the bands website. No matter what I do, i can't get a clickable image to sit into the table! If anyone could help with this simple piece of code I would really appreciate it. Thanks, Dave http://www.grannysoycandles.com The menu links on the left side are working in IE but not in FF. Its only when they are in the "buttons" div. I put one in the "body" div and it worked fine. Any ideas why? Internet Explorer works fine Firefox does not weird...usually its the other way around... Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Granny Soy Candles</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"> :active, :focus{ outline:none; } </style> </head> <body bgcolor=#E0E0E0> <div id="div1"> <div id="banner"> <img src="http://www.grannysoycandles.com/images/banner.jpg"> </div> </div> <div id="div2"> <div id="body"> <center><b><h3>Welcome To Granny Soy Candles</h3></b></center> Welcome to the new home of Granny Soy Candles. Please be patient while the site is updated and created. We will be up and running within the next few weeks. Very soon we will be providing you with quality soy candles that are better for your home and your family. Please come back and visit us soon! <br> </div> <div id="buttons"> <a href="http://www.grannysoycandles.com/"><img src="http://www.grannysoycandles.com/images/home1.jpg" border="0"></a> <br> <a href="http://www.grannysoycandles.com/candles.html"><img src="http://www.grannysoycandles.com/images/candles0.jpg" border="0"></a> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> </div> <div id="div3"> </div> </body> </html> Quote: #div1 { background: url(images/bgheader.jpg) repeat-x; float: left; width: 915px; height: 165px; } #div2 { background: url(images/bgmiddle.jpg); background-repeat: repeat; float: left; width: 915px; } #div3 { background: url(images/bgfooter.jpg) repeat-x; float: left; width: 915px; height: 51px; } #banner { padding-top: 30px; padding-left: 1px; } #buttons { padding-top: 30px; } #body { position: absolute; width: 675px; padding-left: 220px; padding-top: 15px; } Hello everyone I'm usually good at figuring stuff out, but this time I hit a doozy and can't seem to figure it out, hopefully someone here can help me. I have a gallery blog which is using this theme: http://www.elegantthemes.com/preview/eGallery/ my question is how can I make it so that users can click the thumbnail and go to the post rather than clicking the arrow on the bottom right. I've narrowed it down to <div class="thumbnail-div" style="background-image: url(<?php bloginfo('stylesheet_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumb; ?>&h=159&w=190&zc=0);"> but I don't now how to make them link to the post, any help would be great thank you. |
|||||||