CODEWITHSUNDEEP
htmlcssinternet-explorer
Vinz Drum Drummer Zone
Vinz Drum Drummer Zone

Reputation: 19

A simple CSS margin or padding not working in Internet explorer

I created this css code for my website menu, it ads bullets between each menu link: CSS:

.main-nav>li:after{
content:'\2022';
    margin-bottom:25px;
    margin-top:25px;
color: #ac3834;
}

.main-nav>li:last-child:after{ 
content: none;
}

Works great on firefox but on internet explorer this css code is simply ignored ! I tested a reset css code with margins 0 and an if statement with php to load a different style for IE but still the same. IE simply ignore it and when i check the output code with webmaster tools the css on IE is striketrough what does that mean btw ?

Here is the working menu with the bullets testing website

Here is a picture of the IE11 weird bad behavior bug http://i63.tinypic.com/2n1e341.png

Any help would be much appreciated !

Upvotes: 0

Views: 587

Answers (2)

Yannick Huber
Yannick Huber

Reputation: 617

The problem is that the "bullet" is created by a glyphicon.

Unfortunately Glyphicons wont always work on IE.

IE normally has a setting to restrict font download. This is enabled by group policy and cannot be changed on standard workstations.

Se this article for further explanation: http://msdn.microsoft.com/en-us/library/ms533034(v=vs.85).aspx

Upvotes: 1

B. Dionys
B. Dionys

Reputation: 916

  1. there are specific ways for css to be build op for every IE version, so maybe u want to look that up. and if its striketrough it practicaly means that IE doesnt know what to do with the code.

  2. and i dont know if this is a legit fix or not but some people in my class found a script online that converts the css so that the css can be used on IE 11 so u can try to look that up to. (correct me if im wrong on the second option)

Upvotes: 0

Related Questions