The most common problem of the front end web developers or designers is having their output looks and behave the same to different browsers. One of the solutions is using CSS hacks to apply different rules in a specific browser.
A CSS hack is simply an ugly and inelegant way of getting a browser to behave the way you want it to. CSS hacks are typically used to get around specific browser bugs such as IE’s proprietary box model. Unfortunately, the term hack has rather negative connotations and implies that there is a better way of doing something when often there isn’t. Therefore, some people favor the term patch to indicate that it is actually incorrect browser behavior that is being dealt with.
CSS hacks can use filters to apply one rule to one browser and a different rule to another. Alternatively, hacks can use incorrect CSS implementation to “trick” browsers into behaving the way you want them to. In essence, a CSS filter is a specific type of hack used for filtering different browsers. Unfortunately, most people tend to use the generic term hack to describe filters. As such, when people talk about CSS hacks, they are usually talking specifically about filters.
Continue reading ‘9 Types of Useful CSS Hacks’
Another way to display your multiple image of your products or pictures etc.
A basic way using CSS hide and show
Javasciprt
<script type="text/javascript">
function hide(id){
document.getElementById(id).className='hide';
}
function show(id){
document.getElementById(id).className='show';
}
</script>
CSS
#viewer{
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
font-size:13px;
}
.nav{
padding:5px;
font-size:15px;
}
.hide{
display:none;
}
.show{
display:block;
}
HTML
<div id="viewer">
<div id="div1"><img src="mouse1.jpg" /></div>
<div id="div2" class="hide"><img src="mouse2.jpg" /></div>
<div id="div3" class="hide"><img src="mouse3.jpg" /></div>
<div>Mouseover →
<span class="nav"><a onmouseover="show('div1'); hide('div2'); hide('div3');" onclick="return false;" href="#">1</a></span>
<span class="nav"><a onmouseover="show('div2'); hide('div1'); hide('div3');" onclick="return false;" href="#">2</a></span>
<span class="nav"><a onmouseover="show('div3'); hide('div2'); hide('div1');" onclick="return false;" href="#">3</a></span>
</div>
<div style="padding-top:30px;"><a href="/css-images-viewer">Back to CSS Image Viewer page</a></div>
</div>
Here is the other way to design a table using css
Style
.table{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.row{
width:30%;
padding:5px;
text-align:center;
}
.cell{
padding-left:5px;
width:30%;
float:left;
}
.clear{
clear:both;
}
.tab{
background-color:#66CCFF;
}
.highlight{
background-color:#F2F2F2;
}
HTML
CSS Alternative Table Sample
<ul class="table">
<li class="row tab">
<div class="cell">Row 1 Cell 1</div>
<div class="cell">Row 1 Cell 2</div>
<div class="cell">Row 1 Cell 3</div>
<div class="clear"></div>
</li>
<li class="row">
<div class="cell">Row 2 Cell 1</div>
<div class="cell">Row 2 Cell 2</div>
<div class="cell">Row 2 Cell 3</div>
<div class="clear"></div>
</li>
<li class="row highlight">
<div class="cell">Row 2 Cell 1</div>
<div class="cell">Row 2 Cell 2</div>
<div class="cell">Row 2 Cell 3</div>
<div class="clear"></div>
</li>
<li class="row">
<div class="cell">Row 3 Cell 1</div>
<div class="cell">Row 3 Cell 2</div>
<div class="cell">Row 3 Cell 3</div>
<div class="clear"></div>
</li>
<li class="row highlight">
<div class="cell">Row 4 Cell 1</div>
<div class="cell">Row 4 Cell 2</div>
<div class="cell">Row 4 Cell 3</div>
<div class="clear"></div>
</li>
</ul>
