coloring top 5% of a DIV?

merrittr · August 28, 2015

I have a style applied to a class of DIVs that is intended to color the to 5% grean (i.e. make a header) this works in OPERA and CHROME but not in FireFox and IE

this is the line that works for CHROME and OPERA

background-image: -webkit-linear-gradient(top, #417630, #417630 5%, transparent 5%, transparent 100%)

however it doesnt work for IE and FF ... I thought this might help but no luck

background-image: linear-gradient(top, #417630, #417630 5%, transparent 5%, transparent 100%);

any ideas?

* {margin: 0; padding: 3;}

.columns {background-color: white; width: 300px; height: 700px;}

.columns{

background-image: linear-gradient(top, #417630, #417630 5%, transparent 5%, transparent 100%);

background-image: -webkit-linear-gradient(top, #417630, #417630 5%, transparent 5%, transparent 100%)

}

</style>

test.html

Ingolme · August 28, 2015

Firefox uses the -moz- prefix. I don't know whether Internet Explorer uses -ms- or just plain linear-gradient.

Put the rules in order so that the last rule is linear-gradient, and the ones with prefixes go before it.

I think the syntax is "to bottom" rather than "top".

Be sure to put units on your CSS rules:

* {margin: 0; padding: 3px;}

I haven't tested, but it's possible that some browsers don't allow two stops at the same position. If other solutions don't fix the problem, perhaps try transparent 5.01%

merrittr · August 28, 2015

I dont quite understand are you saying add this

background-image: -moz-linear-gradient(top, #417630, #417630 5%, transparent 5%, transparent 100%)

background-image: -ms-linear-gradient(top, #417630, #417630 5%, transparent 5%, transparent 100%)

merrittr · August 28, 2015

here is one way to fix it

$('.columns').css({'background-image':'url(./green.png)'});

however then the image repaets how do I set the omage to not repeat?

COBOLdinosaur · August 28, 2015

The correct syntax is to bottom, not top. The top works in Chrome and Opera because the early incorrect experimental implementation in webkit assumed a different syntax than what was eventually adopted by W3C. Firefox and IE and current versions of Chrome do not need the hyphen hack because they all now comply with the W3C standard.

Older version of Chrome still need the hyphen hack. I'm not sure about Safari and Opera. They are still using webkit and I don't know if webkit has been patched to do it right yet. Chrome now uses the blink fork of webkit which implements the standards compliant version.

merrittr · August 28, 2015

ok a further update

I got it working in all browsers except IE 11 where it intermitently goes blank if you keep hitting refresh eventually the 2 divs reapear)

any ideas ? find attached a sample student.txt

<html>

<head>

* {margin: 0; padding: 3px;}

#container {height: 800%; width:900%; font-size: 1;}

.columns,.spacer {display: inline-block; *display: inline; zoom: 0; vertical-align: top; font-size: 12px;}

.columns {background-color: white; width: 300px; height: 700px;}

</style>

$.get("./student.txt", function(data) {

var divIs = "none";

var lines = data.split("n");

$.each

(

lines, function(n, elem)

{

var info = elem.split(",");

if ( (divIs != info[1]) && (info[1] != undefined) )

{

$('#container').append('<div id=' + info[1] + ' class=columns><font color=#BDBDBD size=5>' + info[1] + '</font></div> <div id=' + info[1] + 'spacer1 class=spacer style="background-color: #D6D6D4; width: 3px; height: 700px;"></div>');

divIs = info[1];

$('.columns').corner(); //jQuery.corners to round the columns

$('.columns').css({'background-image':'url(./green.png)'}); //insert the green.pg for the header

$('.columns').css({'background-repeat': 'no-repeat'});//only want ther bgimage to show up once

}

$('#' + info[1]).append('<div>' + info[1] + '</div>');

if (info[1] == undefined)

{

return false;

}

);

});

</script>

</head>

</div>

</body>

student.txt looks like this

1,Admissions,uQuery Admissons,

1,Admissions,Admissions,

1,Admissions, by Geographic origin,

1,Admissions, by High School,

1,Admissions,by College

1,Admissions, by Geographic origin,

1,Admissions, by High School,

1,Admissions, by UG Direct entry College

1,Admissions,Aboriginal

1,Admissions,Student Profile

1,Admissions, by College

1,Admissions, ESL Students

2,Headcount,uQuery Headcount,

2,Headcount,Dashboard

2,Headcount,Current Registration Trend

2,Headcount, 30 Dat Trend

2,Headcount, Aboriginal

2,Headcount,TEST

2,Headcount, test1

2,Headcount, test2

2,Headcount, test3

2,Headcount, test4

2,Headcount, test5

2,Headcount, test6

2,Headcount, test7

2,Headcount, test8

2,Headcount, test9

2,Headcount, test10

2,Headcount, test11

2,Headcount, test12

COBOLdinosaur · August 28, 2015

Unbelievable. Using jquery to hack it with inline styling and obsolete font tag and attributes, instead of taking the time to write the CSS correctly. I need to move on to something else before I puke.

merrittr · August 28, 2015

I would appreciate it if you moved along too :good:

thescientist · August 31, 2015

Unbelievable. Using jquery to hack it with inline styling and obsolete font tag and attributes, instead of taking the time to write the CSS correctly. I need to move on to something else before I puke.

I'm not sure how a comment like this constructive. Maybe you could care to enlighten this user instead? Everyone needs to start somewhere

COBOLdinosaur · August 31, 2015

It was pointed out by two of us that they have incorrect code in the CSS. If they used correct syntax then most of the problem would have been solved and perhaps some tweaking would have been necessary instead they go to a "solution" that is non standard inefficient, and a maintenance problem in waiting.

If that kind of ugly hack was necessary then fine do it; but when a path to a correct solution is offered that is what should be used. If they were one of my students, I would consider I had failed them if they considered such a solution, and there is othing more I can offer.

merrittr · August 31, 2015

Here is what happend

I posted 9:52am

---Foxy Mod replied 12:05pm

---I asked for clarification 2:48pm

---I then said here is one way to

fix the problem using a graphic 3:09pm

as a background

--CD re-stated Foxymod soln partially 3:58pm

--I stated a problem I was having using 4:03pm

my soln from 2:48 never having seen

CD post

-----CD went ballistic because his advice 4:16pm

went unheeded

merrittr · August 31, 2015

having said that I am working on a soln using the Foxy mod CD solution too

I will post the jsfiddle when I get it done.

here is first hack at it

http://jsfiddle.net/merrittr/wkojx3tq/1/

Ingolme · September 1, 2015

Here's the way to do it:

background-image: -ms-linear-gradient(to bottom, transparent 95%, #417630 5%);background-image: -webkit-linear-gradient(to bottom, transparent 95%, #417630 5%);

background-image: -moz-linear-gradient(to bottom, transparent 95%, #417630 5%);

background-image: -o-linear-gradient(to bottom, transparent 95%, #417630 5%);

background-image: linear-gradient(to bottom, transparent 95%, #417630 5%);

The official non-prefixed version must go last because browsers who understand both will use the last declaration in the list. I'm not quite sure if the -ms- and -o- prefixes are needed but I left them just in case.

merrittr · September 1, 2015

Hey great!

Thanks FM

http://jsfiddle.net/merrittr/wkojx3tq/2/

Edited September 1, 2015 by merrittr

coloring top 5% of a DIV?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in