-
AuthorPosts
-
June 22, 2014 at 9:46 pm #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.June 23, 2014 at 6:31 am #282274Hi 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,
IsmaelJune 23, 2014 at 10:03 am #282338Hi!
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
marevaJune 23, 2014 at 10:27 am #282346Hey!
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,
IsmaelJune 23, 2014 at 11:29 am #282361Hum… 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.June 23, 2014 at 1:23 pm #282431Hey!
Please try following code
.content { border-right: none !important; }
Cheers!
YigitJune 23, 2014 at 2:21 pm #282472Thank 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.June 24, 2014 at 2:55 am #282796Hi!
The dotted border is displaying fine on IE11:
Can you post a screenshot of your view?
Best regards,
JosueJune 24, 2014 at 10:49 am #282921Hi!
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.
June 24, 2014 at 10:50 am #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.June 25, 2014 at 12:15 pm #283540Hi!
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,
IsmaelJune 25, 2014 at 12:39 pm #283557Hi 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.June 25, 2014 at 11:40 pm #283809Hey!
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!
IsmaelJune 26, 2014 at 12:21 am #283822Hi!
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.July 2, 2014 at 5:21 am #286035Hi!
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,
IsmaelJuly 2, 2014 at 10:19 am #286104Hi 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.July 3, 2014 at 5:57 am #286499Hey!
The border looks fine on Firefox 30.0. This is the screenshot on my end:
Best regards,
IsmaelJuly 3, 2014 at 9:40 am #286547Hi 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.
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.July 8, 2014 at 4:27 am #288300Hi!
Have you tried on different computers? here’s how i see your site on Firefox 30 (Mac):
Cheers!
JosueJuly 8, 2014 at 8:19 pm #288669Hi 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.July 12, 2014 at 8:07 pm #290608Hey!
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,
DevinJuly 12, 2014 at 11:58 pm #290647Hi 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.July 15, 2014 at 6:19 pm #291737I’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.
July 21, 2014 at 5:49 pm #293931Hi!
… exactly what I was afraid of… so be it!
Thank you all for your help.
m. -
AuthorPosts
- The topic ‘Firefox and IE do not correctly displa sidebar dotted border’ is closed to new replies.