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
Related
There's this fixed header element (a block element), with an absolute positioned nav element with a menu, and another fixed element as the logo:
<header>
<nav id="menu">
<ul id="menuItems">
<li class="menu-item" role="menuitem">About</li>
<li class="menu-item" role="menuitem">Contact</li>
</ul>
</nav>
<div id="topLogo">
<h1>MAIN</h1>
<h2>SUB</h2>
</div>
</header>
The <header> doesn't have dimensions, it doesn't take-up space (check out with an inspector tool).
I need it to take space (and still be fixed).
Look at the JSFiddle to see it with the complete CSS as well:
https://jsfiddle.net/5amo16q8/4/
Changing the nav to float:left and removing the position:absolute seem to create to desired result.
See: https://jsfiddle.net/5amo16q8/8/
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
so I have been trying all this stuff with first-child and everything and none seem to be working. If I have a div set up as such:
<div class="content">
<div class="thing">
abd
</div>
<div class="thing">
</div>
<div class="thing">
123
</div>
<div class="thing">
<li class="list" goal="target">
1
</li>
</div>
<div class="thing">
<li class="list">
2
</li>
</div>
<div class="thing">
<li class="list">
3
</li>
</div>
<div class="thing">
<li class="list">
4
</li>
</div>
</div>
what line of css that will be able to target only the first li element in the .content div (the one with the attribute goal="target")
now this can be fairly messy and there can be anywhere from 0 to 10 divs without a li before the first that contains one.
I have tried nearly anything with first-child, but it always targets every single li because they are in divs.
here is a jsfiddle if you want to try things
In CSS the format is grandparent parent element child... and :nth-child gives you the element the number specified down, so for your case that would be
.content .thing:nth-child(4) li {
/* CSS goes here */
}
In your example .content is the grandparent, .thing (the fourth one) is the parent, and of course the li is the element. Spaces are required for distinguishing in between levels in CSS.
Here is a working jsFiddle
Edit Without it being hard coded it's impossible to select the first li no matter who it's parent is without javascript.
Here is a jQuery fix:
$('.content').find("li").eq(0).css({ /* CSS goes here */});
Here is a straight javascript fix:
var elems = document.getElementsByTagName('li')[0];
elems.style.property="value";
OK first things first, goal is an invalid attribute so you shouldn't be using it. If you need custom attributes you should be using data-attributes
In order to target an element by attribute you should be using an attribute selector in your case the following selector would work.
li[goal="target"]{
/* Your styles go here.*/
}
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.