How do you get Internet Explorer 6 and 7 to not literally interpret whitespace and line breaks in HTML list items? In the image below, I have marked the undesired whitespace in red. I would prefer to not squeeze everything into one giant line of code. It's very hard to read that way. Is there a CSS alternative?
<ol>
<li>
<img>
Sentence 1
Sentence 2
</li>
<li>
<img>
sentence
</li>
<li>
sentence
</li>
</ol>
Here is some useful information Closing gaps in ie
Use a different browser? haha, but in all seriousness, i would suggest just formatting your code to show it properly. Perhaps encapsulating the sentances in spans could do it
<ol>
<li>
<img>
<span>Sentence 1</span>
<span>Sentence 2</span>
</li>
<li>
<img>
<span>sentence</span>
</li>
<li>
<span>sentence</span>
</li>
</ol>
Related
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
I'm using Sublime Text 2 for some find&replace operations. I'm looking for a regex that replaces only the h1 classes tags to bootstrap breadcrumbs, but doesn't affect the content inside them. Each h1 tag has a different text and as there're over 700 files, doing this manually is a hard work!
For example, i'd like to replace this:
<h1 class="xyz">SOME CONTENT</h1>
To this:
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>SOME CONTENT</span>
</li>
</ol>
That "SOME CONTENT" would be the text that I want to keep.
It is possible?
I'm using this code to find the tags and content:
<h1 class="xyz">[^<>]*</h1>
But if i replace to this:
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>[^<>]*</span>
</li>
</ol>
It replaces the text (which I want to keep) with the expression [^<>]*.
Any idea?
Here is another example (I do not think it is necessary to include the closing >):
<h1 class="xyz">([^<]*)</h1>
The capturing group ([^<]*) its saying “Anything that is not a < zero to more times”
And then you should use the captured group with \1 or $1, (I do not know how it works on sublime)
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>\1</span> <!-- or $1, the one sublime text uses -->
</li>
</ol>
You can achieve it like this :
find using :
<h1 class="xyz">([^<>]*)</h1>
replace with :
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>$1</span>
</li>
</ol>
In the search field, you'll need to capture the text you want in a group with brackets :
<h1 class="xyz">([^<>]*)</h1>
And in the replace field, use the captured group with $1 like this :
<ol class="breadcrumb">
<li>
anylink
</li>
<li>
<span>$1</span>
</li>
</ol>
Hope it helps.
<li> text text ( text ) </li>
I don't know it confuses me, an a tag inside li tag between 2 parentheses ?
Yes:
<li> text text ( text ) </li>
If not, you wouldn't be able to do things like
<ul>
<li>this is a list item with an inline link</li>
</ul>
Html is a very flexible language and some bad codes works that you think that will never works! But your code has no problem.
And you could write that in this way:
<li> text text (text) </li>
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
It seems like with html like
<ul id="projectsList" class="list-style-1">
<li>
<a href="/projects/view/1">
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</a>
</li>
</ul>
firefox adds markup to make it
<ul class="list-style-1" id="projectsList">
<li>
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</li>
</ul>
I narrowed the problem to the meta list items if I comment out the meta list, it works http://jsfiddle.net/MSegC/2/
I want to use the <a> as a block level element as I want the user to be able to click the whole box to enter the link
A is not a block level element in html (at least in html 4) so the short story is you can't use it like this :). That's why FF breaks' it for you.
http://htmlhelp.com/reference/html40/block.html
You should do what you want with an onclick event on the containing block.
Another option seems to be to force the doctype of the page to be html5 since in html5 it is possible for a to be a block level element.
http://davidwalsh.name/html5-elements-links
As previously mentioned, <a> is not a block-level element, but you can make it into one by setting the display property to either block or inline-block.
display:block; should make it act like any other block-level element.
display:inline-block; is a half-way house between making it a block-level and an inline element. If display:block; makes your page layout go nuts, then use inline-block instead.