Hey, when I use margin: auto auto; it never aligns exactly right with IE. Its always 1 or 2 pixels off. And if I try: .div { background: url(background.gif) top left repeat-y; width: 1042px; margin: auto auto; overflow: hidden; } I STILL get a scrollbar. This way works with IE but I get a damn scrollbar even when I have overflow hidden on. Can someone point me in the right direction so I can center an element to work on both IE and firefox of course, as well as not having a scrollbar since my element is 1042 px wide. Rep for anyone who can help! Thanks, Audentio
Can you post some more of your HTML/CSS? As far as I can see from your css, it shouldn't cause a scrollbar to show up. When I do a brief mockup, I don't see this effect. Maybe there's an underlying problem somewhere?
Hey mate, I sent you a link of it in action. Resize the screen from left to right and you will the the scrollbar show up before it needs to show up. I want the main content to have a scrollbar, but not the dropshadow. If anyone else wouldn't mind taking a look, Ill pm you the link.
Pls pay attention to your html document type before you try to fix the css problem. For general, "margin: o auto; " will work for you to align the div center.
Well, without the rest of your code just this one piece is gibberish. IF you are targeting a 1024px wide display you are going to have scrollbars with a 1024px element, because that doesn't leave room for a scrollbar - is this a fixed width layout meant for 1280 or larger displays or something? Remember, subtract 32px to make room for any borders or the horizontal scrollbar, so fixed width 1024 friendly should be 992px while 800 friendly is 768. As to centering it, margin:0 auto; is preferred since top/bottom auto does nothing, though since they do nothing you could just set all around to auto as margin:auto; saving yourself five bytes. The question really becomes what is the rest of the page doing, as just one CSS snippet without the element it's effecting, the elements around it, is pretty much gibberish.
Well, would you mind taking a look at my code? rikun told me to use background: url(image.gif) top center repeat-y scroll; instead since I am just having a background image wrapper. But that leaves an extra pixel on the left in Firefox and an extra pixel on the right for IE (yet it works perfectly with Google Chrome). And thanks for that bit of information, I didn't know that!
margin: auto auto; is unnecessary. You want to just use: margin: auto; What you want for centering horizontally is margin: 0 auto; If you are trying to center vertically and horizontally you want to place a one pixel tall div tag 50% from the top of your page absolutely positioned like so: .v-center { width: 100%; top: 50%; position: absolute; } then place what ever you need within that div, with the following rule: If you place a 500px tall div inside, put -250px top margin on that nested div. (half it's height)
The problem I have is that I want to use margin: 0px auto, but I keep getting a scrollbar on smaller resolutions instead of ignoring the div's scrollbar, and I was wondering if it was possible to disregard when I am using a width property: #pagewrap { background: transparent url(images/layeredsilence/wrapper.png) top left repeat-y scroll; margin: 0px auto; width: 1042px; } Code (markup): I tried scroll, but that doesn't work. And I need to have a width on there to use the margin property. Because what the image is is a wrapper (seen here is the image) and the width of the content is 898px which is the size I am looking for the scrollbar to turn on at, not at 1042px. Anyone see what I mean? Attached is a screenshot of the page.
Okay something's not clear here. What the hell is going on?? Your image doesn't show a scrollbar. Is this because the screen or browser window is larger than 1024px? Scrollbars should only EVER show up on two occasions: when your content is wider than its parent box and you have overflow: auto on, OR when your content is wider (or higher for vertical scrolling) than your browser. You only want a scroll bar to appear when someone's browsing window is smaller than the 898px right? But you have a wider box around everything to hold that background image? And you're using that container because the body is already holding the pattern image right?? There's no point, ever to setting a background image to scroll. The other value is fixed which fixes the image and stops it from scrolling. No need for "scroll" cause that's what it would do if it weren't repeated. Being a repeater I don't think you could ever see the difference whether it scrolled or not. I think you're going to have to try to do something else. As long as you set a box to a width (or even a min-width) of 1024 to show all of that image, you'll get a scrollbar at any browser smaller than that width. I think you're going to have to merge the shadow with the repeating pattern and make one huge (wide) image, as a single background image on the body (which is the one element that will expand to its heart's content without giving you scrollbars) and repeat-y. Background position on the hozontal axis would have to be center but not sure if that works for repeated images. I do remember Crusty doing a drop-shadow on top of slanted lines background once for someone as a demo here. So, he might be able to figure out the best way to do this. Ds?
Hi, In CSS the margin:auto; is useful to align the main div centered. Please that feature in your XHTML/CSS.
Stomme poes, thank you for the most part, I guess my extremely difficult question on whether it was possible to remove the scrollbar has been solved. Thats all I needed to know (I was fairly certain), and if there was an alternative. I don't really like your alternative as it ads a much larger image than that which is necessary. I might just make the wrapper smaller and the shadow image smaller instead. Thanks all, Ill give the rep to the people who deserve it in a bit.
Yeah I didn't like that much either, because it stopped you from being able to tile the pattern repeat-x. so you'd have a very wide (though not very tall) image. Though Crusty made a really wide image that was JUST a drop-shadow png on this page: http://battletech.hopto.org/html_tutorials/eightcorners/template.html and it's actually pretty small (under 2KB). Your idea about making the dropshadow smaller could work very well. If the drop shadow was only a few pixels (like 10 or so) wide on each side, then you could still attach it to the wrapper and make it only a hair wider than your main content, so those with 1024 screen resolution don't get the scrollbar cause you'll have room for Window Chrome.