Solved

css in Firefox vs IE

Posted on 2013-01-08
24
278 Views
Last Modified: 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='separator']{
        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">&nbsp;</div></li>
0
Comment
Question by:jackjohnson44
[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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755154
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.
0
 

Author Comment

by:jackjohnson44
ID: 38755210
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38755223
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&
0
To Patch or not to Patch? That is the question!

Don't get caught out like thousands of others around the world in the recent Ransomware Fiasco!
Discuss..
- Why it's not a good idea to wait before Patching
- Sensible approaches to Patching discussed
- Add your feedback, comments and suggestions

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755262
you can have multiple classes, like this:

<li class="my-class1 my-class2 my-class3">
0
 

Author Comment

by:jackjohnson44
ID: 38755275
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?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755300
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;

}

Open in new window

0
 

Author Comment

by:jackjohnson44
ID: 38755326
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">&nbsp;</div></li>
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755444
then you'll have to use javascript if you want older browsers to behave.
0
 

Author Comment

by:jackjohnson44
ID: 38755510
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">&nbsp;</div></li>
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755550
no. not for browsers that don't support custom attributes.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755556
my recommendation is: dont fret your pretty little head over IE < 9. You'll be happier.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755569
more to the point: as long as it's not "broken" then it's not worth the aggravation. Most people won't even notice.
0
 

Author Comment

by:jackjohnson44
ID: 38755615
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.
0
 
LVL 18

Accepted Solution

by:
nap0leon earned 500 total points
ID: 38755637
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:
<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">&nbsp;</div>
		</li>
		<li>3</li>
		<li>4</li>
		</ul>
	</div>
</body>
<script>
$('ul li').each(function() { 
	if ($(this).attr('type') == 'separator') {
		$(this).remove();
	} 
});
</script>

Open in new window


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">&nbsp;</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>

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38755748
if the client is so hellbent on it, then they need to give you access to the code. no?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38755774
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&
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 38756027
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38756068
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.  

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&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38756090
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.  
0
 

Author Comment

by:jackjohnson44
ID: 38756148
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^='View Properties'],
    li.ms-MenuUIULItem[text='Edit Properties'] {
        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.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38756232
not sure on what basis you accepted the answer - you're not even using it.
0
 

Author Comment

by:jackjohnson44
ID: 38756369
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.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38756387
I gave you plenty of viable answers prior to that. Then I suggested using Javascript which you rejected.
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 38756675
Unfortunately, I agree with those that say to not award me points for it...
My answer doesn't tell you how to do it with CSS - you figured that out on your own!
0

Featured Post

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
title attribute 5 33
Keyup listener getting fired on initial page load 1 52
Replace statements HTML with HTML IF 8 63
Doubt with angularJs with PHP 4 17
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…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question