I am using the following rule to display a dot when the web is visited by a IE.
However, I don't know why the li.iedot doesn't work for IE6.0. In other words, all #nav-primary li displays the dot rather than #nav-primary li which has class .iedot.
#nav-primary li.iedot
{
font-size:110%;
color:#666;
*background:url(http://static02.linkedin.com/scds/common/u/img/bg/bg_grey_dotted_h-line_3x1.png) no-repeat 0 7px;
padding-right:2px;
*padding-right:6px;
*padding-left:6px;
*zoom:1;
}
<body>
<div class="member" id="header">
<div class="wrapper">
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab iedot" id="nav-primary-home">
<span>Home</span>
</li>
<li class="tab iedot" id="nav-primary-profile">
<span>Profile</span>
</li>
<li class="tab" id="nav-primary-about">
<span>About</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
1> How to fix it? Or IE just cannot do it.
2> Where I can find some website that indicates which css feature is supported by IE?
Thank you
Quirksmode by ppk is the place to learn about the browser inconsistencies.
Added: why it doesn't work --
I think the IE 6 bugs with elements that have multiple classes may be tripping you up.
Test this out by changing your html to be
<li class="iedot" id="nav-primary-home">
instead of
<li class="tab iedot" id="nav-primary-home">
If that's the problem, then you'll need to use only one class name in the element. You could either invent a bunch of new class names or add a wrap div/span with the iedot class.
Related
I'm new with css completely, thanks god there have many articles on the net, just like "CSS for IBM Notes and Domino XPages Developers", but I'm still confused with it, now go to the problem I meet, I didn't use my own create theme but the native bootstrap4 theme
here is my code (part of)
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle">
</xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:pageTreeNode page="/View.xsp">
</xe:pageTreeNode>
<xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
<xe:this.image>
<![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
</xe:this.image>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
yes...i used Knut's idea about the badge,thanks for that~ Knut
html code(part of):
<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
<div role="main" class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
<ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
All Documents
</a>
</li>
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
<img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
In Process
</a>
</li>
</ul>
and this is what I want to show to user:
basically, I need this image float right always, that means I need add css myself, as I said beginning I have no idea with it although I read many people's article, and try this on my code, the interesting thing is it worked with below css...
<style type="text/css" media="print">
#applicationLayout1 {
background-color:blue;
}
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/06 update....yes, that's the media="print" thing...I used this css file before, but never try to remove it....How am I so stupid...thanks you guys help...and one more thing for me to do....reinstall my system....
<style type ="text/css">
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/10:final update, I think I found the problem is...I removed not only media="print",but also tags...and everything go to the peace....
.xspNavigator .nav-item img {
float:right;
}
I know it works because ".xspNavigator .nav-item img", the strange thing is if I remove the #applicationLayout1 , it will be back like this, just no effect with css anymore...I really really can't understand why....
so...what's my css file problem? thanks
Remove media="print" from the STYLE tag.
Remove the media="print" part because it tells the browser to only use the CSS when printing.
I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I am having an issue with IE positioning for li items position:absolute; . The structure works fine in all other browsers like this:
HTML
<div class="container">
<div class="container-nav">
<ul class="nav">
<a href="#">
<li id="an-item">Hi</li>
</a>
<ul>
</div>
<div>
All parent containers are position:relative and work fine in other browsers. In IE with this format the items start the positioning relative to outside the container. The only way I got it to be right is adding position:absolute; to the <a> tag. When I do this though it throws off all the other browsers. Any way to fix this? Should I use conditional CSS or is that not a standard anymore?
you can't put an anchor tag inside a ul IE doesn't allow that other browser are way friendly with some invalid HTML structure but not the case with IE what you can do is the following :
<div class="container">
<div class="container-nav">
<ul class="nav">
<li id="an-item">Hi</li>
<ul>
</div>
<div>
put your anchor tag inside the li
Here is example for my code
<style>
.hover:hover,.active{color:red}
</style>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
If you mouse over on blog, there will be two red words
i am trying to find a way to disable "home" when you mouse over any other word
and then it back red if you moved the mouse away
After long search with google, i finnally found javascript code
And tried to modify it to work, but no luck
Here is a pure CSS solution, that will work so long as you have a wrapper element for there li's, which you should.
<style>
.menu:hover .active {
color: black;
/*reset the color to the default*/
/*you could also use color: inherit*/
}
.hover:hover,
.active,
.menu:hover .active:hover {
color:red
}
</style>
<ul class="menu">
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
One thing I am noticing right off is the improper markup
there is no
that may not have anything to do with it.
<style>
.hover:hover,.active{color:red}
</style>
<ul>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
not exactly sure what you are trying to do
here is a fiddle http://jsfiddle.net/happymacarts/tfqw93tk/
maybe paste the js code you found and see if we can figure out your issue
My navigation is changing position in windows explorer 9. It should sit under the heading of the site and works perfectly in Chrome and newer versions of internet explorer. In 9 it appears over the main heading at the top of the page. I tried adding a border around the .nav class and in explorer it adds a border where the nav should be and its new position at the top of the page, weird! Hope someone can help.
link below is a jsbin showing the problem.
Joe
HTML5
http://jsbin.com/lehul/1/edit?html,css,output
This is very problematic because it's entirely encased in an anchor, so in theory, none of the menu links should work correctly either.
http://jsbin.com/lehul/1/edit#/zuvaxubo/1/edit
This should fix it:
<div class="background_nav"></div>
<div id="InvisHeader">
<div class="container">
<a href="index.html" style="text-decoration: none;">
<div id="heading">
<h1>Suzi Mclaughlin Design</h1>
<p>Designing flowers and stuff since forever like u know and stuff!</p>
</div> </a>
<div class="nav">
<ul>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>