IE6 and multi divs in a row — OZONE Asylum, home of the Mad Scientists

CSS - DOM - XHTML - XML - XSL - XSLT

IE6 and multi divs in a row

This page's ID: 28802

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	[quote] [b]CPrompt said:[/b] On another note, is there a better way to style the boxes on the bottom? They are all the same except for the background color. [/quote] Yes! =) You've got all this repeated info: [code] .bsText{ display:inline; float:left; margin:0px 22px 0px 22px; width:150px; height:250px; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; background-color:#999933; } .bmText{ display:inline; float:left; margin:0px 22px 0px 22px; width:150px; height:250px; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; background-color:#4263aa; } .bcText{ display:inline; float:left; margin:0px 22px 0px 22px; width:150px; height:250px; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; background-color:#e38336; } .baText{ display:inline; float:left; margin:0px 22px 0px 22px; width:150px; height:250px; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; background-color:#663300; } [/code] Instead, make one class with the main info: [code] .bText{ display:inline; float:left; margin:0px 22px; width:150px; height:250px; border:1px solid #fff; border-top:none; } [/code] Then you will still need to soecify the background colors for each individual class: [code] .bsText{ background-color:#993; } .bmText{ background-color:#4263aa; } .bcText{ background-color:#e38336; } .baText{ background-color:#630; } [/code] In your html you simply define both classes - <div class="bxText bsText"> Save a lot of aggravation changing the same piece of code 4 times each time you need to tweak it ;) I would also suggest a couple of things: 1) make the image in those divs a background image. 2) make that <div class="bHeader"> and header - you are telling it style as a header, so why not just code it as a header? Also, it has been a little while since I've done any of this, so my memory is faulty, but doesn't setting float on an element force it to display:block, negating the display:inline specified? Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu