Web Style Press, Best Practices from all the Web, Build Better Websites » Web Tips http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 What Makes Comment – A Genuine Comment http://www.webstylepress.com/what-makes-comment-a-genuine-comment/ http://www.webstylepress.com/what-makes-comment-a-genuine-comment/#comments Mon, 21 Jun 2010 17:53:33 +0000 Hiroshi http://www.webstylepress.com/?p=703 What Makes Comment – A Genuine Comment is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Lot of bloggers and webmasters are spammers. Spammers have got their own websites full of crap and they want to promote these. New bloggers find it tempting to post spammy comments only to get attention towards their own sites. So they come to your blog and post spammy comments to get traffic towards their sites. I get a lot of spam at daily basis. I have implemented some checks / controls but I still get spammy comments. I had allowed website URL field in comments section but then people used to post comments only to register their website URL at my site so I dropped that field from many of my websites. I moderate all the comments. When you keep doing the same thing you find yourself good at it by the end of the day, so here is a clue about how you can spot genuine comments out of spam quickly and get rid of it. Commenters can also learn something from this about how to comment the right way and what to avoid.

Genuine commenter would fill all the form field correct.
In place of his name, he would type his name. not ‘Download Trance’ or ‘teaching guides’ or ‘Trance Music’ or even weirder term like ‘lebron james shoes’.
These are not names right?
Obviously somebody wants to promote illegal trance music he has got at his website.

Look at the comment text below. This kind of spam comment will even escape ‘Akismet’ and will land in pending comments queue.

By DevWebPro Peer Reviewer lebron james 7 kobe bryant v 0 lebron james shoes Well…My initial impressions were good, until I realised my eyes weren’t going blurry – it was the graphics…Then there was the “Done, but with errors on page” message.I opened the site in Opera 6.05, IE 6.026 and Mozilla 1.1. I tried to view the shipping Kevin Durant Shoes page in Mozilla (as I’m an Aussie – I wanted to see what there Australian connection was). The page half loaded, but the source code displayed on the top of the page. – then the server went into some weird never ending loop…So far my impressions aren’t very good.And I don’t even really know what the company does yet – the errors have got in the way…three thumbs downPeter GrayPeer reviewers volunteer their time and effort to help other site owners with their websites. Please take time to vi…

This comment makes no sense. Spammer wants to make this comment look like genuine by kindly informing you that your website is acting weird. But its not. He is kind of hoping that you will approve the comment in hurry or panic.

Terrific post. Thanks.

Obviously we publishers put lot of efforts into writing good stuff. Its all terrific. Do not comment that its terrific.

So (newbie blogger) if you want to comment, here is a little piece of advice for you.

  • Type your original name or nick name.
  • Do not tell us that its terrific post. We already know it is.
  • Contribute something. Tell something useful to other users about the topic.
  • Read the post first and then go for comment.
  • Only comment if you need to say something in the context of the post.
  • Do not just type that here is the resource you would find useful … http://www.crappysiteurl.com …. whatever. Give link if its really useful.
  • Do not appreciate any post if you are not genuinely impressed by it. We can spot if you only want attention.

These kind of spammers just waste others time. I wonder and just feel pity for them. Nobody is going to click at your links. Webmasters hit ‘trash’ link at once as soon as they spot such comment. So spammers are still little looser. People will never trust you again, your comment will never get approval and you are spoiling your website reputation by trying to post its link everywhere.

What Makes Comment – A Genuine Comment is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/what-makes-comment-a-genuine-comment/feed/ 0 DIV Issues, Problems and Solutions http://www.webstylepress.com/div-issues-problems-and-solution/ http://www.webstylepress.com/div-issues-problems-and-solution/#comments Sun, 26 Oct 2008 20:48:04 +0000 Hiroshi http://www.webstylepress.com/?p=323 DIV Issues, Problems and Solutions is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> DIV based table less websites are common (essential, precisely speaking) now a days. Web 2.0 Web style is also about DIV based Validated websites. DIV is a little bit tricky to handle than simple tables. Here are few very essential known issues which I have been facing and their solutions.

Blank Line Spaces Problem

Sometimes we use blank DIV. Suppose we use a DIV of 1px height. But its empty. Its behavior in IE and Firefox will be different. To avoid that use [ & n b s p ; ] or place blank gif image of 1px height in that.

Top-Padding Issue

Do not give top-padding to any element which is in div containing id as in example beneath:

<div id="some-id">
 <div class="some-class">
  text
 </div>
</div>

In above case top padding will be applied at class named as some-class and not at id named some-id.

Content Overlaps In spite of Not Using BR (line breaks)

Well, consider header, content and footer. These are three parts of website and in some cases if they just overlaps then you are missing clear both property of CSS.

Use clear:both; in css for every different part of website, for line break.

~~ Header ~~
<div style="clear:both;"></div>
~~ Body ~~
<div style="clear:both;"></div>
~~ Footer ~~

Vertical Alignment of Content In DIV

Things will be always top aligned in case of DIV.
So when placing images in the center of box then you will have to use top padding for that image via CSS.

UL LI List Padding Margin Problem In DIV

UL, LI have default spacings (padding and margin). Whether you define these 0 in CSS or whatever, the spacing between li will be different in IE and Firefox which is not ok when you are placing two lists besides each other and you require same height for both Lists.

Use line-height for li distances and not padding or margin and define max-height property in CSS for UL tag.

Naming Classes

Start class or id names with text and not with numbers.

i.e.
class=”nav” is ok
class=”2-nav” is not ok

Blocked Elements and Inline Elements

Tags with default line breaks are blocked elements while tags with no default line break are inline elements. You can write inline elements in the same line but not blocked elements.
i.e.
DIV, p are blocked elements.
strong, a, span are inline elements.

Difference Between ID and Class

Id is unique throughout the website. Id can not be used more than once in a web page. While you can use the same class for many tags in html.
id is unique and is not repeated throughout site but class can be applied at multiple tags.

Div With Blank Bottom Padding

Sometimes even when we define div height and there are no breaks after that but it takes some space or bottom padding and pushes next content a little more down.

Use overflow hidden property at that div via CSS, containing image, data or whatever which is causing bottom blank space (this problem occurs usually in i.e.6).

overflow:hidden;

Float and Align

mozilla firefox looks for float for alignment and not the text-align. Floating for DIV is shifting Whole DIV to right or left while aligning left or right for DIV is left or right alignment of data or content containing that DIV.

DIV Issues, Problems and Solutions is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/div-issues-problems-and-solution/feed/ 0 Create Rounded Flexible Div Without Images http://www.webstylepress.com/rounded-div-without-images/ http://www.webstylepress.com/rounded-div-without-images/#comments Sun, 26 Oct 2008 17:59:12 +0000 Hiroshi http://www.webstylepress.com/?p=306 Create Rounded Flexible Div Without Images is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Nifty Corners Cube is a solution to get rounded corners without images, and this third version is build by three main components:

  • A javascript file, named “niftycornerscube.js”
  • A CSS file, named “niftycorners.css”
  • The javascript calls specific for the pages

Nifty Corners Cube

Create Rounded Flexible Div Without Images is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/rounded-div-without-images/feed/ 0 Modern Font Styles For Websites http://www.webstylepress.com/modern-font-styles-for-websites/ http://www.webstylepress.com/modern-font-styles-for-websites/#comments Sun, 26 Oct 2008 17:45:27 +0000 Hiroshi http://www.webstylepress.com/?p=304 Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> I have described about using nice and clean fonts in web page. Now lets see some more details about using fonts in web pages.

As we know Verdana, Arial and Tahoma are being used from the beginning. In Web 2.0 Style, and many open source softwares such as WordPress, now-a-days some other fonts are being used which are neat and clean and stylish too. Best part is, to use these, no installation of fonts is needed. In Windows XP these are present by default. I have selected some examples of look and feel of some chosen fonts over here.

Font Styles Comparison

Arial “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Verdana “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Tahoma “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Trebuchet MS “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Georgia “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Grande “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Lucida Sans Unicode “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

sans-serif “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Font Families

It happens so that we can define a family of fonts while creating web page. If one font is not available in user’s machine; then next font style will be displayed. i.e

<style type="text/css">
.myfont { font-family: Geneva, Arial, Helvetica, sans-serif; }
</style>

Suppose Geneva is not present in user’s machine, then system will pick next font Arial for style. So it is recommended to use font-families.

The font-family property is a prioritized list of font family names and/or generic family names for an element. The browser will use the first value it recognizes.

There are two types of font-family values:
* family-name: The name of a font-family, like “times”, “courier”, “arial”, etc.
* generic-family: The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

Separate each value with a comma, and always offer a generic-family name as the last alternative.

If a family-name contains white-space, it should be quoted. Single quotes must be used when using the “style” attribute in HTML.

Here is the list of font families commonly available on all systems.

Arial, Helvetica, sans-serif
‘Times New Roman’, Times, serif
‘Courier New’, Courier, monospace
Georgia, ‘Times New Roman’, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Modern Font Styles For Websites is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/modern-font-styles-for-websites/feed/ 0 Embed SWF Files Via Javascript – Active Content Script http://www.webstylepress.com/embed-swf-files-javascript-run-active-content/ http://www.webstylepress.com/embed-swf-files-javascript-run-active-content/#comments Sun, 19 Oct 2008 17:54:25 +0000 Hiroshi http://www.webstylepress.com/?p=156 Embed SWF Files Via Javascript – Active Content Script is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Previously We used to embed flash files in web pages via simple embed method which pops up flash settings alert or Flash Settings Manager. Following way is to embed Flash movie (swf file) in web page using Javascript which will play for all browsers and will not alert you for flash settings.

Old Way Of Embeding SWF In Web Pages
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="100">
<param name="movie" value="mymovie.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src="mymovie.swf" width="200" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false"></embed>
</object>

We had to go to Flash Global Settings Manager to set settings to stop that pop up window.

New Adobe Dreamweaver CS3 provides a way to embed flash files in web pages via javascript by using AC_RunActiveContent.js file.

Suppose I have swf movie named as mymovie.swf. I will embed it in web page by using following method. You will need AC_RunActiveContent.js file which Adobe Dreamweaver provides while you embed swf in web pages.

For Head Section Of Page
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
Embeding SWF Via Javascript
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','200','height','100','src','mymovie','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','mymovie' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="200" height="100">
  <param name="movie" value="mymovie.swf">
  <param name="quality" value="high">
  <embed src="mymovie.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="100"></embed>
</object></noscript>

* For above example, you will have to change the movie name at four places. Two times it appears as mymovie.swf and two times as mymovie in code above and movie’s height and width three times too.

Download Full Script

Embed SWF Files Via Javascript – Active Content Script is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/embed-swf-files-javascript-run-active-content/feed/ 0 Email Riddler – Secure Email Link http://www.webstylepress.com/email-riddler-secure-email-link/ http://www.webstylepress.com/email-riddler-secure-email-link/#comments Mon, 08 Sep 2008 17:47:46 +0000 Hiroshi http://www.webstylepress.com/?p=65 Email Riddler – Secure Email Link is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Email Riddler is an online tool that encrypts and transform your email address into a series of numbers when displaying it, making it virtually impossible for spam harvesters to crawl and add your email to their list.

Generate Secure Email Link

Email Riddler – Secure Email Link is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/email-riddler-secure-email-link/feed/ 0 Email Link Customization http://www.webstylepress.com/email-link-customization/ http://www.webstylepress.com/email-link-customization/#comments Mon, 08 Sep 2008 17:39:03 +0000 Hiroshi http://www.webstylepress.com/?p=61 Email Link Customization is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> simple email link

Following is a standard way of adding an email link to a web page.

<a href="mailto:name@gmail.com">Mail Me</a>

Lets customize its details.

Email Link Customization

This is how we customize it in detail.

<a href="mailto:name@gmail.com
?Subject=feedback
&Cc=someone@somewhere.com
&Bcc=jadi@msn.com
&amp;Body=Please contact me about some web services">
Mail Me</a>

Email customization

Email Link Customization is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/email-link-customization/feed/ 0 Fav Icon Tutorial http://www.webstylepress.com/fav-icon-tutorial/ http://www.webstylepress.com/fav-icon-tutorial/#comments Mon, 08 Sep 2008 17:25:29 +0000 Hiroshi http://www.webstylepress.com/?p=58 Fav Icon Tutorial is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Place favicon.ico file in root directory of your web host (public_html or www) and add following code into head section of your web page.

<link rel="Shortcut icon" href="/favicon.ico">

OR

<link rel="icon" href="http://www.url/favicon.ico" type="images/x-icon" />

How To Create .ico file?

I create it using my Adobe Photoshop. I have icoformat plugin file which I add in adobe photoshop plugins for having an option of save as .ico file.

Path to add plugin

In my case
C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Extensions

Place there icoformat plugin file and while saving file photoshop will offer option of saving as .ico file. We usually create 16×16 px file for icon and save as filename.ico.

Download Photoshop Icon Format Plugin

Fav Icon Tutorial is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/fav-icon-tutorial/feed/ 0 Customizing HR http://www.webstylepress.com/customizing-hr/ http://www.webstylepress.com/customizing-hr/#comments Mon, 08 Sep 2008 16:20:14 +0000 Hiroshi http://www.webstylepress.com/?p=56 Customizing HR is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Default HR is boring and fat. We can customize it in a way that it looks thin and light which serves the purpose while not disturbing our web page design.

Add following css to your web page, customize its properties according to your needs.

hr
{
clear : both;
color : #cccccc;
background : inherit;
height : 1px;
margin : 10px 0px 0px 0px;
border-top : dotted 1px #cccccc;
border-bottom : none;
}

Customizing HR is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/customizing-hr/feed/ 0 Wrapping Text – Breaking Text with No Spaces into New Line http://www.webstylepress.com/wrapping-text/ http://www.webstylepress.com/wrapping-text/#comments Mon, 08 Sep 2008 16:16:40 +0000 Hiroshi http://www.webstylepress.com/?p=53 Wrapping Text – Breaking Text with No Spaces into New Line is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Text like, a b c d e f and so on written in HTML will do fine in any browser, we all know that.

What about the following!
abcdefghijklmnopqrstuvwxyz….NoWordBreaksAndSentenceGoesOnAndOn…
The text with no spaces.

If there are no breaks in words then the sentence will proceed straight and cause horizontal scroll in web page. In blogs or in any other applications where users can comment or put some data, they can write such spam or anything that can cause your web page layout to break. We have a solution to that. Write text in pre tag and apply following CSS to it.

pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

This will fix the problem and in IE it will cause line break and avoid horizontal scroll while in Mozilla Firefox it will add an inline frame and put all the data in it.

Download Example
More Detail and Examples

Wrapping Text – Breaking Text with No Spaces into New Line is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/wrapping-text/feed/ 0