1. how to easily apply / change the image displayed in the header of the application
2. different browsers (IE6) would interpret my css code differently than the other browsers
I solved the problem in the following way:
1. created a page 0
2. created a "No Template" Region on the page
3. added the following code to the region source
<style type="text/css">
.top_header{background-image:
url(#IMAGE_PREFIX#themes/theme_basf/Sorp2.gif);
background-repeat: no-repeat;
background-position: 290px -45px;
background-color:#BFD0F4;}
.basf01overlapping{background-image:
url(#IMAGE_PREFIX#themes/theme_basf/Sorp2.gif);
background-repeat: no-repeat;
background-position: 290px -15px;}
</style>
<!--[if gte IE 6]>
<style type="text/css">
#navigationArea{width:99%;}
</style>
<![endif]-->
The style part of the code would display the custom image. The javascript part would overwrite the style for the navigationArea if IE6 is used to view the page. Once they create a new application the only thing that needs to be done is to copy the page 0 from one of the existing applications and change the image name.
1 comment:
You can use this the css browser selector (http://http://rafael.adm.br/css_browser_selector/) and rewrite the rule for Internet Explorer as .ie #navigationArea
This way you can avoid using conditional comments like <--[if gte IE 6]>.
Very nice post anyway
Post a Comment