CSS Hacks & Issues
Author: Chris Thomas
Monday, 12 March 2007
Company Number: 4510864 1st Floor, 77 Leonard Street, London, EC2A 4QS
Table of Contents
1. Introduction......................................................................................................3
2. Browser-Specific selectors..................................................................................3
3. Transparent PNG’s in IE6...................................................................................3
4. Removing dotted links .......................................................................................4
5. Applying a width to inline elements.....................................................................4
6. Centering a fixed width website..........................................................................4
7. Image replacement technique ............................................................................5
8. Min-width.........................................................................................................5
9. Hide horizontal scrolling.....................................................................................6
Company Number: 4510864 1st Floor, 77 Leonard Street, London, EC2A 4QS
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
* 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.
Company Number: 4510864 1st Floor, 77 Leonard Street, London, EC2A 4QS
You will need to use a filter which overrides the CSS.
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
4. Removing dotted links
Firefox produces a dotted outline that appears around links when you click on them.
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 in IE6.
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.
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.
Company Number: 4510864 1st Floor, 77 Leonard Street, London, EC2A 4QS
#wrapper {
margin: auto;
position: relative;
}
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:
<h1><span>Main heading one</span></h1>
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 is min-width:Xpx;. e.g.:
Company Number: 4510864 1st Floor, 77 Leonard Street, London, EC2A 4QS
.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.
<div class=”container”>
<div class=”holder”>Content</div>
</div>
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.
Source
9. Hide horizontal scrolling
To remove the horizontal scrolling bar, insert overflow-x: hidden; into the body
body {
overflow-x: hidden;
}
This is useful if you decide to have an image or flash file which has a larger width than
the browser.
Company Number: 4510864 1st Floor, 77 Leonard Street, London, EC2A 4QS
About Solid State Group
Solid State Group is a content management, web applications and services consultancy,
who focus on making your online presence dynamic and easy to manage, at a
reasonable price. Our primary goal is to complete innovative and robust websites for our
clients whilst maintaining a service second to none.
WebDeck content management system
Solid State Group’s products allow you to completely control your company’s brand on
the internet. WebDeck is a complete accessible content management system but it’s
easier to think of it as the remote control for your website.
It is accessible - WebDeck produces WACG level A, Double-A, and Triple-A websites.
It is flexible - WebDeck can work with any kind of website design.
It is multi-user - WebDeck enables teams to work securely and seamlessly on a site.
It is secure - WebDeck has been tested by Deloitte consulting for FSA accreditation.
It is sticky - WebDeck comes with interactive tools such as forums, polls, quizzes, etc.
It has management tools - WebDeck has real-time integrated web statistics.
It has marketing tools - OutReach is an email marketing plug-in for WebDeck.
It uses open standards - WebDeck uses open standards like XML, RSS, CSV and
SOAP.
It is platform independent - WebDeck runs on Java with a web front end.
Bespoke build services
Solid State Group also offer bespoke systems design and development. Some websites
need a little extra functionality that simply won’t be available out of the box from any
product. We specialise in capturing the exact requirements and translating them into a
working site with stylish design.
Our special offer
Solid State Group offer a free consultancy meeting to capture requirements and give a
‘no strings attached’ estimate for systems design and construction. If nothing else, you
will at least gain a well documented specification of your requirements, so if you are
interested in our services, please do get in touch.
Contact us
Call us on +44 (0)845 838 2163
Email us at info@solidstategroup.com
Visit our website at http://www.solidstategroup.com
No comments:
Post a Comment