Archive for category CSS

IE6 css bug

Posted by in CSS on July 20th, 2009

In general if a div width is not set, the div box is as wide as the content within it. If there is padding, borders, or margins, this will be added to the box width. So, a 100px box with 0 padding and 0 border would have 100px width and will render the same in IE and Mozilla. But, if 5px padding is added, the Mozilla box would be 110px wide. 100px + 5px left padding + 5px right padding = 110px wide. While the IE box would still be 100px.

So Internet Explorer does not render the div box correctly. To have the same look on different browser, you need to hack your css for IE browser.

You can do the below code:

div {
width: 100px;
padding: 5px;
}
* html div {
\width: 110px;
}

The first div will work on Firefox and the second div won’t work on Firefox but will work on IE.

, , , , , , , , , , , , , , , , ,

No Comments

How to use different css on different browser

Posted by in CSS, PHP code on July 19th, 2009

Cross Browser Compatibility is a huge issue in the website development with many browsers in the market. But luckily most of them uses Internet Explorer and Firefox. Sometimes different version of browser also have different output like the display in IE8 and IE6. To tackle this you can use different css for different browser.

Here’s the code:

<!–[if lte IE 6]>
<style type=”text/css” media=”screen”>
@import “ie.css”;
</style>
<![endif]–>
if lte IE 6 means if browser is lower than equal (lte) IE 6. If you want to use the css specifically to IE 6 then:  <!–[if IE 6]>. There are also gte (greater then equal) for browser above or equal a spesific browser. Here’s the summary:
  • lte IE 6 -> IE 6 and all version lower
  • lt IE 6 -> version below IE 6
  • IE 6 -> only IE 6
  • gt IE 6 -> version higher IE 6
  • gte IE 6 -> IE 6 and all version higher
Download the full code here.

, , , , , , , , , , , , ,

1 Comment

Flat Input box with CSS

Posted by in CSS on June 29th, 2009

input
{
border: 1px solid;
}

If you want to change the input box background do as follow:

input
{
border: 0px solid;
}

, , , ,

No Comments