My issue is that some of my CSS code has stopped working, where it was working perfectly previously. I have made no changes to my code, and I'm not sure what has happened. I have gone over and over it, and can't find any errors.

I have checked with the W3C CSS Validator, and apart from one parse error ( - and I still haven't figured out what the error is - ) the code has validated. I am still quite new to CSS, so I have probably done things the long way, but as long as it works, I don't really mind, lol.

I would really appreciate it if someone would take a look at my source code, and I can provide the files for the CSS as well if asked.

Thanks!

Browser: Firefox

OS: Windows XP Professional

Validation is good, but do not misunderstand what it means. Successful validation only ensures that your code does not have any HTML or CSS syntax errors. I does not mean that it will work as want it to.

No need to provide the source code for the CSS. We can see the CSS code just as easily as your HTML source code. It's really not an issue of the CSS not working. In fact, I see what appears to be way to much CSS code.

It looks like your trying to make a simple three column layout. The left column contains the navigation menu, the center some content, and the right column is currently empty. The left and right columns have a background color (light blue or green), and the center column is white. But I see, at least on my screen, that the right column is actually under the center column. That is fixable. All of the code seems to be doing exactly what the CSS is telling it to do, but that may not be exactly what you expect.

Each of your navigation menu items has a different style defined. That appears to be for positioning purposes, but it's usually not a good idea to try and force positioning on a free web site. With the definitions currently in the page, the navigation items run off the bottom of my screen and there is no scroll bar to allow me to see the rest. If I remove the link to the "Navigation.css" file, the whole menu displays fine, but it may not show the way you want it to.

Maybe you could explain a little more about what you expect to see.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Hi Philo, thanks for taking a look.

I have been considering removing the "fixed" property from the menu bar, because of the problem you encountered. On my screen, the side panels show up in the right places - and I have only tested on one other pc so far. I wondered about that, although I have positioned them as percentages, and thought that would adjust to any screen - or would that be a screen resolution issue?

The CSS was working the way I wanted it to, for several weeks, as I have been building the site. It is far from finished, but ...

Specific issues are that my image at the top left was flush with 0px left, as per code, but suddenly now it shows about 5 to 10 px from the left margin. My secondary navigation links are not positioned where they should be (and were up until two days ago).

As I have said several times, I am very new to CSS, and really appreciate your guidance. I am resigned to making the menu scrollable, as it is longer than I originally anticipated, and was worried the bottom wouldn't be visible. Can you give me any idea why the image has suddenly moved to the right - seemingly on its own accord?

I am sort of experimenting with the CSS, trying to get it to work, and learning as I go.

Many thanks!

That's why I asked for a little more explanation. I can make a lot of good guesses, but that's all they would be, guesses.

I can't say I subscribe to the idea that things suddenly changed. But it is possible that you made a change and viewed the results, not realizing that your browser was showing you cached data. Then, when your cache expired, you saw what the real results were. When you view any changes from a browser, you need to make sure you force a couple of browser refreshes (F5 or Ctrl-R).

The first issue you mention is the space next to the image, on the left side. In the "body" style you set the left "margin" to zero, but in the "#column1" style you override it with "padding: 12px;". Maybe you meant something different. The "margin" and "padding" properties manage things differently. The "margin" properties define the space around elements, whereas "padding" properties define the space between the element border and the element content.

So the "padding: 12px;", sets a 12 pixel space at the top, right, bottom, and left side of the "column1" div. Remove it and the extra space on the left will go away. It might not be obvious to you, but it also removed some extra space that was above the image. But I will get to that in a bit. Since you are learning CSS, this is a good example of what "Cascading" is all about. The definitions from the "body" style cascaded into the "column1" div, but was overridden by the "padding" definition. The "#column2" style will not see that "padding" definition, but note that the "#column3" style has a 13 pixel "padding" definition.

It is not intended that you create a style for each and every HTML tag. You can create top level styles that define default behaviour for most HTML structures, and then cascade those definitions into style when you want a section to be a little different.

The idea of using percentages to manage a web page is good, but you need to take several things into account. First is screen size. I am guessing that you have a very wide screen, which is why your not seeing the last column folding under the center column, and not seeing the image sticking into the center section.

When you use percentages, everything that displays is relative to the visitors screen size. Currently, your left and right columns are defined to be 14 percent of the screen. For a 1280 pixel wide screen, that's 207 pixels. Since your image in the upper left is only 201 pixels wide, on your screen it appears to fit fine. But on a 1024 pixel wide screen, which is what the highest percentage of you visitors will have, the left and right columns are only 143 pixels wide. This makes the image stick out over the right side.

The way this is commonly handled is by making the right and/or left column fixed sizes, and only allow the center section to float. This insures that visitors will see the columns appear as you want them to. To get a good idea of how you handle a variety of layout situations, you might want to look at Dynamic Drive CSS Layouts.

Using the layout code from that site, here is a link to an FriendsInSpirit Sample Page. This layout had a header section and lets all three columns float to adjust to any visitors browser. I then inserted one of the CSS menus from the Dynamic Drive CSS Library. There is a good variety to choose from. If you wanted to fix the left column in width, and then let the other columns float, there are example layouts available on the Dynamic Drive site. Here is a link to Sample Page Zip File. You can download it to your PC, unZip it, and view the HTML/CSS.

If you look through the code you might also notice some Javascript that gets around one of the common CSS based column problems. In a table based layout, the table specifies the height of all it's columns. But CSS columns are independent of one another and can have different heights. The Javascript insures that all the columns extend all the way down to the bottom of the layout.

And, in the end, the sample I provided has been validated with the W3C CSS Validator. No errors or warnings were detected.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP