Top html frequently asked interview questions
How come certain random strings produce various colors when entered as background colors in HTML? For example:
<body bgcolor="chucknorris"> test </body>
...produces a document with a red background across all browsers and platforms.
Interestingly, while chucknorri produces a red background as well, chucknorr produces a yellow background.
What's going on here?
Source: (StackOverflow)
How do you disable autocomplete in the major browsers for a specific input (or form field)?
Source: (StackOverflow)
What is the recommended way to embed PDF in HTML?
What does Adobe say itself about it?
In my case, the PDF is generated on the fly, so it can't be uploaded to a third-party solution prior to flushing it.
Source: (StackOverflow)
I'm looking for an HTML or ASCII character which is a triangle pointing up or down so that I can use it as a toggle switch.
I found ↑ (↑), and ↓ (↓) - but those have a narrow stem. I'm looking just for the HTML arrow "head".
Source: (StackOverflow)
I am currently working on a web application, where I want the content to fill the height of the entire screen.
The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.
I have a header div and a content div. At the moment I am using a table for the layout like so:
CSS and HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
The entire height of the page is filled, and no scrolling is required.
For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with it's height set to 100%. Putting header inside content will not allow this to work.
Is there a way to achieve the same effect without using the table?
Update:
Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.
Update 2:
For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.
Source: (StackOverflow)
Ok, I'm now banging my head against a brick wall with this one.
I have an HTML (not XHTML) document that renders fine in Firefox 3 and IE 7. It uses fairly basic CSS to style it and renders fine in HTML.
I'm now after a way of converting it to PDF. I have tried:
- DOMPDF: it had huge problems with tables. I factored out my large nested tables and it helped (before it was just consuming up to 128M of memory then dying--thats my limit on memory in php.ini) but it makes a complete mess of tables and doesn't seem to get images. The tables were just basic stuff with some border styles to add some lines at various points;
- HTML2PDF and HTML2PS: I actually had better luck with this. It rendered some of the images (all the images are Google Chart URLs) and the table formatting was much better but it seemed to have some complexity problem I haven't figured out yet and kept dying with unknown node_type() errors. Not sure where to go from here; and
- Htmldoc: this seems to work fine on basic HTML but has almost no support for CSS whatsoever so you have to do everything in HTML (I didn't realize it was still 2001 in Htmldoc-land...) so it's useless to me.
I tried a Windows app called Html2Pdf Pilot that actually did a pretty decent job but I need something that at a minimum runs on Linux and ideally runs on-demand via PHP on the Webserver.
I really can't believe I'm this stuck. Am I missing something?
Source: (StackOverflow)
Is there any way I can modify the URL of the current page without reloading the page?
I would like to access the portion before the # hash if possible.
I only need to change the portion after the domain, so its not like I'm violating cross-domain policies.
window.location.href = "www.mysite.com/page2.php"; // sadly this reloads
Source: (StackOverflow)
I want to disable the resizable property of a textarea.
Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?
Source: (StackOverflow)
I have created an unordered list, and I am appending and removing list items using jQuery.. I feel the bullets in the unordered list are bothersome, so I want to remove them. Is it possible to have a list without bullets?
Source: (StackOverflow)
This is one of the minor CSS problems that plagues me constantly. How do folks around StackOverflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.
Here's the standard code that I work with:
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>
I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!
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)
Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?
I'd like to accomplish this without having the text and the background as two separate elements.
When trying:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
<p>
<span>Hello world</span>
</p>
it looks like child elements are subjected to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.
Source: (StackOverflow)