![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Jul. 29th, 2030
Intro
Hey guys! Link me wonky codes effected by the DW code push here (or via email!) and I'll see if I can start a comprehensive list of issues—and ideally how to fix them. 💖Issue: Content sizing
The issue: The new push has implementedbox-sizing:border-box; on all site elements, which is a method I also use in my layouts; you'll find that it's going to make elements smaller than desired in some codes.The fix: When this happens, add:
box-sizing:content-box; to the effected element. What the spec in the code push is doing is saying, "subtract the padding and/or border from the container's width/height declaration" rather than "add them in addition to," which ends up shrinking the size. This makes calculating how a layout's elements fit together MUCH easier because you aren't needing to account for padding and borders, but it IS going to make some entry codes wonky.How it works: If an icon's styling is
width:70px;padding:10px;border:1px solid; the icon without box-sizing:border-box; is going to have a width of 92px (the width, plus the padding on each side, plus the border on each side.) With box-sizing:border-box; it will be 70px wide regardless, subtracting those measurements from the base width rather than adding them on.Issue: Unwanted Table Backgrounds
The issue: Thetable tag has a default background color of #fff now. It's also adding border-bottom:1px solid #ddd to the table tag. Additionally, table tr:nth-of-type(even) has a default background color of #eaeaea now (this is every other table row.)This issue only occurs on some tables due to whether or not your table has a background color declared already; if it does, it will override the base style. This does not apply to codes styled purely with divs, which is another reason the error may look inconsistent. If a code doesn't use tables, it will not be effected by this.
The fix: If your table code is displaying unintended backgrounds, I would add
style="background:transparent!important;" to both table and each tr to counteract it (or add a set background color if preferred.)Note: I'd also like to add that, when pasting the same advertisement code linked into an entry and posting it, it stripped the intended background color from the table rows that had them. Using
bgcolor="color" no longer works in entries for table elements and it will need to be formatted as inline styling with style="background:color;" instead.