my Vigilance css and ie6,7

  • Author
    Posts
  • #490626

    spocrep
    Member

    I did some css editing on my blog (theme:Vigilance) to make the header look smaller and thinner, and I’m not sure
    what I’ve done exactly but it looks like whatever I did worked, at least with chrome and firefox and the newer versions of IE and Safari.
    the header looks wrong on IE7 image 1 , and a lot of things looks wrong in IE6 image 2 , I’m fed up with it and I have no idea how to fix it, I hope I can do something to make it work at least with IE7,

    If you have any idea about this please help!

    The blog I need help with is spocrep.com.

    #490858

    devblog
    Member

    How is it supposed to look like? screenshot would help.

    #490859

    spocrep
    Member
    #490902

    devblog
    Member

    Try this:

    Remove this selector:

    #content {
    margin-top:-80px;
    }

    In the “#sidebar” selector, remove this property:

    margin-top:-80px;

    Replace these selectors:

    #header {
    height:70px;
    background-image:url('http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png');
    background-repeat:repeat-x;
    }
    
    #nav {
    float:right;
    font-size:20px;
    height:33px;
    position:relative;
    top:-74px;
    font-family:Tahoma, "Times New Roman",Arial, Serif ,Sans-serif,Monospace;
    display:block;
    }
    
    h1#title a,h1#title a:hover,div#title a,div#title a:hover {
    height:70px;
    top:-74px;
    position:relative;
    padding:20px 0 0;
    }

    with these:

    #header {
    border: none;
    height:160px;
    background: #fff url(http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png) 0 0 no-repeat;
    padding: 0;
    overflow: hidden;
    clear: both;
    }
    
    #nav {
    float:right;
    font-size:20px;
    height:33px;
    margin: 25px 0 0;
    font-family:Tahoma, "Times New Roman",Arial, Serif ,Sans-serif,Monospace;
    display:block;
    }
    
    #title {
    border-bottom: 5px solid #000;
    height: 90px;
    width: 100%;
    }
    
    #title a {margin: 0;}

    That’s it.

    #490906

    spocrep
    Member

    Wow! thank you so much that was very good, I don’t believe it!

    there’s one little thing, it looks better in ie7 except for the header: http://spocrep.files.wordpress.com/2010/06/ie-7.png
    and in Ie6: http://spocrep.files.wordpress.com/2010/06/ie6.png
    how can I fix that? :)

    #490920

    devblog
    Member

    That is weird… it looks right on my test blog… try this, though:

    In your “#header” selector change this:

    background: #fff url(http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png) 0 0 no-repeat;

    to this:

    background:#fff url('http://spocrep.files.wordpress.com/2009/09/20-09-1430-04-54-26-d9856.png') top right no-repeat;

    lemme know.

    #490947

    spocrep
    Member

    it did fix it, except now the navbar Dosen’t Show Up in ie7 and ie6: http://spocrep.files.wordpress.com/2010/06/no-nav2.png

    #490957

    devblog
    Member

    I so hate IE….

    I need to replicate your settings so that I can test this fully. It shouldn’t be the cause but maybe because your language is Arabic, the encoding type might be messing things up.

    Let me fire up my virtual machine where I have IE 7 and I will let you know further info.

    #490959

    devblog
    Member

    how do you change your settings so that the text goes from right to left?

    #490964

    devblog
    Member

    OK, try this

    From your “#nav” selector, remove this property:

    float: right;

    And right below that selector, add this:

    #header > #nav {
    float: right;
    }
    #490965

    spocrep
    Member

    Ok, do whatever you would like i’m ready to try anything
    and I just wanna say you really have been a big help, I appreciate everything you did, thank you so much :)

    #490966

    devblog
    Member

    PS. Yes, it seems the language settings have a lot to do with this behavior.

    #490974

    spocrep
    Member

    yeh that didn’t change anything, maybe Vigilance doesn’t work with Arabic in that way?!

    #490975

    spocrep
    Member

    if we made the navbar <div style=”display: inline; height: auto; position: absolute; visibility: hidden; width: auto; “>centered </div>centered would that solve it?

    #490976

    spocrep
    Member

    I mean: if we make the navbar centered would that solve it?

    #490977

    devblog
    Member

    That’s weird…. IE 7 displayed it well…

    Yes, I like your approach and maybe position:absolute would be a better solution.

    Since you cannot change the source, the code you posted won’t work, however, give this a try:

    Add this to the #header selector:

    position: relative;

    and replace the #nav selector with this:

    #nav {
    position: absolute;
    height: 33px;
    right: 0;
    bottom: 5px;
    }
    `

    #490979

    spocrep
    Member

    still the same :(

    #490980

    devblog
    Member

    Are you previewing or saving? sometimes, and this is a quirk, you have to actually save your changes to see them; previewing is just not enough.

    #490981

    spocrep
    Member

    I know I save it, but I test it not only on the browser I’m using (chrome) but also using this software called IE tester.

    #490983

    devblog
    Member

    I’m really stumped… I haven’t been this stumped in a long time.

    Let me have something to eat and I’ll see what else I can do.

The topic ‘my Vigilance css and ie6,7’ is closed to new replies.