Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 10, 2016 at 5:03 pm #596376
    Frankmen

    Hello,

    I hope I can explain my problem in english so that anybody can understand me ;-)

    I have the stretched design and a fixed background image, now I want the layout elements have a solid background color (so that they are not transparent and the image is not screened there).

    When I have on one side two layout elements among themselves, and set an border radius on the upper element corners (Edit Column -> Setting -> Border Radius Top Right & Top Left to 10px) and set on the lower element an border radius also (Edit Column -> Setting -> Border Radius Bottom Right & Bottom Left to 10px) a little transparent line with 1px appears between these two elements!!

    This line appears only when working with the round corner setting, when the border radius is set to 0px (default) everything is ok …

    Now a IMPORTANT feature of this phenomenon is:
    These 1px lines are only visible when I use INTERNET EXPLORER to view the website ?!?!?
    With Firefox, Chome and other browsers the strange 1px lines are not visible and everything is fine !!!

    Is there any explanation or solution (but not like: “use a real” browser ;-)) ??

    greeting
    Frankmen

    March 11, 2016 at 12:12 am #596623
    Frankmen

    Hello again,

    here’s an example of this strange line:

    First the “correct” view with Google Chrome:
    http://www.chung-gun-hammersbach.de/Chrome.jpg

    And here the presentation with Internet Explorer:
    http://www.chung-gun-hammersbach.de/IE.jpg

    perhaps it will help …

    March 11, 2016 at 9:10 am #596760
    Josue

    Hi!

    On which version of IE are you noting this?

    Regards,
    Josue

    March 11, 2016 at 1:57 pm #596861
    Frankmen

    Hello Josue,

    that was a good question, i hat testet the side before only with IE 11.
    Now I’ve make some tests with IE 8 but this browser will compete ignore the border radius settings.

    I’ve found somthing new:
    Wenn I use IE11 to view the page and zoom in (ex. 150%) or out (ex. 75%) in line changed the appearance. !!
    Somtimes it looks correct “no line” and sometime 1px or 2px high !?!?!

    Is there a way with Qick-CSS Code to detect Microsoft Internet Explorer and disable the border radius settings for the whole page to Default (0px) ?

    I think it’s better to disable it completely before they appers with this ugly line between the layout elements

    With all other testet browsers the border radius Looks fine …

    March 11, 2016 at 2:04 pm #596862
    Frankmen

    Hi again,

    I’ve found some additional infos witch can be helpful:
    https://social.msdn.microsoft.com/Forums/windows/en-US/a7808c7d-0178-4b10-b8b1-fbb06dd6ee28/ie-11-div-with-borderradius-bug

    March 11, 2016 at 6:46 pm #596984
    Josue

    Hey!

    Maybe this could work, add the following to your theme / child theme functions.php:

    add_action('wp_head', function() {
?>
<!--[if IE]>
<style>*{border-radius: 0 !important; }
<![endif]-->
<?php
});

    Cheers!
    Josue

    March 11, 2016 at 10:53 pm #597073
    Frankmen

    Hello Josue,

    thank you for the code, it works perfekt with IE 9 (i have test it) but not with IE 10 and above … see:

    https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx

    any other ideas ??

    greetings
    Frankmen

    March 11, 2016 at 11:12 pm #597078
    Frankmen

    Hi it’s me again,

    I found a solution for IE 10 & IE 11 !!

    @media all and (-ms-high-contrast: none) {
    .flex_column {
    border-radius: 0px !important;
    }}

    Topic can be closed …

    Regards,
    Frankmen

    March 12, 2016 at 12:43 am #597099
    Josue

    Glad you figured it out.

    Best regards,
    Josue

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.