css rollovers not working AOL Customer (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

jcrutchfield -> css rollovers not working AOL Customer (6/16/2005 18:48:15)

The photogalleries I'm using for a customers' site is not working in AOL. It seems to work well in Netscape, FF and IE. Here is the specific css and then the HTML for the page that isn't working. How do you all test AOL browser compatibility?

Thanks in advance for any help.


<!-- CSS -->


/* The containing box for main menu. */
#container {position:relative; width:360px; height:40px; border:0px solid #663300; margin-left:auto; margin-right:2px; margin-top:4px; margin-bottom:0}

/* Removing the list bullets and indentation - add size - and position */
#container ul {width:360px; height:30px; padding:0; margin:0px; list-style-type:none; float:left;}

#container li {float:left;}

/* Remove the images and text from sight */
#container a.gallery span {position:absolute; width:0px; height:0px; top:5px; left:5px; overflow:hidden; }

/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {display:block; color:#663300; text-decoration:none; border:0px solid #663300; margin:2px 2px 1px 2px; text-align:left; cursor:default;}
#container a.slidea {background:url('images/home.gif'); height:30px; width:85px}
#container a.slideb {background:url('images/contact.gif'); height:30px; width:85px}
#container a.slidec {background:url('images/products.gif'); height:30px; width:85px}
#container a.slided {background:url('images/services.gif'); height:30px; width:85px}


/* styling the hovers */
#container a.gallery:hover {border-bottom:0px solid #fff;}
#container a.gallery:hover span {position:absolute; width:352px; height:50px; top:30px; left:1px; }
#container a.gallery:hover img {border:0px solid #663300; float:left; margin-right:5px;}



<!-- HTML on Page -->

<!--Start Main Menu-->
<div id="container">
<ul>
<li><a class="gallery slidea" href="index.htm"><span>
<img src="images/homepan.gif" alt="Home Page" title="" width="352" height="50" /></span></a></li>
<li><a class="gallery slideb" href="contact.htm"><span>
<img src="images/contactpan.gif" alt="Contact Information" title="" width="352" height="50" /></span></a></li>
<li><a class="gallery slidec" href="products.htm"><span>
<img src="images/productspan.gif" alt="Our Products" title="" width="352" height="50" /></span></a></li>
<li><a class="gallery slided" href="service.htm"><span>
<img src="images/servicespan.gif" alt="Our Services" title="" width="352" height="50" /></span></a></li>
</ul>
</div>
<!--End Main Menu-->



Tailslide -> RE: css rollovers not working AOL Customer (6/17/2005 5:11:22)

Can't see anything blindingly obvious (apart from using AOL is a really bad idea - get them to switch to FF!). What exactly is going wrong in AOL?

Try getting rid of the px when the value is 0 e.g. width:0px; should be width: 0; Also get rid of the " ' " s around the path to the images you don't need them.

It looks like Stu Nicholls photogallery or a version of it - does that work in AOL? If so then it's a case of backwards engineering it.

I tend to use Browsercam to do screenshots of other browsers - you can also do remote viewing on there and there's a free trial period too!





d a v e -> RE: css rollovers not working AOL Customer (6/17/2005 6:35:54)

quote:

width:0px; should be width: 0


either is valid... i doubt very much it would cause a problem



jcrutchfield -> RE: css rollovers not working AOL Customer (6/17/2005 9:14:11)

The issue is that when he mouses over the thumbnail, the image larger image doesn't show. The example I included was one for the main menu but the galleries are coded the same way, just many more lines. Let me try removing the " ' " around the images and see if that works. The site is still in testing behind a password protected area or I would show it to you. I have temporarily added a "AOL Users Click Here" process that goes to a popup that will tell the user how to open any other browser. Is that a webmaster "fopa" though, like a hit counter on your home page?





<div align="left">
<table cellSpacing="0" cellPadding="0" width="540" border="0">
<tr>
<td width="400"><b>What if I'm using an AOL browser?</b><p><b>Quick
Answer: <br>
1. Click on your Start Button </b>
<img border="0" src="images/startthumb.gif" alt="Start Button" width="89" height="28"> <br>
<b>2. Click on any icon like the ones below</b></p>
<p><img border="0" src="images/nsthumb.gif" alt="Netscape" width="66" height="67"><img border="0" src="images/ffthumb.gif" alt="Firefox" width="119" height="61"><img border="0" src="images/iethumb.gif" alt="Internet Explorer" width="195" height="69"><br>
<b>3. When it opens type <a href="http://www.brownbuildings.com">
www.brownbuildings.com</a> in the address bar and press the ENTER button
on your keyboard.</b></p>
<p><b>
<a href="javascript:window.close();">Close this Window</a></b></p>
<p> </p>
<p><b>Detailed Answer:</b></p>
<p>This will likely mean that you have the AOL software package installed
and you are familiar with using the built-in AOL browser. You most likely already have a co-branded version of either Netscape or Internet Explorer already
installed onto your computer.</p>
<p>To enjoy the best possible experience while on this site including the
photo galleries, follow the steps below.</p>
<p><b>STEP 1:</b> All you
need to do is connect to the Internet as you normally would through AOL. </p>
<p><b>STEP 2: </b>Then click on your
<img border="0" src="images/startthumb.gif" alt="Start Button" width="89" height="28"> START button and look for the
icons below to launch a compatible browser. Leave your AOL connection
running in the background while you surf the web with one of these
browsers.</p>
<p><img border="0" src="images/nsthumb.gif" alt="Netscape" width="66" height="67"><img border="0" src="images/ffthumb.gif" alt="Firefox" width="119" height="61"><img border="0" src="images/iethumb.gif" alt="Internet Explorer" width="195" height="69"><p align="left">
<b>
<a href="javascript:window.close();">Close this Window</a></b></td>
</tr>
</table>
</div>



jcrutchfield -> RE: css rollovers not working AOL Customer (6/17/2005 9:35:12)

I just tried removing the px after 0 and the " ' " around the image files and FP forced them back in, wierd.



caz -> RE: css rollovers not working AOL Customer (6/17/2005 9:52:51)

This maybe a daft question but, does he have javascript and/or popups disabled in his set up?



jcrutchfield -> RE: css rollovers not working AOL Customer (6/17/2005 9:58:24)

Technically, he is the lowest common denominator in this whole thing but he is a good source for testing, hehe. I'm building the site for him but he has AOL (older version) on a 56k dial-up and he doesn't know how to attach a document or image to an email. I'm test driving BrowserCam but the AOL isn't showing results. That is a cool site but it is expensive. Thanks for the help.



Tailslide -> RE: css rollovers not working AOL Customer (6/17/2005 10:35:31)

With Browsercam - try setting a delay on the screenshot - 5 seconds or so. I find that some browsers are slower than others so sometimes you get a white screen instead of a screenshot.



c1sissy -> RE: css rollovers not working AOL Customer (6/17/2005 15:57:20)


quote:

ORIGINAL: d a v e

quote:

width:0px; should be width: 0


either is valid... i doubt very much it would cause a problem


You are correct D a v e, I use the px all the time and it doesn't cause me any problems. I prefer to use it this way myself.



Tailslide -> RE: css rollovers not working AOL Customer (6/17/2005 16:22:37)

Funny isn't it - back when I was learning CSS (starting to learn - never will finish) I remember reading somewhere that 0px was badly interpreted by a browser (can't remember where I read it, can't remember which browser) and ever since then I've taken the px off the 0 values in CSS - we get so stuck in doing things the way we've always done them - or maybe that's just me... [:D]



d a v e -> RE: css rollovers not working AOL Customer (6/17/2005 16:31:40)

well of course that culd be true - just because it's valid it doesn't mean browsers always handle it gracefully :) i usually leave it off (from 0) because i'm lazy!



c1sissy -> RE: css rollovers not working AOL Customer (6/17/2005 16:37:36)

As much as I have read through books etc.. I have never come across it not being browser friendly. Take a look at the zengarden, you will find the 0px; through their designs. If this were the case, I"m sure that they would not have put this in there.

When it comes to your xhtml and image code, you should not use the px with that as it won't validate with the transitonal and the strict. Maybe this is what you are thinking of.



Tailslide -> RE: css rollovers not working AOL Customer (6/18/2005 5:07:58)

It was definitely with regards to margins/widths etc - but I cannot remember where I saw it and can't think of a good reason for it now - it just got lodged in my mind with a whole lot of other gumpf along the way!!

Much as I love Zen Garden - they've never claimed to be totally browser friendly/backwards compatible. They're just an excercise to show how flexible CSS can be in a modern standards compliant browser at a set text-size.




Donkey -> RE: css rollovers not working AOL Customer (6/18/2005 6:38:41)

It may or may not cause problems, but zero is zero - there is no need to qualify it. So why waste the time and energy in typing "px" several times when you don't need to? I don't think Dave is being lazy it's more like applied time management.[;)]



Kitka -> RE: css rollovers not working AOL Customer (6/18/2005 7:59:41)

quote:

it's more like applied time management


Plus, if you have lots of 0s in your CSS, adding the "px" afterwards can bulk out the code unnecessarily.



c1sissy -> RE: css rollovers not working AOL Customer (6/18/2005 11:49:47)


quote:

ORIGINAL: Tailslide


Much as I love Zen Garden - they've never claimed to be totally browser friendly/backwards compatible. They're just an excercise to show how flexible CSS can be in a modern standards compliant browser at a set text-size.


Following is a quote from the Zen Garden, the section that is in red is the one that lets you know that they do go for browser compatiblity. If they did not, their site would not accomplish what the designer set out to accomplish in regards to css.

Quote taken from :http://www.csszengarden.com/

quote:

Requirements
We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSS at times, and this becomes maddening when a fix for one leads to breakage in another. View the Resources page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.
We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.



Tailslide -> RE: css rollovers not working AOL Customer (6/18/2005 12:16:20)

quote:

ORIGINAL: c1sissy

Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can.


Yep that's exactly the bit I was referring to.

I love looking at that site - it's a great way to get inspiration and an excellent way to prove a point about CSS.



c1sissy -> RE: css rollovers not working AOL Customer (6/18/2005 15:31:10)

key words are test in as many browsers as possible, read the whole thing and don't take things out of context. Also, at the page, if you don't comply with this, your design could not be accepted. Browser compatibility is stressed in this site.

0px doesn't mess anything up. If it did, then using any numerical number would mess it up if you used the px. In essence by stating this, its like saying using px will cause errors.



Tailslide -> RE: css rollovers not working AOL Customer (6/18/2005 15:59:57)

I believe you c1sissy - what I was saying is that it's easy to get something (right or wrong) stuck in your head and it stays there on default until eventually you learn better!

I agreed with you after the first point - you won - I'm not arguing about 0 versus 0px!!

There are so many beautiful designs on that site - well beyond any graphics stuff I could ever dream of coming up with - that's the difference between graphic design and day to day site building.



c1sissy -> RE: css rollovers not working AOL Customer (6/18/2005 16:16:59)

[:D]
Its not about wining or loosing a discussion. It is about correct information. Outfront is visited by many searching terms to find information. Its about making sure that someone learning about css finds the correct information.[;)]



Tailslide -> RE: css rollovers not working AOL Customer (6/18/2005 17:14:49)

Excellent! We've established that both 0 and 0px are fine and that they won't cause a browser problem. I'll use 0 and you use 0px.

Now all we have to do is solve the initial problem!!

Do we know which version of AOL is causing problems? My understanding is that the earlier versions (3.0?) doesn't support JS and there may have been some limitations to the JS support in version 4.0.

Or as Caz has said - they may have JS support switched off totally.



c1sissy -> RE: css rollovers not working AOL Customer (6/18/2005 17:36:22)

quote:

My understanding is that the earlier versions (3.0?) doesn't support JS and there may have been some limitations to the JS support in version 4.0.

Try googling it. It might give you an answer, or send you to an article somewhere. I'm not familiar with aol at all. If you google in the problem, an article or two might come up on it. If it does, then you can post a link to it in here for future reference.



Kitka -> RE: css rollovers not working AOL Customer (6/18/2005 17:55:15)

quote:

0px doesn't mess anything up. If it did, then using any numerical number would mess it up if you used the px. In essence by stating this, its like saying using px will cause errors.


No, it won't mess things up, but it is completely redundant. 0px = 0pt = 0em = 0% etc. ad infinitum. Zero is always 0 no matter what you measure it with.

I go by the W3 CSS2 syntax, which is authoritative:

quote:

4.3.2 Lengths

Lengths refer to horizontal or vertical measurements.

The format of a length value (denoted by <length> in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, deg, etc.). After the '0' length, the unit identifier is optional.


http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

Anything which reduces the code bulk but doesn't affect page rendering is good for me. But as they say, to each his own. [:)]



jcrutchfield -> RE: css rollovers not working AOL Customer (6/21/2005 10:49:47)

Back the to original issue I was having . . . I tried to avoid this but it had to happen . . .

Well, what I have done now is go back to the mid 90's in my brain and have developed an alternative site for low-bandwidth and low-tech users. Since this is an established business, I needed to address as many users as possible. The ALT site is basically a site with no CSS, manually formatted fonts, smaller file size graphics, sort of static with no rollovers and such. It seems to be working fairly well. I added a statement on the "High-Tech" homepage "Customers using Dial-up, AOL or an Older Browser - Click Here" which takes them to the "Low-Tech" site and on the "Low-Tech" home page I put "Customers using High Speed Internet Access - Click Here" which takes them to the way the site should be viewed. Hopefully, this will do the job. I'll post the customers feedback for those interested.



c1sissy -> RE: css rollovers not working AOL Customer (6/21/2005 10:54:31)

quote:

I'll post the customers feedback for those interested.

Please do, it would be nice.



caz -> RE: css rollovers not working AOL Customer (6/25/2005 22:49:28)

You said that he is using an older version of AOL?

http://webmaster.info.aol.com/detection.html

"Beginning with Windows AOL 3.0 (32-bit), the AOL client does not have a browser embedded, but instead uses the Internet Explorer browser the user already has installed within their system.
Therefore, for modern AOL Windows clients, browser compatibility is mostly independent of any specific AOL version. The AOL browser will support most of the capabilities that a user's external version of Internet Explorer does. There are various incompatibilities which may arise in the way the specific AOL clients interact with the Browser which can result in unexpected behaviors of the browser itself."

So an AOL user could be using IE5+, or whatever a Mac user has on board at the time. Also -

"Unlike MS's own version, the AOL-ized IE has got a pop-up stopper. I read that, rather illogically, AOL deliver pop-ups to users that then get taken out by it."
http://www.accessifyforum.com/viewtopic.php?t=437

What a can of worms it is. [:@]



jcrutchfield -> RE: css rollovers not working AOL Customer (6/27/2005 16:43:41)

Thanks Caz for the info! The customers' site will rollout on July 1, 05 and is http://www.brownbuildings.com. I ended up building 2 different sites. It's been tough trying to test for AOL but was successful (at least I'm 90% sure) that both sites work properly for Netscape, FF and IE and the "low-tech" version works for most all including older versions of browsers and AOL.



jcrutchfield -> RE: css rollovers not working AOL Customer (7/1/2005 9:59:54)

Okay it's live now. http://www.brownbuildings.com

Feel free to reply with feedback, errors, etc.

Thanks for your help.



Tailslide -> RE: css rollovers not working AOL Customer (7/1/2005 10:52:36)

It's a lovely looking site - really pretty!

Only points I could raise are:

1. According to http://www.websiteoptimization.com/services/analyze/ it takes 72 seconds to download on a 56kbps modem.
2. You've got a couple of commented things before the DOCTYPE - not seen the reg expression thing there before - what's it do? You could probably put the copyright thing in a Meta Tag - anything before the DOCTYPE will throw IE into Quirks mode - may or may not cause you problems.
3. There are a couple of failures on the Validation - I think there are some Alt tags missing plus there's some stuff (yahoo?) outside of the </html> tag which the validator doesn't like.

Love your rollovers!



dpf -> RE: css rollovers not working AOL Customer (7/1/2005 11:10:14)

quote:

Love your rollovers!
I do too! but I also agree: whats up with regular expressions inside <wax>??????



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125