Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

12

my Vigilance css and ie6,7

  1. 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.

  2. devblog
    Member

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

  3. spocrep
    Member

    like this: http://spocrep.files.wordpress.com/2010/06/should-look-like-this.png

  4. 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.

  5. 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? :)

  6. 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.

  7. 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

  8. 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.

  9. devblog
    Member

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

  10. 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;
}

  11. 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 :)

  12. devblog
    Member

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

  13. spocrep
    Member

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

  14. 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?

  15. spocrep
    Member

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

  16. 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;
    }
    `

  17. spocrep
    Member

    still the same :(

  18. 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.

  19. 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.

  20. 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.

  21. spocrep
    Member

    ok I'm really sorry, take your time...

  22. devblog
    Member

    it's so strange that when I preview it in IE7 on my test blog, the menu displays just right....

  23. spocrep
    Member

    you know it could be (IE tester) I'm using, it's not accurate maybe!

  24. devblog
    Member

    No, there's soemthing else going on that I think I need to go like by line to debug this. When I load your blog, the menus are not visible.

    Would you tell me if you have any special options set for your theme? I need to replicate as much as possible the look of your blog to give you a better solution.

  25. devblog
    Member

    I've looked your CSS in more detail and it needs code clean up. If you don't mind waiting, I can start to tackle this tomorrow. I'll do the best I can to fix this.

  26. devblog
    Member

    damn it, I'm exhausted....

    this should read: "I've looked through your CSS..."

  27. spocrep
    Member

    my theme options are all about the colors and the alert box, maybe just the language from general settings (ar - العربية), and the css changes I did

  28. spocrep
    Member

    yes, sure tomorrow would be great I have work to do after a few hours, thank you so much

  29. devblog
    Member

    Don't mention it.

    I managed to replicate the menu problem in IE7, I'll keep at it for a while tonight. If I get to fix it tonight, I won't wait till tomorrow to post something.

  30. devblog
    Member

    OK, remove ONLY this from your CSS

    '
    #header > #nav {float: right;}
    `

    That fixed the menu in IE7. Since we're absolute positioning it, the menu should be visible now. If this still doesn't work. I'll continue tomorrow when I'm more fresh.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags