Pages
-
Recent Posts
- Court Dumps Patent Lawsuit Against Tons Of Online Retailers
- Java: Jury Says Google Did Not Infringe / Comprehensive JVM Options List
- Generics Drive Down Drug Prices In India, TPP Trying To Stop That
- DailyDirt: Standing In The Alpha-Beta Parking Lot….
- Now Is The Time To Tell Your Senator That Privacy Is Awesome And CISPA Is Not
Archives
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- December 2008
- November 2008
- October 2008
Meta
Category Archives: CSS
PHPHOST BLOG
Web Hosting Related Articles You May Need
Upside Down Text with CSS3
When it comes to rotating, tilting or scaling text, you would normally rely on JavaScript or images laid on top of each other, to give that effect. However with the CSS3 transformation functions, you can do all of this without any JavaScript code. Alth… Continue reading
Posted in CSS, Syndicated
Leave a comment
CSS First-Letter First-Line Pseudo Elements
CSS Pseudo Elements are used to modify and add special effects to some selectors. For example to modify the first line or letter of a paragraph, you can use the :first-line and :first-letter pseudo elements. You can either increase the font size or eve… Continue reading
Posted in CSS, Syndicated
Leave a comment
CSS First-Letter First-Line Pseudo Elements
CSS Pseudo Elements are used to modify and add special effects to some selectors. For example to modify the first line or letter of a paragraph, you can use the :first-line and :first-letter pseudo elements. You can either increase the font size or eve… Continue reading
Posted in CSS, Syndicated
Leave a comment
Remove Border Around Images using CSS
Putting an image inside a link adds a border to it. This is usually done to visually indicate to the user that this image is a link. Check this example:
<body> <a href="http://www.dotnetcurry.com"> <img alt="progress" src="images/abc.jpg" /> </a></body>
If you have a requirement to override this behavior, then here’s how to do so:
<style type="text/css"> img { border-style: none; }</style>
Now when you view the same image, it is displayed without a border
Posted in CSS, Syndicated
Leave a comment
How to Center a Table inside a Div using CSS
If you have been looking for a simple way to center a table inside a div, then here it is
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #divOne { width:400px; text-align:center; border:dotted 1px black; } #tblOne { width:200px; margin:0 auto; border: solid 1px black; } </style></head><body> <div id="divOne"> <table id="tblOne"> <tr> <td>R1C1</td> <td>R1C2</td> <td>R1C3</td> </tr> <tr> <td>R2C1</td> <td>R2C2</td> <td>R2C3</td> </tr> </table> </div></body></html>
I have seen lot of people missing out on the margin:auto property. Setting margin to auto is the correct way to center a table and works in ‘most’ of the browsers. The border is just for illustration purposes and is not required.
OUTPUT
Posted in CSS, Syndicated
Leave a comment
Change the Color of Hyperlink inside a Container Using CSS
A user recently asked me if it was possible to change the color of hyperlinks placed in a container, instead of changing the hyperlink color of the entire page. Here’s a simple solution to change the hyperlink color only inside divOne:
#divOne a:link{ color:White;} #divOne a:visited{ color:White;} #divOne a:hover{ color:Black;}
Similarly if you want to change hyperlink color nested in containers; for eg: a hyperlink kept inside a table inside divOne, use this:
#divOne table a:link{ color:White;}
Posted in CSS, Syndicated
Leave a comment
7 Free Tools to Minify your Scripts and CSS
I have been doing a lot of Client-Side development recently and I have found these 7 tools of great help to improve the performance of the website by ‘shrinking’ the size of JavaScript and CSS files, referenced in the site.
JSMin (JavaScript Minifier) – removes comments and unnecessary whitespace from JavaScript files
JSO (JavaScript Optimizer) – allows you to manage your JavaScript and CSS resources and to reduce the amount of data transfered between the server and the client.
Packer – An online JavaScript Compressor
JSCompress.com – Online tool that uses either JSMin or Packer to compress your files
CSS Compressor – Online tool that compresses your CSS file
DigitalOverload JavaScript Minifier – Online tool that minifies your JavaScript files
and finally the one I use most frequently:
YUI Compressor – A JavaScript minifier designed to be 100% safe and yields a higher compression ratio than most other tools.
Posted in CSS, JavaScript, Syndicated, Tools
Leave a comment
How to Print only Text using CSS
I was recently asked a question of the forums of how to send text only data to a printer. Well it’s not as hard as you think. The <link> tag has an attribute called media. One of the values is called print, which means the style sheet will only be applied when you print the document. You can use this to hide images when you print. Create a new style sheet (print.css) and add the following to it:
img{ display:none;}
Then in your page, all you need to do is reference that style sheet, and it will only be used when you print.
<head> <title>Print Text Only Using CSS</title> <link rel="Stylesheet" media="print" href="print.css" /></head><body> <img src="http://www.google.com.au/intl/en_au/images/logo.gif" alt="Google" /> <p>Faucibus non sit amet elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat, dui sed posuere molestie, urna sapien porta purus, vel sodales ante erat sed arcu. Nunc semper, diam ut blandit elementum, ipsum purus vestibulum quam, sit amet auctor est nunc ut risus. Maecenas vitae justo sit amet erat congue aliquet molestie commodo odio. Praesent tempor pellentesque nibh.</p></body>
The code above is a small HTML page that displays Google’s logo and well as some sample text. When you print this, the image won’t be displayed. You can also do other stuff like changing the font size, font color for print only. This is a very useful thing to know.
Posted in CSS, Syndicated
Leave a comment
Prevent a Dotted Border around a Hyperlink when clicked in FireFox
I recently got bumped with a strange Link behavior. A user had a hyperlink which opened in a new page. When she clicked on it, a dotted border appeared around the Hyperlink as shown below:
I had seen this behavior a couple of times in the past but never thought of a solution until now. After trying a couple of solutions, what worked out was adding the following CSS to the page:
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Remove Dotted Border in FireFox</title> <style type="text/css"> a:focus { outline: none; } </style></head><body><a href="#" id="anchor1">Click Here</a></body></html>
I have tested the solution in Firefox 3.0 and above and after adding the CSS, the dotted border does not appear anymore when the link is clicked
Posted in CSS, Syndicated
Leave a comment
Techniques to use when IE6 dies
Everyone except Microsoft themselves are talking about the death of IE6. I’ve tried motivating people to drop support, arguing that you at least can show IE6 users a message. Many have replied with “but our IT department doesn’t let us…”, and I can say nothing more than that the IT department is filled with humans. [...] Continue reading
Posted in Browsers, CSS, Syndicated
Leave a comment
LATEST NEWS
