WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:
Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users
Course Of The Month
1 day, 19 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
css in Firefox vs IE
Posted on 2013-01-08
Hi, I am trying to remove a spacer line (dashed line in a list) using this code. It works in FireFox, but not in IE.
Both work in FF:
li.ms-MenuUIULItem[type='s
display: none;
}
li[type='separator']{
display: none;
}
This is what I am trying to get rid of:
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator"><div type="separator" class="ms-MenuUISeparator"
Both work in FF:
li.ms-MenuUIULItem[type='s
display: none;
}
li[type='separator']{
display: none;
}
This is what I am trying to get rid of:
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator"><div type="separator" class="ms-MenuUISeparator"
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
11-
7
3- +1
24 Comments
depending on the version if IE and HTML, your "type" property may be invalid, and thus will be ignored.
get rid of the type property, it's not adding any value, and just use classes.
get rid of the type property, it's not adding any value, and just use classes.
Thanks, but that is not an option, I have other li's that have the same class "ms-MenuUIULItem". This is actually a SharePoint site and I have no control over the output.
Kyle is right the declaration is only semi-supported in IE... AFAIK it works for IE9; will work with a strict doctype for IE8 and maybe IE7.
Using complex declarations when a simple class is all that you need is not good practice.
Cd&
Using complex declarations when a simple class is all that you need is not good practice.
Cd&
Thanks for the response. I am unable to change the html. I can only change the css.
Is there any way to fix this issue only using css?
Is there any way to fix this issue only using css?
Since there is an id, and id's must be unique, you can use the id to target the element:
#mp5_0_4{
display:none;
}
Sorry, I don't have access to the id's there is more than one separator.
This is the entire code that I have access to and the ID is not guaranteed:
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator"><div type="separator" class="ms-MenuUISeparator"
This is the entire code that I have access to and the ID is not guaranteed:
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator"><div type="separator" class="ms-MenuUISeparator"
It is dynamically loaded and I don't have any access to anything.
So it is impossible to hide this only using css?
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator"><div type="separator" class="ms-MenuUISeparator"
So it is impossible to hide this only using css?
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator"><div type="separator" class="ms-MenuUISeparator"
more to the point: as long as it's not "broken" then it's not worth the aggravation. Most people won't even notice.
I wish that were the case. If it were up to me, I would leave it. My client is hell bent on getting this resolved. Thanks for all your help.
Also, I am removing other entries which leaves a bunch of those seperators next to each other.
Also, I am removing other entries which leaves a bunch of those seperators next to each other.
The CSS samples you posted work in "IE8 Standards Mode" and "latest FireFox", but they don't work in "IE7 Standards Mode".
With that in mind, I took a JavaScript approach towards physically removing the <li>.
If you have jQuery on your SharePoint site, this works with IE7, IE8, IE QuirksMode, and Firefox 10:
If you don't have jQuery on your page, this works too - you will need to fiddle with lines 20 and 21 so that they work on your pages and not just this test code:
With that in mind, I took a JavaScript approach towards physically removing the <li>.
If you have jQuery on your SharePoint site, this works with IE7, IE8, IE QuirksMode, and Firefox 10:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<body>
<div id="container">
<style>
li[type='separator'] {display: none;}
div[type='separator'] {display: none;}
ul li[type='separator'] {list-style-type: none;}
</style>
<ul>
<li>Echo</li>
<li>1</li>
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator">
<div type="separator" class="ms-MenuUISeparator"> </div>
</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
$('ul li').each(function() {
if ($(this).attr('type') == 'separator') {
$(this).remove();
}
});
</script>
If you don't have jQuery on your page, this works too - you will need to fiddle with lines 20 and 21 so that they work on your pages and not just this test code:
<body>
<div id="container">
<style>
li[type='separator'] {display: none;}
div[type='separator'] {display: none;}
ul li[type='separator'] {list-style-type: none;}
</style>
<ul>
<li>Echo</li>
<li>1</li>
<li id="mp5_0_4" class="ms-MenuUIULItem" type="separator">
<div type="separator" class="ms-MenuUISeparator"> </div>
</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
var div = document.getElementById('container'),
ul = div.getElementsByTagName('ul')[0],
li = ul.getElementsByTagName('li'),
len = li.length;
while (len--) {
if ( li[len].getAttribute('type') == 'separator') {
ul.removeChild(li[len]);
}
}
</script>
That kind of restrictive approach is not web development. It is more like building a ship in a bottle while blindfolded and wearing boxing gloves. Your client is a moron.
Cd&
Cd&
Off topic, but no, the client is not a "moron" for not letting jackjohnson (presumably a contractor for hire) to make modifications to a working SharePoint site. Opening up (recompiling, etc.) the SharePoint code exposes an additional layer of risk to the project.
In other words...
The mechanics I trust to put tires on my car and do an alignment is not the same set of mechanics I trust to replace a tie-rod or make adjustments to the frame.
In other words...
The mechanics I trust to put tires on my car and do an alignment is not the same set of mechanics I trust to replace a tie-rod or make adjustments to the frame.
If the client is not prepared to give the access required for the changes they want then they are stupid to expect the work to get done.
Any real mechanic who cannot competently do both should not be allowed to do either. If the client does not consider jackjohnson qualified; then why would they hire him?
Cd&
The mechanics I trust to put tires on my car and do an alignment is not the same set of mechanics I trust to replace a tie-rod or make adjustments to the frame.
Any real mechanic who cannot competently do both should not be allowed to do either. If the client does not consider jackjohnson qualified; then why would they hire him?
Cd&
I can see where nap0leon is coming from, but it's kind of hard to argue with this one:
If the client is not prepared to give the access required for the changes they want then they are stupid to expect the work to get done.
Hey guys, thanks for all of the help. I got around my issue bu hiding all li's with that class, then explicitly showing them by matching on the text attribute.
li.ms-MenuUIULItem{
display: none;
}
li.ms-MenuUIULItem[text^='
li.ms-MenuUIULItem[text='E
display: block;
}
"That kind of restrictive approach is not web development. It is more like building a ship in a bottle while blindfolded and wearing boxing gloves. Your client is a moron."
I totally agree, and call that approach SharePoint development.
li.ms-MenuUIULItem{
display: none;
}
li.ms-MenuUIULItem[text^='
li.ms-MenuUIULItem[text='E
display: block;
}
"That kind of restrictive approach is not web development. It is more like building a ship in a bottle while blindfolded and wearing boxing gloves. Your client is a moron."
I totally agree, and call that approach SharePoint development.
He gave a viable answer to my problem. Everyone else told me the premise of my question is incorrect or that my requirements were derived by morons.
I gave you plenty of viable answers prior to that. Then I suggested using Javascript which you rejected.
Featured Post
Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
- Windows OS
- Windows XP
- Windows 7
- Mac OS X
- Windows 10
- Windows 8, Software-Other, System Utilities, Vulnerabilities, Web Browsers
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS
Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month1 day, 19 hours left to enroll
717 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.