Grow your CSS skills. Land your dream job.

[Solved] CSS on main element not working for iPhone

  • # September 21, 2013 at 1:32 am

    Hi,

    On my website I added the main element and did some CSS on it. However, interesting is that there are no problems, except for the iPhone browsers (standard, google chrome).

    On Samsung only the standard browser has the same behaviour, others like Chrome and Firefox do listen to the CSS.

    Others experiencing the same?

    Kind regards,

    Willem

    # September 21, 2013 at 4:45 am

    What issues are you actually having?

    # September 21, 2013 at 6:37 am

    It looks like Safari iOS (as well as Chrome iOS) are treating the <main> element as an inline element, whereas other browsers treat it as a block-level element: http://codepen.io/senff/pen/CvKxA

    # September 21, 2013 at 2:59 pm

    Ok, so you experience the same issues, thanks for testing. Any idea what I should do with this problem and should I send those browser an e-mail? Treat it as a block-level element makes more sense…

    Kind regards,

    Willem

    # September 21, 2013 at 3:36 pm

    Not all browsers recognize this new tag as block element so you need to apply:

    display: block
    
    # September 24, 2013 at 4:12 am

    Yes, that’s the solution thanks. The html5shiv.js is already updated, but that only solves the problem for IE10 which also treats this main element as inline element. So I use html5shiv.js only for IE8 and lower, for the rest, also for the mobile browsers I was talking about, the display:block works perfect.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".