Linear gradient CSS not working for Internet Explorer [Fixed for 3.2.16]

[bositman]

In jdownloads_buttons.css: (same for all button colors)
/* blue */
.jblue {
   color: #d9eef7 !important;
   border: solid 1px #0076a3;
   background: #0095cd;
   background: linear-gradient( #00adee,  #0078a5);

}
.jblue:hover {
   background: #007ead !important;
   background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
   background: -moz-linear-gradient(top,  #0095cc,  #00678e);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.jblue:active {
   color: #80bed6 !important;
   background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
   background: -moz-linear-gradient(top,  #0078a5,  #00adee);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

Fix:

Replace

background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
   background: -moz-linear-gradient(top,  #0095cc,  #00678e);
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');

with background: linear-gradient(#0095cc,  #00678e) (standard syntax, shorter code and fixes IE) http://www.w3schools.com/css/css3_gradients.asp
in all 3 css selectors and all button colors. Done

[ColinM]

Hi
Thanks for input.  Will  modify to include - basically have not yet assumed that CSS3 is supported everywhere so I will add. But we also need to check out on older browsers as well.  Very glad IE is getting to use standard stuff at last!!

Would appreciate any testing assistance on other browsers, early next week maybe?
Colin

[bositman]

Yeah as w3schools notes, IE 10+ all support standard format CSS3. I doubt anyone uses anymore any  < Chrome  26 (released 3/2013) or Firefox 16 (released October 2012).

With IE it's different because many use old OS and never update, so that's a tougher target...

I've also been modifying all the templates to have properties like width, align='top' and align=left/right stripped from html and added as css (width: 100%, vertical-align: top; text-align: left etc) to make the code HTML5 valid, but there are several things that are built in your CSS and I wouldn't want to redo them all each time the extension gets updated

[ColinM]

Hi
Yes I also think the layouts need relating to classes in a css file - had planned to do that soon but at present concentrating on getting rid of the bugs so might delay a bit.  Have also changed some height definitions to auto so they do not leave blank lines.  Am going to suggest to Arno that we perhaps have a separate css file just for layouts as that should make  it easier for less experienced people, and also simpler to write an article on how to change.

Would appreciate copy of your modified css and layouts as that would save work for me!

Thanks
Colin

[bositman]

Sure although I'm using some custom layouts so not sure how useful these are for you (i don't remember any more which are default and which are custom ) :
Standard Categories Layout v2.5
Layout

Code Select Expand


{cat_title_begin}<div style="background-color:#EFEFEF; padding:6px;">{subcats_title_text}</div>{cat_title_end}
{cat_info_begin}
<table style="width:100%; border-bottom: 1px solid #cccccc;">
  <tr style="vertical-align: top;">
    <td style="width:65%; padding:5px;">{cat_pic}<b>{cat_title}</b></td>
    <td style="width:20%; padding:5px; text-align:right">{sum_subcats}</td>
    <td style="width:15%; padding:5px; text-align:right">{sum_files_cat}</td>
  </tr>
  <tr style="vertical-align: top;">
    <td colspan="3" style="width:100%; padding:5px;">{cat_description}</td>
  </tr>
</table>
{cat_info_end}


Header

Code Select Expand


<table class="jd_top_navi" style="width:100%; border-bottom: 1px solid #cccccc;">
<tr style="vertical-align:top;">
<td style="padding:5px;">{home_link}</td>
<td style="padding:5px;">{search_link}</td>
<td style="padding:5px;">{upload_link}</td>
<td style="padding:5px; text-align: right; vertical-align: bottom;">{category_listbox}</td>
</tr>
</table>


Subheading

Code Select Expand


<table class="jd_cat_subheader" style="width:100%;">
<tr>
<td  style="width:45%; vertical-align:top;">
<b>{subheader_title}</b>
</td>
<td style="width:55%; vertical-align:top;" colspan="2">
<div class="jd_page_nav" style="text-align:right">{page_navigation_pages_counter} {page_navigation}</div>
</td>
</tr>
<tr>
<td style="width:45%; vertical-align:top; text-align: left;">{count_of_sub_categories}</td>
<td style="width:55%; vertical-align:top;" colspan="2"></td>
</tr>
</table>


Footer

Code Select Expand


<table class="jd_footer" align="right" width="100%">             
<tr>
<td width="70%" valign="top"></td>
<td width="30%" valign="top">
<div class="jd_page_nav" style="text-align:right">{page_navigation}</div>
</td>
</tr>
</table>
<div style="text-align:left" class="back_button">{back_link}</div>





Standard Category Layout v2.5
Layout

Code Select Expand


{cat_title_begin}<div style="background-color:#EFEFEF; padding:6px;">{subcats_title_text}</div>{cat_title_end}
{cat_info_begin}
<table style="width:100%; border-bottom: 1px solid #cccccc;">
  <tr style="vertical-align:top;">
    <td style="padding:5px; width: 65%;">{cat_pic}<b>{cat_title}</b></td>
    <td style="width: 20%; padding:5px; text-align:right">{sum_subcats}</td>
    <td style="width: 15%; padding:5px; text-align:right">{sum_files_cat}</td>
  </tr>
  <tr style="vertical-align:top;">
    <td colspan="3" style="width:100%; padding:5px;">{cat_description}</td>
  </tr>
</table>
{cat_info_end}
{sub_categories}
<div style="clear:both">&#160;</div>
<div style="float:right;">{checkbox_top}</div>
{files}
{form_hidden}
<div style="text-align:right">{form_button}</div>


Header

Code Select Expand


<table class="jd_top_navi" style="width:100%; border-bottom: 1px solid #cccccc;">
<tr style="vertical-align: top;">
<td style="padding:5px;">{home_link}</td>
<td style="padding:5px;">{search_link}</td>
<td style="padding:5px;">{upload_link}</td>
<td style="padding:5px;">{upper_link}</td>
<td style="padding:5px;" align="right" valign="bottom">{category_listbox}</td>
</tr>
</table>


Subheading

Code Select Expand


<table class="jd_cat_subheader" style="width:100%;">
<tr>
<td style="width:45%; vertical-align:top;" >
<b>{subheader_title}</b>
</td>
<td style="width:55%; vertical-align:top;" colspan="2">
<div class="jd_page_nav" style="text-align:right">{page_navigation_pages_counter} {page_navigation}</div>
</td>
</tr>
<tr>
<td style="width:45%; vertical-align:top; text-align:left;" >{count_of_sub_categories}</td>
<td wstyle="width:55%; vertical-align:top;" colspan="2"></td>
</tr>
</table>


Footer

Code Select Expand


<table class="jd_footer" align="right" width="100%">             
<tr>
<td width="70%" valign="top"></td>
<td width="30%" valign="top">
<div class="jd_page_nav" style="text-align:right">{page_navigation}</div>
</td>
</tr>
</table>
<div style="text-align:left" class="back_button">{back_link}</div>





Standard Summary Layout v2.5
Layout

Code Select Expand


<div class="jd_cat_title" style="padding:5px; font-size:10px; font-weight:normal;">{summary_pic} {title_text}</div>
<div style="vertical-align:top; padding:5px;">{download_liste}</div>
{captcha}
{password}
<div style="padding:5px;">{aup_points_info}</div>
<div style="padding:5px; text-align:center;"><b>{license_title}</b></div>
<div>{license_text}</div>
<div style="text-align:center">{license_checkbox}</div>
<div style="text-align:center; padding:5px;">{download_link}</div>
<div style="text-align:center;">{info_zip_file_size}</div>
<div style="text-align:center;">{external_download_info}</div>
<div style="text-align:center;">{user_limitations}</div>
<div>{google_adsense}</div>


Header

Code Select Expand


<table class="jd_top_navi" style="width: 100%; border-bottom: 1px solid #cccccc;">
<tr style="vertical-align:top; border: 0px;">
<td style="padding:5px;">{home_link}</td>
<td style="padding:5px;">{search_link}</td>
<td style="padding:5px;">{upload_link}</td>
<td style="padding:5px;">{upper_link}</td>
<td style="padding:5px; text-align: right; vertical-align: bottom;">{category_listbox}</td>
</tr>
</table>


Subheading

Code Select Expand


<table class="jd_cat_subheader" style="width: 100%;">
<tr><td><b>{summary_title}</b></td></tr>
</table>


Footer

Code Select Expand


<div style="text-align:left" class="back_button">{back_link}</div>


[ColinM]

Hi
Thanks for the details - I can use a comparator to get differences.
Have started  browser comparison and as part of that I re-looked at browser usage - see attached pics
Obviously Chrome and Firefox are the main players with Safari growing.  Will need to check further on mobile devices as well.

Preliminary conclusion is that the IE 'filter' css should remain as it works from IE6 to IE10, and my experience IE users tend to be less knowledgeable about changing to another browser!   However the  moz and webkit lines could be removed but I will check further. 

Because the colour gradients are not severe, then just having the regular background colour on very old browsers is not significant.  I even tried IE 5.5 which only gave an outline for the buttons and no text!!

Colin

[gelöscht durch Administrator]

[bositman]

Yeah cross browser compatibility is a ****...I don't think anyone uses an IE older than 8 these days (more so after the end of Windows XP support) but I guess having it there for some time more is not that bad.

Glad I could help.

[ColinM]

Hi
Have done cross browser tests
on following and higher versions where the revised button css works
Android Tablet 3.2, Android 2.2, iPhone 3G(iOS 4.2), iPad iOS 5.1, iPad2 iOS 5.1, iPad3 iOS 5.1, Opera 12.1, Chrome 26, Safari 6.1, Firefox 16 and IE6
See pics below
Colin


[gelöscht durch Administrator]

[Arno]

Hi Colin,
many thanks for the results from your hard test job! Well done. 
I will add the revised css fast.

[bositman]

Another small fix:

/* for HOT / NEW / UPDATED */
.jstatus {
   font-size: 10px;
   padding: .2em 0.7em .275em;
   vertical-align: middle;
   cursor: default;
}

Added cursor: default since it was switching to a pointer as if the hot/new buttons were a link, but if clicked they do nothing

[ColinM]

Hi
Attached is latest version of the jdownloads_buttons css file - it did not quite make the latest release (jD2.5.15 & jD3.2.15) so IO thought it useful to post here.  Would be good to test with this version.  It has name jdownloads_buttonsMODIFIED.css to disinguish from stanard version.  It also has date inside.

Colin

[gelöscht durch Administrator]

[Arno]

Hi Colin,
Okay, i have it added to the next beta release.