?
Can we have multiple <tbody> tags in same <table>? If yes then in what scenarios should we use multiple <tbody> tags?
Source: (StackOverflow)
Suppose that I have a <div> that I wish to center in the browser's display (viewport). To do so, I need to calculate the width and height of the <div> element. What should I use for maximum browser compatibility? Looking for a solution that works on IE6+, FF2+, Opera and Webkit-based browsers (Safari 3+, Google Chrome).
Source: (StackOverflow)
I need to match all of these opening tags:
<p>
<a rel='nofollow' href="foo">
But not these:
<br />
<hr class="foo" />
I came up with this and wanted to make sure I've got it right. I am only capturing the a-z.
<([a-z]+) *[^/]*?>
I believe it says:
- Find a less-than, then
- Find (and capture) a-z one or more times, then
- Find zero or more spaces, then
- Find any character zero or more times, greedy, except
/, then
- Find a greater-than
Do I have that right? And more importantly, what do you think?
Source: (StackOverflow)
What is the reason browsers do not correctly recognize:
<script src="foobar.js" /> <!-- self-closing script tag -->
Only this is recognized:
<script src="foobar.js"></script>
Does this break the concept of XHTML support?
Note: This statement is correct at least for all IE (6-8 beta 2).
Source: (StackOverflow)
Are CDATA tags ever necessary in script tags and if so when?
In other words, when and where is this:
<script type="text/javascript">
//<![CDATA[
...code...
//]]>
</script>
preferable to this:
<script type="text/javascript">
...code...
</script>
Source: (StackOverflow)
What's the difference between <b> and <strong>, <i> and <em> in HTML/XHTML? When should you use each?
Source: (StackOverflow)
Recently I have been reading more and more about people using custom attributes in their HTML tags, mainly for the purpose of embedding some extra bits of data for use in javascript code.
I was hoping to gather some feedback on whether or not using custom attributes is a good practice, and also what some alternatives are.
It seems like it can really simplify both server side and client side code, but it also isn't W3C compliant.
Should we be making use of custom HTML attributes in our web apps? Why or why not?
For those who think custom attributes are a good thing: what are some things to keep in mind when using them?
For those who think custom attributes are bad thing: what alternatives do you use to accomplish something similar?
Update: I'm mostly interested in the reasoning behind the various methods, as well as points as to why one method is better than another. I think we can all come up with 4-5 different ways to accomplish the same thing. (hidden elements, inline scripts, extra classes, parsing info from ids, etc).
Update 2: It seems that the HTML 5 data- attribute feature has a lot of support here (and I tend to agree, it looks like a solid option). So far I haven't seen much in the way of rebuttals for this suggestion. Are there any issues/pitfalls to worry about using this approach? Or is it simply a 'harmless' invalidation of the current W3C specs?
Source: (StackOverflow)
I understand that an id must be unique within an HTML/XHTML page.
My question is, for a given element, can I assign multiple ids to it?
<div id="nested_element_123 task_123"></div>
I realize I have an easy solution with simply using a class. I'm just curious about using ids in this manner.
Source: (StackOverflow)
What is the best and most comprehensive HTML5 book? Is it necessary to study HTML4 after/before the HTML5 book?
If there is no good HTML5 book yet, what is the best HTML book in general?
Source: (StackOverflow)
What are all the valid self-closing elements (e.g. <br/>) in XHTML (as implemented by the major browsers)?
I know that XHTML technically allows any element to be self-closed, but I'm looking for a list of those elements supported by all major browsers. See http://dusan.fora.si/blog/self-closing-tags for examples of some problems caused by self-closing elements such as <div />.
Source: (StackOverflow)
What is the most correct way to include another XHTML page in an XHTML page? I have been trying different ways, none of them are working.
Source: (StackOverflow)
I have a div (parent) that contains another div (child). Parent is the first element in body with no particular CSS style. When I set
.child
{
margin-top: 10px;
}
The end result is that top of my child is still aligned with parent. Instead of child being shifted for 10px downwards, my parent moves 10px down.
My DOCTYPE is set to XHTML Transitional.
What am I missing here?
edit 1
My parent needs to have strictly defined dimensions because it has a background that has to be displayed under it from top to bottom (pixel perfect). So setting vertical margins on it is a no go.
edit 2
This behaviour is the same on FF, IE as well as CR.
Source: (StackOverflow)
We need to display a tick symbol (✓ or ✔) within an internal web app and would ideally like to avoid using an image.
Has to work starting with IE 6.0.2900 on a XP box, ideally we need it be cross-browser (IE + recent versions of FF).
The following displays boxes although sets browser encoding to UTF-8 (META works nicely and not the issue). The default font is Times New Roman (might be an issue, but trying Lucida Sans Unicode doesn't help and I don't have neither Arial Unicode MS, nor Lucida Grande installed).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
✓ ✔
</body>
</html>
Any help appreciated.
The following works under IE 6.0 and IE 7:
<html>
<head>
</head>
<body>
<span style="font-family: wingdings; font-size: 200%;">ü</span>
</body>
</html>
I would appreciate if someone could check under FF on Windows. I am pretty sure it won't work on a non Windows box.
Source: (StackOverflow)
It seems like there are a few different techniques out there, so I was hoping to get a "definitive" answer on this...
On a website, it's common practice to create a logo that links to the homepage. I want to do the same, while best optimizing for search engines, screen readers, IE 6+, and browsers who have disabled CSS and/or images.
Example One: Doesn't use an h1 tag. Not as good for SEO, right?
<div id="logo">
<a rel='nofollow' href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
Example Two: Found this somewhere. The CSS seems a little hacky.
<h1 id="logo">
<a rel='nofollow' href="">Stack Overflow</a>
</h1>
/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}
Example Three: Same HTML, different approach using text-indent. This is the "Phark" approach to image replacement.
<h1 id="logo">
<a rel='nofollow' href="">Stack Overflow</a>
</h1>
/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
Example Four: The Leahy-Langridge-Jefferies method. Displays when images and/or css is turned off.
<h1 id="logo" class="logo">
<a rel='nofollow' href="">Stack Overflow</a>
</h1>
/* css */
h1.logo {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h1.logo a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}
h1#logo {
height: 60px; /* height of replacement image */
}
h1#logo a {
padding-top: 60px; /* height of the replacement image */
background-image: url("logo.png"); /* the replacement image */
}
What method is the best for this sort of thing? Please provide html and css in your answer.
Source: (StackOverflow)