Wed, 2011-10-19 17:44
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;}
Thu, 2011-10-20 13:24
#1
Here's a wheel from my car.
Here's a wheel from my car. Do you know why it's not working?