Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Yikes, Wordpress help needed (template CSS help technically)

T

torndownunit

macrumors regular
Original poster
Jan 4, 2009
242
0
Hey guys. I made a really silly mistake. I built a site around a theme I downloaded for Wordpress, but I didn't even think to check it on IE7. Usually those themes work on IE. I did minor edits to the theme, but did not touch the navigation in way because I liked it how it was.

I check it on a PC today though, and the menu is all out of whack in IE7. Each type is in a different vertical position, making the menu look like a set of stairs.

I don't know what code I need to post to get advice, so I am going to start by just posting the style sheet for the theme. Can anyone see anything in this that would be causing what I am seeing?

My site is here http://www.ic-designs.ca the wordpress directory though is http://www.ic-designs.ca/wordpress . I have it's index page set as my home page on my server though.

Here is the CSS:

Code: 
/*
Theme Name: Businesslite
Theme URI: http://www.freewordpresslayouts.com
Description: Get More Free Wordpress Themes By Visiting <a href="http://www.amazingwordpressthemes.com">Free Wordpress Themes</a> 
Version: 1.0
Author: Makequick
Author URI: http://www.makequick.com
*/

/* standard elements */
html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {color: #963; border: none;}
a:hover {color: #C60; border: none;}

body {
	background: #333333 url('img/newbg.gif') repeat-x;
	color: #333333;
	font: normal 62.5% Tahoma, sans-serif
}

p,code,ul {padding-bottom: 10px;}

li {list-style: none;}

h1 {
	font-style: italic;
	font-family: serif;
	color: #996633;
	font: 1.6em;
	margin-bottom: 8px;
}
h2 { font-style: italic; color: #996633; margin-bottom: 10px; margin-top: 10px; font: 1.5em serif;}
h3 { font-style: italic; color: #996633; margin-bottom: 10px; margin-top: 10px; font-variant: normal; font: 1.4em serif;}

code {
	background: #FFF;
	border: 1px solid #EEE;
	border-left: 6px solid #C1CAD3;
	color: #666;
	display: block;
	font: normal 1em Tahoma,sans-serif;
	line-height: 1.6em;
	margin: 4px 0 12px;
	padding: 8px 10px;
	white-space: pre;
}

blockquote {
	background: url('img/quote.gif') no-repeat;
	display: block;
	font: bold 0.9em Verdana,sans-serif;
	padding-left: 20px
}

big {font-size: 1.1em;}

h1, h2, h3 {font-family: serif; margin-left: 10px; margin-bottom: 10px; padding-top: 6px;}

label {
	display: block;
	font-size: 0.9em;
}

/* misc */
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
	background: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 10px 0px;
	width: 780px;
	border-bottom: 4px solid #FFFFFF;
}

/* header */
.top {
	padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:0
}

/* title */
.header {
	background: #FFF;
	font-size: 1.2em;
	height: 150px;
	margin: 0 auto;
	padding: 10px 10px 5px;
	width: 780px;
}
.header .left, .header .right {
	background: #A4A4A0;
	color: #FFF;
	height: 150px;	
}
.logo {
margin-left: auto;
margin-right: auto;
width: 770px;
padding-left: 50px;
font: normal 2.8em "Trebuchet MS",sans-serif;
margin-top: 20px;
background-image: url('img/logo.png');
background-repeat: no-repeat;
background-position: left;
}

.logo a {
color: #D9D7CA;
text-decoration: none;
}

.logo a:hover {
color: #D9D7CA;
text-decoration: none;
}

.logo a:visisted {
color: #D9D7CA;
text-decoration: none;
}
.header .left {
	background: url('img/header2.gif') no-repeat;
	text-align: center;	
	width: 780px;
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 150px;
}
.header .right p, .header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation {	
	border: 1px solid #000000;
	border-color: #000000;
	background:#000000 url('img/nav.gif');
	height: 41px;
	margin: 0px;
	paddin-top: 0px;
}
.navigation a {
	background: #000000 url('img/nav.gif');
	border-right: 1px solid #000000;
	color: #FFFFFF;
	display: block;
	float: left;
	text-decoration: none;
	font: bold 1em sans-serif;
	line-height: 41px;
	padding: 0 20px;
	padding-top: 0px;

}

.floater {
margin-left: -66px;
background: url('img/floaterbg.gif');
background-repeat: no-repeat;
background-position: left;
height: 70px;
padding-left: 15px;
padding-top: 5px;
}


.navigation a:hover {background-position: left bottom; color: #DAD8CC;}

/* main */
.main {
	border-top: 4px solid #FFF;
	background: url('img/bgmain.gif') repeat-y;

}

/* sub navigation */
.sidenav {
	float: right;
	width: 210px;
}
.sidenav h2 {
	color: #5A5A43;
	font: bold 1em Tahoma,sans-serif;
	line-height: 25px;
	padding-left: 12px;
	display: block;
	background-image: url('img/h2bg.gif');
	background-repeat: no-repeat;
	padding-top: 0px;
	margin-top: 8px;
	margin-bottom: 8px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #EAEADA;
}
.sidenav li {border-bottom: 1px solid #EAEADA;}
.sidenav li a {
	font-size: 1.1em;
	color: #554;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background: #F0F0EB url('img/sidebarnavbg.gif');
	color: #654;	
}

/* content */
.content {
	padding-left: 16px;
	padding-bottom: 0;
	padding-right: 16px;
	padding-top: 0;
	float: left;
	margin: 10px 0;
	width: 531px;
}
.content .descr {
	color: #664;
	font-size: 0.9em;
	margin-bottom: 6px;
}
.content li {
	background: url('img/li.gif') no-repeat 0 30%;
	padding: 1px 0 1px 16px;
}
.content p {font-family: "Lucida Sans Unicode",sans-serif;}

/* footer */
.footer {
	background: #333333;
	color: #FFF;
	font: bold 1em sans-serif;
	padding: 0 16px;
	line-height: 39px;
	height: 39px;
	margin-bottom: 10px;
}
.footer a, .footer a:hover {color: #FFF;}

/* posts */
.post h1 a {text-decoration:none;}
.post h1 a:hover {text-decoration:underline;}

.post {margin: 6px 0 2px;}
.post .info{
	padding: 5px 10px;
	border: 1px solid #E3E4E4;
	background:#F5F5F5;
	color: #555;
	margin: 2px 0 4px;
}
.post img {border: 4px solid #DDD; margin: 4px 0;}
.post a img {border: none}
.post a:hover img {border-color: #CCC;}

.info a {text-decoration: none;}
.info a:hover {text-decoration: underline;}

/* comments */
.content ol li {list-style: none; background: none;}

#commentlist li {
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid #700000;
	list-style: none;
}
#commentform {
	margin: 1em 0;
	background: #FAFAFA;
	width: 280px;
}
.commentmetadata {padding: 2px 0 4px;}
.commentmetadata a {color: #664;}

textarea.styled {width: 280px;}

.styled {
	font-size: 1.1em;
	background: #F8F7F6;
	border: 1px solid #D6D3D3;
}
.styled:hover {
	background: #FFF;
	border: 1px solid #D6D3D3;
}
.styled:focus {
	background: #FFF;
	border: 1px solid #939793;
}
#commentform input {margin-bottom: 3px;}

a img {border:none;}

/* calendar */
#wp-calendar {color:#A0A0A0;}

.sidenav table caption {border-bottom-color:#000;}

.sidenav table thead tr {
  border-bottom-color:#000;
  color:#A53512;
}

.sidenav table th {border-bottom-color:#000;}

.sidenav table td#today {
  border-color:#000;
  color:#A53512;
}

.sidenav table td a {
  border-bottom-color:#000;
  background-color:#EDF3DE;
}

.sidenav table tfoot {border-top-color:#000;}

.sidenav table tfoot a {background:none;}

/* calendar
--------------------------------------------------*/
#wp-calendar {
  display:inline-table;
  border-collapse:collapse;
  width:185px;
  margin:0px 10px 0 10px;
  text-align:center;
}

.sidenav table caption {
  margin: -5px 10px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid;
  letter-spacing: 0.1em;
}

.sidenav table thead tr {border-bottom:1px solid;}

.sidenav table th {border-bottom:1px solid;}

.sidenav table td {
  width: 225px; /* maximaize width; honestly, I don't know much about tables... */
  padding: 1px;
  font-size: 0.9em;
}

.sidenav table td#today {
  padding: 0;
  border: 1px solid;
  font-size: 1em;
  font-weight: bold;
}

.sidenav table td a {
  display: block;
  border-bottom: 1px solid;
  font-weight: bold;
  font-size: 1.15em;
}

.sidenav table tfoot {border-top:1px solid;}
.sidenav table tfoot a {
  border: none;
  font-weight: bold;
}
.sidenav table tfoot #prev a {text-align:left;}
.sidenav table tfoot #next a {text-align:center;}

#searchform {padding:10px;}

If there is anything else I need to post to help, please let me know.

Thanks a ton.
 
p.s.

This is what I see in IE7 on a PC and in VMfusion

screen.jpg
 
try this
.floater {
margin-left: 0px;
background: url('img/floaterbg.gif');
background-repeat: no-repeat;
background-position: left;
height: 70px;
padding-left: 15px;
padding-top: 5px;
}
Click to expand...

change the margin from -66 to 0

last time I had an issue with that it was an outter element margin.
 
thats what i THOUGHT, but i didnt see
#outer{
margin: XXpx
}


Copy your code and paste it into a code editor and do a search for #outer

I looked and couldnt find it. thats why i thought MAYBE it was in the float, but i didnt look TOO close, but its LIKELY a margin in some div id. Possible OUTER since you remember it being that.. OUTER is a common name for a containing div with those attributes.
 
Hey, thanks for taking a look. I can't find any tags with 'outer' or a variation. So would you suggest trying the tip you gave in your first post?

Thanks
 
I can't find #outer either... Not sure what he's saying there.


I haven't looked that in depth yet, but padding: 0 20px 0; is a bit odd and may be confusing ie7?

You can have 1 value, 2 values, or 4 values.

e.g.

padding:1px; adds 1px all round

padding:1px 20px; adds 1px top and bottom & 20px right and left

padding:1px 2px 3px 4px; adds in order of North, East, South, West. Top, Right, Bottom, Left.

If that doesn't help, let us know to investigate further?

-EDIT-

Opps, sorry, that's just what FireBug told me you had. I see you have actually coded padding: 0 20px; which is fine. I'll continue my investigation :) Though, your .header and .container padding have 3 values... Maybe fix that?

Also,
Code: 
/* header */

.top {

	padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:0

}

You need to close that with a ;

Having checked the css validation there are some errors, which if you fix, would be a better grounding for an investigation... HTML too, but the errors you have here shouldn't affect your issues (in theory). Never hurts to validate though.
 
design-is said:
I haven't looked that in depth yet, but padding: 0 20px 0; is a bit odd and may be confusing ie7?
Click to expand...

Means Top (0), Left & Right (20), Bottom (0). I often forget the ordering for the 3-value method so often avoid it, but as you noted, this came from Firebug.
 
Thanks for the input guys. I am running around like crazy today, but am going to sit down and try these tips when I get in tonight. I'll update.

I can't believe I didn't test this out beforehand. I like the theme so much though that I hope I don't have to change it. Hopefully it can be fixed.
 
I am working through the validation as suggested. I found one tag that might be the culprit, though I won't know till I test.

This tag in .navigation:

padding-top: 0px;

Was spelled incorrectly:

paddin-top: 0px;
 
darn none of those validation fixes seemed to solve the problem.

The only fix I haven't done is the padding.

Though, your .header and .container padding have 3 values... Maybe fix that?
Click to expand...

I am a little unclear on what the fix entails here. Or as per angelwatt's post, is the code ok as is?

The only errors I get now are in the lighbox plug-in, and I don't think it's something I want to dive in to. I can't see why it would be affecting the navigation menu anyway? http://jigsaw.w3.org/css-validator/...warning=0&uri=http://ic-designs.ca/wordpress/

Should I maybe try to find a navigation menu that is gauranteed IE friendly and insert it in place of the old navigation? Or do you guys think the navigation css is the issue?

Again, I'd like to be able to keep this theme intact and get that navigation functioning.

Thanks guys.
 
Hey guys.

Someone on another forum gave me a tip that worked. I don't know if it's the best way to achieve the result or not, but I am posting it here in case anyone has a similar problem at some point.

I was told to just replace the old css for 'li'

Code: 
li {list-style: none;}

with

Code: 
li {display:inline;list-style-image:none;list-style-position:outside;list-style-type:none;}

The menu displays great now.
 
torndownunit said:
I was told to just replace the old css for 'li'

Code: 
li {list-style: none;}

with

Code: 
li {display:inline;list-style-image:none;list-style-position:outside;list-style-type:none;}
Click to expand...

Small FYI. The first and last pieces of that change are what is important, and you already had the last piece so it was just display:inline that you needed most likely. I never got around to checking out this problem. The other pieces here would only matter if you had a list-style-image set somewhere else.
 
angelwatt said:
Small FYI. The first and last pieces of that change are what is important, and you already had the last piece so it was just display:inline that you needed most likely. I never got around to checking out this problem. The other pieces here would only matter if you had a list-style-image set somewhere else.
Click to expand...

Ya, after the guy posted that tip, he also gave me a tip on just applying it to the li elements in the nav. I am finally getting decent enough at css that I realized the limitation of the original fix and asked about that.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back