Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Css tabs not showing in ie8 but working fine in ie9

    Hi

    I have css tabs but the problem is it is not working in ie8. It is working fine in ie9, firefox, chrome & safari.
    Following is screenshot in ie8 -http://listings.rudragems.com/IE8.png
    Following is screenshot in ie9 - http://listings.rudragems.com/IE9.png
    Following is the html file (css is also included in it) - http://listings.rudragems.com/front.html

    Please tell me how to fix this in ie8.

    Thanks

  • #2
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It's a common problem with browsers, sometimes I also get different outcomes even if the code is same. Did you change the codes by any chance ? Try and adjust your resolution setting, it might fix the problem.

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi

    Yes i tried changing the code but still it didn't worked. I also tried different resolutions but no result. Can anyone help me out here, i don't want my customers who are using ie8 to see a black box. Any help is appreciated.

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Location
    USA
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    vaibhavbthl, after looking at the css code on your front.html i want to say, ie8 is an old browser and certain css functions do not work on it. What you might want to do is make another style sheet for ie8 and link it to your html like:
    Code:
    <!-- [if lt IE 8]>  
        < link rel='stylesheet' type='text/css' href='ie8.css'/>  
    <!  [endif] -->
    This way if a customer is using ie8 there is a custom style sheet for ie8 with ie8 supported css functions.

  • #5
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    311
    Thanks
    1
    Thanked 35 Times in 35 Posts
    Try running your page through the validator and then fix your mistakes.
    Errors
    Some of the errors are very basic e.g. no <head> section no <body> section no <html> and older versions of IE are not as forgiving as modern browsers
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by djburkhart View Post
    vaibhavbthl, after looking at the css code on your front.html i want to say, ie8 is an old browser and certain css functions do not work on it. What you might want to do is make another style sheet for ie8 and link it to your html like:
    Code:
    <!-- [if lt IE 8]>  
        < link rel='stylesheet' type='text/css' href='ie8.css'/>  
    <!  [endif] -->
    This way if a customer is using ie8 there is a custom style sheet for ie8 with ie8 supported css functions.
    Hi
    Thanks for the help, i will do like this as i can't find any other way of doing this.

    Quote Originally Posted by Donkey View Post
    Try running your page through the validator and then fix your mistakes.
    Errors
    Some of the errors are very basic e.g. no <head> section no <body> section no <html> and older versions of IE are not as forgiving as modern browsers
    Hi
    Sorry i forgot to mention that i will be using this code on ebay and ebay automatically adds <head>, <body> tags. Thanks all for your help.

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    The reason it does not work is probably because:

    a) your page's format is unconventional (no <html>, <head>, <body> and doctype before the <html>)
    b) because your page is unconventional, :first-child will not work in < IE9.

    http://www.w3schools.com/cssref/sel_firstchild.asp

    Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
    (that means before the <html> tag)

    -------------------------------

    As of now, .box is display: none; without the :first-child working, therefore the white background will not show.

    Code:
    .box{
        padding:12px;
        display: none;
        position: absolute;
        top:0;
        left:-1;
        width: 831px;
        min-height: 400px;
        background: white;
    }
    Code:
    .box:target, .box:first-child { /* not working in < IE9 */
        display: block;
    }
    Try using the id instead:

    Code:
    #about {
         display: block;
    }
    Quote Originally Posted by vaibhavbthl View Post
    Hi
    I have css tabs but the problem is it is not working in ie8.
    If you use a CSS linear gradient, you need to specify all the prefixes and filters for full browser support.
    http://css-tricks.com/css3-gradients/
    Last edited by Sammy12; 09-04-2012 at 09:36 PM.

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    The reason it does not work is probably because:

    a) your page's format is unconventional (no <html>, <head>, <body> and doctype before the <html>)
    Hi
    Sorry i forgot to mention that i will be using this code to create listing on ebay and ebay automatically adds <doctype>, <head>, <body> tags etc. This code even works in ie7 (I used browsershots to check this on different browsers) but it doesn't work in ie8. I used your .box:target code but now only a black box is displaying in ie8 but no text in it. I didn't understood how this first child will work in this, can you guide me forward.

    Thanks

  • #9
    New Coder
    Join Date
    Jul 2012
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by djburkhart View Post
    vaibhavbthl, after looking at the css code on your front.html i want to say, ie8 is an old browser and certain css functions do not work on it. What you might want to do is make another style sheet for ie8 and link it to your html like:
    Code:
    <!-- [if lt IE 8]>  
        < link rel='stylesheet' type='text/css' href='ie8.css'/>  
    <!  [endif] -->
    This way if a customer is using ie8 there is a custom style sheet for ie8 with ie8 supported css functions.
    Hi
    I don't know which part of my code is not supported by ie8. Can you please point this out and what would be the alternative css for it to work in ie8.

    Thanks

  • #10
    New to the CF scene
    Join Date
    Sep 2012
    Location
    USA
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vaibhavbthl View Post
    Hi
    I don't know which part of my code is not supported by ie8. Can you please point this out and what would be the alternative css for it to work in ie8.

    Thanks
    After looking at it again I decided to help by cleaning up the code. I added styles.css and put the css code you already had in it. I did not edit it though so you will have to look through it yourself and see if there are any errors. With the html I cleaned up majorly by adding the basic but vital tags like <html>, <head>, and <body>. I also fixed some errors by closing tags that you forgot to close. You can download the revised front.html at http://www.mediafire.com/?byeg7wp2duluyfx and I would also like if another program could doable check my work for stuff i missed. I left comments in the code to tell the rest.

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by vaibhavbthl View Post
    I used your .box:target code but now only a black box is displaying in ie8 but no text in it.
    I never said to use .box:target...

    There is no IE8 support at all. http://reference.sitepoint.com/css/pseudoclass-target

    Quote Originally Posted by Sammy12 View Post
    As of now, .box is display: none; without the :first-child working, therefore the white background will not show.

    Try using the id instead:

    Code:
    #about {
         display: block;
    }
    The only way .box could be white is if :first-child was working or you used the id to trigger .box to be display: block;.

    --------------------------------
    Looking at the css:

    You should be using overflow: hidden;
    http://www.quirksmode.org/css/clearing.html

    or microclearfix now:
    http://nicolasgallagher.com/micro-clearfix-hack/
    Last edited by Sammy12; 09-05-2012 at 06:53 PM.


  •  

    Tags for this Thread

    Posting Permissions

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