CSS Anthology page 302 described technique does not work in IE8

HTML & CSS
21

I first read about negative margins as a design technique a couple of years ago, in a Site Point article by Jina Bolton entitled, “Breaking Out of the Box”
http://www.sitepoint.com/breaking-out-of-the-box/, wherein she described the use of negative margins in design to offset elements and “break the grid” to achieve a more attractive layout. I later read how negative margins could be used to actually overlap elements for design purposes.

Negative margins are not “magic numbers,” a term, it seems from the link that you posted, that has no real meaning, but is used derogatorily to mean “a hack.” After doing some research, I found that this is an ongoing controversy, with some designers advising to avoid them like the plague. But negative margins are a valid CSS technique according to the W3C.

[INDENT]1. Setting the record straight
We all use margins in our CSS, but when it comes to negative margins, our relationship somehow manages to take a turn for the worse. The use of negative margins in web design is so divided that while some of us absolutely love it, there are also those who simply think it’s the work of the devil.

A negative margin looks like this:

view sourceprint?
1 Content {margin-left:-100px;}
Negative margins are usually applied in small doses but as you’ll see later on, it’s capable of so much more. A few things to note about negative margins are:

•They are extremely valid CSS
I’m not kidding on this one. W3C even says that, “Negative values for margin properties are allowed…” ‘Nuff said. Check out the article 1 for more details.
•Negative margins are not a hack
This is especially true. It’s because of not understanding negative margins properly that it got its hackish image. It only becomes a hack if you use it to fix an error you made elsewhere.
•It goes with the flow
It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well.
•It is highly compatible
Negative margins are wholly supported across all modern browsers (and IE6 in most cases).
•It reacts differently when floats are applied
Negative margins are not your everyday CSS so they should be applied with care.
•Dreamweaver doesn’t understand it
Negative margins don’t show up in the Design View of DW. Why are you even checking your site in Design View anyway?

[/INDENT]

In my design, I used a negative top margin on the sidebar to position it above the header all the way to the top of the page, and overlapping the header (-185 px = 150 px header height + 35px top margin applied to the header div). This was deliberate, and not “picked out of the air.” I have not yet found any other way to accomplish this techique, which in my design allows for the header horizontal gray stripes to show over the top of the sidebar (which has a transparent gradient background image that repeats horizontally across it’s width).

This is also the reason I have had to assign a height to the sidebar (which you also called a “magic number”), as without a height there is no sidebar visible, as it collapses (as one might expect). Additionally, the page height is specified at 900px ( I do not understand why you said this caused you to scroll continually — in any of my browsers, I cannot scroll below the set height of the page (which happens to be the height of my monitor (1600px X 900px). For the purposes of testing the design, this 900px height was arbitrary, I admit, and I may set the page height taller if it needs to be. What is wrong with establishing a height for a Web page? Another controversy for which I’m sure there are plenty of desingers who prefer to have no end to the page length, and something I despise in a Website. Make a new page! For cryin’ out loud, what’s the big deal?

I think we are probably more or less really on the same page where the importance of design vs. the importance of “content” is concerned, but for me, if design is going to suffer, I’ll rethink content placement and styling first. I do agree that what is contained in the page (“content”) becomes integral to the design (and I think a good example of what I mean is in Jina Bolton’s article referenced above).

I would like to see some examples of some of your designs. Where can I find them?

I knew about comma separated lists to apply styles to multiple elements. I don’t understand why you added “html” in front of the “body.” What, will that do?

Thanks for the info on z-index. Not sure yet where it might apply, but I can see that it could be useful in accomplishing some design technique.

22

I think you misunderstand me a little and I have nothing against negative margins as I have been one of the proponents of them for the last ten years. You can read my article on them that pre-dates the Gina Bolton article by some time (whose article incidentally has the layout is broken in IE6 which was the major browser at that time).

I am just saying be careful when you use them. It looks as though your header section doesn’t contain much text content so you will probably be ok. If it’s just a logo and tagline then you should be safe.

Negative margins are not “magic numbers,” a term, it seems from the link that you posted, that has no real meaning, but is used derogatorily to mean “a hack.”

Again, you have missed the point. I’m not saying that negative margins are a hack I’m saying that the pixel value that you added to them can’t be relied upon. You can’t be sure that your header is always going to be 185px high in everyone’s browser unless you have a fixed height image and no text. If someone resizes text then the height of your header may change and the sidebar will be misplaced or text overlap. It will probably be ok in your case as long as you don’t have great chunks of text in the header.

As I said sometimes you have no choice when a design requires it but the term “magic number” means that you have measured something and found it to be a certain measurement and then dragged something else up to match that measurement. It’s not a reliable way to do something as you want it to be automatic. It’s ok if you are matching a fixed height image but not if you are trying to match alongside fluid text.

After doing some research, I found that this is an ongoing controversy, with some designers advising to avoid them like the plague. But negative margins are a valid CSS technique according to the W3C.

As I said I was one of the pioneers of negative margin layouts way back here in this very dated thread from 10 years ago. :slight_smile:

In my design, I used a negative top margin on the sidebar to position it above the header all the way to the top of the page, and overlapping the header (-185 px = 150 px header height + 35px top margin applied to the header div). This was deliberate, and not “picked out of the air.” I have not yet found any other way to accomplish this techique, which in my design allows for the header horizontal gray stripes to show over the top of the sidebar (which has a transparent gradient background image that repeats horizontally across it’s width).

Yes, as long as the header won’'t change in height then it should be ok. It could be done in many other ways but as you are matching the height of the header it is a limiting factor. The ideal would be for the header to be able to expand if someone resizes in their browsers and for the stripe to follow suit but that would be quite complicated but not impossible.

This is also the reason I have had to assign a height to the sidebar (which you also called a “magic number”), as without a height there is no sidebar visible, as it collapses (as one might expect). Additionally, the page height is specified at 900px ( I do not understand why you said this caused you to scroll continually — in any of my browsers, I cannot scroll below the set height of the page (which happens to be the height of my monitor (1600px X 900px). For the purposes of testing the design, this 900px height was arbitrary, I admit, and I may set the page height taller if it needs to be. What is wrong with establishing a height for a Web page? Another controversy for which I’m sure there are plenty of desingers who prefer to have no end to the page length, and something I despise in a Website. Make a new page! For cryin’ out loud, what’s the big deal?

I think you may be missing what I’m getting at here.:slight_smile:

With your example and my browser window open at 450px high as it is now I get 450px of dead space below the viewport and a vertical scrollbar showing me there is content below the fold yet there is none there.

One of the biggest design Faux pas is to have a scrollbar when none is in fact needed and should be avoided at all times.

You can’t arbitrarily say that a page height is going to be 900px. It wont be that height for anyone perhaps except you. I can’t re-iterate this strongly enough and you should not set a height on your page unless its one of those photo gallery sites with no content that sit central in the screen.

The height of the page should be dictated by its content. You never really need to set it. This is mainly the same for all elements that hold text content and they should finish naturally where their content ends.

If you need columns to match the height of other columns then you can use the “faux column” techniques I already mentioned or for ie8+ you could use the display:table approach or you could use the neater method as in my example where the sidebar reaches the bottom of the viewport or the bottom of the content if longer than the viewport.

There are a number of ways you can create the illusion of equal columns but you should always avoid just setting a height as that can never be guaranteed and is a sure way for the site to break should someone resize text or indeed wou8ld have to be modified should you add more text later.

I would like to see some examples of some of your designs. Where can I find them?

You can’t as I don’t create designs.:slight_smile: I turn designs into working pages for other designers as css/html is my expertise. I create about 5 templates a week for various designers from their designs so have coded thousands of templates which I then hand over to the client to manage from there on. That’s how I know what will work and what won’t work although I couldn’t design a thing myself. You can read my book though :slight_smile: (although its out of print now).

I knew about comma separated lists to apply styles to multiple elements. I don’t understand why you added “html” in front of the “body.” What, will that do?

It’s just the same as this:


html{margin:0;padding:0}
body{margin:0;padding:0}

But shorter.

Some browsers add margins to either html or body and some add padding so the only sure way to reset them is to set both to zero.


html,body{margin:0;padding:0}

But I think you knew that anyway;)

I don’t use the universal selector to reset things (* {margin:0;padding:0})because it messes with the behaviour of form elements and its better to define your own reset.

Thanks for the info on z-index. Not sure yet where it might apply, but I can see that it could be useful in accomplishing some design technique.

You’re welcome. It will come in useful I can guarantee it :wink:

Glad that you are taking the time to question these points as they will be important to you as you progress.

23

Now this is hysterical. I read your article (link above) this morning before I posted here, not realizing that you had written it! It was a link on another page that I was looking at that was discussing negative margiins.

I am learning a lot, and a lot of learning comes through experimentation. This is my very first Website that I created some years ago for my ceramic tile business (I’m now retired from that): http://www.kinsmantile.com/
I have disabled the “ebooks” and the “Where to buy tile” buttons, becuause I never did get any ebooks created, and the “Where to buy tile” page was ugly (basically) and since it covered only one source, where we bought all our supplies, I’m sure it’s been outdated for a long time. It was best to just disable the link. The only reason I leave the site active is because there is a lot of good information on it, and I still get calls from people asking for advice. Last call I got was last summer, when I guy from New York called who was building a custom shower (his first project ever!) and had many questions.

All the tie work shown in the photos was done by my wife and me working together. She had most of the design ideas. I cut the tile and put them together.

24

I am learning a lot, and a lot of learning comes through experimentation

Yes, its the best way to learn and see what works the best. The beauty of CSS is that there are often many ways to achieve a design but its downfall is that often there is only one right way that will work well for the task in hand. Practice and experience certainly helps as you start to see how to approach something before you start.

It’s often difficult to give a definitive answer because it all depends on the dynamics of the layout concerned and indeed two coders may give differing opinions but there are certain concepts that will be agreed upon. In the end you have to make the best choice that works for you as long as you know what the consequences are and then you can work around them.

I may say things are black and white but there is often a lot of gray in-between also :slight_smile:

The only reason I leave the site active is because there is a lot of good information on it,

If it stills serves its purpose and has good content then its doing its job so you may as well leave it.

We could all improve on what we did before (unless we’ve peaked) and its more a matter of not making the same mistakes each time and trying to be creative without being restrictive.

25

Thanks, Paul, for all your help. I have just spent some time here this morning re-reading this entire thread. Main problem solved, but I still have tons of questions. My primary question at this point is regarding my sidebar where I have a background gradient (which I happen to like) which fades to black a the bottom, so the sidebar visually disappears at the bottom (as does the background on the main content block).

I have repositioned the sidebar using #sidebar {position: absolute; top: 0; width: 200px; background-color: #2d2d2d; background-image: url(/images/background/sidebargradient.png); background-repeat: repeat-x;} (this eliminates the use of the negative top margin), added a container #page {margin: 0 auto; width: 960px;}. I applied a z-index: 1 to the header rules which gives me the overlap I wanted with the stripes of the header overlaying the sidebar (thanks for explaining how to use that). I repositioned the content using Content {float: left; margin-top: 30px; margin-left: 230px; width: 730px; height: 690px; background-image: url(/images/background/copyblockgradient.png); background-repeat: repeat-x;}.

However, as you can see, I still need to specify a height, or my gradient background does not show up either in the sidebar or the content area. I do not see a way around that. I can understand the concept of “faux columns” if I was a repeating a background image vertically. It does not work with a background image repeated horizontally. Is this just one of those gray areas, or is their a solution? My background gradient fades to solid black so it does not need to be made taller, even if the columns were extended by additional content. I just want that fading background color to show up. Is there a solution here? What am I missing?

26

Hi,

Can you attach a real size screenshot of the layout you posted in your first post as it will give me something to better work with and see what can be done?

Is the sidebar on top of the stripy background and what content is to go into the sidebar?

If I understand correctly then I feel you may need to look into using a min-height:100% wrapper as in the example I posted previously which gives you all the height you need to apply images without needing a fixed height. The middle section looks awkward though and would probably need to be done with a min-height in pixels to get an initial height if the content is short.

If you can post a full size screenshot then I will see if I can cut it up and insert it into a structure or at least give some better pointers.

27

I’ll do better than that. I’ll go ahead and create a subdomain to my dreammakergraphics.com website and upload the files. Then you can look at it live. I’ll do it tomorrow if I get a chance. If not tomorrow, I’ll have it on Wed.

Thanks, Paul.

28

Ok, just post when its ready to view and I’ll take a look.:wink:

29

It’s ready. You can view it at: http://www.designjewel.dreammakergraphics.com/

Of course, this is just a ficticious company, and just an experimental design. I’d like to have some pre-coded sites ready to customize for future clients. Besides, this keeps the creativity juices flowing! :slight_smile: I basically like the design very much. I always figure when I create something, if I still like it the next morning, it isn’t too bad. I never did a black-and-white design before, and I have been experimenting with the idea of “virtual” columns, fading into the background. The content itself will define the boundries.

I haven’t yet decided if I want a clearly defined footer. I may just leave it as it is. Of course, photos, and copy can be rearranged, resized, repositioned … any number of things might happen. Right now I’m just interested in getting the “bones” right.

30

It looks fine in Win 7 (FF 16, IE 8, Chrome) The HTML is OK and the CSS looks fine too. A first suggestion is that instead of using

*{
     margin: 0;
     padding: 0;
}

You would use some other kind of reset, like listing all the tags and then apply those rules

html, body, a, p, ul, ol, ul ... {
    margin: 0;
    padding: 0
}

It is not because what you’ve done is wrong but because the second option is known to be faster

31

Thank you very much, and thanks for the suggestion for reset. I didn’t know that.

32

Hi,

That’s much better:)

You’ve got the page centred now and everything aligned nicely (apart from IE7 but that’s another story).

Those gradients are a problem but rather than use height you should use min-height instead which will allow you to add more images and text without changing the code. You’ve done a pretty good job there and taken some of the advice given which is good.

If I was going to code this then I would cheat a little as I don’t like the fact that you need to specify height at all (even a min-height in pixels). I would paint the background in a single image in one go on the outer. The image will be about 5k as opposed to your 1k for both the images but the bigger image won’t need to be repainted across the screen like your which can slow browsers down. I never use 1px images as that makes the browsers work to hard and you can see everything being drawn on a heavy site. You can use a 10px wide image and probably not increase the file size or the request time but the browsers will draw it ten times quicker.

I’d roughly do it like this.

It needs no heights apart form an initial min-height in percentage which effectively is viewport height so there is no change and no scrollbar when not needed. It also uses the sticky footer approach to keep the footer at the bottom of the viewport (see the css faq in my sig for info on a sticky footer).

I floated the sidebar in case you needed a footer that spans both columns which you can’t do if you have an absolute sidebar. (Your absolute sidebar is fine though as long as you aren’t adding any other content in too it.)

The rest of the page is much the same as the example I gave before. The html could be shortened in places but I like to keep a solid structure that I know will work and not break. I also enclose images in either a div or a p element as an image is an inline element and should be in a block parent. It’s like having a span on its own next to a div. It’s not invalid (unless its a direct child of the body) but just not semantically correct - although most everyone disagrees with me on this so feel free to ignore me on this point).

Otherwise its much the same as yours. The sticky footer is a bit complicated but you could lose that if you wanted more simplicity.

Hope it gives you some ideas anyway.:slight_smile:

33

Thank you very much Paul. Now you’ve taught me something else that should have been obvious; that of the 1px background image making the browser work harder. I was under the misconception that smaller was better, but I can see that isn’t necessarily so. Thanks for that tip. That can be changed easily.

I think sometimes I tend to regress. I have been in the habit in the past of placing images as you suggested (in a div or p element). I don’t know why I didn’t do it here. Just not thinking, or a brain fart, I suppose, or in too big a hurry to get a couple of images placed to see what the design was going to look like in my browser. The problem with that is that without you pointing it out, I may never have gone back and changed it.

It will take me a while to study and digest everything you’ve done, but looking at it quickly just now, I get a pretty clear overview when I see the div elements outlined and view the class and ID’s.

I think you have opened some doors for me, and I thank you very much (also opened my eyes). I’m sure I’ll have a few questions after studying what you’ve done. It looks great!