using css to fix anything_ 20+ common bugs and fixes | noupe
TRANSCRIPT
-
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
1/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 1 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
About Noupe Archive Add News Follow Contact
AJAX BEST-OF CSS GRAPHICS ICONS SHOWCASES TUTORIAL WORDPRESS
Jun
15 Using CSS to Fix Anything: 20+ Common Bugs and Fixes
Posted in: CSS, How To's, Tutorial | Leave a Comment | 109 Comments
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
101 CSS Techniques Of All Time- Part 1
101 CSS Techniques Of All Time- Part2
IE Bug Fixes
Do you want to advertise here? Click Here.
Search
SPONSORS
PSD to HTML
Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies
between browsers, but also because CSS has a lot of ways to position every element you have. Today we
wanted to sharewith you some quick tips on how to avoid easy pitfalls when creating your CSS layout.
This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or
better methods, then post a comment below or email me. I will do mybest to include it in our next post in
this series.
You might be interested to check our other related post for some inspiration:
Visual CSS Menu Software
Create professional CSS navigationwith Visual CSS QuickMenu Pro.www.opencube.com
Registry Fix Download
Free Registry Scan, fix errors and improve
performance - 5 Star Rated!www.pctools.com
Merchandising Layouts
Easily Create Planograms, Shelving Plans
and More. Free Trial!www.SmartDraw.com/2009
OpenPlant PowerPID
Rapid creation of intelligent P&IDs Get a free
30-day trial now!www.Bentley.com/OpenPlant/freetrial
Backgrounds in WordPress, Tips and
Examples
http://googleads.g.doubleclick.net/aclk?sa=l&ai=Bd_-EUhTaSZX1DpTq-Ab93sDUBIP1iIQBtcWV5Q7AjbcBwJM4EAMYBSDa4fkEKAM4AFC32seeAmDV7dqCtAmgAdWetf4DsgENd3d3Lm5vdXBlLmNvbboBCjMwMHgyNTBfYXPIAQHaAVBodHRwOi8vd3d3Lm5vdXBlLmNvbS9jc3MvdXNpbmctY3NzLXRvLWZpeC1hbnl0aGluZy0yMC1jb21tb24tYnVncy1hbmQtZml4ZXMuaHRtbOABAoACAagDAcgDB-gDpgPoA7AC9QMAAAAE&num=5&sig=AGiWqtz7jj3pe-91AVOxr-lM3LonwrGu1A&client=ca-pub-5772113346494698&adurl=http://www.bentley.com/en-GB/Promo/OpenPlant/default%3Fskid%3DCEO_BN_GOOG_OPENPLANTPIDhttp://googleads.g.doubleclick.net/aclk?sa=l&ai=Bd_-EUhTaSZX1DpTq-Ab93sDUBIP1iIQBtcWV5Q7AjbcBwJM4EAMYBSDa4fkEKAM4AFC32seeAmDV7dqCtAmgAdWetf4DsgENd3d3Lm5vdXBlLmNvbboBCjMwMHgyNTBfYXPIAQHaAVBodHRwOi8vd3d3Lm5vdXBlLmNvbS9jc3MvdXNpbmctY3NzLXRvLWZpeC1hbnl0aGluZy0yMC1jb21tb24tYnVncy1hbmQtZml4ZXMuaHRtbOABAoACAagDAcgDB-gDpgPoA7AC9QMAAAAE&num=5&sig=AGiWqtz7jj3pe-91AVOxr-lM3LonwrGu1A&client=ca-pub-5772113346494698&adurl=http://www.bentley.com/en-GB/Promo/OpenPlant/default%3Fskid%3DCEO_BN_GOOG_OPENPLANTPIDhttp://googleads.g.doubleclick.net/aclk?sa=l&ai=Bd_-EUhTaSZX1DpTq-Ab93sDUBIP1iIQBtcWV5Q7AjbcBwJM4EAMYBSDa4fkEKAM4AFC32seeAmDV7dqCtAmgAdWetf4DsgENd3d3Lm5vdXBlLmNvbboBCjMwMHgyNTBfYXPIAQHaAVBodHRwOi8vd3d3Lm5vdXBlLmNvbS9jc3MvdXNpbmctY3NzLXRvLWZpeC1hbnl0aGluZy0yMC1jb21tb24tYnVncy1hbmQtZml4ZXMuaHRtbOABAoACAagDAcgDB-gDpgPoA7AC9QMAAAAE&num=5&sig=AGiWqtz7jj3pe-91AVOxr-lM3LonwrGu1A&client=ca-pub-5772113346494698&adurl=http://www.bentley.com/en-GB/Promo/OpenPlant/default%3Fskid%3DCEO_BN_GOOG_OPENPLANTPIDhttp://buysellads.com/buy/detail/66/http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.htmlhttp://www.noupe.com/category/ajaxhttp://www.noupe.com/category/best-ofhttp://www.noupe.com/category/csshttp://www.noupe.com/category/graphicshttp://www.noupe.com/category/iconshttp://www.noupe.com/category/showcaseshttp://www.noupe.com/category/tutorialhttp://www.noupe.com/category/wordpresshttp://www.psd2html.com/order-now.htmlhttp://twitter.com/nourayehiahttp://wpcrowd.com/customization/backgrounds-in-wordpress-tips-and-examples/http://googleads.g.doubleclick.net/aclk?sa=l&ai=Bd_-EUhTaSZX1DpTq-Ab93sDUBIP1iIQBtcWV5Q7AjbcBwJM4EAMYBSDa4fkEKAM4AFC32seeAmDV7dqCtAmgAdWetf4DsgENd3d3Lm5vdXBlLmNvbboBCjMwMHgyNTBfYXPIAQHaAVBodHRwOi8vd3d3Lm5vdXBlLmNvbS9jc3MvdXNpbmctY3NzLXRvLWZpeC1hbnl0aGluZy0yMC1jb21tb24tYnVncy1hbmQtZml4ZXMuaHRtbOABAoACAagDAcgDB-gDpgPoA7AC9QMAAAAE&num=5&sig=AGiWqtz7jj3pe-91AVOxr-lM3LonwrGu1A&client=ca-pub-5772113346494698&adurl=http://www.bentley.com/en-GB/Promo/OpenPlant/default%3Fskid%3DCEO_BN_GOOG_OPENPLANTPIDhttp://googleads.g.doubleclick.net/aclk?sa=l&ai=B72DeUhTaSZX1DpTq-Ab93sDUBJjq03q2-MLBCsCNtwGgsyMQAhgEINrh-QQoAzgAUNXXjrH6_____wFg1e3agrQJoAHvrcL_A7IBDXd3dy5ub3VwZS5jb226AQozMDB4MjUwX2FzyAEB2gFQaHR0cDovL3d3dy5ub3VwZS5jb20vY3NzL3VzaW5nLWNzcy10by1maXgtYW55dGhpbmctMjAtY29tbW9uLWJ1Z3MtYW5kLWZpeGVzLmh0bWzgAQKAAgHIArqg4wmoAwHIAwfoA6YD6AOwAvUDAAAABA&num=4&sig=AGiWqtzo65lS76s_p7YVw4ljDHGm9FOfgg&client=ca-pub-5772113346494698&adurl=http://www.SmartDraw.com/specials/storelayouts.asp%3Fid%3D207317http://googleads.g.doubleclick.net/aclk?sa=l&ai=Bo4_ZUhTaSZX1DpTq-Ab93sDUBIitiHWqpMmrAcCNtwHQ0j0QARgDINrh-QQoAzgAULKTmLQBYNXt2oK0CaABnNC3_wOyAQ13d3cubm91cGUuY29tugEKMzAweDI1MF9hc8gBAdoBUGh0dHA6Ly93d3cubm91cGUuY29tL2Nzcy91c2luZy1jc3MtdG8tZml4LWFueXRoaW5nLTIwLWNvbW1vbi1idWdzLWFuZC1maXhlcy5odG1s4AECgAIByAK6v4EEqAMByAMH6AOmA-gDsAL1AwAAAAQ&num=3&ggladgrp=9580213754974971933&gglcreat=11606771943598382280&sig=AGiWqtwnc5Gh3H7LWSLwrrjuPRGvBhzPgg&client=ca-pub-5772113346494698&adurl=http://www.pctools.com/registry-mechanic/%3Fref%3DgoogleAhttp://googleads.g.doubleclick.net/aclk?sa=l&ai=BeLM1VxTaSYKXFaGQVqyxzMkDqNvtFZyP0Y8JwI23AcD8FRABGAEg2uH5BDgAUNDsiun8_____wFg1e3agrQJoAHbrLj_A7IBDXd3dy5ub3VwZS5jb226AQoyNTB4MjUwX2FzyAEB2gFQaHR0cDovL3d3dy5ub3VwZS5jb20vY3NzL3VzaW5nLWNzcy10by1maXgtYW55dGhpbmctMjAtY29tbW9uLWJ1Z3MtYW5kLWZpeGVzLmh0bWyAAgGoAwHIAwfoA6YD6AOwAvUDAAAABA&num=1&sig=AGiWqtwHoTBK7wRsH0kpWCavm5Ao_Dr8pw&client=ca-pub-5772113346494698&adurl=http://www.opencube.comhttp://www.psd2html.com/order-now.htmlhttp://devsnippets.com/http://buysellads.com/buy/detail/66/http://www.noupe.com/css/101-css-techniques-of-all-time-part2.htmlhttp://www.noupe.com/design/101-css-techniques-of-all-time-part-1.htmlhttp://www.noupe.com/css/using-css-to-do-anything-50-creative-examples-and-tutorials.htmlhttp://www.noupe.com/category/tutorialhttp://www.noupe.com/category/how-toshttp://www.noupe.com/category/csshttp://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#commentformhttp://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.htmlhttp://www.noupe.com/category/iconshttp://www.noupe.com/category/wordpresshttp://www.noupe.com/category/showcaseshttp://www.noupe.com/category/best-ofhttp://www.noupe.com/category/graphicshttp://www.noupe.com/category/csshttp://www.noupe.com/category/tutorialhttp://www.noupe.com/category/ajaxhttp://www.noupe.com/abouthttp://www.noupe.com/designnews.php/?TB_iframe=true&height=400&width=510http://twitter.com/nourayehiahttp://www.noupe.com/archivemailto:[email protected] -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
2/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 2 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
MOST POPULAR
Freebies Day? IT'S A TRAP! Wait, no it's
not.
The TOP 7 Premium WordPress Themes
For FREE
5,000 Full Color Business Card Giveaway
50 Most Beautiful Icon Sets Created in
2008
Mastering Your WordPress Theme Hacks
and Techniques
40+ Extremely Beautiful Icon Sets Hand-
picked from deviantART
50+ Amazing Jquery Examples- Part1
47+ Excellent Ajax CSS Forms
13 Awesome Javascript CSS Menus
101 CSS Techniques Of All Time- Part 1
45+ Must See WordPress themes
50 Incredible Fonts for Professional Web
& Print Design
Most Desired WordPress Hacks: 11
Common Requests and Fixes
15 High Quality Premium-Like Free
WordPress Themes
1000+ Free High Resolution Photoshop
Brush Sets
60+ Unusual WP Blog Designs
Using CSS to Do Anything: 50+ Creative
Examples and Tutorials
53 Killer Photoshop Illustrator Effects and
Tutorials
60 Most Wanted Photoshop Tutorials,
Brushes, .PSDs and Resources
NOUPE'S TAGS
1- Bug Fix: IE Double Margin Float Bug - Its an Internet Explorer-exclusive bug wherein an
element that is floated and given a margin in the same direction as the float ends up with twice the
specified margin size. The fix is extremely simple. All you have to do is apply a display: inline rule to your
floated element. So you simply go from something like this:
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px; }
To something like this:
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
display:inline;
}
2-Overcoming the Box Model Hack- If you want to specify a width to any div, do NOT specify padding
or margins. Just create an inner div with no width set and specify its padding and margins instead. So
instead of doing this:
#main-div{
width: 150px;
border: 5px;
padding: 20px;
}
Do something like this:
#main-div{
width: 150px;
}
#main-div div{border: 5px;
padding: 20px;
}
3- Min-height attribute ignored in IE - min-height attribute works well in Firefox but IE
ignores it. IEs height act as FFs min-height. Note: in IE 7 problem was fixed.
/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
Bulletproof CSS Sliding Doors Menus
Freebies: High-Resolution Floral Swirl
Photoshop Brushes
Freebies - 20 Ultra High- Resolution Flower
Stock Photos
10 Best jQuery Menu Plugins
Design Inspiration: 20 Unique Ad Designs
You Might Not Have Seen Yet
How to Use Photoshop Gradients Plus 600+
Gradients to Download
Sliding Boxes and Captions with jQuery
JSON Suggest Box
Build a Content Slider with jQuery
http://www.brenelz.com/blog/2009/03/31/build-a-content-slider-with-jquery/http://tomcoote.co.uk/jQueryJSONSuggestBox.aspxhttp://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/http://bestdesignoptions.com/?p=2314http://bestdesignoptions.com/?p=2358http://www.ajaxline.com/10-best-jquery-menu-pluginshttp://bestdesignoptions.com/?p=2452http://bestdesignoptions.com/?p=2481http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/http://www.cssplay.co.uk/boxes/minheight.htmlhttp://www.cssnewbie.com/double-margin-float-bug/http://www.cssnewbie.com/double-margin-float-bug/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
3/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 3 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Centering a Block Element
Column Issues
WordpressPhotoshop
Tutorials
Design
CSSJqueryJavascript
GraphicsAjaxIllustratorPluginsDeviantart
GimpPhotoshop BrushesTheme
Adobe IllustrationCss TechniquesTipsHeader GraphicsSecurityWordpress Plugins
Cool Links ShowcasePrototypeMootools
GIMP BrushesWordpress ThemesPremium Theme
AnimationCinema 4DC4DIllustrator Tutorials
TextureGimp Tutorials Navigation MenuThemes
Wordpress HacksWebdesignMenuTutoialsHacks
IconsFirefox Add- OnsTutorial
/*\*/
* html .container {
height: 8em;
}
/**/
4- Min-Width for IE -A fix for the lack of min-width in Internet Explorer.
5- Centering Block Element - There are multiple techniques for centering a block element; and the
choice for the technique depends on whether you have the size set in percentages or in more absolute
values.
Centering an entire pages contents:
body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}
6- Vertical Align with CSS - If you want to know how you can achieve vertical-align functionality the
right way, simply specify the line-height for your text the same height as that of the containers.
#wrapper {
width:530px;
height:25px;
background:url(container.gif) no-repeat left top;
padding:0px 10px;
}
#wrapper p {line-height:25px;
}
7- Top reasons your CSS columns are messed up - An easy-to understand article on how to
fix common CSS Column issues with helpful diagrams and code snippets.
8- The Expanding Box Bug -When you try to create a two-column float layout, IE will create a
float drop, and its caused by having over-sized content in a fixed-width floated div that must fit into a
particular spot in the layout. Several possible workarounds are detailed in this post.
http://www.positioniseverything.net/explorer/expandingboxbug.htmlhttp://warpspire.com/tipsresources/web-production/css-column-tricks/http://warpspire.com/tipsresources/web-production/css-column-tricks/http://www.badboy.ro/articles/2005-02-20/vertical_align_with_css/http://css-discuss.incutio.com/?page=CenteringBlockElementhttp://www.cssplay.co.uk/boxes/minwidth.htmlhttp://www.noupe.com/tag/hackshttp://www.noupe.com/tag/gimphttp://www.noupe.com/tag/menuhttp://www.noupe.com/tag/graphicshttp://www.noupe.com/tag/photoshophttp://www.noupe.com/tag/javascripthttp://www.noupe.com/tag/cinema-4dhttp://www.noupe.com/tag/css-techniqueshttp://www.noupe.com/tag/firefox-add-onshttp://www.noupe.com/tag/gimp-tutorialshttp://www.noupe.com/tag/tutoialshttp://www.noupe.com/tag/webdesignhttp://www.noupe.com/tag/wordpresshttp://www.noupe.com/tag/securityhttp://www.noupe.com/tag/illustrationhttp://www.noupe.com/tag/texturehttp://www.noupe.com/tag/animationhttp://www.noupe.com/tag/themeshttp://www.noupe.com/tag/jqueryhttp://www.noupe.com/tag/illustratorhttp://www.noupe.com/tag/prototypehttp://www.noupe.com/tag/csshttp://www.noupe.com/tag/designhttp://www.noupe.com/tag/pluginshttp://www.noupe.com/tag/premium-themehttp://www.noupe.com/tag/mootoolshttp://www.noupe.com/tag/showcasehttp://www.noupe.com/tag/tutorialshttp://www.noupe.com/tag/iconshttp://www.noupe.com/tag/ajaxhttp://www.noupe.com/tag/tipshttp://www.noupe.com/tag/adobehttp://www.noupe.com/tag/wordpress-themeshttp://www.noupe.com/tag/illustrator-tutorialshttp://www.noupe.com/tag/header-graphicshttp://www.noupe.com/tag/tutorialhttp://www.noupe.com/tag/cool-linkshttp://www.noupe.com/tag/deviantarthttp://www.noupe.com/tag/wordpress-pluginshttp://www.noupe.com/tag/navigation-menuhttp://www.noupe.com/tag/c4dhttp://www.noupe.com/tag/gimp-brusheshttp://www.noupe.com/tag/photoshop-brusheshttp://www.noupe.com/tag/wordpress-hackshttp://www.noupe.com/tag/theme -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
4/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 4 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
CSS Positioning
9- Understanding CSS Positioning part 1 - An interesting series of articles that doesnt only
cover positioning, but also properties that define layout such as display and float, and a preview of the new
CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3
gives you a deep understanding of the possibilities you have in positioning.
10- What is the difference between relative and absolute positioning? - Whether to use
relative or absolute positioning can be extremely frustrating to people just getting started with CSS. The
answer to this question will add a bit of clarity to this confusion.
#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}
To get this:
11- HangTab - Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content).
Check out Panics website for their software Coda.
#hang_tab {position: absolute;
top: 7px;
left: 0px;
http://www.panic.com/coda/http://css-tricks.com/hangtab-create-a-sticky-tag-from-the-edge-of-the-browser-window-even-with-centered-content/http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=52http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=52http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-3/http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-2/http://www.positioniseverything.net/explorer/expandingboxbug.html -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
5/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 5 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
CSS Float Concept
width: 157px;
height: 93px;
}
12- CSS Float Theory: Things You Should Know- SmashingMagazine browsed through dozens
of related articles and selected the most important things you should keep in mind developing css-based
layouts with floats.
Some content
Text not inside the float
13- Floatutorial: Simple tutorials on CSS Floats - Floatutorial takes you through the basics of
floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-
column layouts.
14- Clear Your Floats - The Right Way - Float clearing can be one of the most frustrating aspects
of CSS development, one of the best ways is to use the EasyClearing on your site.
/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
content: ".";
display: block;
height: 0;
clear: both;visibility: hidden;
}
#container
{display: inline-block;}
/* Hides from IE-mac \*/
* html #container
{height: 1%;}
#container
{display: block;}
/* End hide from IE-mac */
http://dtott.com/thoughts/2007/12/10/clear-your-floats-the-right-way/http://dtott.com/thoughts/2007/12/10/clear-your-floats-the-right-way/http://css.maxdesign.com.au/floatutorial/http://css.maxdesign.com.au/floatutorial/http://www.smashingmagazine.com/http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/http://css-tricks.com/examples/HangTab/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
6/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 6 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Easier Rounded Corner Solutions
15- Mike asks the CSS Guy for recommendations on rounded corners - Simplest way is
to use a giant gif, then Ill markup my box
beautifully-encapsulated paragraph
And give it the background
.roundBox {
background:transparent url(roundBox.gif) no-repeat top left;
width:340px;
padding:20px;
}
.roundBox .boxBottom {
background:white url(roundBox.gif) no-repeat bottom left;
font-size:1px;
line-height:1px;
height:14px;
margin:0 -20px -20px -20px;
}
AlsoAskthecssguyexplains the technique used in Google Analytics, which works by leaving a 1px notch in
every corner to get the rounded corner effect which is a new way of creating rounded corners without using
static images. You can see an example here.
16- 3 Simple Steps in Coding a Rounded Corners Layout - Alen Grakalics approach to
coding a fixed width, rounded corners layout in 3 simple steps. He also created a demo here.
http://cssglobe.com/articles/3steps/http://cssglobe.com/post/1415/3-simple-steps-in-coding-a-rounded-corners-layouthttp://cssglobe.com/articles/3steps/http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.htmlhttp://www.askthecssguy.com/examples/notchedcorners/index.htmlhttp://www.askthecssguy.com/http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.htmlhttp://www.askthecssguy.com/2007/11/mike_asks_the_css_guy_for_reco_1.htmlhttp://dtott.com/thoughts/2007/12/10/clear-your-floats-the-right-way/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
7/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 7 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
CSS Form Issues
Worth checking CSS Tricks
17- Tips For Creating Great Web Forms - Cris Coyer shares with us some tips for floating labels,
:focus Pseudo Class, using hints and more. He also created the Nice & Simple Contact Form, which he first
posted about here.
label {float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
18- Clean and pure CSS FORM design - For CSS lovers, this tutorial illustrates a proposal about
how to design a pure CSS form without using html tables. You can grab the code here.
19-Autopopulating text input fields with JavaScript - Sometimes we need to explain to users
what they are supposed to enter into text input fields. One common workaround when no label can be
displayed is to put some placeholder text in the text field and let that act as the label. This tutorial
introduces a nice solution, with JavaScript enabled, the label element is hidden and the value of the input
elements title attribute is copied to the value attribute. If JavaScript is disabled, the label is displayed above
the text input, which is left empty. A simple demo, where you can see this in action is here.
20- Cross browser Horizontal Rule with Background Image - Youd like to create a cross-
browser horizontal rule that utilizes a custom image as the content separator.
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=4361&productId=1&loc=en_UShttp://www.456bereastreet.com/lab/autopopulating-text-input-fields/http://www.456bereastreet.com/lab/autopopulating-text-input-fields/http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.htmlhttp://www.box.net/shared/1zbtouuwwshttp://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.htmlhttp://css-tricks.com/examples/NiceSimpleContactForm/http://css-tricks.com/nice-and-simple-contact-form/http://css-tricks.com/examples/NiceSimpleContactForm/http://css-tricks.com/tips-for-creating-great-web-forms/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
8/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 8 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
digg it
2694diggs
retweet
56tweets
Posted in: CSS, How To's, Tutorial | Leave a Comment | 109 Comments
What others said...
109 Comments,Add Comment or Ping
div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}
Your tag should look like this:
digg it
4diggs
vote
now
For more Web Design related
tips, subscribe to Noupe today.
Billco says:
Excellent article, but some of the links are incorrect, and the first example does not show the
fix. Nevertheless, this will make a great cheat-sheet for my CSS- challenged coworkers
June 15, 2008 at 8:25 pm
Ahsan Altaf says:
Well yes the first example which i think is the most important one here dosnt show the fix.
Any how good finds there.
June 15, 2008 at 8:32 pm
Welcome to Paradise says:I was familiar with the above examples except Easier Rounded Corner Solutions, Worth
checking CSS Tricks, and CSS positioning also took quite a lot of time. This article did
help to sort out quite a lot of things and will help me to work efficiently.
Thanks mate.
June 15, 2008 at 9:23 pm
Rakesh Gupta says:
Fix for the first example:
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
June 15, 2008 at 9:24 pm
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7766http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7765http://www.lakeside.com.np/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7762http://ahsanaltaf.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7761http://billsmind.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#commentformhttp://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html/trackbackhttp://www.devsnippets.com/http://www.noupe.com/category/csshttp://www.noupe.com/category/tutorialhttp://www.noupe.com/category/how-toshttp://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#commentform -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
9/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 9 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
display: inline; }
jbj says:
Very good article, thanks for sharing!
June 15, 2008 at 11:21 pm
David says:
hacks!
June 15, 2008 at 11:26 pm
Noupe says:
Oops, i totally forgot to add the display:inline; in the first example. Thanks for pointing this
out, i am sure it was due to lack of coffee
June 16, 2008 at 12:02 am
Rajnish Singh says:
Hi
I have a cross browser problem. thing is I have created a login page with using css style sheet
which is created as seperate css style doc. and linked with the main login page. there are
tables created in login page using table tag. And now the problem is that the login page
displays in IE in centre of page but in fire fox it dispays left of the page I dont know why.
could you please guide me on this.
thanks
June 16, 2008 at 12:15 am
Darren Yin says:
in the first tip, isnt the before code the same as the after code?
June 16, 2008 at 12:35 am
Noupe says:
@Rajnish Singh, Please provide a link to the login page so we could have a look at the code.
@Darren Yin, in the after code of the first example, we added the display:inline rule to
make it work in IE
June 16, 2008 at 12:42 am
web design company says:
Some quick tips for common CSS issues and how to avoid easy pitfalls during your CSS
coding process.
June 16, 2008 at 1:34 am
blancus says:
Really good list. Thanks for sharing!
June 16, 2008 at 2:57 am
Rajaie AlKorani says:
Definitely worth a bookmark! Thanks!
June 16, 2008 at 5:09 am
Xarc says:
Really good list!!!
Thanks.
June 16, 2008 at 5:40 am
Matt says:Neat use of CSS!
June 16, 2008 at 6:04 am
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7810http://chedgrave.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7809http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7807http://www.rajaietalk.scom/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7798http://www.macoteca.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7792http://ooyes.net/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7786http://www.noupe.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7785http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7783http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7780http://www.noupe.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7774http://www.davidhellmann.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7773http://www.catswhocode.com/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
10/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 10 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
MyRule says:
Very nice article, some of the examples really helped me! Thanks for sharing
June 16, 2008 at 7:10 am
jacksonville face says:
Thanks for the list. The tip # 3 (IE height) saved my day.
June 16, 2008 at 8:09 am
Moni says:
Noura, wicked post as always girlie
Sure some of them have been discussed before, on u75 and even
http://www.shoutingzone.com but this is a better more comprehensive list of fixes/hacks.
The rounded css corner was a nice read too!
*hugs*
June 16, 2008 at 8:54 am
Erik says:
Why use a comment hack on #3 when only IE recognizes * html?
June 16, 2008 at 11:27 am
sakib says:
IE6 is nightmare for all new web designers but after sometime they learn how to deal with it.
one from me :D
IE6 assign 12px height to all div tags by default. It cannot be fixed by adding height:5px; etc. to fix it, add
font-size:1px;
OR
Overflow:hidden;
OR
line-height:1px;
- Another tip
display:table-cell; has ever been very helpful to me. I will allow you to make divs behave like tables, that
will help you fix many problems. Make sure to add width attribute also cause you div will not use block
width 100%
June 16, 2008 at 11:43 am
Patrick Sweeney says:
Excellent article! I have sent this link to quite a few people because these are things people
always ask me.
June 16, 2008 at 11:56 am
Jake Rutter says:
Great List, ever use spiffy corners? Those are pretty nice!
June 16, 2008 at 12:13 pm
Jon Aizlewood says:
Great list once again. I was hoping to find an easy/easier hack to make dotted borders in IE6
like those in Firefox? Im sure I speak for everyone who has wished IE6 simply rendered
dots instead of dashes.
June 16, 2008 at 12:22 pm
Bankai says:
Good articles, but the horizontal rule one makes no sense wrapping an hr element into a div
June 16, 2008 at 12:34 pm
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7854http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7852http://www.carbongraffiti.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7850http://www.onerutter.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7848http://www.blackleafmedia.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7847http://www.worthapost.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7844http://[email protected]/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7828http://www.shoutingzone.com/http://www.sloveniandesigner.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7825http://cosmetic-surgeons-review.com/price/jacksonvillehttp://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7816http://www.myrulemedia.com/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
11/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 11 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
then styled it with css. Whats the point? Might as well put just a div there with a class and
forget the hr element and styled it.
Crankyman says:
Laying things out was a lot easier with tables and spacer gifs. But try saying that to an
HTML developer today and youll be burned at the stake for heresy. Laying things out with
DIVs is a fad.
June 16, 2008 at 12:51 pm
Figaro says:
yes, i agree with you, css based web design provide less afford for coders.
June 16, 2008 at 1:17 pm
Limied Edition iPhone says:
Nice Tips! I used the first one!
June 16, 2008 at 1:23 pm
Nox says:
@ Crankyman
DIVs is not a fad, layouts with DIVs is easier for search engines to read. Your site will beindex faster and cleaner than a table layout.
Tables layouts might be easier, but if you are using table layouts why even bother with CSS ? You are
writing dinosaur code anyways.
June 16, 2008 at 1:26 pm
steve says:
How come theres no FIX for website background image flickering in IE6 and IE7?
http://www.ahzhou.com/net
June 16, 2008 at 1:33 pm
Mondo Libero says:
Thanks a lot for this wonderful list of tips, they are more useful.
June 16, 2008 at 2:46 pm
Noupe says:
Hey everyone,
Thank you for the comments! Id like to address some of them:
@sakib, Thanks for pointing this out. The CSS display:table-cell is to mimic the display properties of a
table cell, but without actually having the table semantics at the markup level.
For better understanding of the display rule, please check this post.
http://www.quirksmode.org/css/display.html
@Bankai , the HR tip was to use an image as an HR while preserving the web page backward
compatibility and better phone browsing. I think it is a smart tip, as you might use them as a separators.
@Jon Aizlewood, dotted borders in IE6 is one of the many issues we have to deal with. Personally i
create a nice dotted borders for Internet Explorer using a repeating background graphic. A good example
can be found here: http://kalsey.com/2003/07/css_dotted_borders_in_ie/
If anyone has a better solution, let me know about it.
Thank you all for your participation!
June 16, 2008 at 2:50 pm
Steven Snell says:
Excellent bookmarkable list. Thanks.
June 16, 2008 at 3:21 pm
Joh thomas says: June 16, 2008 at 5:01 pm
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7887http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7879http://vandelaydesign.com/blog/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7874http://kalsey.com/2003/07/css_dotted_borders_in_ie/http://www.quirksmode.org/css/display.htmlhttp://www.noupe.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7871http://mondolibero.wordpress.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7862http://www.ahzhou.com/nethttp://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7861http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7860http://limitededitioniphone.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7859http://www.videobulur.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7857 -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
12/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 12 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
CSS Style Sheets ROCK. Frames are a thing of the way past!
JT
http://www.Ultimate-Anonymity.com
dale tan says:
heres a tip for IE6 and doing css rollovers:
aside from assigning the anchors containing element withe the same background image,
apply overflow: hidden style to prevent text wrapping. by doing so, this avoids the shadow
effect of seeing the rollover state.
June 16, 2008 at 5:10 pm
Brandon says:
Nice list! I learned some great stuff from your post. Cant wait to try out the 1 px notch for
rounded edges!
June 16, 2008 at 6:49 pm
Amy says:
is there any mention of conditional comments? Its much better to place hacks in browser-
specific style sheets targeted by conditional comments.. that way, good browsers dont have
to read hacky css.
June 16, 2008 at 7:08 pm
Thierry Schellenbach says:
Point 14 about clearing floats can be done quite easily with the following code
Prefer this:
.clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}
June 17, 2008 at 12:09 am
Rajnish Singh says:
how i can link the file?
please guide
June 17, 2008 at 1:29 am
tib says:
this is complicate
The easyest way is to go on rentacoder.com, make a project where you fill all your css
problems, put a maximum price of 5$ and then wayt. You will see at less 10 indians who will
offer to do your job for free!!!
In the mean while, you drink a beer.
June 17, 2008 at 5:29 am
W3prodigy says:
I disagree with #8, using those methods is hacky and unnecessary. If you simply create a
container div around the elements above the footer, then by setting an overflow:hidden to the
container you can achieve a flowing design that matches with the floating content.
Something like this (obviously in an external stylesheet):
Left
Right
Footer
June 17, 2008 at 10:37 am
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7962http://www.w3prodigy.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7941http://www.magiconline.ro/index.phphttp://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7927http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7915http://www.mellowmorning.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7899http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7898http://brandondhunt.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7888http://www.whatthedale.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-7887http://www.ultimate-anonymity.com/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
13/15
-
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
14/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 14 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Web Design Forum says:
There are some very good techniques listed on this website. Ive used many of these myself
and they work well.
This is an invaluable source of information for anyone who is learning CSS and gets
frustrated at certain browsers not behaving like others do.
July 4, 2008 at 3:51 pm
jd says:
Thanks for the tips. Ill be sure to digg it!
July 10, 2008 at 12:12 pm
Jon S says:
Thanks! CSS can be a cruel mistress, always good to have a list of fixes to refer to.
July 11, 2008 at 8:57 am
Altamira says:
Excellent article! I have sent this link to quite a few people because these are things people
always ask me.
July 17, 2008 at 8:02 am
jdzzle says:
#1 is retarded why should i make a block element inline just to make IE happy, seriously M$
got this one wrong, wtf
July 27, 2008 at 11:55 pm
perdeci says:
nice tutorial thanks
August 9, 2008 at 11:52 pm
Dwayne Charrington says:
Fantastic list. Thanks for the great, useful resource. I regularly peruse this web-site on a
daily basis, lots of handy resources.
September 9, 2008 at 9:17 pm
Rudy Herman Sinen says:
This is a life saver. Thanks for posting this.
September 20, 2008 at 7:52 pm
Daniel says:
Wow I have saved this url for further projects.
Thanks
September 28, 2008 at 4:44 am
boris says:
hey! can you suggest how i can repare font style for firefox http://www.aproduction.com.ua
(in safari everything works great).
font.subname 30px should work just for left column, but now it destroy my main block
best,
b.
November 16, 2008 at 1:40 am
Nick says:
Centering a Block Element
Hi, im from brazil and i dont speak (write) english very well (sorry). But to align the div
#content this way is better:
#content {
December 12, 2008 at 4:50 am
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-31941http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-29479http://www.aproduction.com.ua/http://www.aproduction.com.ua/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-24267http://www.elancer.es/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-23634http://www.rhmm.net/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-22235http://dwaynecharrington.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-16839http://www.basolperde.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-14693http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-12777http://altamiraweb.net/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-11424http://www.kgbadvertising.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-11228http://www.pressedbyambie.com/http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#comment-10299http://www.forum.studio2webdesign.com/ -
8/3/2019 Using CSS to Fix Anything_ 20+ Common Bugs and Fixes | Noupe
15/15
06/04/09 16:42Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
Pgina 15 de 15http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
copyright 2007 - 2009 NOUPE. All right reserved. Theme by Noura Yehia
3Ds Max Adobe Ajax
Best-Of better design Blogging
Cinema 4D Contest Cool Links
CSS CSS3 Design
Fonts Freebie Freelance
Funny Stuff gall Gimp
GIMP Brushes GIMP-Brushset graphics
How To's Icons Illustrator
inspiration Javascript jquery
Menu MySQL News
Photography photoshop php
SEO Showcases Sponsored Review
sponsors spotlight Texture
Tools Trends Tutorial
Wallpaper Weekly Links Wordpress
Browse by Categories Latest Posts
20 Useful PHP + jQuery Components
& Tuts for Everyday Project
5th Apr | 35 Comments
30+ Fresh & Useful Adobe
Illustrator Tutorials & Neat Tips
1st Apr | 43 Comments
10 Creative & Rich UI & How to
Create Them
29th Mar | 88 Comments
Review of Markup Service
27th Mar | 16 Comments
13 Great WordPress Speed Tips &
Tricks for MAX Performance
23rd Mar | 102 Comments
Recent News
Swatch and Learn: How to Make
Swatches from Photographs 6th Apr |
10 Tips to Design Usable Shopping
Carts 6th Apr |
20+ Amazing Portfolio Websites 6th
Apr |
21 Really Useful Wordpress Plugins
Every Blogger Must Own 6th Apr |
25 Most Useful Blogs for Web Design
& Development 6th Apr |
Add News more...
Newer Comments
/*the values is a example you can change it!*/
width: 900px;
position: absolute;
left: 50%;
margin-left: - 450px; /*half of the width*/
}
to center the content in extreme middle of page use:
#content {
/*the values is a example you can change it!*/
width: 900px;
height: 600px;
position: absolute;
left: 50%;
top:50%;
margin-left: - 450px; /*half of the width*/
margin-top: - 300px; /*half of the height*/
}
Sorry for the poor english
Thanks!
Nicholas
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html#commentshttp://www.noupe.com/category/newshttp://www.noupe.com/designnews.php/?TB_iframe=true&height=400&width=510