CODEWITHSUNDEEP
htmlcss
Marco Geertsma
Marco Geertsma

Reputation: 821

Over-extend gradient outside the <table>

i've encountered a seemingly simple but frustrating problem. I was asked to edit a template to fit the new needs. The old template had a gradient as background and the new template wants this gradient to expand a bit. Current and desired result are listed below.

Current: http://prntscr.com/38nhrd

Desired: http://prntscr.com/38nhwp

The downside (which is the annoying part) is that the template is build of tables. I cant paste a small part of the code so here are the tables containing the side-bar.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

edit: re-uploaded screenshots to further explain my problem.

edit2: removed code with a jsfiddle page. Keep in mind that this is all the code for the page so there is a lot of code not needed for my problem. Added some code for the site to allow the jsfiddle link.

Upvotes: 2

Views: 69

Answers (2)

SW4
SW4

Reputation: 71170

Demo Fiddle

Add the class (you may need to adjust the 350px part):

#templateBody > tbody > tr > td{ 
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.65, #FFFFFF), color-stop(0.77, #EFEFEF));
    background-image: -o-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: -moz-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: -webkit-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: -ms-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
    background-image: linear-gradient(to left top, #FFFFFF 65%, #EFEFEF 77%);
    background-repeat:repeat-y;
    background-position:350px 0;
}

And remove:

background-image: -o-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: -moz-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: -webkit-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: -ms-linear-gradient(left top, #FFFFFF 65%, #EFEFEF 77%);
background-image: linear-gradient(to left top, #FFFFFF 65%, #EFEFEF 77%);

From the class .sidebarContent

Upvotes: 3

MShah
MShah

Reputation: 316

Since we are cheating using tables anyway, what about using relative positioning to give the illusion of removing the space? We can then add the extra space to the bottom using a padding.

position: relative;
top: -100px;
padding-bottom: -100px;

Change -100 to whatever value is necessary.

Upvotes: 1

Related Questions