Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #282213

    Hi,
    I tried to modify Enfold css in order to change the solid border of the sidebar into a dotted one. (to be true, I’ve changed it quite everyhere, but the issue only comes with the sidebar).
    In my child theme :
    .content {
    border-right-style: dotted;
    border-right-width: 1px;
    }
    #top #main .sidebar {
    border-left-style: dotted;
    border-left-width: 1px;
    }
    Display is correct with Chrome, but not with Firefox 30, neither with IE 11 (but it is not so visible on IE).
    I think there is one pixel gap between the sidebar border and the main page area one, but I don’t know how to fix it.
    This does not appear in all pages of my site: sometimes, it looks fine but if I change only one sign, then the gap appears.
    You can have a look on :
    – Example with a bad display : http://www.ticettac.net/wp_eloise/blog/
    – Example with a fine display : http://www.ticettac.net/wp_eloise/navire/

    Is there anything I should do to solve it?

    Best regards
    m.

    #282274

    Hi mareva!

    Thank you for using the theme!

    You can add this on Quick CSS to get rid of the overlapping dotted borders:

    #top #main .sidebar {
        border-left: none;
    }

    Regards,
    Ismael

    #282338

    Hi!
    Thank you for your answer.
    I’ve already test this but when sidebar content is longer than main area one, then the border stops at the end of the main area content… hum!

    Best regards
    mareva

    #282346

    Hey!

    Alright. Please use this instead if you don’t mind moving the content 1px towards the right on mozilla firefox:

    .avia-mozilla .container .nine.units {
        width: 670px;
        margin-left: 1px;
    }

    Best regards,
    Ismael

    #282361

    Hum… please, could you just explain to me what it is supposed to do?
    I’ve test it :
    – “670px” stretchs the sidebar more than 1px (around 100px, in fact). I’ve changed it into 760px.
    – Deleting or not my “own” css, there is no visible result.
    – Then I tried to change margin-left into margin-top or margin-bottom (because I think the issue is linked to a vertical gap) –> pages where border was correctly displayed before do no longer work (and vice versa).

    Best regards,
    m.

    #282431

    Hey!

    Please try following code

    .content { border-right: none !important; }

    Cheers!
    Yigit

    #282472

    Thank you Yigit
    … but doing that, the border between main area and sidebar will stop at the end of the sidebar content. However, most main area contents are longer than sidebar contents (but not all, that is the problem!).

    regards
    m.

    #282796

    Hi!

    The dotted border is displaying fine on IE11:

    Can you post a screenshot of your view?

    Best regards,
    Josue

    #282921

    Hi!
    Thank you for your help.
    Here is a screenshot of the “Le Navire” page (in the main menu).
    Please note :
    – the issue is not as visible on IE11 that it is on Firefox.
    – it depends on pages (appearing or disappearing when I change just one word).
    – it depends on browser: the screenshot included your previous message is about a page thats is correctly displayed on IE11, but not on Firefox. The screenshot included in the current message is about a page thats is correctly displayed on Firefox, but not on IE 11.
    – with IE, the border is correct at the top of the page and become progressively solid at the bottom.

    Best regards
    m.

    #282922

    (it’s me again)
    Because the screenshot I’ve just sent is not so clear, you can have a look on :
    http://www.ticettac.net/wp_eloise/navire/

    Bests regards
    m.

    #283540

    Hi!

    I’m sorry, I was trying to move the content 1px towards the right using this code. Please don’t add the width property:

    .avia-mozilla .nine.units {
        margin-left: 1px;
    }

    This should straighten out the border.

    Best regards,
    Ismael

    #283557

    Hi Ismael,
    Sorry… there is no positive result on Firefox with this.
    When testing, I kept :
    .content {
    border-right-style: dotted;
    border-right-width: 1px;
    }
    #top #main .sidebar {
    border-left-style: dotted;
    border-left-width: 1px;
    }
    .avia-mozilla .container .nine.units {
    margin-left: 1px;
    }

    regards
    m.

    #283809

    Hey!

    Please check the code. Remove the .containe selector:

    .avia-mozilla .nine.units {
        margin-left: 1px;
    }

    or use this:

    .avia-mozilla .content {
        margin-right: -1px;
    }

    Cheers!
    Ismael

    #283822

    Hi!
    Sorry for the error…
    Then, I tried both, but the problem is still in top form! … depending on the page, like it was previously.
    Regards
    m.

    #286035

    Hi!

    Please post a page where this is happening. I checked the link http://www.ticettac.net/wp_eloise/navire/ on Firefox and the border looks fine.

    Best regards,
    Ismael

    #286104

    Hi Ismael,

    Sorry for that : since I’ve changed css (adding your last advice), pages that were correct before do no longer work and vice versa!

    Then, you ca have a look on these pages :
    http://www.ticettac.net/wp_eloise/navire/histoire/
    – or http://www.ticettac.net/wp_eloise/navigations/galice-2013/
    – or http://www.ticettac.net/wp_eloise/navigations/suede-2012/
    – or http://www.ticettac.net/wp_eloise/category/blog-croisiere/
    – or http://www.ticettac.net/wp_eloise/voiles-citadelle-2014/
    – ….

    Best regards
    m.

    #286499

    Hey!

    The border looks fine on Firefox 30.0. This is the screenshot on my end:

    Best regards,
    Ismael

    #286547

    Hi Ismael,

    Thank you to make test and test around my issue.
    I use Firefox 30 too but as you can see on this screenshot (I’ve just made it), the display is not the same on your screen and on mine.
    firefox 30

    I’ve tested it on another screen with another resolution (of course with firefox 30), and the display issue still alive!
    At last, I’ve noted that when I switch from fullscreen mode to “not fullscreen” mode, and when the firefox window stay under “XXX pixels” width, the solid border disappears. But the “XXX pixels” value depends on the page. Eg:
    – Under (around) 1150px for http://www.ticettac.net/wp_eloise/navigations/galice-2013/
    – Under (around) 1000px for http://www.ticettac.net/wp_eloise/navire/histoire/ (please note that the main menu doesn’t look so nice with this browser width value. But it is not the point).
    … Hum, I don’t know if that could be useful!

    Well, we don’t see same things: that is not such a good news for me! I’m afraid you won’t be longer able to help me…

    best regards
    m.

    #288300

    Hi!

    Have you tried on different computers? here’s how i see your site on Firefox 30 (Mac):

    Cheers!
    Josue

    #288669

    Hi Josue,
    I havn’t any mac then I can’t test it on mac.
    But I’ve tried on 5 computers (Windows xp or 7 / Firefox 30) and I always get the same.

    Best regards,
    m.

    #290608

    Hey!

    The border should only be on the main container and not the sidebar. The sidebar doesn’t actually go to the bottom of the screen. What you are seeing is Firefox incorrectly or maybe correctly rendering the border of your 2 rules on top of each other. Just remove the border on your sidebar completely:

    
    #top #main .sidebar {
    border-left-style: none;
    }

    Best regards,
    Devin

    #290647

    Hi Devin,
    Thank for your help (in fact, I’ve already tested something like this).
    But doing that, the border will stop at the end of the main area content : it is not a good solution because for some pages, the main content is shorter than the sidebar content.
    best regards
    m.

    #291737

    I’m not sure there is a solution then. Firefox renders the overlapping dotted borders incorrectly and there isn’t anything we can do to fix that.

    You can have a dashed/dotted border on either the sidebar or the content but if its both then Firefox isn’t going to show them lined up.

    #293931

    Hi!
    … exactly what I was afraid of… so be it!
    Thank you all for your help.
    m.

Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘Firefox and IE do not correctly displa sidebar dotted border’ is closed to new replies.