CSS Hacks & Issues
1. Introduction
This article includes 8 helpful solutions which we find essential when designing with CSS
2. Browser-Specific selectors
These selectors are very useful when you want to change a style in one browser but not the others.
IE 6 and below
IE 7 and below
IE 7 only
IE 7 and modern browsers only
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
Safari
To use these selectors, place the code in front of the style. E.g.:
Source
3. Transparent PNG’s in IE6
An IE6 bug which causes a great deal of hassle is that it doesn’t support transparent PNG images.
You will need to use a filter which overrides the CSS.
4. Removing dotted links
Firefox produces a dotted outline that appears around links when you click on them.
Dotted-Links
This is simple to stop. Just add outline:none to the a tag
5. Applying a width to inline elements
If you apply a width to an inline element it will only work inIE6. This is actually a fault of IE6 - inline elements shouldn't need to have a width assigned to them. However it is often useful for example if you wanted all labels in a form to be the same width.
All HTML elements are either a block or an inline element. Inline elements include span, a, strong and em. Block elements include div, p, h1, form and li.
You can’t change the width of an inline element. A way around this is to change the element from inline to block.
Applying display: block will turn the span into a block element, allowing you to change the width. One thing to note however is that block elements will always start on a new line, so you might have to use floats as well.
6. Centering a fixed width website
To centre your website within the browser, add relative positioning to the outer div, then set the margin to auto.
7. Image replacement technique
It is always best to use text rather than an image for headings. On the odd occasion when you must have an image it is best to use a background image with hidden text within a div. This is extremely useful for screen readers and SEO as it is still using regular text, with all the benefits associated with this.
HTML:
CSS:
As you can see we are using regular HTML code for the h1 tag and using CSS to replace the text with an image. Text-indent pushes the text 5000px’s to the left, making it invisible to the user.
Try turning off your CSS style on your website and see how the heading looks.
8. Min-width
Another bug in IE is that it doesn’t support min-width. Min-width is extremely useful, especially for flexible templates that have a width of 100%, as it tells the browser to stop contracting. For all browsers apart from IE6 all you need ismin-width:Xpx;. e.g.:
Now this is where the IE hack comes into play. You will need to include the following code.
As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.
This article includes 8 helpful solutions which we find essential when designing with CSS
2. Browser-Specific selectors
These selectors are very useful when you want to change a style in one browser but not the others.
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
Safari
html[xmlns*=""] body:last-child {}
To use these selectors, place the code in front of the style. E.g.:
#content-box {
width: 300px;
height: 150px;
}
* html #content-box {
width: 250px;
} /* overrides the above style and changes the width to 250px in IE 6 and below */
Source
3. Transparent PNG’s in IE6
An IE6 bug which causes a great deal of hassle is that it doesn’t support transparent PNG images.
You will need to use a filter which overrides the CSS.
* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}
4. Removing dotted links
Firefox produces a dotted outline that appears around links when you click on them.
Dotted-Links
This is simple to stop. Just add outline:none to the a tag
a {
outline: none;
}
5. Applying a width to inline elements
If you apply a width to an inline element it will only work inIE6. This is actually a fault of IE6 - inline elements shouldn't need to have a width assigned to them. However it is often useful for example if you wanted all labels in a form to be the same width.
All HTML elements are either a block or an inline element. Inline elements include span, a, strong and em. Block elements include div, p, h1, form and li.
You can’t change the width of an inline element. A way around this is to change the element from inline to block.
span {
width: 150px;
display: block
}
Applying display: block will turn the span into a block element, allowing you to change the width. One thing to note however is that block elements will always start on a new line, so you might have to use floats as well.
6. Centering a fixed width website
To centre your website within the browser, add relative positioning to the outer div, then set the margin to auto.
#wrapper {
margin: auto;
position: relative;
}
center-content
7. Image replacement technique
It is always best to use text rather than an image for headings. On the odd occasion when you must have an image it is best to use a background image with hidden text within a div. This is extremely useful for screen readers and SEO as it is still using regular text, with all the benefits associated with this.
HTML:
Main heading one
CSS:
h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;{
text-indent: -5000px;{
}
As you can see we are using regular HTML code for the h1 tag and using CSS to replace the text with an image. Text-indent pushes the text 5000px’s to the left, making it invisible to the user.
Try turning off your CSS style on your website and see how the heading looks.
8. Min-width
Another bug in IE is that it doesn’t support min-width. Min-width is extremely useful, especially for flexible templates that have a width of 100%, as it tells the browser to stop contracting. For all browsers apart from IE6 all you need ismin-width:Xpx;. e.g.:
.container {
min-width:300px;
}
Getting this to work in IE6 takes some extra effort! To start you will need to create 2 divs, one embedded in the other.
Content
Then you will need the min-width which goes on the outer div.
.container {
min-width:300px;
}
Now this is where the IE hack comes into play. You will need to include the following code.
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home