Comments on stylin' & codin': Comments on Stylin' and the three column fluid tem...

black mold exposureblack mold symptoms of exposure...

2008-05-16T15:33:00.000-07:00

black mold exposure black mold symptoms of exposure wrought iron garden gates iron garden gates find them here fine thin hair hairstyles search hair styles for fine thin hair night vision binoculars buy night vision binoculars lipitor reactions lipitor allergic reactions luxury beach resort in the philippines

afordable beach resorts in the philippines homeopathy for eczema.baby eczema.save big with great mineral makeup bargains mineral makeup wholesalers prodam iphone Apple prodam iphone praha cect iphone manual manual for P 168 iphone fero 52 binoculars night vision Fero 52 binoculars The best night vision binoculars here

night vision binoculars bargains free photo albums computer programs free software to make photo albums free tax forms printable tax forms for free craftmatic air bed craftmatic air bed adjustable info here boyd air bed boyd night air bed lowest price find air beds in wisconsin best air beds in wisconsin cloud air beds

best cloud inflatable air beds sealy air beds portable portables air beds rv luggage racks aluminum made rv luggage racks air bed raised best form raised air beds aircraft support equipments best support equipments for aircrafts bed air informercials best informercials bed air mattress sized air beds

bestair bed mattress antique doorknobs antique doorknob identification tips dvd player troubleshooting troubleshooting with the dvd player flat panel television lcd vs plasma flat panel lcd television versus plasma pic the best The causes of economic recession what are the causes of economic recession adjustable bed air foam The best bed air foam

hoof prints antique equestrian prints antique hoof prints equestrian prints Buy air bedadjustable buy the best adjustable air beds air beds canadian stores Canadian stores for air beds

migraine cause migraine treatments florida florida headache clinic drying dessicant air drying dessicant dessicant air dryer pediatric asthma asthma specialist asthma children specialist carpet cleaning dallas tx carpet cleaners dallas carpet cleaning dallas

Head Shop, Herbal Grinders , Bongs, Glass Pipe. V...

2007-03-10T14:04:00.000-08:00

Head Shop, Herbal Grinders ,
Bongs, Glass Pipe. Visit us for more info at: http://www.headshopinternational.com/

I set up a web page based on your snergs example a...

2006-10-23T15:16:00.000-07:00

I set up a web page based on your snergs example and found that elements would disappear in IE6 when the browser window was resized. I then checked your actual example (8.28) in IE and found the same bug. When the browser width is increased to a certain point, the header and both columns disappear. On the other hand, your negative margins example (8.29) seems to be OK. Is this another known bug of IE?

Working on my first website. www.connectsimply.co...

2006-07-22T15:07:00.000-07:00

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.

Is there any way to avoid using the csshover.htc f...

2006-06-20T08:04:00.000-07:00

Is there any way to avoid using the csshover.htc file and still get drop downs to work in IE?

For some reason in my IE (6.0) when I add that reference, I get an ActiveX alert dialog. I know a lot of my intended audience will either ignore that alert or get scared off our site.
Any

3 col fluid layout revised & flyouts . . . loved t...

2006-05-25T21:11:00.000-07:00

3 col fluid layout revised & flyouts . . . loved the way the flyouts worked in 2-col css page; your 3-col neg margin causes flyouts in IE to move to far left margin. Hover over them once and they pop into place and work fine. Not adept enough at CSS to figure out the problem. Any ideas?

Charles, great book. I read every page (I'm like ...

2006-04-03T20:26:00.000-07:00

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?

Yes, you are right, cssjunky. Things don't work th...

2006-03-06T19:11:00.000-08:00

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.

Yes, you are right, cssjunky. Things don't work th...

2006-03-06T19:09:00.000-08:00

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.

I am not sure if this belongs here or not, but it ...

2006-03-05T20:35:00.000-08:00

I am not sure if this belongs here or not, but it has to deal with the drop menu from the Stylin book. I was going through the examples and noticed that on pg. 202 where we add the display:block to the all link tags under listmenu, this is so we can see the highlighted text when you mouse over any area in the link. Well it looks as if it doesnt work for me in IE. So I went to bbd.com to look at his menu, in IE, and it fails there as well. Just a FYI...

Thanks

hello again, next version has been revised further...

2006-02-27T16:53:00.000-08:00

hello again, next version has been revised further to answer one of the how to questions.

4. I have seen > markers where you would alert a user that there are more submenu items when they hover a listmenu item, how would you do this here?

a. ok I came across how to do this on 2/26/05, you can see the markers for submenu items in navigation. I added the following:
div#listmenu li a.submenu { background:url(/images/icons/sub.gif) right no-repeat; }
⁄*
select Hover CSS menu in
http://css.maxdesign.com.au/listamatic/index.htm http://www.xs4all.nl/~peterned/examples/cssmenu.html *⁄

also thanks for the tip cssjunky

On the "fixed-up version" that charles edited, whi...

2006-02-24T14:53:00.000-08:00

On the "fixed-up version" that charles edited, which works well, I seen something that stands out in my eye.

Small detail, but what the heck. On the div#breadcrumb, the right border sticks out, if you set the width for the breadcrumb to 99.9% it seems to line up.

Thanks...

ok,here is the next version. Ran into more snags w...

2006-02-11T16:33:00.000-08:00

ok,here is the next version. Ran into more snags which are listed under Further development 2/11/06.

Thank you for taking time to review and respond to...

2006-02-11T02:21:00.000-08:00

Thank you for taking time to review and respond to the questions. Forgive my late reply, I mistakenly assumed that you just had not had a chance to look at my comment because I was not notified when you posted. Rest assured the original version will stay where it is. I will incorporate your suggestions starting with Firefox and will post a link to that work.

P.S. Could Sting ever make your musical inspiration list?

Yippe!I think I solved the problem with the follow...

2006-02-08T07:06:00.000-08:00

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 ;)

I'm not too sure if this fits in here or not.I'm t...

2006-02-07T05:05:00.000-08:00

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

Also,The link to your csshover.htc was not correct...

2006-02-05T09:16:00.000-08:00

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 } )

Some good questions, and you are incredibly close....

2006-02-04T22:11:00.000-08:00

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

Stylin' is one desk reference I shall keep. It tea...

2006-02-04T16:56:00.000-08:00

Stylin' is one desk reference I shall keep. It teaches "how to" instead of merely inform. The robust fluid layout listed in the book Fig 6.10 could not get the footer to clear the longest column. The revised version on the stylin site does. I have added the faux to the threecol and twocol div's, you can see it here. As you can see there are still some problems. Where can we discuss these further?