CSS hacks and problem solving

This article includes eight very useful solutions that you will use when encountering CSS design problems.

Author: Chris Thomas; translater: Robin

Directory

• Introduction
• Browser Selector
• Make IE6 support PNG transparent
• Remove the dotted line of a hyperlink
• Defines the width of an element in a row.
• Center a fixed-width page
• Image Replacement Technology
• Minimum Width
• Hide horizontal scroll bar

 

I. Introduction

This article includes eight very useful solutions that you will use when encountering CSS design problems.

2. browser Selector

These selectors are useful when you need to design CSS for a browser.

IE6 and earlier versions

* HTML {}

IE7 and earlier versions

*: First-Child + HTML {} * HTML {}

Only for IE7

*: First-Child + HTML {}

IE7 and contemporary browsers

HTML> body {}

Only contemporary browsers (IE7 not applicable)

HTML>/**/body {}

Opera9 and earlier versions

HTML: First-child {}

Safari

HTML [xmlns * = ""] body: Last-child {}

To use these selectors, place them before the style. For example:

# 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 */

3. Make IE6 support PNG transparent

A bug in IE6 has caused a lot of trouble. It does not support transparent PNG images.

You need to use a CSS Filter.

* Html # image-style {
Background-image: none;
Filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = "fil
Ename.png ", sizingmethod =" scale ");
}

4. Remove the dotted line of the hyperlink (only valid for ff)

In Firefox, When you click a hyperlink, a dotted line outline will appear on the periphery. This is easy to solve. You only need to add outline: none to the label style.

A {
Outline: none;
}

5. Define the width of the element in the row

If you define the width for an element in the row, it is only valid under IE6. all HTML elements are either in-row elements or block elements. the row elements include: <span>, <A>, <strong>, and <em>. the block elements include <div>, <p>,

SPAN {width: 150px; display: block}

6. Center fixed-width pages

To center the page in the browser, You need to locate the outer Div and set the margin to auto.

# Wrapper {
Margin: auto;
Position: relative;
}

VII. Image Replacement Technology

Text is better than titles with images. text is very friendly to screen readers and SEO.

HTML:

<H1> <span> main heading one </span>

CSS:

H1 {Background: url(heading-image.gif) No-Repeat ;}
H1 span {
Position: absolute;
Text-indent:-5000px;
}
You can see that we use the standard

Turn Off CSS and see what the header looks like.

8. Minimum Width

Another bug in IE6 is that it does not support the Min-width attribute. min-width is quite useful. Especially for an elastic template, they have a width of 100%. Min-width can tell the browser when it will not compress the width.

For all browsers except IE6, you only need one min-width: xpx. For example:

. Container {
Min-width: 300px;
}

In order for him to work in IE6, we need some extra work. At the beginning, we need to create two divs, one containing the other:

<Div class = "Container">
<Div class = "Holder"> content </div>
</Div>

Then you need to define the Min-width attribute of the outer Div.

. Container {
Min-width: 300px;
}

This is IE.HackYou 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 CES 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.

9. Hide the horizontal scroll bar

To avoid horizontal scroll bars, add overflow-X: hidden to the body.

Body {overflow-X: hidden ;}

This technique is useful when you decide to use an image or flash that is larger than the browser window.