Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member
    Join Date
    Sep 2012
    Posts
    64
    Member #
    32790
    Liked
    3 times
    So I currently use this code as my header (its a ribbon)

    HTML Code:
    .ribbon h1 {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 12px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 11.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);}
    Is anyone able to help me change this to target IE7 & 8, I can live without it being a ribbon, a simple box header would look much nicer than nothing. Is this possible??

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Can you provide all your CSS code ?

    I don't see anything in particular in what you posted that would make ie7 and ie8 not display it correctly

  4. #3
    Member
    Join Date
    Sep 2012
    Posts
    64
    Member #
    32790
    Liked
    3 times
    My CSS is

    Code:
    /*** Ribbon Effect *******************************/
    
    @media screen and (max-width : 1500px) {.ribbon h1 {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 12px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 11.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);}}
    
    @media screen and (min-width : 1500px) {.ribbon h1 {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 12px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 14.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);}}
     
    @media screen and (max-width : 1500px) {h3.widget-title {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 12px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 11.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);}}
    @media screen and (min-width : 1500px) {h3.widget-title {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 11.5px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 14.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);}}
    
    @media screen and (max-width : 1500px) {.business-category p strong {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 12px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 11.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);}}
    @media screen and (min-width : 1500px) {.business-category p strong {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 12px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 14.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);}}
    
    #sidebar h3.widget-title {width:255px; left:-12px; top:6px;}
    .ribbon h1:before,.ribbon h1:after, h3.widget-title:before, h3.widget-title:after { content: ''; display: block; width: 0; height: 0; position: absolute; bottom: -11px; z-index: -10; border: 5px solid; border-color: #242424 transparent transparent transparent;}
    .ribbon h1:before, h3.widget-title:before {left: 0;} .ribbon h1:after,h3.widget-title:after {right: 0;}
    
    /*** Page Titles & Headers *******************************/
    
    @media screen and (max-width : 1500px) {h1.entry-title{font-family:'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-size:11.5px; color:#fff;}}
    @media screen and (min-width : 1500px) {h1.entry-title{font-family:'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-size:14.5px; color:#fff;}}
    
    @media screen and (max-width : 1500px) {h2 {color:#063; font-size:11.5px;}}
    @media screen and (min-width : 1500px) {h2 {color:#063; font-size:15.5px;}}
    
    @media screen and (max-width : 1500px) {h3{color:#666; font-size:11.5px;}}
    @media screen and (min-width : 1500px) {h3{color:#666; font-size:15.5px;}}
    I am thinking of just adding a script telling users that they need to upgrade browser to view correctly as its only a small minority using the old browsers? Do many of you do this or is it a no-go from a web designers point of view?

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    See my other post on using a message to users...

    Ie7 and ie8 don't recognize any CSS prefaced with @

    Your easiest solution is to create a seperate CSS file for them and use conditional statements ( google "IE Conditional statements" ...

    Since ie renders based on the last CSS directive read in... You can just use conditional statements to load the IE specific CSS file after all the other ones...

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    And ie7 and ie8 don't play with min-width and max-width at all... Or should I say... I've never been able to get either browser to recognize those directives

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Webzarus, post: 244446
    And ie7 and ie8 don't play with min-width and max-width at all... Or should I say... I've never been able to get either browser to recognize those directives
    That min/max-width he's using is a media query, which IE 8 and below don't recognize. They're ignoring all of the code you have there. Couple of things you can do here:

    If you want to use the same code structure, meaning each line has its own media query, first declare the styles without the media query, and then after that use the queries. IE 8 and below will style without the queries, and modern browsers will respect the media queries and apply those styles.

    Second option, which IMHO is the better option, is to style the page completely without the media queries, then change the elements with media queries after, and group them under one media query. Like so:
    Code:
    /* Regular styles */
    .ribbon h1{yada, yada, yada;}
    h1.entry-title{yada, yada, yada;}
    
    /* Then, media queries */
    @media (max-width:1500px){
    .ribbon h1{yada, yada, yada;}
    h1.entry-title{yada, yada, yada;}
    }
    @media (min-width:1500px){
    .ribbon h1{yada, yada, yada;}
    h1.entry-title{yada, yada, yada;}
    }
    A bit better organized, and it'll run faster because it doesn't have to parse all of those extra queries. Added bonus that IE 8 and below will get default styles.

    Third option: This guy, and you can apply that to both previous options.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com