|
CSS - Using Margin: 0 Auto To Center Div Not Working....
hello
i have a div acting as a container for a layout and i'm using the following to center it on the browser window, having a background image and two borders: Code:
#master { position: relative; top: 0;
width: 46em;
margin: 0 auto;
background-image: url(../img/bg/.gif);
border-right: 1px solid #FA933C;
border-left: 1px solid #FA933C;
}
this works great on internet explorer, however, on other browsers it doesn't do so well; on netscape it centers the layer but it doesn't display the background/borders. on firefox it does the same thing. on opera it centers and displays the background, but it leaves a gap between the top margin and the top of the layer, even though the document margins are set to zero. is there a way to fix this? i suppose i could use position: absolute and then figure out a percentage away from the left margin... but this way is a lot better since the browser figures everything out neatly. hope someone can help out. thx in advance! Similar TutorialsOn this page - http://www.mts-diesel.com/index.php, it shows as wanted in FF, but in IE9, the main body is left aligned. I tried declaring margin:0 auto but it will take effect. Any help would be appreciated. Tom Hi, I have the following code, but the div is not appearing in the center despite me using margin 0 auto. Can anyone suggest a way to centralise the div? PHP Code: left: 0px; bottom: 0px; position:fixed; width: 98%; margin: 0 auto; background: url(../images/drop_bg.png); -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 0px 0px 10px; -khtml-border-radius: 0px 0px 10px; border-radius: 0px 0px 10px; z-index: 1000; Thanks I'm trying to get this div to center on teh page all teh way back to IE5. I'm using the box model, but I still can't get this thing to work. Any ideas on how to get it working? http://www.ira-soup.com http://www.browsercam.com/public.aspx?proj_id=296123 First things first, both my HTML and CSS validate. I'm very VERY green with CSS, but because other people don't seem to think so I'm making a website. My trouble is with IE. The website is perfect in Firefox. I have this div: css Code: Original - css Code div.main { background-color: white; margin-left: auto; margin-right: auto; width: 35em; border-width: .1em; border-color: #aa505f; border-style: solid; text-align: left; } .alignment { text-align: center }
And this address stuff: CSS Code: Original - CSS Code address { background-color: #FFFFFF; margin-right: 5em; width: 15em; border-width: .1em; border-color: #aa505f; border-style: solid; float: right; line-height: 1em }
address {
HTML: HTML Code: Original - HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> In Firefox, it shows as it should a centered box with a white background and maroon border and a right-aligned box of the same description besides its italics. However, in IE the box that should be centered is pushed to the left a bit. It is as if the box is aligned left and has a left margin. I am aware that IE does not support margin:auto, but I have tried as you can see to fix it by using text-align:center and a parent div to no avail. Something tells me that my floated box is the source of this trouble, but I would not know where to start. Can anyone help me? Hi, I have recently changed to using a DIV layout when designing sites. One problem i have noticed is that the margin:0 auto; doesn't work in IE5.5 What can I do to get around this? Many Thanks, Jonathan. i think there is a problem with margin: 0 auto; for ie6. Can you try these code in your IE? I know it's a bug but i couldn't find the solution. Code: <div style="width:250px; background-color: #DFDFDF; margin: 10px auto; text-align:center; padding: 4px;">hello world</div> do you have an idea? thanks. www.ahmetalpbalkan.com http://www.moridin.moved.in/blog/ That says about it all. Thank you for your time I'm still fairly new with CSS. I cannot get margin: auto; to work in IE. Working fine in Mozilla. There was a brief bit where I got it to work, but I have no idea what I did, nor how to do it again...LOL(slightly sarcastic laughter). Anyway, it's making me crazy and maybe someone can help me out. I've stripped the code down to my CSS body and area div I've been setting my stuff in. Code:
<html>
<head>
<title>Dude Work Web Page</title>
<style type="text/css" media="screen">
body {
background: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#area {
background: #FFFAFA; display: table;
width: 776px;
margin: 0 auto;
border: 5px double black;
height: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="area">
What is it that keeps this from having auto margins in IE???
</div> <!-- end area -->
</body>
</html>
Much thanks, James For the first time, rather than coding my own layout CSS, I'm adapting a layout and CSS created by someone else... and I've run into some problems figuring out a couple of things. The layout in question is one written for Movable Type, and is freely able to be edited and changed. I'm working with the layout in a test setting now, before moving it to its permanent home. You can see it in action at: Code: http://www.outincenterfield.com/mt/ Two things I need to figure out: 1. How to align the whole layout in the center of the page. (the header image, the 3-columns, and the footer) 2. How to increase space(margin) between the boxes in the sidebars, so that the underlying white background color shows through. Any help would be GREATLY appreciated - as the way this layout is coded has got me turned all around. I've tried everything I could think of, and can't sort out how to do these two things. Here's the main CSS: Code: /*
THEME NAME: Diurnal
THEME URI: http://ntuat.wordpress.com/
DESCRIPTION: This flexible 5-in-1 theme changes according to the time of day
VERSION: 1.0
AUTHOR: Carolyn Smith
AUTHOR URI: http://not-that-ugly.co.uk/
TEMPLATE: sandbox
*/
/* use any structure in /sandbox-layouts; more details in the readme*/
/* included here for Movable Type */
/* links to time-specific stylesheets */
@import url('sunrise/style.css');
@import url('morning/style.css');
@import url('afternoon/style.css');
@import url('sunset/style.css');
@import url('night/style.css');
div#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
div#content {
margin: 0 400px 0 0;
}
div.sidebar {
float: left;
overflow: hidden;
width: 180px;
}
div#primary {
margin: 0 0 0 -400px;
}
div#secondary {
margin: 0 0 0 -200px;
}
div#footer {
clear: left;
width: 1000px
}
body {font: 0.75em arial, helvetica, verdana, sans-serif;
margin:0;
padding:0;
color:#444}
#container {background:#fff;}
#content {
padding:0 10px 0 10px}
/* header */
#header {height:200px;}
#header h1 {font:3em 'century gothic', futura, serif;
margin:0;
padding: 0 10px 0 10px;}
#blog-description {padding:7px 10px 0px 10px;
color:#fff}
.skip-link {display:none}
/* prev/next links */
.navigation {margin:1em;
text-align:center;
width:95%;
height:1em}
.nav-previous {float:left;
text-align:left;
width:45%}
.nav-next {float:right;
text-align:right;
width:45%}
.nav-previous a {padding-left:20px;
background:url(leftarrow.gif) center left no-repeat;}
.nav-next a {padding-right:20px;
background:url(rightarrow.gif) center right no-repeat;}
span.meta-nav {display:none}
/* page navigation */
#menu ul li {
margin:0;
padding:0;
display:inline;
font:1.2em 'century gothic', futura, sans-serif;
}
#menu ul li ul {margin:0;
display:inline;
font-size:0.8em;
}
#menu ul li a {
padding: 3px 20px 3px 10px;
letter-spacing:0.05em;
}
/* sidebar stuff */
.sidebar {margin:0;
padding: 10px;
background:#fff}
.sidebar h3, .comments h3, #respond h3 {letter-spacing:0.05em;
margin:0;
padding:7px 10px 3px 20px;
font: 1.4em 'century gothic', futura, sans-serif}
#menu ul, .sidebar ul {list-style:none;
margin:0;
padding:0;}
.widget, .sidebar li.linkcat {border:1px #ccc solid;
margin-bottom:2em;}
.sidebar ul li, #wp-calendar caption {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;}
.sidebar h3 {border:1px #ccc solid;}
.sidebar ul li ul li, .sidebar ul li div {background:#fbfbfb;
border:0;
padding:3px 10px 3px 10px;}
.sidebar ul li ul li ul li {
padding-left:20px;
background:url(rightarrow.gif) center left no-repeat;}
/* posts & comments */
.post, body.page div.hentry, .comment, .trackback, .pingback {border:1px #ccc solid;
margin:10px 0 10px 0}
.entry-title, .comment-author {letter-spacing:0.05em;
margin: 0;
background:#f0f0f0 url(greybk.png) top left repeat-x;
padding:5px 10px 0px 10px;
font: 2em 'century gothic', futura, sans-serif}
abbr.published {border:0;}
.entry-date, .comment-meta, #trackbacks-list div.comment-author {
text-transform:uppercase;
font-size:0.9em;
margin:0;
background:#f0f0f0;
padding:0px 10px 5px 10px;}
.entry-date {background:#f0f0f0 url(clock.gif) top left no-repeat;
padding-left:20px}
#trackbacks-list div.comment-author {font-family: arial, helvetica, verdana, sans-serif;
border-bottom:1px #ccc solid;
letter-spacing:0em;
padding-top:5px}
.comment-meta {border-bottom:1px #ccc solid;}
.comment p, #trackbacks-list p {padding:0px 10px 0px 10px;
background:#fbfbfb;}
.entry-content {line-height:1.4em;
padding:10px;
background:#fbfbfb;
border-top:1px #ccc solid;
}
.entry-meta{
clear:both;
background:#f0f0f0;
border-top:1px #ccc solid;
padding:5px 10px 5px 10px}
.meta-sep {padding-left:18px;
color:#f0f0f0;}
li.bypostauthor div.comment-author {background:#f0f0f0 url(starbk.png) top left repeat-x}
/* forms */
input, textarea {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;
color:#444;
font:1em arial, helvetica, verdana, sans-serif;
overflow:auto}
#commentform #submit {margin:10px 0 10px 0;
color:#333}
#searchform div{background:#f0f0f0;
margin:10px}
#searchform submit {color:#333}
/* calendar */
#calendar h3 {display:none}
div#calendar_wrap {padding:0;
background:#f0f0f0 url(greybk.png) top left repeat-x;}
#wp-calendar {width:100%;
background:#fbfbfb;}
#wp-calendar caption {font:1.4em 'century gothic', futura, sans-serif;
margin:0;
padding: 5px 0px 5px 20px;
text-align:left
}
#wp-calendar td {text-align:center;
border:#ccc 1px solid;
background:#f0f0f0 url(greybk.png) repeat-x;}
#wp-calendar tfoot td {
background:#fbfbfb;
border:0;
}
#wp-calendar td.pad {border:0;
background:#fbfbfb}
td#today {
background:#ccc;
border:#999 1px solid}
/* image handling */
#content img {max-width:98%;}
#content, .sidebar {overflow:hidden}
a img {border:0}
.alignright {
float:right;
margin:5px}
.alignleft {
float:left;
margin:5px}
.center {
margin:auto;
display:block;
}
/* getting asides to LOOK like asides */
body.home div.category-asides {
margin:20px 0px 20px 0px;
padding:5px 10px 5px 10px}
body.home div.category-asides *{
display:inline;
}
body.home div.category-asides .entry-content {border:0;
font-size:1em;
line-height:1.5em;
padding:0}
body.home div.category-asides div.entry-meta {background:#fbfbfb;
margin:0;
border:0
}
body.home div.category-asides .entry-title,
body.home div.category-asides .entry-date,
body.home div.category-asides .author,
body.home div.category-asides .meta-sep,
body.home div.category-asides .cat-links
{display:none}
/* html elements */
a {text-decoration:none}
blockquote {border:1px #ccc solid;
padding:5px}
h2 {font: 2em 'century gothic', futura, sans-serif;
margin:10px 0 -10px 0;
}
.hentry ul {list-style-image:url(rightarrow.gif)}
#footer {
background:#f0f0f0 url(greybk.png) repeat-x;
text-align:center;
border-top:#ccc 1px solid;
padding:10px 0 10px 0;
}
Why Oh Why?? Internet Explorer.... *gripe gripe* I have this basic code... Code:
#rightside {
float:right;
width:315px;
}
#rightside_top {
height:6px;
background:url(/images/rightbg_top.gif) no-repeat;
}
#rightside_bottom {
height:800px;
background:url(/images/rightbg_bottom.gif);
}
<div id="rightside">
<div id="rightside_top"></div>
<div id="rightside_bottom"></div>
</div>
It looks great in anything that isn't IE... but IE adds about 10px under the first div (rightside_top), which breaks the image effect i am trying to accomplish anyone know how to efficiently get rid of this gap?? hi there, i'm new to CSS and recently i'm trying to set up a blog on my site http://www.seehearconnect.com/ . the the main column and the side column looks good on firefox and safari, but in IE, the columns stick together. i've looked through the margin and css codes but i dun see where i went wrong... help! the code are as below /*------------------------------- Main Body ----------------------------------*/ #container { width: 800px; margin: 0px auto; background: #578295; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .70em; text-align: left; /* IE hack Part 2 */; border-top: 15px solid #578295; } #topcontentdouble { float: left; width: 540px; height: 27px; background: #578295 url(images/header_whole2.gif) no-repeat right top; margin: 10px 0px 0 0px; display: inline; } #content { float: left; width: 540px; background: #ffffff; margin: 0 20px 0 0px; display: inline; } #bottomcontentdouble { display: inline; float: left; width: 540px; background: #578295 url(images/bottom_whole2.gif) no-repeat; margin: 0 10px 15px 0px; height: 27px; } /* ------------------------------ Sidebars -----------------------------------*/ #sidebar { position: relative; float: right; width: 235px; margin: 0 0px 0 0; text-align: left; /* IE hack Part 2 */ display: inline; font: 1.0em Verdana, Arial, Helvetica, sans-serif; } #sidebar ul { position: relative; border: thin none; } #sidebar ul li { list-style-type: none; list-style-image: none; } #sidebar ul, #sidebar ul li { margin: 0; padding: 0; } #sidebar ul li ul{ background: url(images/sidebar_bottom.gif) no-repeat bottom white; margin: 0 0 20px 0; padding: 10px 5PX 15px 5px; } #sidebar h2 { background: url(images/sidebar_top.gif) no-repeat; width: 235px; margin: 10px 5px 0 0px; padding: 8px 0 1px 20px; color: #476C7E; } /* The following is the fix for 3-pixel-jog bug in IE */ /* Hide from IE5-mac. Only IE-win sees this. \*/ * html #content { /*margin-right: 7px;*/ } * html #sidebar { height: 1%; } /* End hide from IE5/mac */ #sidebar ul li ul li{ margin: 4px 0px 4px 10px; display: block; background: url(images/bullet.gif) no-repeat; padding: 0 0 0 18px; } #sidebar ul li ul li a{ display: block; height:1%; /* IE WIN */ } #sidebar ul li ul li a:hover{ background: #FF9900; text-decoration: none; } #sidebar ul li ul li ul { margin: 0; padding: 0; } #sidebarbottom { background: white; width: 235px; height: 10px; vertical-align: bottom; } Hi I am trying to define margins of a div so that the text near it can be displayed with a space, please click here to the see the sample but it is not affecting the text and the text strikes the borders of the div. Code: <div style='float: right; border:solid 1px; padding-left: 5px; padding-top:5px; padding-bottom: 5px; marign-left: 5px;'> Can anyone guide me please how to give some space between the text and the div borders? thanks I've checked my site(www.lehsfair.org) in IE8 and FF and it works fine but in IE7/6 the red badge has a background and the bottom picture does not move down. What it supposed to do it does in IE8 and Firefox. In the left column, there should be a cow image and a pumpkin image with about 300px in between and a red star badge with a z-index that lets lay over the two images. Can anyone help me out with the IE7/6 issues?? Here's the code: Code:
body {margin: auto; background: url(../images/bg.png) left top repeat-x; background-color:#808080;}
#container{width: 1000px; margin: auto; border: 2px solid #000000; background-color:#FFFFFF; position:relative;}
#header{width: 1000px; height: 200px; background: url(../images/header.png) left top no-repeat; float: left;}
#content {width: 1000px; background-color: #ffffff; overflow:hidden; margin-bottom: 35px;}
#col1 {width: 480px; float: left; overflow: hidden;}
.ticket-box {width: 460px; background-color: #808080; margin-left: 20px; margin-top: 20px; margin-bottom: 10px; padding-bottom: 2px;}
.ticket-box h1{text-transform: uppercase; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 22px; text-align:center; padding-top: 10px; }
h2 {color: #7f0000; text-align:center; padding: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 18px;}
.box-content{background-color:#FFFFFF; margin: 10px auto; width: 450px; border: solid 1px #000000;}
.box-content p {color: #000000; font-size: 18px; font-family:Arial, Helvetica, sans-serif; padding: 10px 5px; line-height: 22px; }
.location {margin: 5px 20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #000000; line-height: 22px;}
.bullets {background: url(../images/text-bullets.png) no-repeat; width: 335px; height: 175px; margin: auto; margin-top: 40px; }
#col2 {width: 480px; float: right; overflow: hidden; position:relative;}
#cow-image {background: url(../images/cow.png) no-repeat; width:457px; height: 326px; margin-top: 20px;}
#star-image {background: url(../images/star.png) no-repeat; width:376px; height: 369px; position: absolute; left: 50px; top: 300px; z-index: 1;}
#pumpkin-image {background: url(../images/pumpkins.png) no-repeat; width:457px; height: 345px; margin-top: 300px; position:relative;}
Can someone tell me why margin-top won't work on the administration bar on this page: *** removed *** ? You'll see there's a margin-top of 15px pix on the administration bar, but it butts up against the main nav bar. Thanks! (ps this is a backup, but I'll remove the link shortly anyway). Hello, I am having trouble with some margins in IE 6 windows. http://designerz-core.com/e/i/ The margin between the left images by the menu, has a 4 pixel or so space in between, which I don't won't. I have applied serveral hacks none of them seem to work for the left margin. By the way I am on a 1024x768 res. Also in ie 6 the buttons don't seem to notice margin statment in css. It's suppose to be 7px for margin-top. Can someone that is good at css help? Hi, I have the following code that all it does is list boxes under each other. Now between each box I set a margin of 10px. However in Firefox the margin (correctly) is 10px, while in IE6 the margin becomes 20px!! Code:
<html>
<head>
<style>
div.box{
float: left;
margin-left: 10px;
margin-bottom:10px;
clear:left;
border: 1px solid black;
width:100px;
}
div.row {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="row">
<div class="box">
Hello One
</div>
<div class="box">
Hello Three
</div>
</div>
<div class="row">
<div class="box">
Hello Two
</div>
</div>
</body>
</html>
Can anyone tell me why this is happing? will I have to resolve to hack to solve this, or I am writing my html incorrectly? regards, sim085 I'm wondering what's the alternative to the "MARGIN: 0px auto;" where I need the -1px for the margin-left and margin-right as oppose to auto for margin-left and margin-right?? Code: MARGIN: 0px auto; Thanks, FletchSOD O.k. I'm stumped... I have a gap about 5px at the top of my site in Opera 8.02 which reveals my background graphic and setting the top margin to 0px in both my body and wrapper div does nothing to solve it. It renders fine in FF 1.06 and IE6, and yes, everything validates fine. My Website My css file My gratitude ahead of time. [edit] Did a little deeper search and solved my problem. Opera uses padding as a default, not margins. So setting padding to: Code: body {
padding: 0px /*Opera hack*/
}
Removed the gap issue [/edit] I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px. This is my input field code on my form: Code: <input type="text" class="field" name="title" size="45" maxlength="200"/> On my stylesheets I placed this: Code: input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}
Doesn't work?? I can't figure out why. |
|||||||