SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Birmingham (UK)
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem with css for ie6 - where to start?

    Hi All,

    Iím new to this forum - so a BIG Hello first of all !

    Iíve developed this web page, which at the moment looks fine in IE7 and Mozilla Firefox. However, it looks Ďall over the placeí when viewed in IE6.

    http://www.ajingar.pwp.blueyonder.co...ws2/index.html

    The are lots of explanations of how to have cross-browser compatability, but I donít know where to start. If anyone can help, Iíd be very grateful ! ;-)

    Also, if you look at the menu at the top, it behaves exactly how I want in Mozilla Firefox (i.e. when you hover over the links, they become underlined). In IE7, it only underlines a link once Iíve clicked on that particular link first then tried hovering over it after! This applies to all the other links individually! How Bizarre.

    Iím relatively new to CSS, and so apologies for being a muppet in advance!

    Thanks,

    Ash
    Attached Images Attached Images

  2. #2
    SitePoint Member vhgdesign's Avatar
    Join Date
    Mar 2005
    Location
    at home :))
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to insert newlogo_curved2.png in html instead to have it as background.

    <div id="header"><img src="newlogo_curved2.png" alt="" /></div>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have the link states in the wrong order. They should be link,hover,visited,active.

    You shouldn't use heights on everything because that means your content can never grow.

    Don't drag your side column upwards to make it fit because that will only ever be right once. Just float both columns.

    If you want background to repeat forever then they must be on main containers and not on the individual elements themselves. If you add a repeating background to the sidebar it will only repeat with the sidebar and not the container. Wrap then both in a container and apply the background to that instead.

    Ie6 doesn't understand png transparency so you will need to use the alpha image loader filer (proprietary ie code).

    Don't mix case on the css as its hard to read and looks messy. Use shorthand styles where possible to maker the code more compact.

    Here is a revision of your page that works in IE and Firefox and is validated.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>INTELLITRAIN | We'll show you how to do IT</title>
    <!--
    <link rel="stylesheet" type="text/css" href="styles/web.css">
    <link rel="stylesheet" type="text/css" href="styles/sidebar.css">
    -->
    <style type="text/css">
    #wrapper {
        width:850px;
        margin:auto;
        background: url(http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/box.gif) no-repeat 0 0px; 
        position:relative;
        padding:30px 0 0 0;
    }
    #container {
        background: url(http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/mid.gif) repeat-y left top; 
        margin: 0px auto; 
        width: 850px;
        padding-top: 132px;
    }
    #containerbot {
        clear: both; 
        background: url(http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/box.gif) no-repeat left bottom; 
        margin: 0px auto; 
        width: 850px; 
        height: 30px;
    }
    .pagetitle {
        font-family: "Trebuchet MS", Arial, Verdana, Tahoma;
        font-size: 200&#37;;
    }
    #containertext {
        margin-left:50px;
        font-family: "Trebuchet MS";
        font-size: 80%;
        width: 550px;
        float:left;
        text-align: justify;
        display:inline;/* ie double margin bug*/
    }
    body {
        background-color: #999999;
    }
    #header {
        height: 150px;
        width:850px;
        position: absolute;
        left:0;
        top:12px;
        text-indent:-999em;
        margin:0;
        z-index:999;
    }
    html>body #header {    background:url(http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/newlogo_curved2.png) no-repeat 50%      0px;
    }
    
    * html #header {    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/newlogo_curved2.png',sizingMethod='image');
    left:25px;
    }
    #navbar {
        font-family: Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        clear: left;
        text-align:center;
        font-size: 80%;
        font-weight: bold;
        background: #333333 url(http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/grey-bar.gif) repeat-x left top;
        padding:1px 5px 1px 5px;
        list-style-type: none;
        position: relative;
        width: 790px;
        margin:0 0 0 25px
    }
    #navbar ul {
        list-style-type: none;
        text-align: center;
        word-spacing: 0.2em;
        margin: 10px;
        padding:0
    }
    #navbar li {
        display: inline;
        text-decoration: none;
        font-weight: bold;
        color:#FFF;
    }
    #navbar a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        color: #FFFFFF;
        text-decoration: none;
        font-weight: bold;
    }
    #navbar a:hover {
        color: #CCFF33;
        text-decoration: underline;
    }
    #navbar li span {
        color:#8A8A8A;
        font-size: 100%;
    }
    #inner{
        background: url(http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/panel.png) repeat-y 625px 0;
        width:850px;
    }
    #sidepanel {
        width: 190px;
        margin-right: 25px;
        float: right;
        padding-top: 10px;
        padding-left: 10px;
        font-family: "Trebuchet MS", Arial, Verdana, Tahoma;
        display:inline;
    }
    #quickhead {
        text-align:left;
        font-size: 150%;
        margin-left: 30px;
    }
    .clearer{
        height:1px;
        overflow:hidden;
        clear:both
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <h1 id="header">Intellitrain</h1>
        <div id="container">
            <div id="navbar">
                <ul>
                    <li><a href="#" title="Home">Home</a><span> |</span></li>
                    <li><a href="#" title="About Us">About Us</a><span> | </span></li>
                    <li><a href="#" title="Courses">Courses</a><span> | </span></li>
                    <li><a href="#" title="Services">Services</a><span> | </span></li>
                    <li><a href="#" title="Contact Us">Contact Us</a><span> | </span></li>
                    <li><a href="#" title="Resources">Resources</a><span> | </span></li>
                    <li><a href="#" title="Links">Links</a><span> | </span></li>
                </ul>
            </div>
            <div id="inner">
                <div id="containertext">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                </div>
                <div id="sidepanel">
                    <div id="quickhead"><img src="http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/Quicklinks.gif" alt="Course Links"> </div>
                    <p>right</p>
                </div>
                <div class="clearer"></div>
            </div>
        </div>
        <div id="containerbot"></div>
    </div>
    </body>
    </html>
    Hope that helps

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Birmingham (UK)
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for the replies.

    Especially Paul O'B, that is brilliant what you have created for me. I greatly appreciate it mate!

    Some very good tips that will come in very handy.

    I have got Ie7 and ie6 installed (ie6 is standalone without registry fixes, etc.) and I initially thought that the png transparency wasn't loading properly with your code (my ie6 is not a proper install). But to properly test, it I used the Microsoft Virtual PC I've got, with ie6 properly installed, and all seems fine. Thank you very much for that.

    What does the:

    html>body #header { background:url(http://www.ajingar.pwp.blueyonder.co...go_curved2.png) no-repeat 50&#37; 0px;
    }

    ---and---

    * html #header { filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/newlogo_curved2.png',sizingMethod='image');
    left:25px;
    }

    bit mean? I tried searching the net, and found that the html>body bit is useful in applying layouts to alpha transparent PNGs. But that's all I got. Can you explain (or provide useful links) please?

    Also, if you could provide an insight into the * html #header bit, that would be great also.

    The overall graphic I made would have been better as a GIF, but then the resolution would have been too low, and you would not have got the 'smooth' gradient of colours that we see, but stripes, hence I left it as PNG.

    Thank you very much once again.

    Ash (ajingar)
    UK

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)

    What does the:

    html>body #header { background:url(http://www.ajingar.pwp.blueyonder.co...go_curved2.png) no-repeat 50&#37; 0px;
    }

    ---and---

    * html #header { filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/newlogo_curved2.png',sizingMethod='image');
    left:25px;
    }
    IE6 doesn't understand png transparency and the only way to get it is to use the alpha image loader (MSDN). It doesn't work in the same way as normal background images and you can't repeat or place the images at all. All the filter allows is you to scale, crop or leave at image size. However its the only option there is so we're stuck with that or nothing.

    The html>body was a hack to hide the background image for ie6 and under because you can't have a background image and then use the alpha filter as they conflict with each other. You need to give ie6 background:none and just use the alpha image loader code.

    So the code I gave just hides the original background image from IE and then passes the alpha filter to IE only.

    IE6 and under doesn't understand the child selector (>) so you can use it ti hide styles from IE6 by saying html>body .classname{etc....}. All other browsers understand that inclusing ie7.

    The * html hack is the reverse of the above and is a parsing flaw in IE6 and under which only they will action. The rule should be ignored because html has no parent and placing the universal selector (*) before it would mean that an element would need to exist in that position but it doesn't. IE6 just actions it anyway. IE7 doesn't parse this rule ( see the faq on the broken box model for more info on this hack.)

    I could have done this instead:
    Code:
    * html #header {    
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.ajingar.pwp.blueyonder.co.uk/newsite/shadows2/img/newlogo_curved2.png',sizingMethod='image');
    left:25px;
    }
    Only ie6 and under would get the above code and the background image is negated and the alpha image loader used instead.

    However I was trying to make it easier to understand what was going on si I separated the elements using both hacks.

    You can find more info here and here.

    have got Ie7 and ie6 installed (ie6 is standalone without registry fixes, etc.) and I initially thought that the png transparency wasn't loading properly
    Download the standalone from here as they are already patched:


    Hope that helps

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Birmingham (UK)
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Once again, thank you very much for that! Just goes to show that there is so much to web design than meets the eye...

    Oh, about the standalone internet explorers; the link you provided is the same place where I got my standalone IE6, IE5.5, etc from.
    I used the Evolt's archive of Internet Explorer link that is there, instead of installing the Multiple IE installer. (I got put off by some of the negative comments that were there regarding the latter, and so decided to install individual hand-picked IE versions that I wanted).

    The problem was, the standalone Ie6 that I had, didn't show the PNG at all until I went on my Virtual PC. However, I have now gone with your multiple IE installer, and all seems to be working as they should. So thanks once again mate!

    Much Obliged,

    Ash :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •