I have nested ul tags under my standard ul - li tags, and apparently IE is having trouble displaying this properly. Ex:
<ul>
<li>things</li>
<li>more
<ul>
<li>more1</li>
</ul>
</li>
</ul>
Everything looks fine in Firefox and Chrome, but I just noticed that it's not working in IE 7, 8 or 9. You can see what I mean here: http://bovinsnbcattle.ca/
I would gladly appreciate any help.
Thanks in advance,
Bob
I had an extra ending li tag in there..., funny how I always figure it out after posting, but scratch my head for hours before doing so :/
It is working fine in IE versio 10
Edited After code shown by you
You can not use ul tag in li tag so close li tag
or u can use it as
<ul>
<li>
<li>
<ul>
<li>
<li>
</ul>
</li>
</ul>
Hope it wil work for you
Related
I have a really odd problem that only happens in Chrome. I am using Chrome Version 37.0.2062.124 and OS X 10.9.5.
I have a simple menu that appears when I hover:
<ul class="list-unstyled">
<li>email#test.com
<ul class="list-unstyled">
<li class="">Account</li>
<li class="">Update card</li>
<li class="">Update Subscription</li>
<li class="">View payment history</li>
<li>Logout</li>
</ul>
</li>
</ul>
Pretty standard procedure. The only problem is that it renders like this:
As you can see part of these li tags are not rendering. When I hover over the li tags themselves, however, they render properly. This only happens in Chrome and it does not happen in Chrome Canary.
Has anyone seen a problem like this before? If so I would be very grateful if you could help me fix it!
I am working on a drop down menu. Trouble that I am facing is that, I have a 3 level of <ul>, and in second level when height of a <li> increases because it was accommodating another <ul> then all other <li> of second level do not wrap around it.
You can visualize the situation in this Fiddle
when you hover your mouse over Technology then you would be able to see that size of Web Design <li> is greater because of another <ul> that it is accommodating, because of that Typography and Front end has dropped below. Is there any way to keep them wrapping around?
Html structure is like this:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li> <span>Technology</span>
<ul>
<li>Hot news</li>
<li>Sad news</li>
<li>Normal news</li>
<li>Web Design
<ul>
<li>Super power
</li>
<li>Aim Gain
</li>
<li>Acheivers
</li>
<li>Lackers</li>
</ul>
</li>
<li>Typography
</li>
<li>Front-End
</li>
</ul>
</li>
<li>Personal Stuff
</li>
</ul>
EDIT: Attaching few screenshots
This image shows present problem, see position of Typography and Front-end
Following image shows what I am trying to achieve, see position of Typography and Front-end
Here you go: JSFiddle
UPD: JSFiddle in acc to screenshot (Need to update CSS rules)
UPD: JSFiddle example based on classes
I've just removed the margin-left:20px; on #nav li ul li > ul
Tested on Safari 6.1 (Mac OS X 10.9) |
UPD: additionally tested on Chrome (30) & FF (23.0.1) under Mac OS X 10.9
I have an issue with links for which their focus is jumping around.
The site is here: www.bikramyoga.cz
The links that are troublesome are in this HTML piece:
<ul id="sub">
<li id="mail">
chci zasílat novinky
</li>
<li id="fb_icon">
to se mi líbí
</li>
</ul>
When I first created the site the links worked fine, now not so much.
Any ideas where my CSS is messed up?
If you display your <a> as block, instead of inline-block it seems to work as you want.
#mail a{display:block}
#fb_icon a{display:block}
I am currently trying to style my navigation bar with different colors for each list item.
Here is the html code
<ul>
<li id="item1">Home </li>
<li id="item2"> About </li>
<li id="item3"> News </li>
<li id="item4"> Video </li>
<li id="item5"> Donate </li>
<li class="part">Contact </li>
</ul>
And here is the css code
#item1{background:#7375D8};
#item2{background:#4E51D8};
#item3{background:#1A1EB2};
#item4{background:#303285};
#item5{background:#080b74};
#header ul li.part
{
background:#689AD3;
}
For some reason only item 1 and li.part are actually displaying the colors correctly , the rest display nothing in all browsers.
Dreamweaver however is displaying all the colors in the preview section so I have no clue what the problem is with them .
Many thanks for your contributions.
It's just a syntax error! The semicolons should be inside the curly braces!
#item1{background-color:#7375D8;}
#item2{background-color:#4E51D8;}
#item3{background-color:#1A1EB2;}
#item4{background-color:#303285;}
#item5{background-color:#080b74;}
#header ul li.part
{
background-color:#689AD3;
}
You have not closed the semicolons properly, it was outside the braces so thats the reason it was not working. See the css rules below for correct one.
Write your css like below:
#item1{background:#7375D8;}
#item2{background:#4E51D8;}
#item3{background:#1A1EB2;}
#item4{background:#303285;}
#item5{background:#080b74;}
#header ul li.part{background:#689AD3;}
the semi colons should be before the closing brace for each style. the unclosed tags are causing the problem
I am building a website, www.vitaminjdesign.com
In IE7, you will notice that in the footer, the first line of list items are indented a little bit. Does anyone know what CSS fix I need for this? THanks
try setting list-style-position: outside on your LI elements. Put it in a conditional stylesheet so it's only seen by IE7.
BTW, there are a lot of typos in your copy throughout the site -- you'll want to clean those up if people are to take your pitch seriously.
You could create an IE hack. Create a new stylesheet (e.g. ie-hacks.css) with the following (example class used, use whatever you want):
.ie-hack ul {
margin-left: -5px;
}
You may need to change the value of the margin-left in the style.
And in the footer, update the following code:
<ul id="info" class="ie-hack">
<li class="header">Vitamin J Design</li>
<li>a web & graphic design studio</li>
<li>info#vitaminJ.com</li>
<li>(609) 238-4513</li>
</ul>
<ul id="rfi" class="ie-hack">
<li class="header" class="ie-hack">Ready To Get Started?</li>
<li>Fill out our Request for Proposal form and tell us a little bit about your proejct</li>
<li style="margin-top:4px">How Much Will My Site Cost?</li>
</ul>
<ul id="navigate" class="ie-hack">
<li class="header">Navigate</li>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
And, in the "head" section of your markup, you need to add the following:
<!--[if IE 7]> <link href="path/to/above/stylesheet.css" rel="stylesheet" type="text/css"> <![endif] -->
You have different css files for IE7. When I load the page in IE I notice there is a warning triangle down in the status bar. It complains about css_ims not being defined at line 55, char 3. Check the IE-specific files for syntax errors (I mean what MS considers syntax errors).