Html text - works on IE, but looks terrible in firefox

__plec__ · 11-01-2010 4:30pm #1

Hi, just doing a menu with a hover over menu. In internet explorer the images show when the mouse is over the menu, and the links are working too

the images shown when hovering over the link are as follows
Link 1 = Image 1
Link 2 = Image 2
Link 3 = Image 3

However with firefox this is what happens
Link 1 = Image 1 and Link 2
(Link 2 only shows when the mouse hovers over Link 1)
(Link 3 doesnt feature).

Up till i tried to put in this menu my website looked the same both on internet explorer and Firefox.Im basically making this up as i go along,so please excuse my ignorance,i really have no understanding as to how html acts differently is both web browsers.
Im attaching the code as i have it, would be fantastic if someone could help.

Thanks

<html>
<head>
<title>Image Hover</title>
<script type="text/javascript">
function Show_Image(IDS) {
document.getElementById(IDS).style.display = "block";
}
function Hide_Image(IDS) {
document.getElementById(IDS).style.display = "none";
}
</script>
</head>
<body>
<a href=" page14.html"
onMouseOver=Show_Image('Img1') onMouseOut="Hide_Image('Img1')"> <small> Project 1 </small><BR><small> Sample</small></BR> </a>
<span id="Img1" style="display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="Image 1.jpg " alt=" <img src=" Image 1.jpg" alt=" Image 1.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></span></div>
<br>
<a href=" page15.html"
onMouseOver=Show_Image('Img2') onMouseOut="Hide_Image('Img2')"> <small> Project 2</small><BR><small> Sample</small></BR> </a>
<span id="Img2" style="display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="Image 2.jpg " alt=" <img src=" Image 2.jpg" alt=" Image 2.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></span></div>
</br>
<a href=" page15.html"
onMouseOver=Show_Image('Img3') onMouseOut="Hide_Image('Img3')"> <small> Project 3</small><BR><small> Sample</small></BR> </a>
<span id="Img3" style="display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src=" Image 3.jpg " alt=" <img src=" Image 3.jpg" alt=" Image 3.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></span></div>
</body>

</html>

Axwell · 11-01-2010 5:51pm

Have you a live link?

Liam Byrne · 11-01-2010 8:04pm

Badly-formed HTML might be the cause

<img src="Image 1.jpg " alt=" [b]<img src=" Image 1.jpg" alt=" Image 1.jpg"[/b] width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></

HandWS LTD · 11-01-2010 9:06pm

[HTML]<span id="Img1" style="display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="Image 1.jpg " alt=" <img src=" Image 1.jpg" alt=" Image 1.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></span></div>
<br>
<a href=" page15.html"
onMouseOver=Show_Image('Img2') onMouseOut="Hide_Image('Img2')"> <small> Project 2</small><BR><small> Sample</small></BR> </a>
<span id="Img2" style="display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="Image 2.jpg " alt=" <img src=" Image 2.jpg" alt=" Image 2.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></span></div>
</br>
<a href=" page15.html"
onMouseOver=Show_Image('Img3') onMouseOut="Hide_Image('Img3')"> <small> Project 3</small><BR><small> Sample</small></BR> </a>
<span id="Img3" style="display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src=" Image 3.jpg " alt=" <img src=" Image 3.jpg" alt=" Image 3.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></span></div>
</body>[/HTML]

From the following code:

[HTML]<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="Image 1.jpg " alt=" <img src=" Image 1.jpg" alt=" Image 1.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></span></div>[/HTML]

1) When you start with a "div" tag, you should always close with the div tag. In your case e.g [HTML]<div><span></span></div>[/HTML]
2) Also with this code which Liam Byrne explained....its badly coded. In HTML an image should not be inside another image. e.g [HTML]<img src="Image 2.jpg " alt="" /> <img src="Image 3.jpg " alt="" />[/HTML]
3) Make sure your image file names do not have a space in them and do not use capital letters (in case your using linux servers). e.g

image2.jpg

Fix these up first and then show the problems if there is any.

__plec__ · 12-01-2010 10:42am

Thanks for the comments.I know i need to go back through the text and try and get an understanding of what everything in it means.Im sure the errors you both pointed out are quite basic,and even at that i still dont have a full understanding of them.Will get back to say how im getting on.

Thanks a mil

__plec__ · 12-01-2010 4:21pm

Ok,im back

Thanks guys for the previous input.Ive tidied up the html (to the best of my knowledge at least) and its still working perfectly on internet explorer,and is very close to working on the other browsers.

My only problem now is that in both Firefox and Safari the mouseover images wont show.All the text is where i want,and on safari the mouseover works,but only the outline of the image appears with just the image path in text,rather than the picture i want to show.

Just wondering if there is something in firefox and safari that block mouseover images?I have tried changing the path so that there are no capital letters or spaces,but the outcome is the exact same.Have also tried changing 'alt' to 'title' as i was told this might have an effect.However with the same result.

Am really sorry that i cant put it online to show you exactly,i understand that it makes my query alot harder to answer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<title>Image Hover</title>
<script type="text/javascript">
function Show_Image(IDS) {
document.getElementById(IDS).style.display = "block";
}
function Hide_Image(IDS) {
document.getElementById(IDS).style.display = "none";
}
</script>
</HEAD>
<BODY><a href=" page14.html"
onMouseOver=Show_Image('Img3') onMouseOut="Hide_Image('Img3')"> <small> Meadowlands Community</small><BR><small> Facility, Dun Laoghaire</small></BR> </a>
<span id="Img3" style="display:none">
<div

style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="G:\cga\3.jpg "alt="G:\cga\3.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></div></span>

</br>

<a href=" page15.html"
onMouseOver=Show_Image('Img2') onMouseOut="Hide_Image('Img2')"> <small> Lambs Cross Community </small><BR><small> Facility, Sandyford</small></BR> </a>
<span id="Img2" style=" display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="g:\cga website\4.jpg "alt="g:\cga website\4.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></div></span>

</br>

<a href=" page15.html"
onMouseOver=Show_Image('Img4') onMouseOut="Hide_Image('Img4')"> <small> Sallynoggin Community </small><BR><small> Facility, Sallynoggin</small></BR> </a>
<span id="Img4" style=" display:none">
<div
style="
top: 40;
left: 260;
position: absolute;
z-index: 1;
visibility: show;"><img src="G:\CGA Website\5.jpg "alt="G:\CGA Website\5.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" /></div></span>

</BODY>
</HTML>

Ph3n0m · 12-01-2010 4:27pm

if you have uploaded this to a server or a hosting company it wont work as your images are being reference like the example below

<img src="G:\cga\3.jpg "alt="G:\cga\3.jpg" width="580" height="450" hspace="10" vspace="10" align="left" border="0" />

That means it would only work on your own personal computer - you will need to upload the images and change the "src" location of the images from G:\cga\3.jpg to images/3.jpg

The above will only work if you upload the images into a folder you create called images

__plec__ · 12-01-2010 4:37pm

Thanks Ph3n0m, i understand that.

Im still working on it from my personal computer,and they're not showing up on this.Havnt gotten close to putting it on a server.Maybe i should think about my folder layout now,rather than later when ive lots done,hadnt thought about that.

However,as i said,its on my pc,and the images still wont show.They are showing on IE so the paths arent the problem (well i assume they arent)

Thanks for the advice though

__plec__ · 12-01-2010 5:48pm

Ok,just realised there is an error console on firefox.

I went through it and this is the message that appeared
"firefox error in parsing value for property 'visibility'"

Iv looked at the tag i have for visibility but cant make out whats wrong.
Sorry if this is basic stuff,think my brain is fried from all this html text,haha

Liam Byrne · 12-01-2010 7:33pm

There's a trailing space on all of the image filenames

img src="G:\cga\3.jpg "alt="G:\cga\3.jpg"

It should be

img src="G:\cga\3.jpg" alt="G:\cga\3.jpg"

HandWS LTD · 12-01-2010 9:19pm

Another thing. The "Alt", is only the name or title of the image used so no need for the full file name to be written in there. Once you roll over the image on your web browser the "alt" name will be displayed. This is the same for <a> tags but you should not use "alt" for them, instead you should use "title".

The new errors Liam Byrne mentioned should sort out your images being displayed.

__plec__ · 13-01-2010 2:09pm

Thanks again guys for your input,really appreciate it.

Ive tried out the few things you mentioned,yet the images still wont appear.
However,because of you i feel what i have is alot tidier,and it is working perfectly on IE so thats something.I think im just going to give it a break for a day or two,concentrate on other aspects of the site,and then come back to it with hopefully a fresh approach.

Thanks again for all the advice

Benzino · 13-01-2010 3:06pm

__plec__ wrote: »

Thanks again guys for your input,really appreciate it.

Ive tried out the few things you mentioned,yet the images still wont appear.
However,because of you i feel what i have is alot tidier,and it is working perfectly on IE so thats something.I think im just going to give it a break for a day or two,concentrate on other aspects of the site,and then come back to it with hopefully a fresh approach.

Thanks again for all the advice

I copied and pasted your code into a new html file (changed the images obviously) and it worked fine for me in firefox.

Have you changed the code much since? if so, post it up again.

Maybe try changing 'onMouseOut' to 'onmouseout' and the same for over, dunno if that'll make a difference or not tho.

Edit: Also you have:

onMouseOver=Show_Image('Img3')

I think that should be

onmouseover="Show_Image('Img3');"

__plec__ · 13-01-2010 8:52pm

the code has only been tidied up a little,still is quite similar.

Thats very interesting that its worked for you,maybe il try it out on a few different computers and see if it works.As i said its working perfectly on IE,and on safari the outline of the image appears,but not the image.Any changes ive made have just had the same outcome.

Thanks for testing it out,maybe there is something up with firefox on my pc,will test it out tomorrow,thanks

Html text - works on IE, but looks terrible in firefox

Comments