1 reply [Last post]
rockandstroll
rockandstroll's picture
Offline
newbie
Last seen: 3 years 11 weeks ago
Timezone: GMT+10
Joined: 2011-06-23
Posts: 1
Points: 2

I'm designing this site in wordpress , the site pretty looks how I want it to in firefox and safari. But with IE and particarly older versions of IE things like the menu and the page size are not showing properly.

I've been using quite abit css3 and HTML5 to design this site, and have just read that IE is not really compatible with css3, so can anyone give me any tips on how should go about adjusting the css to make it cross browser friendly?

Here is the code for the main stylesheet:

* { margin: 0; padding: 0; }
html { background: black url(images/bg.jpg); }
body { font: 12px/1.4 Arial, Helvetica, sans-serif; }
 
article, aside, figure, footer, header, nav, section { display: block; }
.screen-reader-text { position: absolute; top: -9999px; left: -9999px; }
.clear { clear: both; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */
 
.button {
	background-image: none;
	background-color: #5850b2;
	padding: 5px 15px;
	color: white;
	font-weight: normal !important;
	text-decoration: none;
	text-transform: uppercase;
	border: 2px solid white !important;
	-moz-box-shadow: 1px 1px 3px #666;
	-webkit-box-shadow: 1px 1px 3px #666;
	box-shadow: 1px 1px 3px #666;
}	
.button:hover {
	background-image: none;
	background-color: #6b7886;
	-moz-box-shadow: 0px 0px 2px #999;
	-webkit-box-shadow: 0px 0px 2px #999;
	box-shadow: 0px 0px 2px #999;
	text-decoration: none !important;
}
 
#page-wrap { 
	width: 900px; 
    margin: 100px auto 10px;
	background: #c3d9cf url(images/spiral.png) top right no-repeat; 
}
 
#header { 
	position: relative;
	padding: 20px 20px 20px 100px;
	border-bottom: 1px solid black;
}
 
#header h1 a {
	 color: white; text-decoration: none;
	}
 
h1 { 
	font: 55px Century Gothic;
	color: white; 
	letter-spacing: 8px;
	text-shadow: 2px 2px 5px #59625e; 
}
 
h2 {
	color: black;
	text-shadow: 1px 1px 0 #59625e;
	font-weight: normal;
	font-size: 20px;
	margin: 0 0 18px 0;
}
 
h3 {
	color: black;
	text-shadow: 1px 1px 0 #59625e;
	font-weight: normal;
	font-size: 15px;
	margin: 0 0 15px 0;
}
 
h4 { 
	font-size: 16px;  
	letter-spacing: 3px; 
}
 
.giant { 
	font-size: 80px; 
}
 
a { text-decoration: none; color: black; }
a img { border: 0; }
 
#main-content  ul {
	list-style: none;
}
 
#main-content {
	float: right;
	width: 650px;
	padding: 0 27px 35px 0;
}
 
#searchform #s { 
	width: 176px; margin: 0 0 5px 13px; 
}
 
.ui-tooltip { padding: 8px; position: absolute; z-index: 999; -moz-box-shadow: 0 0 5px #aaa; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; }
* html .ui-tooltip { background-image: none; } /* Fades and background-images don't work well together in IE6, drop the image */
body .ui-tooltip { border-width: 2px; }
.mini { float: left; margin: 0 10px 0 0; }
 
.post { margin: -45px 10px 0 210px; }
.post a { font-weight: bold; border-bottom: 1px dotted #647484; }
.post a:hover { border-bottom: 1px solid white; }
.post h4, .post h4 a, .post h4 a:hover { border: 0; margin: 0; }
.post h4 a:hover { text-decoration: underline; }
.post * ~ h3, .post * ~ h4 { margin-top: 25px; }
 
.meta { background-color: #3c3779; padding: 2px 5px; color: white; margin: 5px 0; }
 
.single #post-title { color: #eee; text-shadow: 1px 1px 0 #666, 2px 2px 0 #666; font-size: 36px; background-color: #acbfb7;; margin: 5px 0 0 0; width: 900px; text-align: center; position: relative; }
.single aside, .single #main-content { margin-top: 20px; }
.single .meta { background: #3c3779; padding: 3px 0 3px 300px; color: #eee; position: relative; width: 600px; }
.single .entry p:first-child:first-line { font-size: 135%; letter-spacing: 1px; text-transform: uppercase; }
.single .entry p:first-child:first-letter { font-size: 500%; float: left; line-height: 79px !important; margin: 0 12px 0 0; text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc; font-weight: 100; }
 
 
 
aside {
	float: left;
	width: 200px;
	margin: 20px 0 0 0;
}
 
nav  ul {
	list-style: none;
}
 
nav ul li a {
	display: block;
	padding: 5px 5px 5px 15px;
	color: white;
	font size: 16 px;
	text-align:left;
	text-decoration: none;
	background-color: #ffa7e3;
	margin: 0 10px 5px 0;
	position: relative;
	width: 175px;
}
 
nav ul li a span {
	position: absolute;
	right: 100%;
	top: 5px;
	width: 10px;
	height: 100%;
	background-color: #ffa7e3;
	background-image: url(images/navshadow.png);
	background-position: right-top;
	background-repeat: repeat-y;
}
 
nav ul li:nth-child(2) a, nav ul li:nth-child(2) a span {
	background-color: #ccbae5;
}
 
nav ul li:nth-child(3) a, nav ul li:nth-child(3) a span {
	background-color: #9b8eeb;
}
 
nav ul li:nth-child(4) a, nav ul li:nth-child(4) a span {
	background-color: #3c3779;
}
 
nav ul li:nth-child(5) a, nav ul li:nth-child(5) a span {
	background-color: #201d40;
}
 
nav ul li a:hover { 
	text-decoration: none; background-color: #666; 
}
nav ul li a:hover span { 
	background-color: #666;
}
 
ol.commentlist { list-style: none; margin: 0 0 20px 0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor { }
ol.commentlist li.byuser { }
ol.commentlist li.comment-author-admin { }
ol.commentlist li.comment { border-bottom: 1px dotted #666; padding: 10px; }
ol.commentlist li.comment div.comment-author { }
ol.commentlist li.comment div.vcard { }
ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
ol.commentlist li.comment div.vcard cite.fn a.url { }
ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 10px 10px; }
ol.commentlist li.comment div.vcard img.avatar-32 { }
ol.commentlist li.comment div.vcard img.photo { }
ol.commentlist li.comment div.vcard span.says { }
ol.commentlist li.comment div.commentmetadata { }
ol.commentlist li.comment div.comment-meta { font-size: 10px; }
ol.commentlist li.comment div.comment-meta a { color: #ccc; }
ol.commentlist li.comment p { }
ol.commentlist li.comment ul { }
ol.commentlist li.comment div.reply { font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { list-style: none; margin: 10px 0 0; }
ol.commentlist li.comment ul.children li { }
ol.commentlist li.comment ul.children li.alt { }
ol.commentlist li.comment ul.children li.bypostauthor { }
ol.commentlist li.comment ul.children li.byuser { }
ol.commentlist li.comment ul.children li.comment { }
ol.commentlist li.comment ul.children li.comment-author-admin { }
ol.commentlist li.comment ul.children li.depth-2 { border-left: 5px solid #555; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-3 { border-left: 5px solid #999; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-4 { border-left: 5px solid #bbb; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-5 { }
ol.commentlist li.comment ul.children li.odd { }
ol.commentlist li.even { background: #fff; }
ol.commentlist li.odd { background: #f6f6f6; }
ol.commentlist li.parent { border-left: 5px solid #111; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even { }
ol.commentlist li.thread-odd { }
 
 
.widget {
	background: url(images/widgetshadow.png) top right no-repeat;
	padding: 15px;
	margin: 10px 0 0 0;
}
 
footer {
	width: 900px;
	margin: 0 auto 20px;
	color: white;
	letter-spacing: 1px;
}
 
nav {
	width: 100%;
	float: center;
	text-align: center;
}
 
nav a {
	color:white;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 5 weeks 4 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Here's a wheel from my car.

Here's a wheel from my car. Can you tell me why it won't turn on?

Verschwindende wrote:
  • CSS doesn't make pies