8 Replies Latest reply: Nov 24, 2009 6:51 AM by John Lascurettes RSS

    Header, CSS and IE6?

    Russell Pearson

      As IE6 is still a standard on the internal SBS employee project I'm working on it has to be accomodated for in our designs. I'm finding it difficult to get the header displaying right in IE6 when I try and create a large background image. Net result we now have a very boring header! Has anyone got any CSS solutions they can share on this please so i can freshen it up?

        • Re: Header, CSS and IE6?
          John Lascurettes

          What is it you're trying to get that header to do?

           

          If you can go into detail about the problems you're having, I might be able to help you out.

           

          Know that many rendering woes in IE6 and 7 (assuming that your problems are specific to an IE issue in the first place) can be solved by having a decent understanding of Trident's (the rendering engine in IE) proprietary and non-standard hasLayout mode. This is the definitive, most-helpful article on the web that I've ever seen around hasLayout is On Having Layout.

           

          Many other issues you might be having might be self-helped through some of these articles found here at Position Is Everything:

            • Re: Header, CSS and IE6?
              Russell Pearson

              Hi John

               

              pretty basic stuff really - I just wanted to fill the void of white space with a background image. I thought everything was fine until I saw it on IE6 (I've IE8 on my machine) and the layout was awful so had to abandon it.

               

              Still can't work out exactly what the 2 graphics referenced in the background actually do either - seems a bit obscure.

               

              Russell

                • Re: Header, CSS and IE6?
                  John Lascurettes

                  Which version of Clearspace/SBS are you using?

                   

                  In SBS 3.0 and above, there's only one background image out of the box. Well, technically, there is two: one is the slight bevel to the default header, the second is the Jive logo.

                   

                  In Clearspace 2.5, there was a background texture image and a logo if I recall correctly.

                   

                  One of the best ways to learn what's going on in your layout, customized or not, is use Firefox with an install of Firebug. There is a video description on how to do this somewhere in Jivespace but I'm having trouble finding it. I'll post it if I do find it.

                  • Re: Header, CSS and IE6?
                    John Lascurettes

                    Russel, one final thing. If you're in a version of Clearspace/SBS 2.5 or above and you're editing the template files directly as part of theme, add page-header.ftl as part of your theme. In it, you will see the following code. I have shown you where you can do whatever you want.

                     

                     

                    <#assign header = JiveGlobals.getJiveProperty("skin.default.headerHTML")!>
                    <#if header != ''>
                        ${header}
                    <#else>
                     
                     <!-- YOU CAN COMPLETELY DO WHATEVER YOU WANT TO THIS SECTION -->
                     
                    </#if>
                    

                     

                    The part that says ${header} is actually looking for a jive property that can be set by you in the admin console. It is another way for you to inject whatever HTML you want for the template header (header, not head element), but it's a much more awkward and obscure way of achieving the same thing.

                     

                    Technically speaking, you should also be able to replace all of the code in this file with plain old HTML (just stick to elements that go inside of BODY, not an entire HTML doc with HTML, HEAD and BODY elements). But if you leave in the main if/else statement, you'll have the opportunity to temporarily override the header's HTML with a system property (such as the way Google sometimes changes their assets for special holidays or dates), while leaving your main theme template alone.

                      • Re: Header, CSS and IE6?
                        Russell Pearson

                        We're using SBS 3.08 (planning to upgrade to 4.0) and I'm editing the custom global css and adding refined css features there. Looks ok until I try in IE6. On Firebug, yes I do use that, helps alot to identify but not always to create the code!

                          • Re: Header, CSS and IE6?
                            John Lascurettes

                            If you're having trouble with our HTML structure and overriding the CSS that styles it, you can completely replace what's in the header as shown in the code example above. This way, you can write whatever styles you want without any worry about collisions or problems overriding Jive styles.

                             

                            Regarding it not looking good in IE6, it is the buggiest of all the browsers that SBS supports. It's extremely long in the tooth and full of rendering bugs. The best I can do for you without seeing your actual pages is point you to the first links I sent to you for position is everything and On Having Layout. The advantage of IE6 being around so long is that its bugs are well documented and so are the available workarounds.

                             

                            Hope this helps, and have a good Thanksgiving.