First, I want to say thanks to everyone who has bought a copy of Stylin'. Its success has been an amazing experience for me - its sales have exceeded even Peachpit's best expectations, and I have many positive reviews on Amazon and tons of mail from readers telling me it has helped them, so I am very happy that it has been useful to so many people.
Unfortunately, it went to press on a breakneck schedule and I didn't even get a chance to review some of the chapters after submitting my final manuscripts. I'll accept some of the blame as I had no idea how much work I was committing to, and it just took way longer than planned. Peachpit enter into contracts with stores and Amazon immediately after I sign my contract, and they meet those commitments - I can't fault them for that.
The time crunch came because I crammed a lot more in than I planned, which was good and bad. I covered a lot more ground than I thought I could in the book, but a side effect is that there are many more errors, most minor typos, than I would like. These are being fixed in a reprint that is out on the 15th of March.
Here's an new file that provides more capability that the Robust Template on page 162. The side columns in this example do not push down the footer when they are longer than the content area (it uses absolute positioning of the side columns).
So here is a more advanced layout, a Fluid Three Column Template on the Stylin' site, which meets the requirements of a fluid center and the longest column pushing down the footer. This example uses a nifty negative margin technique that I first saw on A List Apart a while ago, and which has been refined even further (only 1 container required, not two, as in my version) in a new article on the same site entitled Holy Grail. Also see PositionIsEverything's article on this subject. If you give my template a try, please let me know how it works for you. I have used it with success recently as the basis for a large university site that has not gone live yet, but has gone through extensive QA, and I will post a URL when it if finally live.
Subscribe to:
Post Comments (Atom)
8 comments:
Some good questions, and you are incredibly close. Because you have obviously put a lot of work in a short space of time, and are the first person I know to have used this revised template since I posted it, I am happy to spend my Saturday night investigating your issues. A nice glass of Napa Chardonney helps with the whole experience...
Here's a fixed-up version that addresses your points:
CWS revised version
Note that while the code is on my site, I have set absolute URLs to you images and csshover.htc, so please leave them there or the whole thing falls apart.
Issue 1 - I don't have an good answer for you on this one as to why, but I do have a fix: moving the margin:3em; off the container and to the body gets the desired effect on all browsers. I'll think about why this is a problem on SCBs.
Issue 2. This template is not set up to do this (switching the markup order). Also, after some not very extensive experiments, I am not so certain that "content first" helps search engine rankings that much - good page titles and matching text in headings, specially H1 and H2, seem to help more. If you want content first and this fluid center, footer-clearing layout, I think we are going to have to do some more work! Give it a try : )
Issue 3 - background-color: /* #B0DF55 #CCFF33*/ #CCFF33;
IE 6 didn't like the commented out color values in this style for the background of the listmenu div - I removed them and then IE 6 colored the background of the menu correctly. Seems like Firefox can deal with comments within styles - we learn something new every day, but I think comments within styles is not good practice.
Issue 4. The "hanging" bullets problem is easily fixed - see Fig 7.4 and associated explanation - in short, you need a margin-left on the list to bring those bullets back in, or get rid of them with list item:0 - see my other note below. As good practice, use
* {margin:0; padding:0;}
at the beginning of your style sheet to zero out margins and padding on all elements - then you just set the ones you want as you go - this eliminates differences in the way the different browsers handle padding and margins on lists and other elements - the whole section around fig 7.4 is worth reading closely in this respect.
5. Breadcrumb missing in Firefox and other SCBs: Take the float off listmenu - they are on top of each other and removing this stacks them correctly - I turned on the borders on the breadcrumb and I could see it was under the nav - after that, it was easy to work out what was happpening. I know I suggested adding it in the example in the book, but with the other element, it just isn't needed - I'll think about why this is...
6. Border not showing on footer: The footer is not being cleared. I added a clearing div right before the footer and now all is well - if you add a nice fat border around the footer in your version, you can see that the actual div, though wierdly, not its content, it is actually located under the navigation at the top of the content. There is a lot of clutter in the clearing stuff that seems to have come from several examples in the book you should look at and simplify.
7. Firefox ignores the list-item: 0 because it's on the ul - it should be applied to the li - IE wrongly responds to this setting on the ul.
8. You asked: Why does the absolutely positioned layout on page 162 not clear the footer? Answerr: Once the side columns are absolutely positioned, they are out of the flow of the document, so there is no way the columns can have any effect on the footer - see my little demo on pages 112 - 116 regarding this.
Your problems in this layout, my friend, all stem from the fact that you developed it in IE, which as I mention in the book, is the wrong way to go - start in Safari or Firefox or some other standards-compliant browser, and then tweak for IE after. IE's mishandling of floats and many other issues (although the floats problem was the cause of most of your issues here), can waste hours of your time (and mine : )
Do me a favor - keep this version where we can still reference it - I'll update your link on the blog if you need to move it to another location - as I want to share the issues you have had, and the fixes I demonstrate, with others.
You did a great job here integrating my template with the drop downs and many other techniques I show in the book - I am totally impressed by what you have achieved. Just don't develop in IE next time and things will go much better for you.
Stay in touch, and again, good work - and do to post a link to the finished version,
Charles
Also,
The link to your csshover.htc was not correct so I pointed to one on my server to make the drop-downs work in IE
In the menus markup, Industry 1, 2, and 3 have extra <'s that I removed. These were showing up in the menu in IE.
Again, a commented-out style caused problems - the one within the li of the menu prevented the background of the drop-downs showing in IE. I moved that commented-out style past the end of the line (after the closing } )
I'm not too sure if this fits in here or not.
I'm trying to get the source ordered with the graphics to work. No problems with the footer as I have put the footer outside of the wrapper divs and positioned it.
http://erin.debsplace.org/previousarticles.html
I have tried several different extender graphic techniques and positioning, however, the only thing that works is the nav section, which as you can see extends down.
BUT, the column with the photos, what I had to do to get that to work was to put a margin bottom on the last graphic.
Since this is going to be a template, I need to get this to work as close as possible to the main page:
http://erin.debsplace.org/erin6.html
Since I have enough content within the center section, both the left and right columns extend down nicely. Same extender graphic in the nav section.
Am I doing something wrong? Mixing up things that I have read within the book?, by trying to do this without refering back to it?
Thanks in advance for any help or guidance that anyone can give on this one. This is my first freelance, and I am trying to get it perfect as I know that there could be more from this person.
4~CSS
Yippe!
I think I solved the problem with the following page:
http://erin.debsplace.org/previousarticles.html
I had the images in the right column relatively placed. Once I removed the position: relative; the page worked with the extender gif!
I created the second wrapper, and then I added the extender gif to this. Viola! It works. I'll load up to the server later so that others can view the code in it.
So, I have a page that is source ordered, and the content extends down as it is supposed to do.
Such fun when you accomplish something and figure out what is wrong. Gotta love coding ;)
Yes, you are right, cssjunky. Things don't work the way they should in IE and everyone who writes CSS lives with that every day. Notice that in IE the first choice in the drops is hot anywhere, but the other choicess, you have to cick on the actual type. Still trying to work that out. Check it out in a nice SCB like Safari, and it's perfect. As I say in the book, what's important in this world where every browser works differently is to give the user the best experince you can can and accept that not everyone is going to get the same experience. Write me at charles at bbd.com if you want to talk about this more. Thanks for posting.
Yes, you are right, cssjunky. Things don't work the way they should in IE and everyone who writes CSS lives with that every day. Notice that in IE the first choice in the drops is hot anywhere, but the other choices, you have to cick on the actual type. Still trying to work that out. Check it out in a nice SCB like Safari, and it's perfect. As I say in the book, what's important in this world where every browser works differently is to give the user the best experince you can can and accept that not everyone is going to get the same experience. Write me at charles at bbd.com if you want to talk about this more. Thanks for posting.
Charles, great book. I read every page (I'm like that) a few months ago, and I continue to look at the examples files from the book when I get stuck. I just started to use the 3-col fluid template... it's great except for one IE issue: there's a noticeable "flash" when the page renders iff the IE window is larger than max-width. The page seems to render at the larger width, then adjusts itself inward with a somewhat nasty flash. The flash is bad enough that I don't think I can use the layout (esp. since I have max-width set to 850 and my screen is 1024x1280, so it flashes all the time for me. And, yes, it's 1024x1280 -- I have my 19" rotated 90 degrees -- it's GREAT for coding!)
Any ideas?
Working on my first website. www.connectsimply.com/index.php My son advised me to use html for content using html (knew a little), php for the links, css for the style. Simple he said, than if I ever want to change the style, just change the css.
So I write some content, wanting just a simple page with header 2-3 columns, footer, headerimage, background image, footer image, want it to work in IE and Firefox. Just check out csszengarden, w3schools, webmonkey my son says.
Worked for days learning some css, but couldn't get the nav column to go where I wanted. Got some help, worked in ie and firefox until I tried the smaller screen size and ie misplaced my column. My son sent me to the Holy Grail,helped a little. To the bookstore, grabbed a few, Sytlin was one and I quickly dumped the fat encyclopeida like books and took yours home, had it half a week. Haven't had a chance to read everything yet, but I was surprised at how quickly I found the answers.
Weird, went to floats, IE not floating, found a fix in our book, made syntax errors in the second half, got it working in both Wouldn't validate. Found the errors, fixed, and the footer graphic goes to the top of the content, but at least now I understand why. Thanks so much for the book, I'll get it figured out yet, making progress, fixing stuff.
Post a Comment