<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<li>
this is a test "li" without a parent "ul"</li>
<li>
this is a test "li" without a parent "ul"</li>
<li>
this is a test "li" without a parent "ul"</li>
<li>
this is a test "li" without a parent "ul"</li>
Above list items will not be displayed in IE8 when not wrapped into an <ul> tag. Is it a bug or the expected behavior ?
The specification requires <li> elements to be a child of specific parent elements. It looks like a parent element to <li> is missing from your example.
Not the spec but Mozilla’s documentation:
The HTML <li> element is used to represent an item in a list. It must
be contained in a parent element: an ordered list (<ol>), an unordered
list (<ul>), or a menu (<menu>).
li stands for "List Element". Therefore, you should enclose them in a ul (unordered list) or ol (ordered list).
li tag alone may likely work in modern browsers (but HTML code will not conform to the standard you are using), but not in Internet Explorer 8!
First this is not the correct syntax to use Li without ol or UL.
If then also you want to display the list in IE 8 without adding ul or ol then try to create a JS function that identifies the IE 8.
Then if it is IE 8 then loop though all the li elements.
Then add '•' character before the text.
It will look similar like bullets with li elements.
• one
• two
• three
Related
I'm trying to create a space and a half between the text and the date in my website without using two "< br/ >" tags. The code that you see below works perfectly fine in Firefox but it doesn't work at all in IE. If I use two "< br/ >" tags, it creates too much space and I only want one space and a half without using CSS. I know that I can easily do this with CSS but the code that I have works fine in FF and it just doesn't work in IE. I think for some reason IE doesn't like "margin-bottom" and it's not rendering it all.
Code:
<p class="text">blah blah blah<br style="margin-bottom:8px;"/>17 August 2013, 2:30pm EST</p>
Output in FF:
Blah blah blah blah
17 August 2013, 2:30pm EST
Output in IE:
Blah blah blah blah
17 August 2013, 2:30pm EST
You could use two p tags and control the margin on them or use line-height to give you what you want. I can't comment specifically without seeing more of the code.
But something to try whilst waiting for another answer.
I'm building my website using only html and css. I've read several tutorials and did my research, but now I'm stuck in an area. I have created a menu on top of my page using ul and li and within the li are the links. the links themselves hold more info other than just the link. There is a span after them, and the span shows info that I will show after the user clicks on the link. I use a:focus for the info to show on the page. So the structure is:
<ul>
<li><a href="#" tabindex="1">RESUME
<span class="resume">
blah blah blah
</span></a>
</li>
<li><a href="#" tabindex="1">My artwork
<span class="artwork_area">
blah blah blah
</span></a>
</li>
</ul>
While it's fine that the resume section works well with a:focus, and getting it to display on the page only after the user clicks on it, it will not work the same with 'my artwork' because I need to have more links inside that section. I know that it's not allowed to have links nested inside other links, so how can I get the code to look like this?
<ul>
<li><a href="#" tabindex="1">RESUME
<span class="resume">blah blah blah</span>
</a>
</li>
<li>My artwork<!--notice how the link ends here-->
<span class="artwork_area">
<p>blah blah blah
<img src="assets/images/large_image1.jpg"/>Pic1
<a href="assets/images/image2.jpg" ><img src="assets/images/large_image1.jpg"/>Pic2</a>
</p>
</span>
</li>
</ul>
This is where I'm stuck. I can't figure out how to make that span section appear without nesting it inside the link, but that won't be acceptable to nest another link within it.
I've only been reading and putting to practice html and css for about 3 weeks, so I'm not that savvy yet. I would really like to do my website in only html and css as I see it is more convenient and loads much faster. I made a short youtube video to explain how it currently looks.
You should look into the :target pseudo element. This way you could hide the content in an div with an id and then link to this id with the #-sign. Have a look at this example. It messes up jsfiddle a bit but works good when you do it on your own page.
Here is a nice read on the :target pseudo element. CSS-Tricks
Hope this can help you.
Update
Here's a better example
Short Answer
I had a quick look on the w3schools css selector reference and noted the element+element selector with example:
div+p -> Selects all <p> elements that are placed immediately after <div> elements
So I tried the following style and it works for your second example
a:focus+span {
display:block;
}
And The Rest Of It
I've made an assumption on what your css looks like - perhaps you could edit your question to show this so that your example is complete.
But based on the html example you provided the following works for both cases.
<style>
li>span {
display:none;
}
li>a:focus span {
display:block;
}
li>a:focus+span {
display:block;
}
</style>
Thinking about it if you were to make things consistent so that you never nested the span inside the action link, you could remove the a:focus span selector. Your resume list-item would become:
<li>
RESUME
<span class="resume">blah blah blah</span>
</li>
Also if you haven't already done so you might want to give the list-item elements of your menu system a common class eg menu-item so as to constrain css further. Here the intent is to always show the last list-item Outside.
<style>
li.menu-item>span {
display:none;
}
li.menu-item>a:focus+span {
display:block;
}
</style>
...
<ul>
<li class="menu-item">
... Resume
</li>
<li class="menu-item">
... My artwork
</li>
</ul>
<ul>
<li>
Outside
<span class="resume">outside stuff which is always shown</span>
</li>
</ul>
One final thing; I noticed that clicking on one of the image action links breaks the whole thing since the main action link is hidden again. From what I can see there's no parent-from-child selector so I'm not sure at this stage how this will work for you. Anyways I think the element+element selector answers your specific question.
My html looks something like this:
<p>blah blah blah blah blah blah <b>something that I want
on a single line</b> blah blah blah</p>
I want to somehow communicate that I want the bold section to start a new line if and only if it can't fit onto the current line. Basically I need a way to say "don't split this across lines if theres any possible way to avoid it"
Is there any facility in html or css to express this?
Try setting white-space: nowrap; on the <b> tag.
You can add non-breaking spaces - - between the words, i.e.
<p>blah blah blah blah blah blah
<b>something that I want on a single line</b> blah blah blah</p>
You can use non breaking spaces between the words by using .
You can use the CSS white-space property with the nowrap value to acheive this.
In your case:
b{
white-space:nowrap;
}
I'd recommend using the <strong> tag rather than the <b> also since the former is semantically more correct.
How do I stop Drupal from removing tags from the body of a page??
If I create a page that is organized such as
<p>blah blah</p>
<p>blah blah 2</p>
When I go back and edit - it removes the p and when I publish even without editing it turns into this
blah blahblah blah2
It's really annoying especially when editing pages with a lot of content - because I have to redo everything..!!
What input filter are you using? It sounds like the wrong one is being used.
Sounds like you might be using either plain text or filtered HTML.
From Drupal, details for Filtered HTML:
• Web page addresses and e-mail addresses turn into links automatically.
• Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
• Lines and paragraphs break automatically.
To see and configure your input filters go to admin/settings/filters or /admin/config/content/formats/filtered_html
This is more theoretical, I don't have a use for it currently, but would be nice. I would like to create a div layout in which each section cannot be broken by mismatched tags inside of it.
A simple model:
<div id="navbar">
</div>
<div id="content">
**blah blah blah </div>**<!-- assume this line came from a php include -->
blah blah blah
</div><!-- still related to #content despite the bogus /div above it. -->
Has anyone ever tried to accomplish this, or is this a fools errand?
There is no way to do this. If you have an opening <div> tag, the next </div> tag will close it. Period. Case closed.
If you don't want your <div> to be closed early, then don't print the bogus </div>.
There's always
<div>
<![CDATA[ blah blah </div> ]]>
</div>
But then you can't really make use of the tags inside the CDATA section.
Frames (inline or otherwise) provide some isolation. Anything inside the frame won't close tags outside the frame.
That does happen but the solution is sanitizing what you will output properly, this **blah blah blah </div>**<!-- assume this line came from a php include --> should not be printed, strip the tags or check for valid html before doing so.