CSS measurements not as expected



  • When doing some HTML/CSS development, I was surprised to notice on a new WordPress template I was working on, that the

    <div>I was working on was wider than specified. I have barely started coding so there is no scope for conflict just yet. div.container { max-width:920px; margin:0 auto; padding-left:20px; padding-right:20px; } On Firefox (v46), Chrome (v50), and IE (v11), the container will expand to 920px wide. On Vivaldi (v1.2.490.39), the container will expand to 1010px wide. This sort of thing reminds me of the bad old days when every browser had their own rules for interpreting code, a style sheet for every browser and version there of…</div>


  • Moderator

    No, the 1.2 Final works correct like Firefox and others.
    You should check your HTML and DOCTYPE and CSS box-sizing attribute.



  • Okay Gwen-Dragon, I'll take that into consideration.
    Although I haven't used the box-sizing attribute (as yet), and the DOCTYPE was set to "responsive".
    But, irrespective of the code I have written so far (very little), I am still surprised that Vivaldi rendered the same code differently to Chrome/FF/IE.

    But as an exercise, I removed all CSS directives, and left just this behind;

    div.container {
    max-width:920px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
    border-top:3px solid #999;
    }
    I put the border in so that there would be a visual marker for measurement. And I put in the box-sizing attribute.
    And the results?

    On Firefox (v46), Chrome (v50), and IE (v11), the container will expand to 920px wide.
    On Vivaldi (v1.2.490.39), the container will expand to 1010px wide.

    Interesting hey? Only 1 CSS class for 1 container, and the same result as originally posted. And the only time raw HTML can influence width is through non-breakable content (and no, there is nothing 1010px wide).


  • Moderator

    I dont know, if your Wordpress has some strange themes with HTML, CSS and JS.

    But regarding Vivaldi does not render correct as other browsers i cant proove. As a Webdev and Programmer i know about HTML, CSS3 etc. enough since 1999. I never had this.

    And what is DOCTYPE "responsive"? That is never a valid HTML 4 or HTML5 doctype.

    Please, I need a testcase HTML with CSS file, to check this, and to give it to the developers in case of a real browser problem.
    Report it as a bug to https://vivaldi.com/bugreport/ , reply to mail with attached the HTML testcase (or give me a test URL with the testcase).

    Thanks for your hints.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.