|
| |
|
|
jcrutchfield
Posts: 59
Joined: 11/12/2003
Status: offline
 |
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
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
d a v e
Posts: 4009
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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
_____________________________
David Prescott
Gekko web design
| |
|
|
|
jcrutchfield
Posts: 59
Joined: 11/12/2003
Status: offline
|
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
Posts: 59
Joined: 11/12/2003
Status: offline
|
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
Posts: 3466
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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?
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
jcrutchfield
Posts: 59
Joined: 11/12/2003
Status: offline
|
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
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
d a v e
Posts: 4009
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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!
_____________________________
David Prescott
Gekko web design
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Tailslide
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Kitka
Posts: 2507
Joined: 1/31/2002
From: Australia
Status: offline
|
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.
_____________________________
Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Tailslide
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Tailslide
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Kitka
Posts: 2507
Joined: 1/31/2002
From: Australia
Status: offline
|
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. 
_____________________________
Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**
| |
|
|
|
jcrutchfield
Posts: 59
Joined: 11/12/2003
Status: offline
|
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.
| |
|
|
|
caz
Posts: 3466
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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. 
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
jcrutchfield
Posts: 59
Joined: 11/12/2003
Status: offline
|
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
Posts: 59
Joined: 11/12/2003
Status: offline
|
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
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
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>??????
_____________________________
Dan
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
