These include issues with the navigation bar, fonts, the footer, and zooming in/out.
The problems are undoubtedly rooted in site.css and SpryMenuBarHorizontal.css, which you can find in the source (right click and select “inspect element” or “view source”).
You should be able to find the problems easily yourself.
The image at the top of the page is awkward as a foreground image. It looks like it would be more suitable as a background image in a container with a fixed height (same as the image). The block container would automatically stop at the edges of the page; thus ending the problem with the horizontal scrollbar.
I don’t know anything about the Spry menu in particular, but the following changes to the css would center the row of menu items: (add the BLUE, delete the RED)
The absence of red in the menu is happening because the background-color for the menu container is being applied with a -moz- specific prefix, so other browsers are not interpreting it. (That’s why it worked in FF for me ) I’m not familiar with applying gradients in this way, so I can’t help much except to say that you need other vendor prefixes to address other browsers.
Can you look up the prefixes for other browsers, or do you need help doing that?
After we get the menu color solved, we will move to the next issue… the centering of the menu. Also, there are at least a couple more areas where the background-color does not extend when the width of the browser window is increased.
You might want to reconsider that placeholder at the top as I suggested unless it is not supposed to hold an image. It DOES extend the point at which scrollbars are triggered.
You might want to view your web page in a non-maximized browser window so you can realize how it is behaving in other computers without big monitors and so you can see what happens when you resize the browser window. Realize that your audience of viewers most likely do not have the luxury of a giant monitor.
Glad that the wrapping of the copyright holder’s name is fixed. Thanks for the update. I never saw that wrap, BTW. I guessed that your browser renders the font slightly larger than mine, so it wrapped within the fixed width on your PC but not mine.
I was reading Firebug which had filtered out the other prefixes so I did not see them. Careless of me. Looking at the CSS, the gradients are clearly present.
But the color problem with the menu remains and also the centering in IE, so there is still at least two problems.
Off Topic:
Would you mind explaining how you set up Dropbox to show the screenshots? I just signed up for it recently and do not yet understand all of its features. That one is cool.!.
After uploading an image to Dropbox, right click and select “Copy public link.” Paste that wherever it needs to go. This will work on both Dropbox.com and the installed version.
You’ll have to change the div on the other pages. And… since you’re doing that… why not take a different approach and use css. Assign a class to the div, something like “banner”, and assign the height and background properties in css instead of inline. It will be easier to update as the development of your site progresses. Note, you will probably have to change the path to the image depending on where the image is located in relation to the css file.
Let’s change words, if you don’t mind. We referred to the image at the top of the page as the “banner”. I assume you are now referring to the red bar at the bottom of the page. Do you mind if we call that a “footer”? Now please describe under what circumstances that footer does not sit at the bottom of the page. Does more content appear beneath it or just white space? Can you post a screen shot that shows what you mean? And does it happen in IE only or all browsers?
I’m not familiar with your other threads, so you may have to repeat some things for me.
To find the footer’s problem, go to the “Blog” page on any browser. The footer does not stick to the bottom and there is white space beneath it. This happens whenever there isn’t enough content to fill the entire window.
The next question is whether you expect to see the footer stuck to the bottom and a big gap between that and the content, or the content area stretching all the way down to the footer.
Sticky footers and pages at a height of 100% are doable, but a bit brittle. So I prefer to keep things simple, and just use the footer color as a background on the body element. Then the footer color always extends to the bottom of the page. You just have to set a background color on the content area and any other elements that had a transparent background.