PDA

View Full Version : Problems with browser compatability



darkannie
Dec 8th, 2004, 02:08 AM
I strived to come up with a way to provide a hover style element for image maps, and even looked all over the internet for a way to do this without javascript mouseover or flash, since it was going to be for a blog, where such script is usually not allowed. And even though I don't have an "image map" persey, it appears *looking* like an image map, but with a hover element that seems just a little impressive. To me anyway :D

What I did was background the original image of the map within a table, then used transparent gifs, and provided them with a hover style. The dotted border. I placed them one by one over the original hotspots, and voila! All you see when you move the mouse over the original hotspots is the dotted border.

However, I seem to be having problems getting IE and Netscape to display it properly. The border isn't a problem really. Both are displaying the border. My problem seems to be stemming from the pixels appearing smaller in Netscape and perfectly lined up in IE. I tried percentages, and for some reason (though working just dandy in IE) decided to play a goof in Netscape and dramatically enlarge the set width and height of the table, filling it up with the background image. Very frustrating. What can be suggested for compromising for both netscape and IE? See, I browse this live journal in netscape and I want it looking right for my own sake, but since so many people use IE, I don't want to deal with with poor navigation issues. I kind of want my cake and eat it too. We all know what a pain it is with all these different browsers not displaying a certain piece of code properly. It's very frustrating. And I don't even want to THINK about Mozilla. :mad:

So if anyone out there can give me some advise about my pixel problem, or perhaps knows a different way to get a hover style on an actual image map, and not a fake one like I made, then I'll love you forever.

ronaldb66
Dec 8th, 2004, 09:15 AM
We really need to see the code, you know...

Anyway: although the standards state that every element should support the : hover pseudo-class, IE of course doesn't. This can be fixed, though, using IE's own proprietary (oh, the sweet irony...) behaviours; just google for "whatever:hover" or "IE7".
With this, you can use the :hover peseudo-class on other elements besides links.

For your other problems an insight in the code is necessary; IE (what version?) can get the box model wrong under certain circumstances, messing up your carefully planned layout. By the way: Netscape (7.x), Mozilla, Firefox, Opera, etc. most likely get it right; it's IE that usually throws a spanner in the works.

darkannie
Dec 8th, 2004, 10:40 AM
Ok, I think I figured out what the problem is. The solution however is not so clear.

In IE the transparent gifs are being hovered at their full width and height. In netscape, the transparent gifs are only getting the outline half-way across, which would explain that no matter how many ways I tried to heighten the image with html, the border would still only wrap it half-way. That doesn't make much sense to me.

Perhaps if I made the transparent gifs exactly 30 pixels high and 200 pixels wide, then the hover will outline it fully. Thanks for the suggestions, though. :thumbsup:

ronaldb66
Dec 8th, 2004, 01:34 PM
Okay, sorry about that...
You don't need to make your transparent gifs, or spacer gifs as they're commonly known, actually as large as you want them; you can achieve this by setting their width and height attributes to the desired values. The gif itself can be as small as a single pixel.

If your gifs don't align properly, maybe you need to adjust the vertical alignment. It is possible that IE applies a different default value than some of the other browsers; by setting it explicitly, you at least eliminate these differences. You could substitute your transparent gif by a visible one during the test phase so you can see exactly what's going on.

In all of this, be aware that the use of spacer gifs in itself is regarded by many as an unsavory, unadvisable practice; take it as you wish.

darkannie
Dec 8th, 2004, 01:47 PM
The alignment isn't the problem. When I highlighted the images, they were aligning perfectly straight and even, but the border wasn't spaning the full height of the image in netscape, just in IE. It's like this. Regardless of how tall I set the height of the gifs, the border remains at 10 percent height. I'm really confused at this because it's spanning the width, just not the height. Because of this, I can't get them to hover compatably in both IE and netscape.



here's the style of the border:

<style type="text/css">
<!--

a:hover
{
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: #FFFF99;
}

-->
</style>


And here is the code for the fake map:



<table border="0" height="249" width="700"><tr>
<td background="http://img.photobucket.com/albums/v171/ljmattstone/treybanner.jpg" valign="top">
<img src="http://img.photobucket.com/albums/v171/ljmattstone/spacer.gif" border="0" width="200" height="65"><br>
&nbsp;<a href="/users/_treyparker_"><img src="http://img.photobucket.com/albums/v171/ljmattstone/spacer.gif" border="0"></a><br>
&nbsp;<a href="/users/_treyparker_/friends"><img src="http://img.photobucket.com/albums/v171/ljmattstone/spacer.gif" border="0"></a><br>
&nbsp;<a href="/users/_treyparker_/calendar"><img src="http://img.photobucket.com/albums/v171/ljmattstone/spacer.gif" border="0"></a><br>
&nbsp;<a href="/userinfo.bml?user=_treyparker_"><img src="http://img.photobucket.com/albums/v171/ljmattstone/spacer.gif" border="0"></a><br>
&nbsp;<a href="/allpics.bml?user=_treyparker_"><img src="http://img.photobucket.com/albums/v171/ljmattstone/spacer.gif" border="0"></a></td>
</table>


Keep in mind that I set the width and height in my image software program to see if that would make a difference when in fact it doesn't.

here's the link.

http://www.livejournal.com/users/_treyparker_

Try viewing in both netscape and IE. You'll notice they're a little off their mark in IE and that's because of the hover border issues. I'm far too anal to let myself be happy with that. So if you have any further suggestions I'm all eyes.

hemebond
Dec 8th, 2004, 10:00 PM
This is an awful way of creating a menu, but I can't be bothered redoing the whole page.You're basically throwing accessibility out the window.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>48603</title>
<style type="text/css">
#header {
background-image:url(http://img.photobucket.com/albums/v171/ljmattstone/treybanner.jpg);
width:700px;
height:249px;
}

#header ul {
list-style:none;
padding:65px 0 0 0;
margin:0;
}
#header li {
padding:0;
}
#header a:link {
display:block;
border:1px solid transparent;
width:200px;
height:34px;
}
#header a:hover {
border:1px solid #ff9;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="/users/_treyparker_"></a></li>
<li><a href="/users/_treyparker_/friends"></a></li>
<li><a href="/users/_treyparker_/calendar"></a></li>
<li><a href="/userinfo.bml?user=_treyparker_"></a></li>
<li><a href="/allpics.bml?user=_treyparker_"></a></li>
</ul>
</div>
</body>
</html>And is this really Trey Parker's blog?

darkannie
Dec 9th, 2004, 12:01 AM
Oh wow, you've heard of him. No, it's just a Trey Parker layout is all. I'm a huge fan. And I'm not going to worry too much more about it. The layout will be mostly for myself since most Live Journal users read the latest entries from their own friends pages in their journal. I'm just ridiculously anal is all.

I like my menu just fine. All I'm concerned about is getting the hover effect to work a little more compatably. And I believe that's the advise I asked for.

hemebond
Dec 9th, 2004, 12:35 AM
Oh wow, you've heard of him. No, it's just a Trey Parker layout is all. I'm a huge fan.You're very creepy is what you are.

darkannie
Dec 9th, 2004, 12:55 AM
How about we save the opinions of me for when I ask for them. Do you have any ability to stay on subject or do you have some kind of short attention span? First off, I didn't ask your opinion of my lay out and quite frankly couldn't care less of it. Nor did I ask you to offer a review of my own person either, or your preconceived notions of the kind of person you believe me to be in the colosal amount of time you have spent in my presence, or all the books of darkannie you studied in college, or the many hours you've submitted questions to all the people who know me. Since you obviously DID do those things, I'll be more than happy to get further insight into the term paper of me you certainly plan to write with all this information you have of me to be able to deduce the kind of character I am. A "creep." Wow, you're amazing.

Now, if the answer is at all possible for you, I'd like to ask... AGAIN... what I can do to get the border around the transparent gifs to cover the entire height and width of the images in netscape. If this is not possible, then I'll be perfectly happy to throw away the effort and go back to a regular image map. I just wanted to try something I thought about one day, made the effort and was a little excited that I made it work. But since you, Mr. or Mrs. "Hemebond", are incapable of talking about anything else but your unsolicited and uneducated opinions of me, I'd like to maybe open the floor to someone else who actually IS WILLING to answer the question.

Donkey
Dec 9th, 2004, 01:33 AM
Darkannie, don't you think your post above was just every so slightly an over-reaction to what seemed to me to be a friendly jibe? Try and lighten up a tad, or nobody will want to help you incase they also become victim to an outburst.

BTW I am only attempting to be helpful ;~}

darkannie
Dec 9th, 2004, 01:42 AM
An over reaction would be to go into a cussing fit. I think it was only fitting what I wrote since nothing this person has said has been helpful in the least and I'm merely saying that I'd like to get some kind of help about this delimma, which I haven't yet. You can understand the frustration.

And if you'll recall, I haven't been rude to this person like this person has been to me.

hemebond
Dec 9th, 2004, 03:34 AM
Hehehe. Fun. I read your site and that Geocities page where it says you guys like to pretend to be homosexual celebrities. I think I've read enough.

Oh, and my code above does exactly what you asked for sans the unnecessary images.

darkannie
Dec 9th, 2004, 03:51 AM
Yeah, I don't think a bullet list is what I had in mind. Your code does nothing for me, no thank you.

I don't have him as a homosexual. In fact, he's married to Pam Anderson in Must Be Pop. This character has never been played as a homosexual. It just boggles me the depth of your perceptive abilities. And once more, you've proven that you cannot for the life of you stay on topic.

Congradulations, you're an annoying prick.

hemebond
Dec 9th, 2004, 04:34 AM
LOL.

Did you even try my code? It's a list because that's what you have there. A list of links. My code does exactly what you want.

darkannie
Dec 9th, 2004, 05:29 AM
I might check into it. I'm always on the look out for any new styles I can find. I think I'll just forget about it and go back to the image map. I just thought I would try something out.

rmedek
Dec 9th, 2004, 08:12 AM
I don't get it.

I used Hemebond's code, and it seems to work perfectly; i.e., displays the border at the correct height and width when hovered over. In Netscape, too.

Just curious why you're not willing to try it? :confused:

ronaldb66
Dec 9th, 2004, 03:03 PM
I can think of a few...

Anyway: whichever way you use, it would probably be a good idea to separate the menu from the large header image; that way you have more control over what's going on there. Whether you use a table for the individual menu items (not such a good idea) or a list (much more elegant), it should save you some hassle.

Please let us know if you're willing to give it a try; there'll be plenty helping hands :thumbsup: .

sage45
Dec 11th, 2004, 12:34 AM
Thread has served it's purpose.

rmedek: The great thing about a place such as this is that you can choose whichever submission you would like to work with. It does not matter whose as long as it satisfies the needs of the requester.

hemebond: Please refrain from involving personal opinion in your discussions. If you would like to submit code to assist that is perfectly fine, however, remember that this is a site that is accessed by people of all beliefs and ages. It is important to remain professional. A little kidding is fine just so long as it does not offend. If it does offend then an apology should be made and you should not take offense that someone else took offense to what you said.

Closing this thread...

-sage-