Forum Moderators: not2easy
Problem: One shopping cart system that manages several domains. The system recognizes which domain the query is coming form and applies the appropriate CSS file like a skin. Each domain has a logo that has the same dimensions in the upper right left hand corner of the page. Since the logo needs to change through the CSS as a background image to correspond the the domain the user is in, how do you make it so that the users can still click on the logo and go back to the home page?
Answer: Create a transparent GIF matching the domains' logos’ dimensions. Next insert it in the space where the logo will appear through the CSS. Then link the transparent GIF with a general home link = /index. Now the logos can be changed out through the CSS, but you give the user the impression that they are clicking on the logo to return to the home page. In actuality they are clicking on the transparent gif which they see through too the logo!
Hope others find this useful
more food for thought....
why use a transparent gif.. when the <a> element with display: block; with the dimensions of the logo (set via CSS) will do the same ;)
Suzy
I think it's a very nice idea- but there is a question bugging me: The whole cross-browser thing... might be a little tricky getting that logo/gif/transparent area to show up right where you need it.
Nonetheless....hmmm!
As for cross browser. If your CSS is solid, cross browser position of the GIF should not be a problem. So far I have been checking the CSS I am working on that used the above mentions trick on a Mac w/OS X w/Safari, Mac w/OS 9 w/Explorer, PC w/XP w/explorer, PC w/98 w/Explorer and they are all displaying exactly the same. In particular, I never experianced a problem with the GIF not showing up in the right place.
A practice I have adopted for cross browser checking is to set a refresh tag in a test page. The set up a couple of machines near the one you are working on and pull up the test page in each one. That way you can see what is happening cross browser/platform while you are working.
Uh, that's not what I consider "cross-browser". I'd consider Firebird/Mozilla/Netscape, IE, Opera, etc. to be cross-browser testing. Other than the Mac, you still appear to be limiting it to IE.
It's a great trick, but I'd suggest testing with a few more browsers and OS's, Linux, Unix, for example. A growing number are using "alternative OS's" (and for good reason, IMHO)
Shadows Papa
It was very kind of aaronjf to share this idea/tip so if there are problems rather than just speculating and subsequent writing off of the idea wouldn't some testing and constructive feedback be nice..
I already use this trick... (before the post) and if there are any "issues", I'm still unaware of them but would like to know because AFAIK there are no cross browser issues here it's just plain simple CSS positioning
Suzy
I am now using this method to control all of the general graphics in the system and as of yet have not found an instance where the transperent GIF and Background graphic do not appear inline with each other... as long as you are carefull with your work.
Thanks SuzyUK
The main problems seemed to be Mozilla for Linux, and since a lot of the pages were technical in nature, I have a higher than usual percentage of linux browsers.
However, as one of my design assistants pointed out - people on Linux are used to seeing broken pages. ;)
I guess you come at it which ever way you are most comfortable, coding or WYSIWIG.Maybe that's why I don't think it's such a good idea. I'll admit it's cute, and on that level I like it, but it just seems overly complicated and too prone to problems. What happens if the user has css diabled? How will they even know to click there? Or what happens when images are off? With server side scripting it's easy to check what the url is and make changes accordingly.
It all goes back to my feeling of never trust the user agent to anything right if you don't have to. They have a hard enough time displaying plain HTML, and now you want to add tricks?
As for it being to complicated. The other option would have been to program the CMS to recognize the domain and apply the right graphics along with the right CSS file. If you are already working with a system that could benifit from this trick and you are reasonably accompished with CSS, I don't see how this would be very complicated relative to everything else you would have to know how to do. The CSS involved in pulling this off is not that complicated.
No one way of doing things is ever full proof 100% of the time when building Web Sites. There is always going to be that user that has this turned off, this turned on, an outdated browser, an outdated computer, an outdated connection speed, and the list goes on. Unless you are just dumping text into the page with no regard for layout, images, or any other content, that being the only exception to getting 100%. Even then I am not totally convinced you would reach 100%. At best most of us cross our fingers and hope that it reaches 97% - 99% of the users.
I found something that has become very useful and very flexible for my purposes on an Ecom site network of 8 sites. So far the solution seems to be holding up and not presenting problems for me. If what I have shared does not work for you don't use it. I posted this for other people that might have a similar problem that could benifit from all the thought I have given the particular problem I ran into. I did not post this to spend all day validating it and answering every single what if the guy is driving 35 miles an hour in a brown 70s Ford Pinto with bald tires, an AM 8 track radio, and tinfoil on his head in the year 2010.
