Forums

[resolved] Why is border doubled in IE? (11 posts)

  1. carrieduncan
    Member
    Posted 2 years ago #

    Not sure that's really what's happening, but it sure looks like it. 4px white top border for the menu in CSS; fine in FF but IE, not so much. Margin and padding in all rules set to 0px.

    http://0055ae0.netsolhost.com/wordpressLR/?page_id=12

    I'll post style sheet if this is not enough info.

    Thanks so much for any help you can give.

  2. vangrog
    Member
    Posted 2 years ago #

    You are using IE7, right? IE7 has issues with thin borders. It doesnt happen on IE8.

    Cheers

  3. carrieduncan
    Member
    Posted 2 years ago #

    Sadly, I haven't even started testing IE7; this is IE8.

  4. vangrog
    Member
    Posted 2 years ago #

    Well, I can tell ya to me it looks OK. I get the same size border on your page, with both Firefox and IE8.

  5. henkholland
    Member
    Posted 2 years ago #

    In IE7 it's about twice the height compared to Firefox.
    I noticed that 4 of your other stylesheets are not found, like this one wordpressLR/wp-content/themes/LR/styles/reset.css
    Only style.css is found.

    So it's hard to tell what causes it.

    See here: http://jigsaw.w3.org/css-validator/

  6. carrieduncan
    Member
    Posted 2 years ago #

    Thanks, henkholland -- deleted those extraneous stylesheets, and remaining errors relate to Event Calendar 7. Also upgraded to current 2.9.1. Still stuck.

    I took out my defined border altogether to isolate the problem; I set padding, margins, and rules to 0px for both the masthead and the menu bar and still I see that small white gap.

    Does anyone else have an idea?

  7. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Access Forbidden
    Access denied. Please click on the back button to return to the former page.

    http://0055ae0.netsolhost.com/wordpressLR/?page_id=12

  8. carrieduncan
    Member
    Posted 2 years ago #

    So sorry, back and forth between sites, settled here:

    http://www.carrieduncandesign.com/wordpress/

    Thanks so much --

  9. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    I can only see this effect if I use IE8 in Compatibility mode (which generally represents what you'd see in IE7). You have one validation error (an extra closing </div> just before </body> that simply needs removing) and 1 CSS error (parse error in line 240 of LR/style.css).

    None of the above should cause the gap in IE7, so I think it's simply down to IE7's faulty CSS box model. The best and easiest option would be to target a very short conditional sheet at IE7 or below. Could be something as easy as:

    #menu {
    position:relative;
    top:-4px;
    }

    in the conditional sheet.

  10. carrieduncan
    Member
    Posted 2 years ago #

    Many thanks, esmi — I'll try that. Thanks also for the link.

  11. carrieduncan
    Member
    Posted 2 years ago #

    This worked perfectly, esmi — thanks so much.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.