On 6/24/07, Reg <[EMAIL PROTECTED]> wrote:
Hi all,I have spent an entire weekend diving into CSS positioning. I'm a table layout whiz and it is killing me that I can't seem to master even the simplest layout using CSS. I have two pages using the SAME stylesheet and DIV structure. However, I am not receiving the same results and, for the life of me, I can't figure out why. Here they are: (1) This is a view source dump from a web application page using the new CSS layout. It has all of the .NET junk and that may be causing my problems. But -- THIS PAGE IS WORKING: http://www.littletownmart.com/css/index-sat.html (2) This is the "bare bones" page with just the DIVs and a little bit of text. THIS PAGE IS NOT WORKING!!! http://www.littletownmart.com/css/index_Simple.html (3) Here is the stylesheet: http://www.littletownmart.com/css/main.css
Welcome to the list and to css. It does get easier but it takes a little time to change how you think about issues. Lets start at the top. First you need an entire doctype; yours is only partial. You are throwing IE into quirks mode. Essentially you are asking the browser to guess at what you want to do not telling it what set of rules to follow. I'd suggest using the strict html 4.01 version. Doctypes can be found here (you may already have all of these links but I can't know that so forgive the repition): http://www.w3.org/QA/2002/04/valid-dtd-list.html Second, don't develop in IE. IE6 and lower are notoriously broken in terms of css. IE7 is better but still not top of the line. Use Firefox or Opera then corrupt your code to make it work in IE. Get the developers plug in for FF, the Peppersack plug in, allows in browser editing so you can immediately see the effect of changes. Thirdly, have a look at http://www.positioniseverything.net (often referred to pie).It has an entire section devoted to known bugs in IE6 and 5x. Most of the bugs have several methods of dealing with them. The ones shown are pretty much the latest and greatest but there are simpler ways to manage things. Mostly you have to watch the width of things and you have to clear floats. Anything floated is out of the flow of the document. With IE6 you have to watch the "hasLayout" problem discussed in pie. For a discussion of floats, I've always found this document at brain jar makes sense to me: http://www.brainjar.com/css/positioning/ Fourthly, if you look at css sites you'll find that absolute positioning isn't widely used for full layouts. There are problems with using it since it takes things out of the normal flow of the document and leads to the always aggravating unintended consequences. Take the plunge and go with normal positioning and floats. Its worth learning the value of position:relative in layout (covered in part in pie). So, start with the doctype, it won't seem to help much but it does, and then do the pie articles. At that point bring back your questions and this group should be able to help. It's a struggle like Riva said, but it's worth it. drew ____ The WDVL Discussion List from WDVL.COM ____ To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] or use the web interface http://e-newsletters.internet.com/discussionlists.html/ Send Your Posts To: [email protected] To change subscription settings, add a password or view the web interface: http://intm-dl.sparklist.com/read/?forum=wdvltalk ________________ http://www.wdvl.com _______________________ You are currently subscribed to wdvltalk as: [EMAIL PROTECTED] To unsubscribe send a blank email to [EMAIL PROTECTED] To unsubscribe via postal mail, please contact us at: Jupitermedia Corp. Attn: Discussion List Management 475 Park Avenue South New York, NY 10016 Please include the email address which you have been contacted with.
