Temporary URL:

http://css.twistedmelon.com

What I had intended to be a very quick site for friend has turned into a little bit more due to browser inconsistencies and the fact that CSS was specified by monkeys. I'm still convinced that there are CSS bugs in most of the browsers even for simple things like inline-block elements.

Anyway....

The width of the content area is breaking in IE6. It comes up a little short and the right side appears as if it has no border. That's my main IE6 problem right now. I haven't given this one any cycles yet, but I was hoping someone could immediately see what the issue is in my CSS.

For other browsers the layout is generally OK but with a couple of issues. Namely in Firefox (3 and 3.5) as well as IE 8 (haven't tested 7) the width of the overall page is huge, though the presentation and flow of the content area is fine. The effect is that you can scroll the horizontal bar to move the content off the viewable window.

I know why and exactly what size these browsers are creating. I specified the top green horizontal bar as 5000 pixels off the right side and then did some adjustments to other properties to collapse it back to fit the viewport with an auto width. This is working splendidly in Safari and Chrome (both using WebKit) as well as IE 6.

The reason I did this 5000 pixel dance is to be able to have that green bar as an element that always occupies the full width of the veiwport. Without such a trick and by simply setting its width to say 100%, collapsing the window smaller than the content and then scrolling the page to the right would show a break in the bar. That's because in this case "%100" means "%100 of the viewport." IMO, this is a browser or CSS design bug, and the size of any element that's 100% should always be drawn at 100% of its container, or the render target, whichever is largest.

If anyone has any other tips on how to achieve the desired goal (not having the bar visibly chopped if a user has to scroll), then please let me know. This is one of my HUGE CSS peeves, along with being able to move stuff off the right edge of the viewport without generating scroll bars.

A perfect example of what I was avoiding can be seen on my main site: http://twistedmelon.com - resize your window width so that a horizontal scroll bar appears and then scroll the page to the right. You can see that the background is now broken.

Made some edits to the description of the 5000 pixel move mentioned above. I had previously said it was the width when in fact what I'm doing is positioning the element 5000 pixels off the right side and then bringing it back by using a negative left margin. This in combination with an auto width causes (working) browsers to properly redraw that background element when you need to scroll the page sideways.

Here's the CSS for that top band element:

I'm amused that you're putting IE6 into the "working" browser group.

Unfortunately can't help you with this one. Tried messing around with it but I end up with the same result as your actual page where it breaks.

I'm super-sleepy right now and I know I'll totally corrupt my CSS file if I continue playing. Already fixed one small issue with the design credit and did some Google-Fu to try and find a solution to hiding the overflow of the decorative elements like the top band in my design.

Found this: http://www.sitepoint.com/forums/showpost.php?p=4288536&postcount=39

Have to look at it in detail, but at least the proposal for the problem sounded promising and relevant. A fixed-width centered content section with two blocks of ads on either side. The ads should be able to be hidden by browser width resizing without triggering a horizontal scroll bar. The scroll bar should be displayed when you resize smaller than the content width.

I also found another solution where some joker recommended putting ovrflow-x:hidden on the body element. Um, yeah... Then there's never any horizontal scroll bar regardless of window size. Like taking out a tooth by hitting someone in the jaw with a baseball bat.

I've got a solution for you on the way. Just finishing things up.

God, I hate sites that do that.

Ok, I made some modifications to your code. I condensed things down a bit while retaining the design of your page.

A couple notes:

• Symantically, you can only use one H1 tag per page.
• You will note that the text in the "meadow" background is not aligned at the bottom. I tried to keep all the CSS code that relates to the "meadow" section in one H2 tag. There are 2 ways in order to align the text. The first is to create a container "meadow" div with individual rules and then place the H2 tag inside that container with its own set of alignment rules. The second method is to create the background image with the words "Ontario's Enviroment..." inserted into the image and then use CSS background rules to hide the text. I prefer the second method because 1) it takes less markup, 2) it requires less CSS, and 3) the text still displays for screen readers. The only reason why you might not want to go with the second option is if you plan to change the motto often. (I have included a #meadow_alt set of rules for the second option in the CSS code).
• As you can see, I didn't do any styling with the footer information. It seemed like you had a pretty decent handle on that part. I applied some simple CSS rules to the footer but it needs clean-up, of course.
• I do all my CSS inline. Old habit, but to each his own.

I hope this helps.

I haven't looked at the code just posted nor have I gone yet to look at the site I linked to last night, but I did want to throw up condensed samples of the issue to illustrate the background cut-off problem.

The first example shows what happens in al browsers when you have ablock element set to 100% width. It will always be rendered at the width of the viewport and if you scroll horizontally you will see that it's been chopped. Understandable, but the CSS spec should have thought about this ahead of time and proposed a solution.

http://twistedmelon.com/testoverlap/test.html

The second example is the solution I'm using on the site I've linked to in the OP. I basically shift the div and then margin it back. This only works with relative positioning and the background image is prevented from causing the rendered page being abnormally wide by setting the overflow property to hidden. This is what's breaking in Firefox, IE8 and Opera.

http://twistedmelon.com/testoverlap/test2.html


All CSS in these examples is included within the HTML file and also written to the screen within PRE tags along with a description of the page and issues.

With regards to the multiple H1's, that was really just an oversight left over from re-using some code. I really need to clean up the one in the logo and then make a final decision whether H1 should be used for the sub-title in the meadow block or for the heading on each page. Likely the latter, which means there will only be a single one per page.

I use this a lot for things like buttons, but in this case I wanted the text to be selectable for everyone, so I went with the meadow as a container and the h2 styled to position the text within it. It was also an opportunity/exercise to see if I could create an outline around the text. Got it to work in WebKit and IE and I know how to do it for Mozilla as well.



The help is much appreciated and I have picked up some valuable tips and ideas that I plan to implement after I've delivered the site to my friend. Mostly for my own satisfaction and to better re-use the markup and styles.

However, your changes still suffer from a few issues, the main one being what I was originally trying to solve, which is to prevent the topband from being cut off to the width of the viewport when you need to shrink the viewport and scroll the page to the side. In my solution to this, it causes Firefox and IE8 to increase their rendered page widths such that you always see a horizontal scroll bar.

By the same token, a similar use is to be able to position decorative items off to the side of your page and not have them trigger scroll bars. Playing with left position and margins can accomplish this as well in Webkit, but again it doesn't do what it should in FireFox.

If you remove the topband so that only the content defines the page width on my original implementation, you can trigger an example of this by hovering over the design credit at the bottom with a narrow window. In Safari and Chrom, the crddit will expand off to the right under the browser window. In Firefox it causes a horizontal scroll bar to appear.

I noticed that your style definitions also broke the page's bottom edge, but I haven't looked closely enough to find out why yet. If you're up for it I'd love it if you'd look at one of the other pages, that don't have the meadow content at the top, and let me know what you think is causing them not to render properly in IE6.

Oh, the changes to the nav sections break horribly in IE6. Unfortunately that browser is a high priority given the target audience for this company's services.

Also, the background for the content area was specified as an image because it's a gradient, albeit a very subtle one in this case.

So it does. That issue wasn't occurring on another site that I had worked on, so I only noticed it once you mentioned it.



As you've noticed, I replaced the content area background with CSS defined styling only. I didn't recognize the gradient in the background, although a vertical gradient PNG could be stretched along the y-axis of the content area to achieve the look, as well.



Since this was a quicky, I didn't check it in IE (which requires me to start up my Windows emulator...what a pain!). But I'm always having to check and tweak for IE when I do these types of jobs, and it's a headache.

Ok, based on the quiz/solution I linked to late last night, I've developed a solution to the 100% width background div with non-cutting but hidden overflow underlap.

Here it is: http://css.twistedmelon.com/testcss/solution.html


I'd LOVE to be able to shorten the CSS and markup required here, but my attempts at getting rid of the wrapper in favor of stuffing those properties into the body didn't work out.

The original solution also styled the HTML tag, but I generally don't like doing that, and in practice, it actually caused issues with this solution.

I've made a number of edits to the original site, including removing the top plain-white div border which was originally there only while I did some debugging - then I forgot about it. I've replaced that with a border as you demonstrated in your example. When I had originally developed the layout I was simply using a margin and letting the container behind show the white. I've decided not to go that route as I need the additional flexibility to outline the white border (which would use the parent container).

The page gradient is actually a horizontal one and the graphic for it is only 1 pixel tall. It repeats as you also mentioned, but vertically instead of horizontally.

I've left the bottom page edge as its own div and for a couple of reasons. I need the footer itself to remain modular, so I can't have the page edge be part of it. Or I could, but then I'd have to include it multiple times for each different footer I created. I'll see if I can clean this up in the future though.

The site itself is a PHP script I wrote that serve up content pages, headers and navigation in a modular fashion. You can define, per page, a different top navigation, footer nav, sub-nav and image block (the meadow class in the current iteration). Pages index names just get passed in via the URL.

Nothing as fancy as a CMS, but it helps keep the content as clear as possible from the presentation and page framework. It still unfortunately needs some knowledge of HTML to modify. I'd love to be able to cobble this together into a WordPress template as it would make it much easier to deploy to prospective clients.

I've uploaded the site to the proper domain and wow, what a POS Plesk control panel is. I've recommended my friend change her hosting provider, which I can handle for her.

So here's a slight "WTF?" I'm seeing right now. As far as I know, I have the exact same files on both my web server and theirs.

If you view these pages in IE6:

http://css.twistedmelon.com/?p=main_where (on my host)
http://completesepticsystems.ca/?p=main_where (their host)

You will get a slightly different effect on the map image. On their server the map appears with a border around it as I had intended. On my site the image sort of pops to fill the area that should be a border.


Well I manually deleted all the files on my server and then uploaded from my local copy again. Now the site appears correctly from both servers. Bloody strange. Makes my a bit worried about my FTP program possibly not having overwritten one more more files during the upload...