Help with layout in Firefox — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Help with layout in Firefox

This page's ID: 24446

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	First thing I see: #cont { position:left; } No such thing as position:left. Position may be "absolute", "relative", or undeclared. If undeclared, it acts !mostly! like "relative". Actually, if I may... You have lots of layers of complexity in here -- way more than necessary. Do this: [code] <html> <head> <!-- Head stuff here --> </head> <body> <div id="header"> <h1>Ensellitis</h1> <ul id="breadcrumbs"> <li>Ensellitis.com</li> <li>Location</li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.</p> <p>Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct.</p> <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.</p> <p>Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct.</p> <p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.</p> <p>Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct.</p> </div> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a></li> </ul> <div id="footer"> <p>Hit counter stuff here (if you insist).</p> <p>Copyright Stuff here.</p> </div> </body> </html> [/code] Simpler, no? Then do something like this for css: (I'm including positioning stuff only. Backgrounds, colors, etc are your responsibility.) [code] html, body { margin:20px 50px; padding:0; border:0; background:#fff; color:#000; text-align:center; } #header { margin:0; padding:0; border-top:1px solid #000; border-bottom:1px solid #000; } #header h1 { height:162px; margin:0; padding:0; background:#555; color:inherit; } #breadcrumbs { margin:0; padding:5px 7px 3px; text-align:left; list-style:none; } #breadcrumbs li { display:inline; margin:0; padding:0 7px 0 0; } #content { float:right; clear:right; width:60%; background:#eee; color:#333; text-align:left; } #menu { text-align:left; list-style:none; } #menu li { display:block; margin:1px; padding:3px 5px 1px; border:1px solid #000; } #footer { clear:both; border:1px solid #000; } [/code] It probalby is not going to be perfect, but that should give you a good start in the right direction. Write back here when you have questions and I will do what I can do answer them. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu