1 reply [Last post]
waschuler
waschuler's picture
Offline
newbie
Last seen: 11 years 6 weeks ago
Timezone: GMT-5
Joined: 2011-10-19
Posts: 1
Points: 4

Hi, I'm still a CSS novice and hope someone can help me out with this. The website I'm creating looks fine in Google Chrome and IE 9. It looks completely different in earlier versions of IE as well as Firefox. Can anyone see where I'm going wrong?

Style.css code is here:

@import "../css/superfish.css"; @import "../css/reset.css"; @import "../css/grid.css"; @import url("http://fonts.googleapis.com/css?family=Lato:300,400"); @import "../css/prettyPhoto.css"; @import "../css/skin.css"; 
 
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
 
/* Global properties ======================================================== */
html {width:100%;}
 
body { 	 
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%; 
	color:#7d7d7d;
	min-width:960px;
	background:url(../images/top-tail.gif) 0 0 repeat-x #F3F3F3;
	position:relative;
}
 
.main {
	width:960px; 	
	padding:0;
	margin:0 auto;
	font-size:0.75em;
	line-height:1.666em;
	position:relative;
}
 
a {color:#ff350d; outline:none;}
a:hover {text-decoration:none;}
 
.clear {clear:both; width:100%; line-height:0; font-size:0;}
 
.col-1, .col-2, .col-3, .col-4 {float:left;}
.column-1, .column-2, .column-3 {float:left;}  
 
.wrapper {width:100%; overflow:hidden;}
.extra-wrap {overflow:hidden;}
 
.container {width:100%;}
 
p {margin-bottom:20px;}
.p1 {margin-bottom:8px;}
.p2 {margin-bottom:15px;}
.p3 {margin-bottom:30px;}
.p4 {margin-bottom:40px;}
.p5 {margin-bottom:50px;}
 
.reg {text-transform:uppercase;}
 
.fleft {float:left;}
.fright {float:right;}
 
.alignright {text-align:right;}
.aligncenter {text-align:center;}
 
.title {margin-bottom:18px;}
 
.it {font-style:italic;}
 
.letter {letter-spacing:-1px;}
 
.color-1 {color:#fff;}
.color-2 {color:#000;}
.color-3 {color:#7d7d7d;}
.color-4 {color:#ff350d;}
 
/*********************************boxes**********************************/
.margin-bot {margin-bottom:35px;}
 
.spacing {margin-right:35px;}
.spacing2 {margin-right:45px;}
.spacing3 {margin-right:60px;}
 
.spacing-bot {margin-bottom:25px;}
 
.indent {padding:0 0 0px 30px;}
.indent2 {padding-left:50px;}
.indent-bot {margin-bottom:20px;}
.indent-bot2 {margin-bottom:30px;}
.indent-bot3 {margin-bottom:45px;}
 
.img-indent-bot {margin-bottom:25px;}
.img-indent {float:left; margin:0 20px 0px 0;}	
.img-indent2 {float:left; margin:0 13px 0px 0;}	
.img-indent-r {float:right; margin:0 0px 0px 40px;}	
 
.img-box {float:left; margin-bottom:20px;}	
 
.prev-indent-bot {margin-bottom:10px;}
.prev-indent {float:left; margin:0 10px 0px 0;}	
.prev-box {float:left; margin-bottom:8px;}	
 
.border {border:7px solid #fff; margin:1px; 
box-shadow:1px 1px 0 #E4E4E4, -1px -1px 0 #E4E4E4, -1px 1px 0 #E4E4E4, 1px -1px 0 #E4E4E4;
-moz-box-shadow:1px 1px 0 #E4E4E4, -1px -1px 0 #E4E4E4, -1px 1px 0 #E4E4E4, 1px -1px 0 #E4E4E4;
-webkit-box-shadow:1px 1px 0 #E4E4E4, -1px -1px 0 #E4E4E4, -1px 1px 0 #E4E4E4, 1px -1px 0 #E4E4E4;
}
.border2 {border:7px solid #fff;}
 
.buttons a:hover {cursor:pointer;}
 
.menu li a,
.list-1 li a,
.list-2 li a,
.list-3 li a,
.link,
.button,
.box-1 a,
.box-2 a,
.submenu li a,
.logo {text-decoration:none;}	
 
/*********************************header*************************************/
header {height:149px; width:940px; margin:0 auto; position:relative; z-index:999;}
header#header {height:596px; background:none;}
 
nav {display:block; position:absolute; left:0px; top:74px; z-index:999; width:100%; padding-top:4px; border-top:3px solid #ff350d; background:#252525;}
 
h1 {position:absolute; top:28px; left:4px;}
.logo {display:block; width:198px; height:24px; text-indent:-5000px; background:url(../images/logo.gif) 0 0 no-repeat;}
 
.submenu {position:absolute; top:32px; right:185px; overflow:hidden;}
.submenu li {float:left; font-size:12px; line-height:1.2em; padding:0 15px; background:url(../images/spacer.gif) right 4px no-repeat;}
.submenu li a {color:#8d8d8d;}
.submenu li a:hover {color:#303030;}
.submenu li.last-item {background:none;}
 
#form-top {position:absolute; width:170px; padding:5px 7px 5px 9px; top:26px; right:0px; border:1px solid #e5e5e5; overflow:hidden; background:#f9f9f9;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-background-clip: padding-box;
box-shadow:1px 1px 0px #dadada;
-moz-box-shadow:1px 1px 0px #dadada;
-webkit-box-shadow:1px 1px 0px #dadada;
}
#form-top input {float:left; width:145px; font-size:12px; color:#000; padding:0; margin-right:5px; font-family:Arial, Helvetica, sans-serif; font-style:italic; border:0; background:none;}
#form-top .button-form-top {float:right; display:block; width:16px; height:16px; background:url(../images/button-form-top.gif) 0 bottom no-repeat;} 
#form-top .button-form-top:hover {background:url(../images/button-form-top.gif) 0 0 no-repeat;}
 
.slider {
	width:940px; height:460px;
	position:absolute;
	top:136px; 
	left:0px;
	z-index:1;
	background:url(../images/slide-1.jpg) 0 0 no-repeat;
	box-shadow:3px 3px 6px #d2d2d2;
	-moz-box-shadow:3px 3px 6px #d2d2d2;
	-webkit-box-shadow:3px 3px 6px #d2d2d2;
}
 
.banner {
	width:auto;
	position:absolute;
	padding:45px 0;
	left:0;
	top:165px;
	color:#191919;
	font-size:60px;
	line-height:0.875em;
	font-family: 'Lato', sans-serif; font-weight:300;
}
 
.banner span {display:block; padding:0 43px;}
.banner strong {color:#ff350d; font-weight:700;}
 
/*********************************content*************************************/
#content {width:100%; padding:32px 0px 50px 0px; position:relative; z-index:1;}
 
.border-bot, .border-bot2 {width:100%; padding-bottom:38px; background:url(../images/pic-1.gif) 0 bottom repeat-x;}
.border-bot2 {padding-bottom:20px;}
 
h2 {font-size:38px; line-height:1.2em; margin:0px 0 18px; color:#191919; font-family: 'Lato', sans-serif; font-weight:300;}
h3 {font-size:30px; line-height:1.2em; margin:0px 0 30px; color:#191919; font-family: 'Lato', sans-serif; font-weight:300;}
h4 {font-size:16px; line-height:1.2em; margin:0px 0 0px; color:#191919; font-family: 'Lato', sans-serif; font-weight:400;}
h6 {font-size:12px; line-height:20px; margin:0px; color:#ff350d; font-weight:normal;}
aside h6 {margin:0px 0 17px; color:#4e4e4e; font-weight:bold;}
 
.scroll {overflow:auto; height:180px; position:relative;}
.scroll .padding-right {height:1%; padding-right:50px;}
 
.box {width:100%; background:url(../images/box-tail.gif) 0 0 repeat-x #e2e2e2;}
.box .padding {padding:26px 20px 34px;}
.box .col-1 {width:263px; margin-right:55px;}
.box .col-2 {width:263px; margin-right:55px;}
.box .col-3 {width:263px;}
 
.box-1 {display:block; position:relative; color:#ff350d; background:#fff; border:1px solid #e3e3e3;}
.box-1 .padding {padding:18px; position:relative; z-index:3}
.box-1 a {display:inline-block; color:#7d7d7d;}
.box-1 a:hover, .box-1 a:hover span {color:#000; text-decoration:underline;}
.box-1 a span {color:#18bbff;}
 
.box-1 {position:relative}
.box-1 .bgr {background:#ff350d; position:absolute; z-index:2;top:0; left:0; width:100%; height:100%; display:block;}
 
.alt a {color:#000;}
.alt h6 {color:#fff;}
 
.box-2 {position:relative; border:1px solid #dfdfdf; background:#dbdbdb;
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-webkit-background-clip: padding-box;
 
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#dbdbdb)); /* Saf4+, Chrome */
background: -webkit-linear-gradient(top, #ededed, #dbdbdb); /* Chrome 10+, Saf5.1+ */
background:    -moz-linear-gradient(top, #ededed, #dbdbdb); /* FF3.6 */
background:     -ms-linear-gradient(top, #ededed, #dbdbdb); /* IE10 */
background:      -o-linear-gradient(top, #ededed, #dbdbdb); /* Opera 11.10+ */
background:         linear-gradient(top, #ededed, #dbdbdb);
-pie-background: linear-gradient(#ededed, #dbdbdb);
}
 
.box-2 .padding {padding:22px 25px 30px; background:url(../images/picture-1.gif) 20px 10px no-repeat; overflow:hidden;}
.box-2 a {display:block; color:#7d7d7d;}
.box-2 a:hover {color:#000; text-decoration:underline;}
.box-2 span {display:block; width:34px; height:20px; position:absolute; bottom:-20px; left:65px; background:url(../images/marker-box.gif) 0 0 no-repeat;}
 
.author {text-align:right; color:#ff350d;}
 
.dropcap-block .col-1 {width:160px; position:relative; margin-right:45px;}
.dropcap-block .col-2 {width:160px; position:relative; margin-right:45px;}
.dropcap-block .col-3 {width:160px; position:relative;}
 
.follower-1 {position:absolute; right:-43px; top:0px; display:block; width:43px; height:23px; background:url(../images/picture-2.gif) 0 0 no-repeat;}
.follower-2 {position:absolute; right:-43px; bottom:0px; display:block; width:43px; height:23px; background:url(../images/picture-3.gif) 0 0 no-repeat;}
 
.dropcap {display:inline-block; width:54px; height:54px; font-size:36px; line-height:54px; color:#fff; text-align:center; text-transform:uppercase; font-weight:bold; background:#ff350d;
border-radius:27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
-webkit-background-clip: padding-box;
}
 
.gallery li {float:left; width:191px; margin:0 15px 15px 0;}
.gallery li.mr-0 {margin-right:0;} 
.gallery li.mb-0 {margin-bottom:0;} 
.gallery .box-1 .padding {padding:14px;}
 
 
/*************Lightbox image***************/
.lightbox-image {
	position:relative;
	overflow:hidden;
	display:inline-block;
	}
.lightbox-image img {
	position:relative;
	z-index:2;
	}
.lightbox-image span {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:url(../images/magnify.png) no-repeat 50% 50%;
	z-index:1;
	}
/************************************************/	
 
.button {display:inline-block; font-size:12px; color:#414141; padding:4px 14px; margin:2px; background:url(../images/button.gif) 0 0 repeat-x #efefef;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-background-clip: padding-box;
 
box-shadow:1px 1px 1px #c5c5c5;
-moz-box-shadow:1px 1px 1px #c5c5c5;
-webkit-box-shadow:1px 1px 1px #c5c5c5;
}
.button:hover {color:#fff; background:#ff350d;}
 
.list-1 li {font-size:12px; line-height:25px; padding-left:19px; background:url(../images/marker-1.gif) 0 10px no-repeat;}
.list-1 li a {color:#ff350d;}
.list-1 li a:hover {color:#000;}
 
.list-2 li {font-size:13px; line-height:16px; margin-bottom:14px;}
.list-2 li a {display:inline-block; color:#ff350d; overflow:hidden;}
.list-2 li a:hover {color:#000;}
.list-2 li img {margin-right:12px; position:relative;}
 
.list-3 li {font-size:25px; line-height:55px; font-weight:300; margin-bottom:5px; font-family: 'Lato', sans-serif;}
.list-3 li a {display:block; color:#191919; padding:0 20px; background:#dbdbdb;}
.list-3 li a:hover {color:#fff; background:#ff350d;}
 
time {display:block; width:51px; height:67px; font-size:36px; line-height:1.444em; text-align:center; color:#fff; font-weight:bold; padding:0; background:url(../images/date.gif); font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
 
.link:hover {text-decoration:underline;} 
 
.link-1 {display:block; color:#858484;}
.link-1:hover {color:#18bbff;} 
 
dl dt {padding-bottom:20px; color:#ff350d;}
dl span {float:left; width:70px;}
 
.map iframe {width:239px; height:265px;}
 
#form1 fieldset{display:block; width:602px;}
#form1 label {display:block; height:44px; position:relative;}
#form1 label.message {height:auto;}
#form1 input {width:319px; font-size:1em; color:#7d7d7d; padding:10px 16px; font-family:Arial, Helvetica, sans-serif; border:1px solid #ddd; background:#fff;}
#form1 textarea {height:226px; overflow:auto; width:568px; font-size:1em; color:#7d7d7d; padding:10px 16px; font-family:Arial, Helvetica, sans-serif; border:1px solid #ddd; background:#fff;}
#form1 .empty, #form1 .error {display:none; color:#f00; font-size:11px; line-height:11px; position:absolute; top:12px; left:360px;}
#form1 label.message .empty, #form1 label.message .error {left:0; top:252px;}
#form1 .success {display:none; color:#000;}
 
.buttons {padding-top:30px; text-align:right; overflow:hidden;}
.buttons a {margin-left:20px;}
 
/************aside*************/
aside {width:100%; font-size:13px; padding:45px 0 38px; background:url(../images/tail.gif) 0 0 repeat-x;}
aside .list-1 li {font-size:13px;}
/****************************footer************************/
footer {padding:34px 0px 38px; font-size:13px; background:url(../images/tail.gif) 0 0 repeat-x;}

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 47 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Here's a wheel from my car.

Here's a wheel from my car. Do you know why it's not working?

Verschwindende wrote:
  • CSS doesn't make pies