This example code shows you how you can have a top branding bar similiar to diggbar in just a few lines of html and css.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>framebar example by Web Development Blog</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 40px 0 [...]
Continue reading Framebar (like diggbar) example in html and css with no javascript
All these CSS are used in a conditional CSS file for IE 6 to ensure CSS validity as some of the properties used here are proprietary to the IE 6 browser.
<!–[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]–>
Setting an opacity
.transparency {
filter: alpha(opacity=50);
}
Change the link to a hand cursor
a.link {
cursor: [...]
Continue reading Some simple but effective CSS rules for IE 6
HTML
<input type="submit" id="submit" value="Search" />
CSS
#submit {
cursor: pointer;
}
Continue reading Change the arrow into a hand when hovering over ‘Submit’ button
Unlike any other mobile web browsers, iPhone comes with Safari browser which makes it possible to view any website that works on Safari. However, the challenge is that the screen size of an iPhone is not as big as a traditional monitor and therefore, if you have got a website which has a [...]
Continue reading Making a website iPhone-friendly using CSS
26 May, 2009
Highlight the current page link in WordPress
If you are hard-coding your navigation menu in WordPress rather than using wp_list_pages() template tag, you will need to add a class manually in order to highlight the current page it is on.
<li<?php if (is_page(‘gallery’)) : echo ‘ class="current_page_item"’; endif; ?>><a href="gallery/">Gallery</a></li>
Note: wp_list_pages() template tag automatically add current_page_item class to the <li> element [...]
Continue reading Highlight the current page link in WordPress
Problem in IE8:
The upper half of the <fieldset> border goes missing. This problem has been discussed here and shown here.
HTML:
<form action="login.php" method="post" id="login">
<fieldset>
<legend>Login</legend>
<label for="username" class="label">Username</label>
<input type="text" name="username" id="username"/>
<label for="password" class="label">Password</label>
<input [...]
Continue reading Fieldset and Legend bug in IE8
.transparency {
background: #f4f4f4;
opacity: 0.7; /* Modern Browsers, eg: Firefox, Safari, Opera, Chrome */
filter: alpha(opacity = 70); /* IE */
-moz-opacity: 0.7; /* Old Mozilla, eg: Netscape */
-khtml-opacity: 0.7; /* Old Safari */
zoom: 1; /* [...]
Continue reading Opacity in CSS
sIFR
sIFR stands for Scalable Inman Flash Replacement and it is an open source JavaScript and Adobe Flash dynamic web fonts implementation, enabling the replacement of text elements on HTML web pages with Flash equivalents.
Pros
Looks nice
Does not require a server side language
Text created with sIFR can be copied/selected
Graceful degradation (If flash is not installed, [...]
Continue reading sIFR vs FLIR – Font Replacement Techniques
There are many ways to style input buttons in CSS. And this is how I do it.
HTML
<input type=”submit” name=”submit” value=”Send” id=”submit” />
CSS
#submit {
color: #fff;
font-size: 0;
width: 135px;
height: 60px;
border: none;
margin: 0;
padding: 0;
background: #0c0 url(images/send-now.gif) 0 0 no-repeat;
}
And that’s it, you will have a nice [...]
Continue reading How to style a Submit button in CSS
a {
word-wrap: break-word;
}
Works for a long text too:
p {
word-wrap: break-word;
}
Tested in IE6, IE7, Firefox, Safari, Chrome
Continue reading Wrapping a long url with CSS
Hello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more 
