Beruflich Dokumente
Kultur Dokumente
06/04/09 16:42
About Noupe
Archive
Add News
Follow
Contact
PSD to HTML
AJAX
BEST-OF
CSS
GRAPHICS
ICONS
SHOWCASES
TUTORIAL
WORDPRESS
Search
Jun 15
SPONSORS
Visual CSS Menu Software Create professional CSS navigation with Visual CSS QuickMenu Pro.
www.opencube.com
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 share with 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 my best to include it in our next post in this series.
You might be interested to check our other related post for some inspiration:
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
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
IE Bug Fixes
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 1 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
1-
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
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; }
#content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; display:inline; }
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 Handpicked from deviantART 50+ Amazing Jquery Examples- Part1 47+ Excellent Ajax CSS Forms
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:
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
3-
60+ Unusual WP Blog Designs Using CSS to Do Anything: 50+ Creative Examples and Tutorials
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 */ /*\*/
53 Killer Photoshop Illustrator Effects and Tutorials 60 Most Wanted Photoshop Tutorials, Brushes, .PSDs and Resources
NOUPE'S TAGS
Pgina 2 de 15
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
/*\*/ * html .container { height: 8em; } /**/
06/04/09 16:42
Wordpress
Photoshop Tutorials Design CSS
Jquery Javascript
Graphics Ajax
Illustrator Plugins Deviantart
Gimp Photoshop Brushes Theme Adobe Illustration Css Techniques Tips
Header Graphics Security Wordpress Plugins Cool Links Showcase Prototype Mootools GIMP Brushes Wordpress Themes Premium Theme Animation Cinema 4D C4D Illustrator Tutorials Texture Gimp Tutorials Navigation Menu Themes Wordpress Hacks Webdesign Menu Tutoials Hacks Icons Firefox Add-Ons Tutorial
4-
Min-Width for IE
- 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; }
Column Issues
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-
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.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 3 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
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.
To get this:
11-
HangTab - Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content).
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 4 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
width: 157px; height: 93px; }
06/04/09 16:42
of related articles and selected the most important things you should keep in mind developing css-based layouts with floats.
<div> <!-- float container --> <div style="float:left; width:30%;"><p>Some content</p></div> <p>Text not inside the float</p> <div style="clear:both;"></div> </div>
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 multicolumn layouts.
14-
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://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 5 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
Mike asks the CSS Guy for recommendations on rounded corners - Simplest way is
.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; }
Also Askthecssguy explains 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-
coding a fixed width, rounded corners layout in 3 simple steps. He also created a demo here.
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 6 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
:focus Pseudo Class, using hints and more. He also created the Nice & Simple Contact Form, which he first posted about here.
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.
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.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 7 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
div.hr { background: #fff url(myhrimg.gif) no-repeat scroll center; height: 10px } div.hr hr { display: none }
56
tweets
2694
diggs digg it
retweet
109 Comments
4
diggs digg it
vote now
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
Well yes the first example which i think is the most important one here dosnt show the fix. Any how good finds there.
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.
Rakesh Gupta says: Fix for the first example: #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; display: inline; }
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 8 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
display: inline; }
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
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
Darren Yin says: in the first tip, isnt the before code the same as the after code?
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
Some quick tips for common CSS issues and how to avoid easy pitfalls during your CSS coding process.
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 9 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
MyRule says: Very nice article, some of the examples really helped me! Thanks for sharing
jacksonville face says: Thanks for the list. The tip # 3 (IE height) saved my day.
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*
Erik says: Why use a comment hack on #3 when only IE recognizes * html?
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%
Excellent article! I have sent this link to quite a few people because these are things people always ask me.
Jake Rutter says: Great List, ever use spiffy corners? Those are pretty nice!
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.
Bankai says:
Good articles, but the horizontal rule one makes no sense wrapping an hr element into a div then styled it with css. Whats the point? Might as well put just a div there with a class and
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 10 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
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.
Figaro says: yes, i agree with you, css based web design provide less afford for coders.
Limied Edition iPhone says: Nice Tips! I used the first one!
DIVs is not a fad, layouts with DIVs is easier for search engines to read. Your site will be index 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.
steve says: How come theres no FIX for website background image flickering in IE6 and IE7? http://www.ahzhou.com/net
Mondo Libero says: Thanks a lot for this wonderful list of tips, they are more useful.
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!
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 11 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
June 16, 2008 at 5:01 pm
06/04/09 16:42
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.
Brandon says:
Nice list! I learned some great stuff from your post. Cant wait to try out the 1 px notch for rounded edges!
Amy says:
is there any mention of conditional comments? Its much better to place hacks in browserspecific style sheets targeted by conditional comments.. that way, good browsers dont have to read hacky css.
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; }
Rajnish Singh says: how i can link the file? please guide
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.
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
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 12 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
W3prodigy says: I apologize for the double post. see above post for reasoning #site_container { width: 950px; } #site_container #content_container { overflow: hidden; } #site_container #content_container #left { float: left; width: 250px; } #site_container #content_container #right { float: left; width: 700px; } #site_container #footer { width: 950px; } (if you feel this is necessary)
the only issue with Thierry Schellenbach suggestion is that unnecessary markup is added to the dom. rather than putting all the hacky markup in the css, they can be put into their own IE specific stylesheets which then can be added with IE conditionals.
User Interface Designer says: Wowww i was searching for such a reference like that but finally i gut it! Thanks dude
This article was very helpful. I was having a bunch of problems with IE and this helps me fix a lot of them.
Some great points and I particularly found #15 for getting rounded corners of interest. I wonder if IE8 will smarten itself up?
Internet and Design says: Thanks for the article, with css positioning you can make a lot of nice websites!
Felicity says: Some great tips, some I use and others I will need to add to my growing arsenal!
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 13 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
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.
Jon S says: Thanks! CSS can be a cruel mistress, always good to have a list of fixes to refer to.
Altamira says:
Excellent article! I have sent this link to quite a few people because these are things people always ask me.
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
Fantastic list. Thanks for the great, useful resource. I regularly peruse this web-site on a daily basis, lots of handy resources.
Rudy Herman Sinen says: This is a life saver. Thanks for posting this.
Daniel says: Wow I have saved this url for further projects. Thanks
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.
Hi, im from brazil and i dont speak (write) english very well (sorry). But to align the div #content this way is better: #content { /*the values is a example you can change it!*/
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 14 de 15
Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe
06/04/09 16:42
/*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
Newer Comments
Browse by Categories
3Ds Max Best-Of Cinema 4D CSS Fonts Funny Stuff GIMP Brushes How To's inspiration Menu Photography SEO sponsors Tools Wallpaper Adobe better design Contest CSS3 Freebie gall GIMP-Brushset Icons Javascript MySQL photoshop Showcases spotlight Trends Weekly Links Ajax Blogging Cool Links Design Freelance Gimp graphics Illustrator jquery News php Sponsored Review Texture Tutorial Wordpress
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...
copyright 2007 - 2009 NOUPE. All right reserved. Theme by Noura Yehia
http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
Pgina 15 de 15