Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using the default Twenty Twelve Wordpress theme with my site, and I am trying to customize the sidebar. The CSS I am using is:

.widget-area, #secondary{
float: right;
width: 210px;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0 15px 0 15px;
border-bottom: 1px solid #cacaca;           
border-top: 1px solid #cacaca;
background-color: #efefef;
margin-top: 45px; }

The code for the sidebar is unchanged from the default template, and I am using text widget for the content of the sidebar. The problem page is here:

http://www.discusscps.com/gccenter/about-our-organization/

Chrome, Safari, and IE 9 have no problems, but in IE 6~8, font-family, borders, background colors, and the top margin is ignored.

I have tried everything I can think of here - any ideas would be greatly appreciated. Thank you.

share|improve this question
    
This is probably the wrong place to ask this kind of quetion as it is most likely something in your css or HTML which cause the problem and not wordpress itself. I suggest you to first fix the html validation errors you have on that page and if you still have this problem, ask in one of the other stacks. –  Mark Kaplun Mar 5 '13 at 8:41
    
This is definitely a CSS/html question, not one that requires WordPress knowledge, try asking on Stack Overflow –  Tom J Nowell Mar 5 '13 at 12:42
    
@MarkKaplun and Tom: Thank you for your answers. It was my first question on stackexchange, and in the future I will try to select a more appropriate forum. However, Vinod below provided advice that fixed my issue. –  kwela12 Mar 6 '13 at 3:46
add comment

closed as off topic by Michael, brasofilo, Tom J Nowell, toscho Mar 5 '13 at 13:01

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers

up vote 0 down vote accepted

You have added this CSS in below css3 media query and this css3 media rule does not support IE8 and below browsers so it is not applying css contained in its block.

/* Minimum width of 600 pixels. */
@media screen and (min-width: 800px) { 
.widget-area, #secondary{
float: right;
width: 210px;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0 15px 0 15px;
border-bottom: 1px solid #cacaca;           
border-top: 1px solid #cacaca;
background-color: #efefef;
margin-top: 45px; }
}

To make it work just declare this css rule outside this media query block as following .

/* Minimum width of 600 pixels. */
@media screen and (min-width: 800px) { 

}
.widget-area, #secondary{
float: right;
width: 210px;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0 15px 0 15px;
border-bottom: 1px solid #cacaca;           
border-top: 1px solid #cacaca;
background-color: #efefef;
margin-top: 45px; }
share|improve this answer
    
This worked immediately. Thank you so much - I don't think that I would have figured this out alone, and am grateful. --I do not have enough reputation to vote your answer up, but it really saved me. –  kwela12 Mar 5 '13 at 9:17
    
You are welcome... :) You can accept my answer if it worked for you... –  Vinod Dalvi Mar 5 '13 at 9:19
add comment

are you using reset.css ? if not you can download here http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/

you can also use IE Conditional Comments

<!--[if IE 8]> = IE8
<!--[if lt IE 8]> = IE7 or below
<!--[if gte IE 8]> = greater than or equal to IE8

Usages

<!--[if IE 8]>

<style type="text/css"> /* css for IE 8 */ </style>

<![endif]-->

<!--[if lt IE 8]>

<link href="ie7.css" rel="stylesheet" type="text/css" />

<![endif]-->

For more IE hacking take a visit here http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

share|improve this answer
    
Thanks for the answer. I am using a reset in the main stylesheet, but not a dedicated reset.css. The answer is good, but my problem is that I can't find any css that affects the sidebar for IE 6~8, so using a dedicated style sheet might not help me here. –  kwela12 Mar 5 '13 at 8:25
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.