Jump to content


Photo

Rollovers not showing in IE and Safari - workarounds?


  • Please log in to reply
11 replies to this topic

#1 Bestbet

Bestbet

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 17 February 2012 - 05:11 PM

Hello, This is my first post, so I hope its in the right place.

I am currently designing a graphic heavy website - it is for an artists project.

It involves over 50 silouhettes of people and 50 stories - one for each person. These are laid out horizontally, as if the people where sitting in a long row. When you place a cursor over the figure the story displays)

I attempted to layout this in CSS and found my skills were not advanced enough. (the main problem being the exact placement of people and stories. So I resorted to using Javascript rollovers.

The rollovers seem to display fine in Firefox and Chrome but they do not display in Internet Explorer or Safari.

Is there a way to make IE/Safari display the rollovers ? Is my rollover code wrong?
I would be happy to try CSS again if someone could suggest a surefire way of doing it.

I don't know if I am allowed to post a link here, but if someone could take a look I can send them the link.

Any help on this would be much appreciated,

Thank-you.

#2 mteam

mteam

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,198 posts
  • Gender:Male
  • Location:Manchester
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 17 February 2012 - 07:44 PM

Its allowed, post a link I'll have a look

#3 Bestbet

Bestbet

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 19 February 2012 - 09:59 PM

Its allowed, post a link I'll have a look



Great, Thanks this is the link - http://www.travelogue.ie/NewDesign.htm

#4 modipeluri

modipeluri

    Forum Newcomer

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:Designer/Coder

Posted 19 February 2012 - 10:32 PM

That seems like a hard way of doing this.

If I understood correctly you could just have those silhouettes positioned inside a div. Then in the same div you would add a paragraph element that has the text you want to display.

Then you'd just add something like this to your stylesheet:

div p {
visibility: hidden;
} 

div:hover p{
visibility: visible;
}

What this code does (should do, haven't tested) is to have your text hidden untill the user hovers over the div.

#5 mteam

mteam

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,198 posts
  • Gender:Male
  • Location:Manchester
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 19 February 2012 - 11:31 PM

This is the problem your not closing the style

<style type="text/css" media="screen"><!--
  body { margin: -10px 0 0 -10px; }
  html body { margin: 0; padding: 0; }
<style type="text/css">td img {display: block;}</style>


you open it then comment everything out try changing to this

<style type="text/css" media="screen">
body { margin: -10px 0 0 -10px}
html body { margin: 0; padding: 0}
td img {display: block}</style>


#6 Bestbet

Bestbet

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 21 February 2012 - 01:52 PM

That seems like a hard way of doing this.

If I understood correctly you could just have those silhouettes positioned inside a div. Then in the same div you would add a paragraph element that has the text you want to display.

Then you'd just add something like this to your stylesheet:

div p {
visibility: hidden;
} 

div:hover p{
visibility: visible;
}
What this code does (should do, haven't tested) is to have your text hidden untill the user hovers over the div.


Thanks a million for that. I went and tried it out :o) with some success but a few small problems.
New link is http://www.travelogu...ixedlayout.html

I have had some problems positioning the text and am not sure how to structure this. as you can see it is not to the left of the iamges as in the original design.

Also I would like the user to hover over the silhouettes themselves rather than the text for the text to appear.

my CSS knowledge is fairly basic I know, I have mainly being deconstructing things to see how they work, but my knowledge of how it fits together is a bit sketchy. I put the image and text in seperate divs because it seemed to work that way and not if they were in the same div. But even to me the CSS looks a bit bloated. any thoughts ? Many thanks.



THE CSS code

<style type="text/css">
<!--
#header {
  background: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 98px;
}
#div1 {
  background: #c2c2c2;
  position: absolute;
  top: 98px;
left: 0px;
  width: 844px;
  height: 508px;
}

#div1 p {
visibility: hidden;
} 


#div1 :hover p {
visibility: visible;
}


#div2 {
  background: #c2c2c2;
  position: absolute;
  top: 98px;
left: 844px;
  width: 1362px;
  height: 508px;
}

#div2 p {
visibility: hidden;
} 

#div2 :hover p {
visibility: visible;
}

-->
</style>


THE HTML


<body>
<div id="header">Header Section</div>
<div id="div1"><img style= "position:absolute; TOP:54px; LEFT:10px; width:348; height:454;"  src="silhouette1.png"> </style><div id ="div1 p"> <p> It was a fairly warm summer evening - actually balmy if you can believe it. We were staying at the Ardilaun Hotel in Galway, and were about a week into the coach tour. I had a big group of Canadians with me. I was sleeping in the buff because it was too warm for anything else. Like that, I went to the loo some time in the very early morning, maybe it was around 2:00 a.m. I was on the other side of the door and it closed behind me. Only I hadn't walked into the loo - I had walked out of my hotel room into the hallway! You see, during the busy tourist season, you wouldn't know where you are from one day to the next. Every hotel room starts to look the same. So I was wondering how I was going to manage this and hoping to see a porter somewhere. But it was very late at night. I started hearing voices - people were coming up the stairs. I think there was a wedding going on. I started looking down the hallway, this way and that. I spotted a door ajar. It turned out to be some sort of utility room or something, and would you believe, there was a big bunch of keys on the desk with a skeleton key amongst them. Luckily, I was able to run back into my room before being spotted.</p></div></div>
<div id="div2"><img style= "position:absolute; TOP:59px; LEFT:10px;width:427; height:449;" img src="silhouette2.png"></style> <div id ="div2 p">
<p>Back when I was a hackney driver, I got this call to pick up a lady at St. Vincent's Hospital. She came out wearing these slippers and seemed a bit upset. I brought her home to Bray. Coincidentally, about a week later I was in the same area and got a call to take her home again. Like before, she was wearing those slippers but dressed normally besides. I had to ask why she was wearing them. She told me she wore the slippers for comfort because she was in the hospital the entire day, every day visiting her sick husband. This broke the ice and she then proceeded to tell me their story. She was British, her husband was of Irish descent, and they used to live in the UK. A while back, he had wanted to discover his roots and made some progress - a minister helped him research his baptism and he made a trip over here to gather more information. He had what he called his "Irish box" with a few precious keepsakes. One item was a photograph of him on the shoulders of his grandfather walking outside the Gresham Hotel on O'Connell Street. The granddad had worked for Guinness as a cooper making those wooden barrels. His father had died very young in London. Anyway, they came to the end of the line and couldn't get any more information. However, they bought a place in Ireland and eventually settled here. When I heard about how the granddad was a cooper, it struck me because I know there weren't too many with that skill. So I told her, "Bear with me now. Don't say a thing 'til I ask you a few questions." First I asked her, "Is it possible your husband's father was killed while fighting a fire during the blitz in London?" Then I asked, "Is it possible your husband's name is Campbell?" Well, that stunned her. It turns out, her husband was my first cousin - the son of my mother's only brother. The very next day, I contacted all my brothers and sisters. Every single one of them, all four brothers and three sisters, and their children went up to St. Vincent's Hospital - it was like rent-a-crowd. We had a big visit with him, we told her husband all kinds of stories and he showed us everything in his "Irish box". He died three days later and was buried surrounded by family. 
 </p></div></div>


</body>


#7 Bestbet

Bestbet

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 21 February 2012 - 01:54 PM

This is the problem your not closing the style

<style type="text/css" media="screen"><!--
  body { margin: -10px 0 0 -10px; }
  html body { margin: 0; padding: 0; }
<style type="text/css">td img {display: block;}</style>


you open it then comment everything out try changing to this

<style type="text/css" media="screen">
body { margin: -10px 0 0 -10px}
html body { margin: 0; padding: 0}
td img {display: block}</style>


Thanks for this MTeam, I made the corrections but the rollover is still not working in Safari on my machine. I don't have IE - so I will need to try it out on a PC before I can confirm that. I will get back to you on it.

#8 mteam

mteam

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,198 posts
  • Gender:Male
  • Location:Manchester
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 21 February 2012 - 05:26 PM

You've not got it the same as I posted

line 9 remove<!--

#9 Bestbet

Bestbet

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 21 February 2012 - 06:50 PM

You've not got it the same as I posted

line 9 remove<!--


Silly silly me - thanks for your patience - propped my eyes open this time !! It works in Safari. relief ....... thank you.

#10 modipeluri

modipeluri

    Forum Newcomer

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:Designer/Coder

Posted 21 February 2012 - 07:49 PM

I have had some problems positioning the text and am not sure how to structure this. as you can see it is not to the left of the iamges as in the original design.


I'd recommend you'll position the text inside the using either relative positioning or floats. For example:

div img {
float: left;
margin: 0 20px 5px 0;
}

Now your text should flow next to the image.

Also I would like the user to hover over the silhouettes themselves rather than the text for the text to appear.


I think this is a usability mistake since many users like to highlight the text while reading. Also, I can't think of a way to do this with CSS alone.

EDIT: Actually it is possible. Altough you need to use absolute positioning to achieve this. I'd still recommend you to avoid this but if you insist on having the text show when floating only on images let me know and i'll write you the code here.

Edited by modipeluri, 21 February 2012 - 07:57 PM.


#11 Bestbet

Bestbet

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 24 February 2012 - 11:13 AM

I'd recommend you'll position the text inside the using either relative positioning or floats. For example:

div img {
float: left;
margin: 0 20px 5px 0;
}

Now your text should flow next to the image.


I have modified the css to layout text next to the image - but realised I also needed it more or less vertically centred. So I think I got it, by putting two divs into one container div. yay!


I think this is a usability mistake since many users like to highlight the text while reading. Also, I can't think of a way to do this with CSS alone.

EDIT: Actually it is possible. Altough you need to use absolute positioning to achieve this. I'd still recommend you to avoid this but if you insist on having the text show when floating only on images let me know and i'll write you the code here.


Yes I can see why this would not be the best idea, but the client has signed off on the rollover design - where users put cursor over person (an image file) to get that person's story.(an image file) So in order to convinvce them that doing it in CSS is better (faster loading, less file size etc) the functionality has to be the same.

In the original design when you roll over the person, their name also comes up in white (see: http://www.travelogue.ie/NewDesign.htm) If there is any way for my to do this - have the story paragraph become visible and the name become visible when the cursor hovers over the person graphic - it would be brilliant. I really appreciate your time and knowledge ... I would so much rather this be a CSS website!! rollovers are so clunky and horrible to make or alter once you've made them.

thanks again,

#12 Wickham

Wickham

    Web Guru

  • Moderators
  • PipPipPipPipPip
  • 3,339 posts
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 24 February 2012 - 11:17 AM

You can do a simple hover popups using only CSS, see
http://www.wickham43...hoverpopups.php
With a standard offset in the style, each popup will be the same offset from every image ie next to the image, but by adding a class to each image popup you can have them all show in one place on the page.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users