StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackground-image gradient not working
primarykey
Id
20641378
data
AcceptedAnswerId
20642772
AnswerCount
2
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2013-12-17T17:57:14.590
FavoriteCount
0
LastActivityDate
2013-12-17T20:37:49.597
LastEditDate
2013-12-17T18:12:30.417
LastEditorUserId
698202
OwnerUserId
702944
ParentId
0
PostTypeId
1
Score
2
ViewCount
749
LastEditorDisplayName
text
Body
<p>I'm trying to modify the default ASP.NET MVC4 website template, but I can't figure out why my css isn't working. It's probably a rookie mistake. I've been searching and trying to fix it for hours now, but I can't figure it out. </p> <p>The gradient works in the footer, but not inside the header. I'd like everything from the black border to the main content(everything inside the header element) to have it's background as one big gradient. Even the backup background-color doesn't work, however it(color, not gradient) does work when I size my browser window down to mobile-size. Any ideas?</p> <p>HTML:</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home Page - Test</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="/Content/site.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.6.2.js"></script> </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title"><a href="/">Test</a></p> </div> <div class="float-right"> <section id="login"> Hei, <span class="username">Anonymous</span>! </section> <nav> <ul id="menu"> <li><a href="/">Home</a></li> <li><a href="/Home/About">About</a></li> <li><a href="/Home/Contact">Contact</a></li> </ul> </nav> </div> </div> </header> <div id="body">  <section class="content-wrapper main-content clear-fix"> <h3>We suggest the following:</h3> <ol class="round"> <li class="one"> <h5>Getting Started</h5> ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, TDD-friendly development for creating sophisticated applications that use the latest web standards. <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more…</a> </li> <li class="two"> <h5>Add NuGet packages and jump-start your coding</h5> NuGet makes it easy to install and update free libraries and tools. <a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more…</a> </li> <li class="three"> <h5>Find Web Hosting</h5> You can easily find a web hosting company that offers the right mix of features and price for your applications. <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more…</a> </li> </ol> </section> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>&copy; 2013 - Test</p> </div> <div class="float-right"> <p>Under development. ALPHA</p> </div> </div> </footer>  </body> </html> </code></pre> <p>CSS:</p> <pre><code>html { background-color: #e2e2e2; margin: 0; padding: 0; } body { /*background-color: #7ac0da;*/ border-top: solid 10px #000; color: #333; font-size: .85em; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; margin: 0; padding: 0; } a { color: #333; outline: none; padding-left: 3px; padding-right: 3px; text-decoration: underline; } a:link, a:visited, a:active, a:hover { color: #333; } /*header, footer, hgroup, nav, section { display: block; }*/ mark { background-color: #a6dbed; padding-left: 5px; padding-right: 5px; } .float-left { float: left; } .float-right { float: right; } .clear-fix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; } h1, h2, h3, h4, h5, h6 { color: #000; margin-bottom: 0; padding-bottom: 0; } h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5, h6 { font-size: 1em; } h5 a:link, h5 a:visited, h5 a:active { padding: 0; text-decoration: none; } /* main layout ----------------------------------------------------------*/ .content-wrapper { margin: 0 auto; max-width: 960px; } header .content-wrapper { margin-top: 20px; background-color: #7ac0da; background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); background-image: -moz-linear-gradient(0% 0% 0deg,#7AC0DA, #a4d4e6); /*background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);*/ } #body { background-color: #efeeef; clear: both; padding-bottom: 35px; } footer { clear: both; font-size: .8em; height: 100px; background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); background-image: -moz-linear-gradient(0% 0% 0deg,#7AC0DA, #a4d4e6); background-image: linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); } /* site title ----------------------------------------------------------*/ .site-title { color: #fff; font-family: Rockwell, Consolas, "Courier New", Courier, monospace; font-size: 2.3em; margin: 0; } .site-title a, .site-title a:hover, .site-title a:active { color: #fff; outline: none; text-decoration: none; } /* login ----------------------------------------------------------*/ #login { display: block; font-size: .85em; margin: 0 0 10px; text-align: right; } #login a { background-color: #d3dce0; margin-left: 10px; margin-right: 3px; padding: 2px 3px; text-decoration: none; } #login a.username { background: none; margin: 0; padding: 0; text-decoration: underline; } #login ul { margin: 0; } #login li { display: inline; list-style: none; } /* menu ----------------------------------------------------------*/ ul#menu { font-size: 1.3em; font-weight: 600; margin: 0 0 5px; padding: 0; text-align: right; } ul#menu li { display: inline; list-style: none; padding-left: 15px; } ul#menu li a { color: #fff; text-decoration: none; } ul#menu li a:hover { color: #333; text-decoration: none; } /* page titles */ hgroup.title { margin-bottom: 10px; } hgroup.title h1, hgroup.title h2 { display: inline; } hgroup.title h2 { font-weight: normal; margin-left: 3px; } /* features */ section.feature { width: 300px; float: left; padding: 10px; } /* ordered list */ ol.round { list-style-type: none; padding-left: 0; } ol.round li { margin: 25px 0; padding-left: 45px; } ol.round li.zero { background: url("../Images/orderedList0.png") no-repeat; } ol.round li.one { background: url("../Images/orderedList1.png") no-repeat; } ol.round li.two { background: url("../Images/orderedList2.png") no-repeat; } ol.round li.three { background: url("../Images/orderedList3.png") no-repeat; } ol.round li.four { background: url("../Images/orderedList4.png") no-repeat; } ol.round li.five { background: url("../Images/orderedList5.png") no-repeat; } ol.round li.six { background: url("../Images/orderedList6.png") no-repeat; } ol.round li.seven { background: url("../Images/orderedList7.png") no-repeat; } ol.round li.eight { background: url("../Images/orderedList8.png") no-repeat; } ol.round li.nine { background: url("../Images/orderedList9.png") no-repeat; } /* content */ article { float: left; width: 70%; } aside { float: right; width: 25%; } aside ul { list-style: none; padding: 0; } aside ul li { background: url("../Images/bullet.png") no-repeat 0 50%; padding: 2px 0 2px 20px; } .label { font-weight: 700; } /* login page */ #loginForm { border-right: solid 2px #c8c8c8; float: left; width: 55%; } #loginForm .validation-error { display: block; margin-left: 15px; } #loginForm .validation-summary-errors ul { margin: 0; padding: 0; } #loginForm .validation-summary-errors li { display: inline; list-style: none; margin: 0; } #loginForm input { width: 250px; } #loginForm input[type="checkbox"], #loginForm input[type="submit"], #loginForm input[type="button"], #loginForm button { width: auto; } #socialLoginForm { margin-left: 40px; float: left; width: 40%; } #socialLoginForm h2 { margin-bottom: 5px; } #socialLoginList button { margin-bottom: 12px; } #logoutForm { display: inline; } /* contact */ .contact h3 { font-size: 1.2em; } .contact p { margin: 5px 0 0 10px; } .contact iframe { border: 1px solid #333; margin: 5px 0 0 10px; } /* forms */ fieldset { border: none; margin: 0; padding: 0; } fieldset legend { display: none; } fieldset ol { padding: 0; list-style: none; } fieldset ol li { padding-bottom: 5px; } label { display: block; font-size: 1.2em; font-weight: 600; } label.checkbox { display: inline; } input, textarea { border: 1px solid #e2e2e2; background: #fff; color: #333; font-size: 1.2em; margin: 5px 0 6px 0; padding: 5px; width: 300px; } textarea { font-family: inherit; width: 500px; } input:focus, textarea:focus { border: 1px solid #7ac0da; } input[type="checkbox"] { background: transparent; border: inherit; width: auto; } input[type="submit"], input[type="button"], button { background-color: #d3dce0; border: 1px solid #787878; cursor: pointer; font-size: 1.2em; font-weight: 600; padding: 7px; margin-right: 8px; width: auto; } td input[type="submit"], td input[type="button"], td button { font-size: 1em; padding: 4px; margin-right: 4px; } /* info and errors */ .message-info { border: 1px solid; clear: both; padding: 10px 20px; } .message-error { clear: both; color: #e80c4d; font-size: 1.1em; font-weight: bold; margin: 20px 0 10px 0; } .message-success { color: #7ac0da; font-size: 1.3em; font-weight: bold; margin: 20px 0 10px 0; } .error { color: #e80c4d; } /* styles for validation helpers */ .field-validation-error { color: #e80c4d; font-weight: bold; } .field-validation-valid { display: none; } input.input-validation-error { border: 1px solid #e80c4d; } input[type="checkbox"].input-validation-error { border: 0 none; } .validation-summary-errors { color: #e80c4d; font-weight: bold; font-size: 1.1em; } .validation-summary-valid { display: none; } /* tables ----------------------------------------------------------*/ table { border-collapse: collapse; border-spacing: 0; margin-top: 0.75em; border: 0 none; } th { font-size: 1.2em; text-align: left; border: none 0px; padding-left: 0; } th a { display: block; position: relative; } th a:link, th a:visited, th a:active, th a:hover { color: #333; font-weight: 600; text-decoration: none; padding: 0; } th a:hover { color: #000; } th.asc a, th.desc a { margin-right: .75em; } th.asc a:after, th.desc a:after { display: block; position: absolute; right: 0em; top: 0; font-size: 0.75em; } th.asc a:after { content: '▲'; } th.desc a:after { content: '▼'; } td { padding: 0.25em 2em 0.25em 0em; border: 0 none; } tr.pager td { padding: 0 0.25em 0 0; } /******************** * Mobile Styles * ********************/ @media only screen and (max-width: 850px) { /* header ----------------------------------------------------------*/ header .float-left, header .float-right { float: none; } /* logo */ header .site-title { margin: 10px; text-align: center; } /* login */ #login { font-size: .85em; margin: 0 0 12px; text-align: center; } #login ul { margin: 5px 0; padding: 0; } #login li { display: inline; list-style: none; margin: 0; padding: 0; } #login a { background: none; color: #999; font-weight: 600; margin: 2px; padding: 0; } #login a:hover { color: #333; } /* menu */ nav { margin-bottom: 5px; } ul#menu { margin: 0; padding: 0; text-align: center; } ul#menu li { margin: 0; padding: 0; } /* main layout ----------------------------------------------------------*/ .main-content, .featured + .main-content { background-position: 10px 0; } .content-wrapper { padding-right: 10px; padding-left: 10px; } .featured .content-wrapper { padding: 10px; } /* page content */ article, aside { float: none; width: 100%; } /* ordered list */ ol.round { list-style-type: none; padding-left: 0; } ol.round li { padding-left: 10px; margin: 25px 0; } ol.round li.zero, ol.round li.one, ol.round li.two, ol.round li.three, ol.round li.four, ol.round li.five, ol.round li.six, ol.round li.seven, ol.round li.eight, ol.round li.nine { background: none; } /* features */ section.feature { float: none; padding: 10px; width: auto; } section.feature img { color: #999; content: attr(alt); font-size: 1.5em; font-weight: 600; } /* forms */ input { width: 90%; } /* login page */ #loginForm { border-right: none; float: none; width: auto; } #loginForm .validation-error { display: block; margin-left: 15px; } #socialLoginForm { margin-left: 0; float: none; width: auto; } /* footer ----------------------------------------------------------*/ footer .float-left, footer .float-right { float: none; } footer { text-align: center; height: auto; padding: 10px 0; } footer p { margin: 0; } } </code></pre>
Tags
<html><css><html5><css3>
Title
Background-image gradient not working
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USgeedubb
UserOwnerUserId
1. USFrode F.
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POBackground-image gradient not working
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POBackground-image gradient not working
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTApproveEditSuggestion
3. VO
  singulars
  PostPostId
  POBackground-image gradient not working
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.