Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe

06/04/09 16:42

About Noupe


Add News













Jun 15

Using CSS to Fix Anything: 20+ Common Bugs and Fixes


Posted in: CSS, How To's, Tutorial | Leave a Comment |

Visual CSS Menu Software Create professional CSS navigation with Visual CSS QuickMenu Pro.

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!

Merchandising Layouts Easily Create Planograms, Shelving Plans and More. Free Trial!

OpenPlant PowerPID Rapid creation of intelligent P&IDs Get a free 30-day trial now!

Do you want to advertise here? Click Here.

IE Bug Fixes

Backgrounds in WordPress, Tips and Examples

Página 1 de 15

do NOT specify padding or margins. width: 500px. } To something like this: #content { float: left. no it's not.container { width:20em.noupe.It’s an Internet Explorer-exclusive bug wherein an 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. All you have to do is apply a display: inline rule to your floated } 13 Awesome Javascript CSS Menus 101 CSS Techniques Of All Time. padding: 20px. /* for understanding browsers */ . } /* for Internet Explorer */ /*\*/ 53 Killer Photoshop Illustrator Effects and Tutorials 60 Most Wanted Photoshop Tutorials. } JSON Suggest Box Build a Content Slider with jQuery MOST POPULAR Freebies Day? IT'S A TRAP! Wait. padding: 20px. So instead of doing this: #main-div{ width: 150px. min-height:8em.Part 1 45+ Must See WordPress themes Do something like this: 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 #main-div{ width: 150px. The TOP 7 Premium WordPress Themes For FREE 5. border: 5px. Just create an inner div with no width set and specify its padding and margins instead.5em. border:1px solid #000.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. } 3- Min-height attribute ignored in IE .html .PSDs and Resources NOUPE'S TAGS Página 2 de 15 http://www.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 1- Bug Fix: IE Double Margin Float Bug . Note: in IE 7 problem was fixed.Part1 47+ Excellent Ajax CSS Forms 2-Overcoming the Box Model Hack. height:auto. .“min-height” attribute works well in Firefox but IE 60+ Unusual WP Blog Designs Using CSS to Do Anything: 50+ Creative Examples and Tutorials ignores it. So you simply go from something like this: #content { float: left. IE’s height act as FF’s min-height. margin-left: 20px. } #main-div div{ border: 5px. display:inline. padding: 10px 15px. padding:0.If you want to specify a width to any div. Brushes. width: 500px. The fix is extremely simple. margin-left: 20px. padding: 10px 15px. padding:0px 10px.An easy-to understand article on how to fix common CSS Column issues with helpful diagrams and code snippets. width: 960px. } Column Issues 7- Top reasons your CSS columns are messed up . Several possible workarounds are detailed in this post. IE will create a “float drop”. } /**/ 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 -A fix for the lack of min-width in Internet Explorer. height:25px. } #container { text-align: left. simply specify the line-height for your text the same height as that of the container’s.html Página 3 de 15 . and the choice for the technique depends on whether you have the size set in percentages or in more absolute values. background:url(container. Centering a Block Element 5- Centering Block Element .Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe /*\*/ * html . #wrapper { width:530px.gif) no-repeat left top. 8- The Expanding Box Bug -When you try to create a two-column float layout. margin: 0 auto.There are multiple techniques for centering a block element.If you want to know how you can achieve vertical-align functionality the right way.container { height: 8em.noupe. } 6- Vertical Align with CSS . Centering an entire page’s contents: body{ text-align: center. } #wrapper p { line-height:25px. and it’s caused by having over-sized content in a fixed-width floated div that must fit into a particular spot in the layout.

#redSquare { position: relative.noupe. right: 40px. Part1. and a preview of the new CSS3 layout The answer to this question will add a bit of clarity to this confusion. width: 157px. top: 7px.An interesting series of articles that doesn’t only cover positioning. 10- What is the difference between relative and absolute positioning? . Part3 gives you a deep understanding of the possibilities you have in positioning. The first part will introduce the positioning and display property.Whether to use relative or absolute positioning can be extremely frustrating to people just getting started with CSS.Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content). but also properties that define layout such as display and float.html Página 4 de 15 . } To get this: 11- HangTab . http://www. Part2.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 CSS Positioning 9- Understanding CSS Positioning part 1 . bottom: 40px. #hang_tab { position: absolute. Check out Panic’s website for their software Coda. left: 0px.

"><p>Some content</p></div> <p>Text not inside the float</p> <div style="clear:both.float container --> <div style="float:left. height: 0.Float clearing can be one of the most frustrating aspects of CSS development.Floatutorial takes you through the basics of floating elements such as images."></div> </div> 13- Floatutorial: Simple tutorials on CSS Floats . } #container {display: inline-block.html */ #container:after { content: ". display: block. one of the best ways is to use the EasyClearing on your site.} /* Hides from IE-mac \*/ * html #container {height: visibility: hidden.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe width: 157px. next and back buttons.} #container {display: block.noupe.". 14- Clear Your Floats .com/css/using-css-to-fix-anything-20-common-bugs-and-fixes. height: 93px. image galleries.SmashingMagazine browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats. inline lists and multicolumn layouts. <div> <!-. } 06/04/09 16:42 CSS Float Concept 12- CSS Float Theory: Things You Should Know .} /* End hide from IE-mac */ http://www.The Right Way .html Página 5 de 15 . clear: both. /* EasyClearing http://www. drop caps. width:30%.

html Página 6 de 15 . } Also Askthecssguy explains the technique used in Google Analytics. margin:0 -20px -20px -20px.boxBottom { background:white url(roundBox. http://www. line-height:1px. rounded corners layout in 3 simple steps.roundBox .noupe. width:340px. 16- 3 Simple Steps in Coding a Rounded Corners Layout .gif) no-repeat bottom left. You can see an example here. height:14px. padding:20px. no-repeat top left.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 Easier Rounded Corner Solutions 15- Mike asks the CSS Guy for recommendations on rounded corners .Alen Grakalic’s approach to coding a fixed width. } . 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.“Simplest way is to use a giant gif. He also created a demo here.roundBox { background:transparent url(roundBox. then I’ll markup my box” <div class="roundBox"> <p>beautifully-encapsulated paragraph</p> <div class="boxBottom"></div> </div> “And give it the background” .

margin-right: 15px. which he first posted about here. which is left empty. A simple width: 100px.html Página 7 de 15 . :focus Pseudo Class. the label is displayed above the text input. where you can see this in action is here. Worth checking CSS Tricks 20- Cross browser Horizontal Rule with Background Image .Cris Coyer shares with us some tips for floating labels. You can grab the code here. He also created the Nice & Simple Contact Form. this tutorial illustrates a proposal about how to design a pure CSS form without using html tables. 19- Autopopulating text input fields with JavaScript .Sometimes we need to explain to users what they are supposed to enter into text input fields. This tutorial introduces a nice solution. the label element is hidden and the value of the input element’s title attribute is copied to the value attribute.For CSS lovers.You’d like to create a cross- browser horizontal rule that utilizes a custom image as the content separator. If JavaScript is disabled. text-align: right. } 18- Clean and pure CSS FORM design . using hints and more.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 CSS Form Issues 17- Tips For Creating Great Web Forms . 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. http://www. with JavaScript enabled. label { float: left.

subscribe to Noupe today. } June 15. 109 Comments.gif) no-repeat scroll center. display: inline. 2008 at 9:23 pm I was familiar with the above examples except “Easier Rounded Corner Solutions”. How To's. Tutorial | Leave a Comment | 109 Comments 4 diggs digg it vote now For more Web Design related tips. width: 500px. 2008 at 8:32 pm Well yes the first example which i think is the most important one here dosnt show the fix. padding: 10px 15px. margin-left: 20px. Any how good finds there. Rakesh Gupta says: Fix for the first example: #content { float: left. and “CSS positioning” also took quite a lot of time. this will make a great cheat-sheet for my CSS-challenged coworkers Ahsan Altaf says: June 15. This article did help to sort out quite a lot of things and will help me to work efficiently. 2008 at 8:25 pm Excellent article. Add Comment or Ping Billco says: June 15. What others { background: #fff url(myhrimg.noupe. and the first example does not show the fix.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 div. Nevertheless. Welcome to Paradise says: June 15.. “Worth checking CSS Tricks”.hr hr { display: none } Your tag should look like this: <div class="hr"><hr /></div> 56 tweets 2694 diggs digg it retweet Posted in: CSS. but some of the links are incorrect.html Página 8 de 15 .. 2008 at 9:24 pm Thanks mate. height: 10px } div.

Thanks for pointing this out. @Darren Yin. Thanks for sharing! June 16. June 16. isn’t the “before” code the same as the “after” code? June 16. thing is I have created a login page with using css style sheet which is created as seperate css style doc.noupe. } jbj says: Very good article. could you please guide me on this. thanks for sharing! June in the “after” code of the first example. and linked with the main login page.html Página 9 de 15 . 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. 2008 at 2:57 am Rajaie AlKorani says: Definitely worth a bookmark! Thanks! June 16. Please provide a link to the login page so we could have a look at the code. 2008 at 12:42 am @Rajnish Singh. blancus says: Really good list. 2008 at 11:21 pm David says: hacks! June 15. we added the display:inline rule to make it work in IE web design company says: June 16. 2008 at 12:15 am I have a cross browser problem. 2008 at 5:09 am Xarc says: Really good list!!! Thanks. 2008 at 6:04 am http://www. 2008 at 11:26 pm Noupe says: June 16. there are tables created in login page using table tag. in the first example. 2008 at 5:40 am Matt says: Neat use of CSS! June 16. 2008 at 12:35 am Noupe says: June 16. i am sure it was due to lack of coffee Rajnish Singh says: Hi June 16. 2008 at 1:34 am Some quick tips for common CSS issues and how to avoid easy pitfalls during your CSS coding process. i totally forgot to add the display:inline. thanks Darren Yin says: in the first tip. 2008 at 12:02 am Oops.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 display: inline.

noupe. 2008 at 12:34 pm Good articles. Bankai says: June 16. some of the examples really helped me! Thanks for sharing June 16. I was hoping to find an easy/easier hack to make dotted borders in IE6 like those in Firefox? I’m sure I speak for everyone who has wished IE6 simply rendered ‘dots’ instead of dashes. 2008 at 8:54 am but this is a better more comprehensive list of fixes/hacks. wicked post as always girlie Sure some of them have been discussed before. that will help you fix many problems. but the horizontal rule one makes no sense wrapping an hr element into a div then styled it with css. to fix it. The tip # 3 (IE height) saved my day. Make sure to add width attribute also cause you div will not use block width 100% Patrick Sweeney says: June 16. June 16. OR line-height:1px. 2008 at 12:22 pm Great list once again. has ever been very helpful to me. add font-size:1px. The rounded css corner was a nice read too! *hugs* Erik says: Why use a comment hack on #3 when only IE recognizes “* html”? June 16. —. 2008 at 11:43 am IE6 is nightmare for all new web designers but after sometime they learn how to deal with it. 2008 at 7:10 am jacksonville face says: Thanks for the list. 2008 at 12:13 pm Jon Aizlewood says: June 16. OR Overflow:hidden. on u75 and even June 16. I will allow you to make divs behave like tables. 2008 at 8:09 am Moni says: Noura.shoutingzone.Another tip —– display:table-cell. 2008 at 11:27 am sakib says: June 16. ever use spiffy corners? Those are pretty nice! June 16. —–one from me :D—— IE6 assign 12px height to all div tags by default. What’s the point? Might as well put just a div there with a class and http://www. 2008 at 11:56 am Excellent article! I have sent this link to quite a few people because these are things people always ask me. It cannot be fixed by adding height:5px. Jake Rutter says: Great List.html Página 10 de 15 .Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 MyRule says: Very nice article.

2008 at 3:21 pm Joh thomas says: June 16. Personally i create a nice dotted borders for Internet Explorer using a repeating background graphic. 2008 at 12:51 pm Laying things out was a lot easier with tables and spacer gifs. Thanks. 2008 at 1:26 pm DIVs is not a fad. http://www. June 16. For better understanding of the display rule.quirksmode. as you might use them as a If anyone has a better solution. steve says: How come there’s no FIX for website background image flickering in IE6 and IE7? http://www. they are more useful.html Página 11 de 15 . the HR tip was to use an image as an HR while preserving the web page backward compatibility and better phone browsing. Thanks for pointing this out. 2008 at 2:50 pm June 16. Tables layouts might be easier. @Jon Aizlewood. June 16.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 then styled it with css. 2008 at 5:01 pm http://www. The CSS display:table-cell is to mimic the display properties of a table cell. 2008 at 1:17 pm Limied Edition iPhone says: Nice Tips! I used the first one! June 16. Laying things out with DIVs is a fad. A good example can be found here: http://kalsey. i agree with you. layouts with DIVs is easier for search engines to @Bankai.noupe. 2008 at 1:33 pm Mondo Libero says: Thanks a lot for this wonderful list of tips.ahzhou. I think it is a smart tip. But try saying that to an HTML developer today and you’ll be burned at the stake for heresy. Thank you for the comments! I’d like to address some of them: June 16. 2008 at 2:46 pm Noupe says: Hey everyone. Figaro says: yes. but without actually having the table semantics at the markup level. Thank you all for your participation! Steven Snell says: Excellent bookmarkable list. please check this post. Crankyman says: June 16. June 16. but if you are using table layouts why even bother with CSS? You are writing dinosaur code dotted borders in IE6 is one of the many issues we have to deal with. 2008 at 1:23 pm Nox says: @ Crankyman June 16. Your site will be index faster and cleaner than a table layout. css based web design provide less afford for coders. let me know about it. What’s the point? Might as well put just a div there with a class and forget the hr element and styled it.

clearer { clear:both. W3prodigy says: June 17. 2008 at 5:29 am The easyest way is to go on rentacoder. Frames are a thing of the way past! JT http://www. this avoids the “shadow” effect of seeing the rollover that way. Thierry Schellenbach says: Point 14 about clearing floats can be done quite easily with the following code Prefer this: . good browsers don’t have to read hacky css. 2008 at 5:01 pm 06/04/09 16:42 CSS Style Sheets ROCK. You will see at less 10 indians who will offer to do your job for free!!! In the mean while.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe June 16.html Página 12 de 15 . then by setting an overflow:hidden to the container you can achieve a flowing design that matches with the floating content.Ultimate-Anonymity. Brandon says: June 16. } June 17. 2008 at 7:08 pm is there any mention of conditional comments? It’s much better to place “hacks” in browserspecific style sheets targeted by conditional comments.. by doing so. 2008 at 5:10 pm aside from assigning the anchor’s containing element withe the same background image. height:1px. apply overflow: hidden style to prevent text wrapping. put a maximum price of 5$ and then wayt. using those methods is hacky and unnecessary. overflow:hidden. you drink a dale tan says: here’s a tip for IE6 and doing css rollovers: June 16. 2008 at 6:49 pm Nice list! I learned some great stuff from your make a project where you fill all your css problems. 2008 at 10:37 am I disagree with #8. margin-top:-1px. If you simply create a container div around the elements above the footer. Can’t wait to try out the 1 px notch for rounded edges! Amy says: June 16.noupe. Something like this (obviously in an external stylesheet): Left Right Footer http://www. 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… June 17.

User Interface Designer says: Wowww i was searching for such a reference like that but finally i gut it! Thanks dude June 18. some I use and others I will need to add to my growing arsenal! June 30. they can be put into their own IE specific stylesheets which then can be added with IE conditionals. 2008 at 10:02 am Some great points and I particularly found #15 for getting rounded corners of interest. 2008 at 10:41 am dale tan says: June } #site_container #content_container #right { float: left. 2008 at 7:53 pm modaser says: thank you June 20.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 W3prodigy says: I apologize for the double post. 2008 at 8:28 am Adrian Kelly says: June 19. thanks for sharing! June 28. I was having a bunch of problems with IE and this helps me fix a lot of them. 2008 at 7:13 am salwa says: good article. 2008 at 8:40 pm http://www. rather than putting all the hacky markup in the css. 2008 at 5:20 am the only issue with Thierry Schellenbach suggestion is that unnecessary markup is added to the dom. Jane says: Great list. 2008 at 11:06 pm This article was very helpful. with css positioning you can make a lot of nice websites! June 27. } #site_container #footer { width: 950px. 2008 at 12:22 pm Felicity says: Some great tips. 2008 at 9:20 am Stevan Ljuljdurovic says: June 18. thanks for sharing! June 19. 2008 at 1:30 am Internet and Design says: Thanks for the article. width: 250px. } #site_container #content_container { overflow: hidden. see above post for reasoning #site_container { width: 950px. thanks! June 19. width: 700px. I wonder if IE8 will smarten itself up? BadDream says: oo 2490 digg very good June 19. } #site_container #content_container #left { float: left. 2008 at 11:41 am egypt web design says: wow great list. } (if you feel this is necessary) June 17.noupe.html Página 13 de 15 .

But to align the div #content this way is better: #content { /*the values is a example you can change it!*/ http://www. wtf perdeci says: nice tutorial thanks August 9. I’ve used many of these myself and they work well.aproduction. but now it destroy my main block… best. 2008 at 1:40 am hey! can you suggest how i can repare font style for firefox 2008 at 7:52 pm Daniel says: Wow I have saved this url for further projects. I’ll be sure to digg it! July 10.subname 30px should work just for left column. seriously M$ got this one wrong. Nick says: Centering a Block Element December 12. September 20.noupe. Thanks for the great. 2008 at 4:50 am Hi. useful Thanks for posting this. 2008 at 11:52 pm Dwayne Charrington says: September 9. 2008 at 8:57 am Altamira says: July (in safari everything works great). Thank’s September 28. July 11. 2008 at 3:51 pm There are some very good techniques listed on this website. 2008 at 8:02 am Excellent article! I have sent this link to quite a few people because these are things people always ask me. always good to have a list of fixes to refer to. 2008 at 11:55 pm #1 is retarded why should i make a block element inline just to make IE happy. jdzzle says: July 27. This is an invaluable source of information for anyone who is learning CSS and gets frustrated at certain browsers not behaving like others do. font. I regularly peruse this web-site on a daily basis.Using CSS to Fix Anything: 20+ Common Bugs and Fixes | Noupe 06/04/09 16:42 Web Design Forum says: July 4. i’m from brazil and i dont speak (write) english very well (sorry). 2008 at 4:44 am boris says: November 16. b. jd says: Thanks for the tips. Rudy Herman Sinen says: This is a life saver. lot’s of handy resources.html Página 14 de 15 . 2008 at 9:17 pm Fantastic list. 2008 at 12:12 pm Jon S says: Thanks! CSS can be a cruel mistress.

300px. /*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.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. top:50%. margin-left: .450px. copyright © 2007 . Theme by Noura Yehia http://www.450px. height: 600px.. left: 50%. /*half of the width*/ margin-top: .2009 All right reserved. left: 50%.noupe.html Página 15 de 15 . position: absolute.. margin-left: . /*half of the height*/ } Sorry for the poor english… Thank’s! 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.

Sign up to vote on this title
UsefulNot useful