Custom .css for IE not working

  • Resolved felilikesflowers

    (@felilikesflowers)


    12 years, 1 month ago

    Hello,
    so I am finished with my website and it looks great on all major browsers except, of course, IE.

    I have spend the last 2 days looking all over the forums for an answer to why Internet Explorer isn’t reading the custom ‘iestyle.css’ file I created for it.

    It all seems very simple and makes a lot of sense to create a second css file just for ie, but for some reason it is not working for me.

    Any help with this would be greatly appreciated.

    I am working with IE7 and created a child theme of twenty eleven. The url is https://www.enlightenedinnergame.com

    So I duplicated the style.css file, renamed it iestyle.css and uploaded it with my FTP client to my child theme’s folder ‘twentyeleventest’.

    In my header.php file I added this between the <header></header> tags:

    <!--[if lte IE 7]>
<link href="https://www.enlightenedinnergame.com/wp-content/themes/twentyeleventest/iestyle.css" rel="stylesheet" type="text/css" />
<![endif]-->

    I tried out different versions for the url, but nothing seems to work.

    If everything would work fine, I would have to edit the custom .css file solely through the FTP client, correct?

    If anybody is out there that is familiar wit this old problem and can tell me how to overcome it, please help!!

    Thank you so much in advance,
    Felicitas

Viewing 15 replies - 31 through 45 (of 45 total)
  • Thread Starter felilikesflowers

    (@felilikesflowers)

    Oh, haw cool is that!! ?? Yay!

    Is that a ‘hack’ that people warn about or is that a safe practice?

    I’m excited! Thank you so much! I go try it. Is that how you usually work around ie bugs?

    Thread Starter felilikesflowers

    (@felilikesflowers)

    hmmm… so I tried it with a top-margin I’m having trouble with, but nothing changed. I probably didn’t use it right:

    .page-id-26 .entry-content.ie7 {

	margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
	width: 100%;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	color: black;
	padding: 20px;
}

    So I just copied the regular code .page-id-26 .entry-content and put a .ie7 at the end.

    Is this right?

    Nothing changed when I changed the margin-top from 20 to 70… Any idea?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Is that a ‘hack’ that people warn about or is that a safe practice?

    It’s just using HTML which you were using before;

    <!--[if lte IE 7]>

<![endif]-->

    Which we know is a legitimate way of checking if the browser is particular versions of Internet Explorer.
    You can add anything within that and it’ll apply it those IE versions, it doesn’t have to load a stylesheet.

    The JavaScript inside is just adding a class to the <body> element, through its function addClass.

    Here’s the code annotated;

    <script type="text/javascript">

 //Check whether all the HTML elements has loaded
 jQuery(document).ready(function($) {

    //Then find the body element (<body>) and add a class named ie7 to it
    $('body').addClass('ie7');
 });
</script>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    hmmm… so I tried it with a top-margin I’m having trouble with, but nothing changed. I probably didn’t use it right:

    Make sure the .ie7 class is right at the start of your styles.

    E.g it needs to be this;

    .ie7.page-id-26 .entry-content

    Edit: If you read my recommendations about adding a space – Sorry, you don’t need to add the space.

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Thank you.

    So I tried changing

    .page-id-26 .entry-content,
.page-id-3508 .entry-content,
.page-id-60 .entry-content,
.page-id-136 .entry-content,
.singular #comments-title
{
	margin-left: auto;
	margin-right: auto;
	margin-top: -10px;
	width: 100%;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	color: black;
	padding: 20px;

}

    To this

    .ie7 .page-id-26 .entry-content.,
.ie7 .page-id-3508 .entry-content,
.ie7 .page-id-60 .entry-content,
.ie7 .page-id-136 .entry-content,
.ie7 .singular #comments-title {

	margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
	width: 100%;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	color: black;
	padding: 20px;
}

    (The code is for the left column with the main content.)

    With the margin-top changed from -10px to 70px (to see a dramatic change), but it still looks like this

    https://www.enlightenedinnergame.com/wp-content/uploads/2013/01/ScreenHunter_05-Jan.-27-13.06.jpg

    :(…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sorry, I mistakenly recommended you to add a space after .ie7.
    It should be this;

    .ie7.page-id-26 .entry-content,
.ie7.page-id-3508 .entry-content,
.ie7.page-id-60 .entry-content,
.ie7.page-id-136 .entry-content,
.ie7.singular #comments-title {

    Also notice in this example I’ve removed the fullstop on the end of the first line; from your most recent post:

    .ie7 .page-id-26 .entry-content.,

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Unfortunately it still doesn’t work… So weird!!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you post here the CSS that doesn’t work?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Are you working locally? I can still see the original link to the iestyle.css file on your website.

    Thread Starter felilikesflowers

    (@felilikesflowers)

    oops…so sorry, I forgot to update the header.php file.
    Buuuuut…..unfortunatelt it still looks he same :(.

    One question, why do we have to specify for what version of IE it is? Can’t we make it for all IE at the same time?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can apply it to all of IE if you want. You don’t have to specify a version.
    It’ll just be;

    <!--[if IE]>
 ...
<![endif]-->

    I tested your CSS and added a background of red. It worked.
    It’s just your margin styles that aren’t working.

    Instead of margins, try using a relative position and the CSS top property;
    E.g,

    .ie7.page-id-26 .entry-content,
.ie7.page-id-3508 .entry-content,
.ie7.page-id-60 .entry-content,
.ie7.page-id-136 .entry-content,
.ie7.singular #comments-title {
	position:relative;
	top: 20px;
}

    Thread Starter felilikesflowers

    (@felilikesflowers)

    That is so weird, Andrew.
    None of the changes work here…
    I tried it with position: relative and I tried changing the font color to red…but nothing…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh right, I see the problem.
    You need to move this section;

    <!--[if IE]>

<script type="text/javascript">
 jQuery(document).ready(function($) {
    $('body').addClass('ie7');
 });
</script>

<![endif]-->

    Further down in the <head> section. Try moving it just before the </head> element.

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Yes!!!!! That was it! OMG, what a relief!!

    Great! Thank you so much! Now I can start editing the heck out of the code for ie. Phew. ??

    Awesome, I will get to work then.
    Thank you Andrew, you really saved me here!!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    And Thanks to you, Esmi and WPyogi for contributing to WordPress’ community ??

Viewing 15 replies - 31 through 45 (of 45 total)
  • The topic ‘Custom .css for IE not working’ is closed to new replies.