SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS and IE7... PLEASE HELP!

    Evening People!

    I've spent a lot of time designing a site at the moment. Each time i previewd it, it looked fine in Mozilla Firefox. I noticed i had a problem with IE 6, so i added a hack to allow the web page to render correctly:

    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/iehack.css"/>
    <![endif]-->

    My issue now is that Although I have a web page that looks fine in IE6 and Firefox, it looks a bit messy in IE7. My question is:

    Can I add another hack to my page to allow the proper rendoring of IE7 on the page:? Can I use the SAME hack as above, but change it to if IE7?

    Has anyone else had this issue, and if so - what did you do to resolve it?

    Cheers
    Craig

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you had no problem with ie 7 replace <!--[if IE]> by
    <!--[if IE 6]>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,

    No - I didn't have a problem with IE 6 because i added the hack.

    Would I be able to use the following to allow it to work in IE 7?

    <!--[if IE7]>
    <link rel="stylesheet" type="text/css" href="css/iehack.css"/>
    <![endif]-->

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be <!--[if IE 7]> but I wouldn't do that as IE 7 and Firefox should be fine with the same styleshhet.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... strange.

    They aren't behaving the same at alll...

    check out http://www.mayhem.uk.com

    Note that the site isn't finished and has work to do on it. Firefox is fine, ie 6 is also fine, but ie 7 is not. :-(

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The problem is that at present you are giving IE7 your IE6 hacks. Change the conditional statement to <!--[if IE 6]> - at present it is still <!--[if IE ]> which hits all IE variants.

    After you do that, IE7 and Firefox will be getting the same css.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm,

    i've just replaced the conditional statement to read <!--[if IE 6]> but when viewd on a machine running ie7 it is still the same issue...

    craig

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, i managed to get it to work (eventually) by using a seperaste conditional to say if it's IE 7, to use a different style sheet.

    SLightly annoyed as I know i should be able to run Firefox and ie 7 without a hack!

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

    I'm afraid there's no easy way to say this but most of your code is nonsense.

    For a start you still haven't changed the conditional comments as already mentioned above twice. But what's worse is that you seem to be using exactly the same CSS in both conditional comment files. And what's even worse is that you have duplicated the CSS 3 times in total now. That means that IE7 is loading 3 stylesheets instead of one!

    When you use conditional comments you only place the hacks in there and not the whole stylesheet. At most there would be just a few simple rules.

    As already mentioned above IE7 doesn't in fact need any hacks at all and it just needs code that makes sense.

    IE6 only needs 1 hack.

    You have made many errors along the same lines where you have tried to put bigger elements inside a parent that is actually a lot smaller. The wrapper that holds your content is only 795 px wide but you have nested a content_wrapper inside that and you have made it 895px wide.

    Inside a 375px central_right element you have made your #albumlist 900px wide! How is that ever going to fit?

    You haven't controlled your floats by clearing elements correctly and in a number of cases you have set ridiculous heights on elements. I think there are 3 occasions where you have set 200&#37; height. Not only is that ridiculous it also means that your content can never exceed that height.

    As a rule of thumb you should never need to set a height where the content is fluid. If the element is a fixed image then of course you can set a height but if the element contains text that may change then the element needs to be a fluid height controlled by its content.

    Here is a quick fix but you still have work to do.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Mayhemboardstore | No1 for Skate, Snowboard and Lifestyle</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <script src="http://www.mayhem.uk.com/submenu.js"></script>
    <script type="text/JavaScript">
    
    function jumpMenu(targ,selObj,restore){ //v3.0
      eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
      if (restore) selObj.selectedIndex=0;
    }</script>
    <style type="text/css">
    /*Credits: CSSpplay */
    /*URL: http://www.cssplay.co.uk/menus/pro_nine */
    /*****************styles*********************
    *   Lists the style attributes for the site *                                           
    *                                            *
    ********************************************/
    
    
    /* text styles, including contextual links*/
    
    body {
    background-color:#CC0000;
    }
    
    p {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#666666;
    padding: 20px;
    text-align:justify;
    }
    
    #justin{color:#FF0000;
    }
    a{
        color: #666666;
        text-decoration: none;
        font-family:Arial;
        font-size:12px;
    }
    
    a:link{
        color: #666666;
        text-decoration: none;
    }
    
    a:visited{
        color: #666666;
        text-decoration: none;
    }
    
    a:hover{
        color:#FF0000;
        text-decoration: none;
        }
    
    /*header*/
    
    #wrapper {
    border: 1px solid #000;
    width:795px;
    padding: 0px;
    overflow:hidden;
    margin:2px auto;
    background-color:#FFFFFF;
    }
    #header {
    height: 150px;
    width: 750px;
    padding: 0px 30px 10px 10px;
    background: url('http://www.mayhem.uk.com/images/mayhem_white.jpg') top right no-repeat;
    }
    #header p {
    color:#000000;
    float:right;
    margin-top:-12px;
    font-family:Arial, Helvetica, sans-serif;
    }
    #content_wrapper {
            padding: 22px 0 1px 0 ;
            overflow: auto;
            font-size:12px;
            text-align:center;
            width:795px;
    }
    
    /*left menus & navigation*/
    
    #left_image {
    position:absolute;
    height:710px;
    width:120px;
    /*background: url('http://www.mayhem.uk.com/images/romanhead1.jpg') no-repeat fixed left top;*/
    
    }
    #leftnav {
    float: left;
    width: 140px;
    margin: 12px 10px 10px 14px;
    border:1px solid #cccccc;
    padding-bottom:12px;
    display:inline;
    }
    
    
    .label{
    font-size:12px;
    }
    
    
    
    #leftnav a {
        display: block;
        border-top: 1px solid #cccccc;
        padding: 2px 0px 2px 10px;
        font-size:12px;
    }
    
    #leftnav a:hover{
        background-color:#dddddd;
    }
    
    
    
    
    
    
    
    
    
    /*central menus & content*/
    
    #central {
    float: left;
    margin: 10px 10px 10px 10px;
    border: 1px solid #000000;
    width: 370px;
    height:200px;
    background-image:url(http://www.mayhem.uk.com/images/mayhem_shop.jpg);
    display:inline;
    }
    
    #central p {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#666666;
    padding:2px;
    
    }
    
    #central_right {
    float: right;
    margin-top: 10px;
    margin-right:10px;
    border: 1px solid #660033;
    width: 375px!important;
    height:200px;
    display:inline;
    }
    #central_right p {
    padding:0px 10px 0px 10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #central_main {
    margin:0 10px 10px 10px;
    border: 1px solid #0000FF;
    min-height:200px;
    clear:both;
    }
    #central h1 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#666666;
    float:left;
    font-style:italic;
    }
    #central h2 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#FF0000;
    float:left;
    font-style:italic;
    padding-bottom:1px;
    text-decoration:none;
    }
    /*
    img{
    background:center;
    padding-left:20px;
    margin-right:150px;
    }*/
    /* Product list layout */
    
    #albumlist {
    list-style-type:none;
    margin:0;padding:0
    }
    #albumlist li {
    float:left;
    font: Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#000000;
    margin-right:-1px;
    }
    #albumlist img {
    display:block;
    padding-left:0px;
    float:left;
    width:140px;
    height:100px;
    margin:0 10px 2px 10px;
    }
    .advert {
    left:77%;
    top:-8em;
    bottom:2em;
    right:2em;
    width: 150px;
    margin-bottom:20px;
    height:70px;
    background-color:#666666;
    border: 1px solid #CCCCFF;
    
    }
    .advert a {
        display: block;
        border-top: 1px solid #cccccc;
        padding: 2px 0px 2px 10px;
        font-size:12px;
        border-left:1px solid #cccccc;
        border-bottom:1px solid #cccccc;
    }
    
    .advert a:hover{
        background-color:#FFFFFF;
        display:block;
    }
    
        /*#body {
        background-image:url(http://www.mayhem.uk.com/images/vikinghead.jpg);
        background-position:top left;
        background-repeat:repeat-y ;
        
        
        }
    */
    #footer {
        padding: 2px 0 1px 0 ;
            overflow: auto;
            font-family:Arial, Helvetica, sans-serif;
            font-size:12px;
            text-align:center;
            width:781px;
            background-color:#CC0000;
            margin-left: 120px;
            padding-top: -12px;
    }
    
    #footer a:hover{
    text-decoration:none;
    color:#FFFFFF;
    }
    
    .producttext {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    margin-right: 40px;
    color:#000000;
    }
    .producttext a {
    
    font-family:Arial, Helvetica, sans-serif;
    color:#999999;
    }
    .producttext a:hover {
    font-family:Arial, Helvetica, sans-serif;
    color:#FF0000;
    }
    .label {
    font-family:Arial, Helvetica, sans-serif;
    }
    
    .standard{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    text-decoration:underline;
    }
    .dropdown {display:none; margin-left:0px;}
    li {list-style:none;}
    #help {
    padding-left:20px;
    }
    .faqs {background-color:#CCCCCC;
    font:Arial, Helvetica, sans-serif;
    text-decoration:none;}
    
    .faqs a:hover {text-decoration:none;}
    
    .faq2 {
    font-family:Arial, Helvetica, sans-serif;
    size:18px;
    
    }
    .faq2 a {
    
    font-family:Arial, Helvetica, sans-serif;
    color:#999999;
    size:18px;
    }
    
    .faq2 a:hover {
    
    font-family:Arial, Helvetica, sans-serif;
    color:#FF0000;
    
    }
    
    .bookmarks {
    font-family:Arial, Helvetica, sans-serif;
    background-color:#CCCCCC;
    
    }
    .bookmarks a {
    
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
    
    
    }
    
    .bookmarks a:hover {
    
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
    }
    
    /*#table {
    float: left;
    padding: 10px 20 10 0;
    
    width: 530px;
    height:auto;
    margin-top:-12px;
    padding-left:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#666666;
    
    }*/
    
    .profiles {
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    
    .profiles p {
    color:#FF0000;}
    
    form label {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    padding-left: 20px;
    text-align:left;
    }
    
    form div {
    padding-left: 20px;
    }
    
    form .text {
    text-align:left;
        font-size:12px;
        font-family:Arial, Helvetica, sans-serif;
        color:#666666;
        background-color:#FFFFCC;
    }
    form div.submit {
        width: 430px;
        padding-left: 200px;
    }
    form div.captcha {
        padding-left: 20px;
    }
    .basket{font-family:Arial, Helvetica, sans-serif;
    color:#999999;
    font-size:12px;
    }
    .container {width:110px; position:relative; margin:0 auto; border-right:20px solid #fff;
    border: 1px solid #000000;}
    
    .poem {
    font-size:10px;
    color:#999999;
    border:#CC0000 1px solid;
    padding: 10px 0px 10px 9px;
    margin-left: 109px;
    width:190px; height:150px;
    overflow: auto;
    }
    
    .pro9 {text-align:center;padding:0 0 0 40px; margin:0; margin-top:10px; list-style:none; height:30px; position:relative;}
    .pro9 li {float:left;}
    .pro9 li a {display:block; float:left; height:30px; line-height:29px; background:url(http://www.mayhem.uk.com/pro_nine_0a.gif) no-repeat; color:#000; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}
    .pro9 li a b {float:left; display:block; padding:0 12px 0 0; background:url(http://www.mayhem.uk.com/pro_nine_0.gif) right top;}
    .pro9 li.current a {color:#fff; background:url(http://www.mayhem.uk.com/pro_nine_2a.gif) no-repeat;}
    .pro9 li.current a b {background:url(http://www.mayhem.uk.com/pro_nine_2.gif) right top;}
    .pro9 li a:hover {color:#fff; background:url(http://www.mayhem.uk.com/pro_nine_1a.gif) no-repeat;}
    .pro9 li a:hover b {background:url(http://www.mayhem.uk.com/pro_nine_1.gif) right top;}
    .pro9 li.current a:hover {color:#fff; background:url(http://www.mayhem.uk.com/pro_nine_2a.gif) no-repeat; cursor:default;}
    .pro9 li.current a:hover b {background:url(http://www.mayhem.uk.com/pro_nine_2.gif) right top;}
    .protop{padding-left:200px}
    </style>
    <!--[if IE 6]>
    <style>
    #central_main {height:200px}
    </style>
    <![endif]-->
    <!--[if IE 7]>
    <style>
    
    </style>
    <![endif]-->
    </head>
    <body>
    <div id='wrapper'>
        <ul class="pro9 protop">
            <li class="current"><a href="#nogo"><b>Home</b></a></li>
            <li><a href="#nogo"><b>About Mayhem</b></a></li>
            <li><a href="#nogo"><b>Find Us</b></a></li>
            <li><a href="#nogo"><b>FAQ's</b></a></li>
            <li><a href="#nogo"><b>Postage</b></a></li>
            <li><a href="#nogo"><b>Contact</b></a></li>
        </ul>
        <div id="header">
            <p>Site last updated: 26th November 2007</p>
        </div>
        <div id="content_wrapper">
            <ul class="pro9">
                <li><a href="#nogo"><b>New Products</b></a></li>
                <li><a href="#nogo"><b>Deal of the month</b></a></li>
                <li><a href="#nogo"><b>MENS Goods</b></a></li>
                <li><a href="#nogo"><b>WOMENS Goods</b></a></li>
                <li><a href="#nogo"><b>The Team</b></a></li>
                <li><a href="#nogo"><b>Snow Reports</b></a></li>
                <li><a href="#nogo"><b>View Basket</b></a></li>
            </ul>
        </div>
        <!--<div id="content_wrapper">
         <a href="#">Home</a> |  
         <a href="#">About Mayhem</a>  |
         <a href="#">Find Us</a> |
         <a href="#">Help / FAQs</a> |
         <a href="#">Postage</a> |   
         <a href="contact.php">Contact</a>      </div> -->
        <br />
        <form id="form" name="form" method="post" action="">
            <label class="label">Browse the store
            <select name="form" onchange="jumpMenu('parent',this,0)">
                <option selected="selected">Search Brands</option>
                <option value="index.html">Home Page</option>
                <option value="adio.html">Adio</option>
                <option value="billabong.html">Billabong</option>
                <option value="bonfire.html">Bonfire</option>
                <option value="burton.html">Burton</option>
                <option value="burton_boards.html">- Boards</option>
                <option value="burton.html">- Boots</option>
                <option value="consolidated.html">Consolidatied</option>
                <option value="dcshoeco.html">DCShoeCo</option>
                <option value="duffs.html">DUFFS</option>
                <option value="dvs.html">DVS</option>
                <option value="element.html">Element</option>
                <option value="emerica.html">Emerica</option>
                <option value="es.html">Es</option>
                <option value="etnies.html">Etnies</option>
                <option value="fenchurch.html">Fenchurch</option>
                <option value="4square.html">Four Square</option>
                <option value="fox.html">FOX</option>
                <option value="king.html">King</option>
                <option value="lakai.html">Lakai</option>
                <option value="lowlife.html">Lowlife</option>
                <option value="nikesb.html">Nike SB</option>
                <option value="nikita.html">Nikita</option>
                <option value="nixon.html">Nixon</option>
                <option value="oakley.html">Oakley</option>
                <option value="quiksilver.html">Quiksilver</option>
                <option value="reef.html">Reef</option>
                <option value="ride.html">Ride</option>
                <option value="Roxy.html">Roxy</option>
                <option value="32.html">Thirtytwo</option>
                <option value="vans.html">Vans</option>
                <option value="vestal.html">Vestal</option>
                <option value="volcom.html">Volcom</option>
                <option value="we.html">WE</option>
            </select>
            </label>
        </form>
        <div id="central"></div>
        <div id="central_right">
            <p><b>DEAL OF THE WEEK.....</b> Well, here you have it. The offer of the week. This is a special week, as we've a couple of really good deals for you to check out. <br />
                <br />
                Please click the images below to find out more.</p>
            <ul id="albumlist" class="producttext">
                <li><a href="jasper.html"><img src="http://www.mayhem.uk.com/images/Adio/thumbs/jasper_thumb.jpg" alt="Jasper" width="120" height="110" title="Jasper" border="0"/></a> </li>
            </ul>
        </div>
        <div id="central_main"> TEST CENTRAL_MAIN CONTENT...
            
            HERE IS WHERE ALL PRODUCT INFO WILL BE DISPLAYED.... </div>
    </div>
    <div id="ad_wrapper"> </div>
    <div id="footer"> <a href="index.html">Home</a> | <a href="About.html">About Mayhem</a> | <a href="findus.html">Find Us</a> | <a href="help.html">Help / FAQs</a> | <a href="help.html#04">Postage</a> | <a href="contact.php">Contact</a> </div>
    </body>
    </html>
    I've put the CSS in the head so that you can copy the whole page and then immediately preview it in a browser while you are online because i've set the paths of the images to be absolute. This will show the page working.

    You can then work your way through the code and reset the image paths back to relative etc. You will see that there are no hacks needed for IE7 and only one hack for ie6.

    This has been a quick fix because there were a lot of errors in there I haven't been that careful but the layout is working in the major browsers now.

    Sorry to take you to task on this but if there's one thing you must be when using CSS and that is precise. There is no excuse for getting all the dimensions incorrect as it is just basic mathematics.

    Read the faq on floats and browse some of the other faq as they will help you unravel the mysteries of CSS.

    Good luck

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Err... Ok.. :-) Thanks for the feedback!
    Still not 100&#37; with css, so i just try and see what happens. I'll take another look through it with what you've discussed, and see where 've gone wrong.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'll take another look through it with what you've discussed, and see where 've gone wrong.
    It's important that you do this before you move on because what you have will break badly as soon as you put it to any use. Copy the code I gave you and test it out.

    I think you'll soon realize the errors because most is commonsense. If you have an element that is 375px wide then you can't put something inside that is 900px wide and not break the whole thing.

    get rid of the ie5 and 7 stylesheets and only place the hacks in them. As I said with proper coding there are no hacks needed for ie7 and only1 needed for ie6. That's 66&#37; saving in code already Not to mention ease of maintenance and upkeep.

    You can't set heights of 200% to random elements. Either you will get elements twice as high as the page or you will get nothing if the parent is auto height. Even if the value is applied then it will be limited to 200% and you can never grow further than that.

    Oh and last thing Validate you page regularly during development to catch any silly errors with the html and css. You have a missing body tag.

    Hope that gives you a start anyway.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd never really seen the conditional bit before, so I assumed i just called a different stylesheet. I saw that on a different site, so have maybe picked up a bad practice.

    Although i feel a bit gutted that a lot of my css is wrong, I'll learn and sort it out. As i said on the last post, i'm new to css so tried a few different dimensions, until it worked .

    Thanks again for your comments. Lucky I can take constructive criticism! :-)

    c.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Lucky I can take constructive criticism! :-)
    Sorry if it sounded harsh, it was meant in good faith

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no worries mate - at least i know now...

    cheers
    c,


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
  •