I have following code which works fine in firefox and ie 8, but in IE 7 the second li is coming with some top space instead of same line.
<LI style="PADDING-LEFT: 20px">
Sort by: <SELECT id=ddSortOrder class='content-select'>
<OPTION selected value=0>Recommended
</OPTION></SELECT>
</LI>
<LI id=lipageAnchors><< | < | Previous |
<A class=current title=1 >1</A> |
<A title=2>2</A> |
<A title=3 >3</A> |
<A title=Next >Next</A> | > | >></LI>
The First <li> comes in left as expected but the second <li> should float to right, but it is to right with some extra space. I want both the <li> in same line (position), which works in firefox and IE 8 but in IE 7 is not.
Image link alt text http://www.imagechicken.com/viewpic.php?p=1275649526056730400&x=jpg
http://www.imagechicken.com/viewpic.php?p=1275649526056730400&x=jpg
Please help!
Thanks
Ashwani
There are a few html errors in your code.
Replace your < with %lt; and your > with >.
Because < > will render as a invalid html tag.
And remember to wrap your html-tag attributes values within " (double quotes) like this:
<li id="lipageAnchors"><!-- Content goes here --></li>
And to answer your question about the float:right, put it on the <ul> tag. You might also set a width on it to be sure you get it to the right.
I Hope this will be to any help.
This is because you have the following html code:
</LI>
<LI>
You should be fine if you put them into one line.
Related
I am new to HTML and so here is very basic question, for which unfortunately I could not find a hint any where . So I am putting it here. Basically, I have to use the tags href, and style both. How do I do it? For example, consider the following:
I have a list like this:
<ul>
<li style="color:blue;font-size:20px;text-align:justify">that is inclusive, innovative, and relevant</li>
</ul>
Now I want to have a hyperlink on the text :
that is inclusive, innovative, and relevant
For example, clicking the above text should go to google.com
How do I do this?
Here you go let me know the style is preperly applied or not.
<ul>
<li style="color:blue;font-size:20px;text-align:justify">that is inclusive, innovative, and relevant</li>
</ul>
You need to use the anchor tag <a> and set the href property to your url. The display text can go inside the element.
Visit Google
A list with two links:
<ul>
<li style="color:blue;font-size:20px;text-align:justify">
<a href="https://www.example.com">
that is inclusive, innovative, and relevant
</a>
</li>
<li style="color:blue;font-size:20px;text-align:justify">
<a href="https://www.w3.org/MarkUp/1995-archive/Elements/A.html">
Anchor tag spec
</a>
</li>
</ul>
Styles can be applied to the link or the list item. The browser does some default styling to anchor tags to make them blue and underlined, and purple after being visited. Often times this default styling is removed or overridden.
I'm trying to write this code:
<ul>
<li> 1
<li> 2
<li> 3
Whithout </li>.
How would this html code look on the Jade lang?
I don't think you should do this.
But here's a way (a really dirty hack. Not recommended!) - writing li/ would mean that li is self closing. So if you have doctype html, it would generate the desired output.
doctype html
...
ul
li/
| 1
li/
| 2
The output:
<ul>
<li> 1
<li> 2
</ul>
Again, you shouldn't do this. Just close the goddamn tag.
I got into this weirdest problem. I have an unordered list with two list items as
<ul>
<li><p>1</p>
</li>
<li><p>2</p>
</li>
</ul>
(end tag of 1st list item and start tag of 2nd are in different lines)
This html code works fine. But when I change the above code to
<ul>
<li><p>1</p>
</li><li>
<p>2</p>
</li>
</ul>
(end tag of 1st list item and start tag of 2nd are in same line and also there is no space in between them), the alignment breaks.
You can see the problem here
http://jsfiddle.net/Venugopal/AawU2/2/
At last found some workaround
click here
Why is the following code valid when I am using a <div> inside a <li>?
<ul>
<li class="aschild">
<div class="nav">Test</div>
</li>
</ul>
Yes you can use a div inside a li and it will validate.
<!ELEMENT li %Flow;>
<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
Inside a <li> you can have anything you could naturally put inside a <div>. They are no different in this sense.
It should be valid in HTML4, XHTML and HTML5 as well.
This is NOT valid though (so the sources you found about "no divs in lists" could refer to this situation):
<ul>
<li></li>
<div></div>
<li></li>
</ul>
So: Lists (ul, ol) can only have lis as their children. But lis can have anything as their children.
Because <li> is a block element, not an inline element like <span> or <a>.
An <li> is a block element, and will work perfectly fine with other block elements inside.
Yes, you can. As much as you want.
if you take a look with your developer tools and inspect katespade website's code you will find that you can add as many div inside a Li tag but you cannot add the tag as a child in <ul> or <ol>.
<ul>
<li> <div class="example1>
<span>lorem ipsum </span>
</div> </li>
<li> </li>
</ul>
here is an example on this katespade's web app
Katespade
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.