New Topic/Question
Reply
this is not a problem, it works as I would expect it to. However, in IE (my current version is 9 - but would like to make it work in all versions; all possible anyway) the gradients don't show up and instead the background set for the body is in it's spot.
I have tried several different things, but can't seem to mend this problem. I have supplied an image of the two browsers side by side below and the html/css code.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TestTitle</title>
</head>
<body>
<div id="header">
<h1>TestTitle</h1>
</div>
<div id="content-wrapper">
<div id="main-content">
<form action="" method="">
<label for="username">Username:</label><input name="username" id="username" type="text"/>
<label for="password">Password:</label><input name="password" id="password" type="password"/>
<input type="submit" value="Enter" />
</form>
</div>
</div>
</body>
</html>
CSS Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-image: url(stripe.png);
}
#header {
height: 55px;
width: 100%;
background-image: linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
background-image: -o-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
background-image: -moz-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
background-image: -webkit-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
background-image: -ms-linear-gradient(bottom, rgb(64,89,153) 100%, rgb(19,47,158) 74%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(1, rgb(64,89,153)),
color-stop(0.74, rgb(19,47,158))
);
color: white;
font-size: 50px;
}
#header h1 {
padding-top: 10px;
padding-left: 10px;
}
#content-wrapper {
width: 95%;
background-image: linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
background-image: -o-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
background-image: -moz-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
background-image: -webkit-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
background-image: -ms-linear-gradient(bottom, rgb(144,148,156) 71%, rgb(162,168,189) 37%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.71, rgb(144,148,156)),
color-stop(0.37, rgb(162,168,189))
);
-webkit-box-shadow: 0px 0px 30px rgba(50, 50, 111, 0.9);
-moz-box-shadow: 0px 0px 30px rgba(50, 50, 111, 0.9);
box-shadow: 0px 0px 30px rgba(50, 50, 111, 0.9);
zoom: 1;
margin: 0 auto;
margin-top: 40px;
height: 400px;
text-align: center;
}
I don't know how to get images to appear on this website, so here is a linkto the picture.
The picture might be kind of hard to see, basically, it's a striped background on the body is showing through on IE and the gradient that is easily visible on Chrome is missing. Any tips or suggestions?
MultiQuote
| 
