My Top Ten CSS Tricks [CSS Tutorials]
Popularity Report
 |
|||
|
|||
|
|||
|
|||
|
|||
|
Rank
URL Tag Cloud
Groups (2)
-
CSS Evangelist
212 members,390 bookmarks
a collection of resources of all things CSS- Include how-tos, articles, resources, tools, etc...
-
Web Design CSS Bookmarking List Summer 2008
14 members,94 bookmarks
Students in Bill Wolff's course, Web Design, share CSS and Photoshop tips, tricks, and hacks. Four commented bookmarkes required per week per student.
Bookmark History
Saved by 30 people (10 private), first by anonymouse user on 2006-05-07
Public Sticky notes
6. Disappearing Text or Images in IE?
IE exhibits a very strange bug whereby text or background images sometimes disappear from sight. These items are still actually present and, if you highlight everything on screen or hit refresh, they'll often re-appear. Kind of strange, huh?
This problem mostly occurs on background images and on text positioned next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason, that'll usually fix the problem. If this doesn't work (and sometimes, it doesn't), assign a width to the offending element in the CSS -- that should fix the problem.
Highlighted by bluecockatoo
3. Minimum Width for a Page
A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this functionality work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:
<body>
<div class="container">
Next, we create our CSS commands, to create a minimum width of 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
Highlighted by bluecockatoo
Public Comment
on 2006-08-04 by mattmcalister
on 2006-08-06 by maknir
on 2006-08-26 by bluecockatoo
on 2006-10-24 by t4696neko