For some reason, in IE only (tested so far on IE 8 with and without compatability mode), my visited links in an unordered list indent after being visited.
http://etech.916networks.com
My HTML (generated dynamically via PHP):
<ul>
<li>
<a target='_blank' href='http://www.test.com/mylink.html' title='Systems Engineer'>Systems Engineer</a>
</li>
<li>
<a target='_blank' href='http://www.test.com/mylink2.html' title='Validation Engineer'>Validation Engineer
</a>
</li>
</ul>
My CSS (extra stuff in here trying to get it to work):
#latest-updates li {
list-style-type: none;
list-style-image: none;
color: #3c758c;
padding-bottom: 4px;
list-style-position: outside;
}
#latest-updates a, a:visited {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
text-indent: 0;
padding; 0;
margin: 0;
}
#latest-updates a:hover {
text-decoration: none;
color: #25b6d6;
}
Any help is appreciated, this is driving me crazy!
Thanks!
In your second CSS block I believe you want.
#latest-updates a, #latest-updates a:visited
Otherwise you are applying that style to all 'a' tags in latest-updates plus all visited 'a' tags on the entire page.
I've had similar problems before but not in IE8.
Try resetting the margin and padding on the parent element, which would be ul. So try adding this:-
ul{ margin:0; padding:0; }
Related
I have an issue with internet explorer. I have been building a menu with CSS and html and everything works just fine in the other web browsers, but when it comes to Internet Explorer, the bullet points appear when you hover over the menu item for a moment. They have all been hidden with CSS and I've tried adding the list-style: none element wherever I can but nothing is working. Any ideas?!
Website: http://www.carrallinson.com
I can add more information on the CSS but it's all pretty complex. As a snippet:
.main-navigation ul ul li {
padding: 0;
text-align: left;
list-style: none;
}
.main-navigation ul ul li:hover,
.main-navigation ul ul li.focus {
background: #fff;
opacity: 1.0;
list-style: none;
}
So that is what is confusing. It's all been listed as "none" yet somehow appears?!
I think you can make use of this for the older IE versions. Not sure if it would work for IE8 as list-style-type:none works well for IE11.
Reference: https://github.com/tjvantoll/jquery-ui/commit/6acd1c8640b271db7df03f1457a817d5d6a1f29d
li {
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
Another alternative is to use:
li {
list-style-position: outside;
overflow: hidden;
}
li {
list-style-position: outside;
overflow: hidden;
}
Position the bullet outside of the list and hide the overflow.
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
here is my html code
<div id="menus">
<ul>
<li>Home</li>
<li>Users</li>
<li>Project Manage</li>
<li>Transaction</li>
<li style="border-right:none;">Logout</li>
</ul>
</div>
here is my CSS
#menus li
{
float:left;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
border-right:groove 1px #FFFFFF;
background: #666666;
}
#menus li:hover
{
background: #999999;
}
#menus li a
{
font-size:24px;
text-decoration:none;
color:#FFFFFF;
}
#menus li a:hover
{
color:#000000;
}
now i want to change css when user click on li (like display current selected). can I do this using css only?? If yes then how??
Thanks in advance..
You can do it with CSS only using focus and tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/
li:focus {
background: red;
outline: 0;
}
A good way to employ an 'active' menu item solution is this
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/
Source: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
No, you can not do this with just css. I am not too sure what to say...
If you want to have a page specific active, place a different class in the backend, example:
I am having trouble targeting this fifth anchor tag. I simply want to separate the final anchor visually from the rest of the list but I still want it grouped (obviously by the ul)
Any help is appreciated!
ul>
<li>PORTFOLIO:</li>
<li>layout</li>
<li>logo design</li>
<li>print design</li>
<li>Contact Me</li>
</ul>
#mainNav a {
color:#428896;
text-decoration: underline;
}
#mainNav ul>:first-child {
letter-spacing: 2px;
text-decoration: none;
}
#mainNav ul li:nth-child(5) {
padding-left: 50px;
}
If you want the last anchor why just not use:
ul li:last-child a{
letter-spacing: 2px;
text-decoration: none;
color:red;
}
http://jsfiddle.net/4fs2s/
And in your example ul doesn't have #mainNav id
Your selector is fine. The property for the left padding is padding-left, not padding:left.
See this fiddle > http://jsfiddle.net/QL7ds/
Is it a typo that your last li is not closed?
Your CSS is wrong. padding:left: 50px; should be padding-left: 50px;
ul li:nth-child(5) {
padding-left: 50px;
}
jsFiddle example
I have an unordered list with different bullet images and i'm trying to align the words for each list item as vertically centered. While I can do this in Chrome and Safari, the effect for vertical-align:top is not getting properly displayed in Firefox.
I have done a JS Fiddle right here. How can I amend the css so that the words appear vertically in the middle of each bullets in Firefox?
I'm replicating the JS Fiddle html codes here:
<ul>
<li>Here is line one</li>
<li>Here is line number two</li>
<li>three with link</li>
</ul>
I'm replicating the JS Fiddle css codes here:
ul li a {
line-height: 40px;
vertical-align: top;
}
ul li {
font-family: Arial,"MS Trebuchet",sans-serif;
font-size: 12px;
line-height: 40px;
margin-left: 60px;
margin-top: 20px;
vertical-align: top;
}
ul li:first-child {
list-style-image: url("http://chinee.heroku.com/assets/venue.png");
}
ul li:nth-child(2){
list-style-image: url("http://chinee.heroku.com/assets/airport.png");
}
ul li:nth-child(3){
list-style-image: url("http://chinee.heroku.com/assets/hotel.png");
}
The only way of getting consistent results across browsers is applying the list images as background images, so instead of list-style-image: url("hotel.png"); you use background-image: url("http://chinee.heroku.com/assets/hotel.png"); and position from there.
Here is an example:
http://jsfiddle.net/dC7xr/
Ok,
So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet.
This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty.
ie8 bug http://www.rocketspark.co.nz/bug_images/ie8_list.png
When I remove the a tag from the li then it jumps back up.
Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my css?
Any insights would be much appreciated.
As asked here is some code
<div id="sub_nav">
<ul>
...
<li><a class="active_page" href="#">Liposculpture</a>
<ul>
<li>What is Liposculpture?</li>
<li>About Liposculpture surgery</li>
<li>After Liposculpture surgery</li>
<li>Post Op Instructions</li>
<li>Liposculpture Side Effects</li>
<li>Liposuction Introduction to</li>
<li>Tumescent Liposculpture</li>
</ul>
</li>
...
</ul>
</div>
For the CSS I will try and show it best I can
#sub_nav li {
width: 200px;
padding:4px 0;
border-bottom: 1px #CCC solid;
}
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
#sub_nav li ul li {
list-style-position: inside;
list-style-type: disc;
font: 11px Arial;
padding-left:15px;
color:#FFF;
border-bottom: none;
}
#sub_nav li ul li a {
padding:0;
margin:0;
text-indent: 0;
}
Hope this helps
change
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: block;
}
to
#sub_nav li a {
text-decoration: none;
color:#555;
padding:7px 15px 7px 15px;
display: inline-block;
*display: inline;
*zoom: 1;
}
#salgiza posted the answer in the comments above... "it looks like IE8 is having problems when calculating the width of the "a" (displayed as block) and pushing it down to a new line. The first thing I would try would be adding a width to the "a" element, to see if that's the problem."