search

sebble / SebbleDMS

Secure data management (PHP, AJAX)
Other
2 stars 2 forks source link

linear-gradient #3

Closed sebble closed 13 years ago

sebble commented 13 years ago

background colours and gradients are only set for chrome, should probably add them for FF and IE

keithnewman commented 13 years ago

I can now confirm background colour on the header is also missing for Internet Explorer.

keithnewman commented 13 years ago

For the header bar, I've added colours and gradients for all types of browser. Other backgrounds/gradients that are scattered around the rest of the place are now also supported for Mozilla and Chrome10+ browsers.

sebble commented 13 years ago

It seems as though chrome, IE, and FF are showing different gradients, try creating another stylesheet style.css next to admin.css and reference that from admin.html as well (after admin.css). In this stylesheet write a short comment about these fancy new features and override the defaults and clean up in this single file, try to do this without changing admin.css at all -- we will then have the start of our customisable stylesheet.

keithnewman commented 13 years ago

Is this to keep the colour/gradient scheme (handled by style.css) separate from the layout (dictated by admin.css) so that colours can be customised by easily swapping for a new style.css? If so, then I understand exactly what you want and can make a quick start. If not, then I don't understand what this is for.

sebble commented 13 years ago

Yes, it is for custom colour schemes.

keithnewman commented 13 years ago

I've found a unique issue with IE9. We know there is a special CSS line (filter) for adding a gradient for Internet Explorer 6-9, and I implemented this for the header bar and the side boxes. This works fine and I've tested it in IE7+IE8. In IE9, border-radius will work too. However the filter for the gradient applies to the whole div, even outside of any rounded borders, so in IE9 you get rounded borders with a background sticking out from them. The choice for IE9 becomes whether to implement the gradient or rounded borders. Alternatively you can just use both and have untidy corners.

sebble commented 13 years ago

Have you checked that this is definitely the case, not like the previous H1 and DIV must both be rounded, you may also try overflow: hidden and see if that helps.

Well, I have just done some LMGTFY and it seems you are correct, http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/. The fix is ugly and would make any later changes difficult -- not worth it. I suggest gradients where there are no rounded, but rounded adds more than the subtle gradients for most things. How about making two stylesheets (one ditching gradients, one ditching rounded), I suppose you should put that CSS in a <!--ifIE=9--> but if one looks alright I would rather not be too specific and give all IE the same.

sebble commented 13 years ago

Thought I'd add this here too, body gradients fill 100% of screen not 100% of document, can this be fixed or should bg be replace with an image or solid colour?

Edit: this should be separate issue, you've already said you don't experience this, will re-open later..