Margin ghosts



  •  For fuck's sake, i haven't been working with CSS so long that i forgot how much of a pain it can sometims be, even with IE6/7 ((too) slowly) dying out...

    Disclaimer: this is more of a rant & plea for help than WTF, i think...

    So here I am, trying to make a "frame" (graphical border) for the main content part of page layout...

    I've got a class="frame" div, which is just to set the dimensions and wrap the three divs inside: "top-frame", an empty div 10px high, 800px wide, which has the actual border image (the top line, and top left+top right corners) in the background. under that is "content", div where the actual text goes,that has background image of left&right line of the border, and "bottom-frame", again empty div, 10px high, 800px wide, with background image of the bottom line & bottom left + bottom right corner of the border in it.

    Everything's working swell, until the first element in "content" is h1, or basically anything with margin-top larger than zero.

    The damn margin doesn't "push against" it's parent element border from inside causing the h1 to be positioned inside the parent at top+margin-top Y coordinate, offcourse, because that would be logical.

    Instead, the margin freely flows out of the parent div, pushing the "top-frame" div up by the margin size, or the whole "content" (e.g. parent element of the h1) div down (by that margin size), not really sure which one of that, which creates beautiful gap between the top part of the graphic border, and the middle ( = repeating) part...

     

    no h1 with margin, no problem

     

    FUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

     

    if anyone has an idea how to explain the logic behind this, or what am i doing wrong, go ahead



  • @SEMI-HYBRID code said:

    if anyone has an idea how to explain the logic behind this
     

    margin overflow has no logic and it sucks. It is the devil.

     

    There are several workarounds.

    1. 1px top padding of the parent. This has the side-effect of a 1px padding.
    2. replace margin with padding on your H1. This has side effects for backgrounds on your H1
    3. set overflow:auto|hidden on the middle content container. This has side-effects for positioning, and elements that you may want to overflow. Beneficial side-effect is that it will stretch downward to fit floats.

    Use option 3 first. It's the easiest, most robust and least likely to give shit.



  • @dhromed said:

    set overflow:auto|hidden on the middle content container. This has side-effects for positioning, and elements that you may want to overflow. Beneficial side-effect is that it will stretch downward to fit floats.
     

    you, sir, made my day.

    @dhromed said:

    1px top padding of the parent. This has the side-effect of a 1px padding.

    :-D twice

     

    thanks



  • Extra "magic" padding might also be the result from "quirks" mode. So make sure you send the right doctype. Also, firebug in firefox can help you find where padding is coming from. (Chrome has a similar tool build in)



  • @Daid said:

    Extra "magic" padding might also be the result from "quirks" mode. So make sure you send the right doctype. Also, firebug in firefox can help you find where padding is coming from. (Chrome has a similar tool build in)

    Guess what? Opera and IE have them built in too!



  • @Daid said:

    Extra "magic" padding might also be the result from "quirks" mode. So make sure you send the right doctype. Also, firebug in firefox can help you find where padding is coming from. (Chrome has a similar tool build in)

    As does IE, but God-forbid a web developer be familiar with a version of IE above 6.



  • @SEMI-HYBRID code said:

    if anyone has an idea how to explain the logic behind this, or what am i doing wrong, go ahead

    (PS IE does have "developer tools", but the CSS component of it is utterly rubbish in comparison with Firebug or Chrome).



  • @Daid said:

    Extra "magic" padding might also be the result from "quirks" mode. So make sure you send the right doctype. Also, firebug in firefox can help you find where padding is coming from. (Chrome has a similar tool build in)

    I'm personally banning the Chrome dev tools until they fix the bug that causes the element highlighting to not work as soon as hardware acceleration is enabled on the page (and that happens very often nowadays because some fancy CSS effects can be accelerated)
    Also I'm too lazy to close the browser and start it again with the shortcut with the right parameter (--disable-hardware-acceleration or something)



  • @Daid said:

    Also, firebug in firefox can help you find where padding is coming from. (Chrome has a similar tool build in)
     

    did you read the OP? i knew exactly where it was coming from, i just didn't understand why it was going to where it was going.

    (still, "developer tools" in all the other browsers feel to me just like clumsy knock-offs of firebug (which they are, in a way, if i'm not mistaken))

     @Daid said:

    Extra "magic" padding might also be the result from "quirks" mode.

    the result of "quirks" mode on my layouts usually tends to be "hey, someone tripped over the puzzle set i just assembled!", so i made it my habit to use the X-UA-Compatible meta pretty quickly.

    and now, with html5 doctype, it's even better, i never liked the idea "oh yeah, here's that retarded browser i have to yell at to stop being retarded"

     



  • @dhromed said:

    Use option 3 first. It's the easiest, most robust and least likely to give shit.

    Option 3 is an even bigger PoS because of the side-effects it implies. The best way to achieve the positive effects of a new block formatting context (containing margins and floated elements) is by cleverly using :before and :after pseudo-classes in CSS, combined with triggering hasLayout to achieve the same for IE6/7.

    .bfc { zoom: 1; }
    .bfc:before, .bfc:after { content:""; display:table-cell; clear:both; }
    


  • @SEMI-HYBRID code said:

    (still, "developer tools" in all the other browsers feel to me just like clumsy knock-offs of firebug (which they are, in a way, if i'm not mistaken))

    IE's Developer Toolbar predates Firebug.



  • @blakeyrat said:

    IE's Developer Toolbar predates Firebug.
     

    Ok.

    It's still shitty.

    But I'm glad it's there.



  • @Ragnax said:

    @dhromed said:
    Use option 3 first. It's the easiest, most robust and least likely to give shit.

    Option 3 is an even bigger PoS because of the side-effects it implies. The best way to achieve the positive effects of a new block formatting context (containing margins and floated elements) is by cleverly using :before and :after pseudo-classes in CSS, combined with triggering hasLayout to achieve the same for IE6/7.

    .bfc { zoom: 1; }
    .bfc:before, .bfc:after { content:""; display:table-cell; clear:both; }
    

     

    Nope.

     



  • @dhromed said:

    @blakeyrat said:

    IE's Developer Toolbar predates Firebug.
     

    Ok.

    It's still shitty.

    But I'm glad it's there.

    It was shitty though IE5-IE7. Now it's defunct entirely.

    But the point is, Microsoft did it first, and people give Firefox the credit for the idea. Even though it's obvious Firebug is just a total ripoff of it. Although less quirky and more functional.



  • @blakeyrat said:

    But the point is, Microsoft did it first, and people give Firefox the credit for the idea. Even though it's obvious Firebug is just a total ripoff of it. Although less quirky and more functional.

    That's what I say about Java and C#, but C# developers get angry when I do.


  • 🚽 Regular

    @blakeyrat said:

    But the point is, Microsoft did it first, and people give Firefox the credit for the idea. Even though it's obvious Firebug is just a total ripoff of it. Although less quirky and more functional.
     

    Kind of like how Edison gets all the credit for inventing a lightbulb that works, instead of the previous inventors he totally ripped off of who made shitty lightbulbs?


  • ♿ (Parody)

    @RHuckster said:

    @blakeyrat said:
    But the point is, Microsoft did it first, and people give Firefox the credit for the idea. Even though it's obvious Firebug is just a total ripoff of it. Although less quirky and more functional.

    Kind of like how Edison gets all the credit for inventing a lightbulb that works, instead of the previous inventors he totally ripped off of who made shitty lightbulbs?

    Or Columbus and the New World. Sure, the Vikings were there before, but it didn't work until Columbus did it.



  • @boomzilla said:

    @RHuckster said:
    @blakeyrat said:
    But the point is, Microsoft did it first, and people give Firefox the credit for the idea. Even though it's obvious Firebug is just a total ripoff of it. Although less quirky and more functional.

    Kind of like how Edison gets all the credit for inventing a lightbulb that works, instead of the previous inventors he totally ripped off of who made shitty lightbulbs?

    Or Columbus and the New World. Sure, the Vikings were there before, but it didn't work until Columbus did it.

    It's all about who makes the claim first; not who founded/invented/implemented something frist. Heck, even congress is seeing this as more effective.



  • @dhromed said:

    @Ragnax said:
    @dhromed said:
    Use option 3 first. It's the easiest, most robust and least likely to give shit.

    Option 3 is an even bigger PoS because of the side-effects it implies. The best way to achieve the positive effects of a new block formatting context (containing margins and floated elements) is by cleverly using :before and :after pseudo-classes in CSS, combined with triggering hasLayout to achieve the same for IE6/7.

    .bfc { zoom: 1; }
    .bfc:before, .bfc:after { content:""; display:table-cell; clear:both; }
    

    Nope.

    Motivation? Argumentation? -> Nope!

    You'd do well to take a look at the current state of affairs and realize that the overflow hack is frowned upon because of its hostile side-effects. Now that CSS3 box-shadows are coming into general use, you'll find that the overflow hack will become even less used: it will clip those shadows.

    The pseudo-element based method of generating a pseudo block formatting context has no truely hostile side-effects. There is one side-effect and that is the fact that it takes up the pseudo-element slots available to the container element. Generally speaking this is not such a big deal and if it is, then you can always use a wrapping element. The same cannot be said for the overflow hack.



  • @Ragnax said:

    Motivation? Argumentation? -> Nope!
     

    You're right, I was being a bit of a tool.

     

    I think the BFC code is another bit of hackish code to add to my stylesheets, just like the * and _ pre-"fixes" for IE7 and IE6. I'd much rather use a feature meant for the job, and attempt hackfixes in the cases where it doesn't work out, which I predict will be rare.

    Another trick alternative is to float the container, but obiously this too creates a whole new set of side-effects such as requiring a width of 100% which in turn has more side-effects, so I didn't mention it.

     



  • @blakeyrat said:

    But the point is, Microsoft did it first, and people give Firefox the credit for the idea. Even though it's obvious Firebug is just a total ripoff of it. Although less quirky and more functional.
     

    well, to me it was not obvious at all... i had no idea that IE5 and 6 had this, i thought it was new feature introduced in IE7.

    so much for feature visibility, i think.

     

    btw, FUCK.

    i "LOVE" things like this... client had the design for TWO days, now the page went live, and i got the usual mail with "final changes" requests and such.

    and guess what.

    "it's great, but please remove the border around the text"

     and yes, they mean the border because of which this topic exists.

    sometimes i'm just amazed how stupid people can be.

     

    (yup, i may seem to overreact, but this happens all the time, you send client the design, they praise how good&ok&great it is, you code it into html, you launch the site, and SUDDENLY, million of things like this, that were good&ok&great in design are bad and to be removed. and it's not like they look differently in final html, or that they cause something that was not  and could not be anticipated from the design images... it's one of those things i just can't understand, no matter how much i try.)


  • 🚽 Regular

    @SEMI-HYBRID code said:

    (yup, i may seem to overreact, but this happens all the time, you send client the design, they praise how good&ok&great it is, you code it into html, you launch the site, and SUDDENLY, million of things like this, that were good&ok&great in design are bad and to be removed. and it's not like they look differently in final html, or that they cause something that was not  and could not be anticipated from the design images... it's one of those things i just can't understand, no matter how much i try.)
     

    If it makes you this angry, then I'm afraid you might need to find another line of work, because this is as best as it will get. In my experience, clients like this are more common than not, and it doesn't matter what class they are. They could be a Fortune-500 company that looks like they have their shit together, or they could be Bob's Barber Shop on Main Street: they will do any combination of dragging their feet providing dependent copy and contents, providing feedback, and will make last-minute change requests that they think "seem" simple enough but in effect require several man-hours to complete, and will moan at the final bill.

    Although I do wonder if architects and the like get the same crap.

    "Oh, we just love the skyscraper you just built for us."

    "Good"

    "Just a few things... could you knock down the 5 middle stories? We just realized we don't need that many floors. And we need a new elevator shaft in the back. Oh, and if you could put a few pinnacles on the top to make it look taller, that would be excellent. Of course, we won't pay our last 50% until those changes are made. Why are you crying?"



  • @SEMI-HYBRID code said:

    well, to me it was not obvious at all... i had no idea that IE5 and 6 had this, i thought it was new feature introduced in IE7.

    so much for feature visibility, i think.

     

    It was a separate download in IE6; not included in the main program.

     



  • @RHuckster said:

    Although I do wonder if architects and the like get the same crap.

    Yes, they do.  In another life I worked as a "designer" for an architect's office... basically I was the guy (or, later, the people who worked under me were) who took the licensed architect's fanciful sketches and made it into an actual code-compliant, working, can-actually-be-built-by-real-human-beings building.  (And yes, this description is largely why I don't do this any more.)

    The trouble SEMI-HYRBID has is the same one building architects have but building engineers don't.  People who don't have any expertise in design assume that it's really just drawing pretty pictures, so it can't be that hard.  Architects have (mostly) figured out that they need to shield the client away from making decisions about stuff they shouldn't be by presenting them with options about the things they can. In other words, an architect might give the client 3 different options for the color of the brick, but there's no fucking way they're going to let the client decide what grade of mortar to spec or what fire rating a corridor has. Engineers have this problem to a much lesser degree, because unless your client is a former engineer they're mostly not going to dispute the expertise of the engineer -- lay people don't know much of anything about sizing ducts or boilers or whatever.

     Applying these examples to web designers vs. software engineers is left as an exercise for the reader.



  •  I'd add that there's a further reason why web devs/designers get this sort of thing more often. It's a lot easier to modify a website that's just been put up than it is to modify a building. I'm a web developer, not a designer, and one of the things I hate is when the designers give the client a design filled with Lorem Ipsum. Client gives it the OK, and then it looks crap when the actual real content is put in because there's either far less or more, or just a completely different type of content. And then there's the problem of getting everything pixel-perfect. This concept annoys me just as much as the imaginary "fold". It's a bloody impossiblility that it will look exactly the same unless every bit of content is a huge image. Fonts render at different sizes (same font on different browsers, try Arial on IE, Safari and Firefox and you'll see) and that's even before introducing browsers on a different operating system that doesn't even have the exact font you're using. Browser quirks try to ruin everything (can IE just not settle on how they're going to break everything with each release? Now I have a specific stylesheet for each version of IE in use every time I put a site together), the users existing operating system settings can really screw with the design (scrollbars anyone?) and try to style a form without breaking it for everyone not using Javascript (or Flash in the case of styling a file upload element). All this extra time jsut to make the design work in the first place, and then they change their mind and give you potentially hours of work depending on just how nasty the bug you've just hit is.

    And to add insult to injury, Adobe go and release something like Muse (which I saw at their HTML5 camp in the UK).


Log in to reply