This is kind of a FAQ for web design, offering solutions to issues that come up frequently.
img element in a link?position: fixed work in IE 6?img elements have a gap below them (or above)line-height valuesvertical-align doesn't do what I expectz-index doesn't do anythingAssuming a typical functional setup, no. PHP and ASP are server-side scripting languages, meaning the code is only read and processed on the server computer, which then sends separate output to the user. Unless you have a broken setup or deliberately add a means to, the user has no way of seeing the code beyond the outputted results that you see in the View Source window.
It depends on what that something is. To horizontally center text, use text-align: center;. To horizontally center a block element within its container, give the element margin: 0 auto;. Note that if the width of the block element is 100% or auto (default), horizontally centering it within its container will have no visible effect.
Elements with position: absolute; are positioned relative to the nearest ancestor with a position other than static (default), or the document boundaries if none exists. Therefore, if you want an element to have an absolute position relative to its container, simply give the container a position. Usually, a simple position: relative; on the container is what you want. Here is an example: (See result)
<div style="background: #00f; height: 300px; position: relative;">
<div style="background: #0f0; height: 100px; width: 100px; position: absolute; top: 50px; left: 50px;">Test</div>
</div>Most major browsers have a default style similar to a:link img, a:visited img {border: 2px solid;}. To remove this effect, simply add to your stylesheet a:link img, a:visited img {border: 0;}.
Internet Explorer 6 and below don't support position: fixed. But you can pull off the same effect by using absolute positioning and some overflow magic. Here is this method:
body and stick it into a single div.margin and padding on the html and body elements. You can put padding on the div if you want.div, body, and html elements height: 100%.div overflow: auto and give the body overflow: hidden.body, next to the div. Position it how you want, but instead of using position: fixed, use position: absolute.That's it! Here is a working example.
First of all, it isn't stealing, it's at best copyright infringement. Second, you can't. HTML, CSS, and ECMAScript (JavaScript) all must be interpretted by software on the user's computer in order to function. Therefore, the user's computer necessarily has full access to your source. There are obfuscation techniques and other ways to attempt to make it difficult for the user to understand the source, but there are also relatively convenient ways for the user to cut through that deliberate clutter if he or she has some basic knowledge in the area. Tricks like code obfuscation and disabling the context menu don't work for the types of users they are most likely designed to stop, and you are probably just wasting your time.
Internet Explorer 7 and below don't correctly support PNG gamma correction, as can be seen in this test case. It is most likely that whatever you used to save the PNG image saved it with gamma correction information. Adobe Photoshop does this naturally.
The solution is to reopen the file in a program that allows you to remove the gamma correction information and save it with the information removed. GIMP is a free tool that can do this, among other things.
Assuming it is linked properly (<link href="uri" rel="stylesheet" type="text/css">) and your HTML and CSS are valid, it could be that your server is sending the wrong content type. View the CSS file in Firefox, right-click on the page, and click on “View Page Info”. If the value for Type is text/plain, text/html, or anything other than text/css, that is your problem: your website is sending the wrong Content-type header. The type attribute alone doesn't convince the browser that it's text/css if the CSS file itself is sent as something different.
If you are using a server-side scripting language like PHP to generate your CSS, you must manually send the correct content type. In PHP, this is done by putting header('Content-type: text/css'); before any of the output.
Otherwise, if you're using the .css extension, you have to set up your server to send .css files as text/css. If your web server is Apache, you may be able to do this using an .htaccess file or, if you are the system administrator on the web server, by modifying the core configuration files (recommended). See the documentation of your server software for details.
Internet Explorer is known to sometimes ignore the Content-type header if it thinks it can guess the correct type. It should be noted that this is not always ideal, since websites may want to deliberately send a file with an unusual Content-type in certain cases.
img elements are inline by default, meaning they are part of the normal flow of text. Just like multiple lines of text will have a vertical gap between them, img elements on separate lines will also have a vertical gap. An img alone in a tight container will also show a gap between the img and the edge of the container.
The solution is to make the img element display like a block. Add this to your CSS stylesheet:
img
{
display: block;
}In certain doctype switching modes, the browser may make an img element display as a block by default depending on what it's inside. This has led some to additional confusion.
Please see the My site doesn't work in x browser article.
This issue is for if you have something like the following setup:
<div>
<img src="img1.png" alt="Image 1">
<img src="img2.png" alt="Image 2">
<img src="img3.png" alt="Image 3">
</div>The three images will be on the same line (assuming your container is big enough), but you may notice there is a gap between them. This is because you have whitespace between your tags. It is the equivalent to the following:
<div> <img src="img1.png" alt="Image 1"> <img src="img2.png" alt="Image 2"> <img src="img3.png" alt="Image 3"> </div>Even if you didn't use indentation, the line breaks also count as whitespace and appear as a normal space.
The solution is to remove the whitespace between tags. This could be done either by putting all of the elements on the same line of text with no space between, or moving the whitespace to inside the tags. For example, the following would eliminate the whitespace:
<div>
<img src="img1.png" alt="Image 1"
><img src="img2.png" alt="Image 2"
><img src="img3.png" alt="Image 3">
</div>Note that any whitespace at the beginning or end of a block element's contents is usually ignored (except with certain values for the white-space property). As a result, there is no gap before the first element or after the last element in the above example.
The line-height property accepts numeric (unitless) values in CSS 2.x, but sometimes the W3C CSS validator returns a parse error on these values. This is actually a known bug in the validator that has gone unfixed for quite some time. It occurs when the value is a simple integer. For example, the validator gets confused on line-height: 1;. The solution is to add a decimal to the value. The validator will correctly recognize line-height: 1.0; as being valid.
The vertical-align property only applies to inline and table-cell elements. For inline elements, it determines how the text is vertically positioned just within the line of text. For table-cell elements, it determines how the entire contents of the element are vertically positioned within the table cell.
Many people want to use the vertical-align property on block elements to achieve the same effect as on table-cell elements, but it has no effect. To pull it off, you would theoretically give the element display: table-cell; and then the vertical-align property, but Internet Explorer 7 and below don't support it.
There are other alternatives, but they all have limitations.
Assuming that the container doesn't depend on the height of the contents, you can use absolute positioning to pull off some vertical alignment. Here is an example of a block element being positioned to the bottom of its container: (See result)
<div style="background: #00f; height: 300px; position: relative;">
<div style="background: #0f0; position: absolute; bottom: 0;">Test</div>
</div>To center the block vertically, it depends on an additional factor: the height of the contents must be known. The trick then is to position the top of the child element halfway down the container and then use a negative margin to shift it up half the height of itself. Unfortunately, a percentage doesn't work as may be expected for the negative margin, do it must be an absolute length unit based on the known height of the child element. Here is an example: (See result)
<div style="background: #00f; height: 300px; position: relative;">
<div style="background: #0f0; height: 100px; position: absolute; top: 50%; margin-top: -50px;">Test</div>
</div>The above technique only vertically centers the element; the text content is still at the top of that element. Unfortunately, there is no sure-fire way to get arbitrary text vertically centered without browser support for display: table-cell;. If you happen to know that your text will only be on one line (for example, if you have a single word or white-space: nowrap; and no deliberate line breaks), you can do the following: (See result)
<div style="background:#00f; line-height: 100px;"><span style="vertical-align: middle;">Test</span></div>That will give you a single line of text that is 100 pixels tall and then vertically center the text within that line.
Firefox supports it, but it's disabled by default for security and usability reasons. The option is available in the Options / Preferences dialog. Your website shouldn't rely on techniques to modify the user's browsing interface, since many people rely on things like the statusbar for their original purposes.
The z-index property only works on positioned elements. If you give it a position other than static, it will work as expected.