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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE 7 and 8 messing up layout [css + jquery]

    Hello!

    First of all i'd like to say I'm a newb, I started coding like week ago (I had almost no previous experience), so please be easy on me

    Ok, the thing is, I'm creating site for my buddy's business. I've read a bit and decided on wordpress, and some free theme to modify.
    The theme is http://imbalance.wpshower.com/
    and it works just fine in IE versions from 7 and up. (In 6 the only thing, that ain't working is :hover).

    So, I was modyfing this, making it look like a normal website (not a blog), I changed columns size, added sidebar at main page, and made some other minor changes. Well, everything is great in FF, Chrome, Opera, Safari, and IE9. But in every earlier IE the column layout is messed up.
    Look it up by yourselves:
    / its a beta version of site / http://lenartt.com/pl/

    also the top menu has somewhat more white space on older IE than on any modern browser.


    To be honest I'm clueless now. I'm 100% sure all my .php files and all jquery scripts are fine, because i didn't edit them hard (just deleted some things at php's and changed column size at js (well i'm noob so i might be wrong again :S)
    The issue is with .css sheet i think, and i have no idea what to do now.

    This is fragment of css i think is reponsible, but again - I'm probably wrong.
    Code:
    .li_container {
        padding-top:30px;
    }
    #categories .li_container, #archives .li_container {
        padding-top:0px;
    
    }
    li.article {
        margin-bottom:22px;
        position:relative;
    }
    .li_cont1, .li_cont2 {
        margin-right:22px;
        
    }
    .mcol2 {
        margin-top:22px;
        margin-bottom:22px;
    }
    #categories .li_container ul, #archives .li_container ul {
    
    }
    .article ul, .article ol {
        margin-bottom:22px;
        list-style:square inside none;
    
    }
    
    .single .article ul, .single .article ol {
        margin-bottom:22px;
        margin-left: 22px;
        list-style:square inside none;
    }
    
    .single .article ul ul, .single .article ol ol, .single .article ul ul ul, .single .article ol ol ol{
        margin-bottom:22px;
        margin-left: 22px;
        list-style:square inside none;
    }
    .article ul {
        list-style:square inside none;
    }
    
    .article ul ul, .article ul ul ul {
        margin-left: 22px;
    }
    
    .article ol {
        list-style-type: decimal;
    }
    .article img {
        opacity:1;
        filter:alpha(opacity=100);
        transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -webkit-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
    }
    
    .article p a {
        border-bottom:1px solid #FF3706;
        text-decoration:none;
    }
    .article p a:hover {
    border-bottom: 1px solid;
    text-decoration:none;
    color: #FF3706;
    }
    
    li.article h2 {
        display: inline-block;
        font-family:RobotoMedium;
        font-size:21px;
        line-height:1.2;
        margin-bottom:15px;
        font-weight:normal;
        margin-left:0;
    }
    li.article h2 a {
        text-decoration:none !important;
    }
    
    li.article h2 a:hover{
        
        text-decoration:none !important;
        border-bottom: 2px solid #FF3706;
    }
    
    .preview {
        position:relative;
    
    }
    
    
    .article-over {
        position:absolute;
        left:0;
        top:0;
        padding:15px;
    
    }
    
    .article .article-over {
      visibility: visible;
      opacity:0;
      filter:alpha(opacity=0);
          transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -webkit-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
    }
    
    .li_container .article:hover img {
        opacity: 0.1;
        filter:alpha(opacity=10);
        /* -moz-opacity:0.1; */
    }
    .article:hover .article-over {
      opacity:1;
      filter:alpha(opacity=100);
    }
    This is the code responsible for tiles on main page on my site.

    Please help me i have no idea what's the issue...


    I'm enclosing all files which might be relevant in this case.

    http://dl.dropbox.com/u/28587234/style.css
    http://dl.dropbox.com/u/28587234/ie7.css
    http://dl.dropbox.com/u/28587234/ie6.css
    http://dl.dropbox.com/u/28587234/header.php
    http://dl.dropbox.com/u/28587234/index.php

    http://dl.dropbox.com/u/28587234/columnizer.js
    http://dl.dropbox.com/u/28587234/columnize.js


    I'm completely lost in the woods :S
    Last edited by daddys; 03-09-2012 at 12:16 PM.


 

Posting Permissions

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