|
CSS - Can't Get Auto Margin In Ie To Work
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 Similar TutorialsHi, 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 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 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 On 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 http://www.moridin.moved.in/blog/ That says about it all. Thank you for your time 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! 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?? 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 I am trying to create some margin inside the "idag, poll and content" boxes but whatever I try I can not seem to get it working. The text keeps pushing against the edge of the boxes. This is the CSS: Code:
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 990px;
}
#header {
margin: 0 0 15px 0;
}
#idag {
float: left;
width: 510px;
margin-right: 5px;
background-color:#FFFFFF;
}
#poll {
float: right;
width: 130px;
background-color:#FFFFFF;
}
#content {
float: left;
width: 340px;
}
#footer {
clear: both;
}
.left {
width: 510px;
margin: 0 0 0 0;
}
.middle {
width: 340px;
margin: 0 0 0 0;
background-color:#FFFFFF;
}
.right {
width: 130px;
margin: 0 0 0 0;
}
body {background: url("../images/body.jpg") repeat;}
img {border: 0px;}
hr {background-color:#FFFFFF; width: 480px; color: #c0c0c0; background-color: #c0c0c0;}
a:link {color:#5fb61d; text-decoration: underline;}
a:visited {color:#5fb61d; text-decoration: underline;}
a:hover {color:#5fb61d; text-decoration: underline;}
a:active {color:#5fb61d; text-decoration: underline;}
This is the HTML: Code:
<html>
<head>
<title>Motstand</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include('includes/header.php'); ?>
<?php include('includes/links.php'); ?>
</div>
<div id="container">
<div id="idag">
<img src="images/idag.gif" /><br />
<p class="left">Dit is slechts een test om te zien hoe het allemaal werkt. Of <a href="link.php">links intern of extern</a> werken en hoe een zin wordt afgebroken indien hij het einde van de regel haalt.</p>
<hr>
<p class="left">See how the next topic appears</p>
</div>
<div id="content">
<img src="images/nyheter.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
<br />
<img src="images/tidigare.gif" />
<p class="middle">Dit hier is een nieuwsbericht.</p>
</div>
<div id="poll">
<img src="images/poll.gif" /><br />
<p class="right">Poll ingave.</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Can't figure out why. I validated with W3 and everything was fine. I want p. leftmargin to be left indented 332px. Its just a single column site, should be easy...... This is the CSS Code: p. leftmargin {
margin-left: 332px;
}
#content {
text-align:left;
float:right;
width: 713px;
padding: 0px 17px 20px 30px;
background-color: #B11626;
height: 1100px;
}
this is the HTML Code: <div id='content'> <p class="leftmargin"> <h2> COMING SOON </h2> </p> </div> page can also be found he http://www.kdpatton.com/cosmopolis/program.htm 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 The situation is very simple: Code: <div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
<div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
red box<br>
red box<br>
red box<br>
red box<br>
red box<br>
red box<br>
</div>
<div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
green box<br>
green box<br>
green box<br>
green box<br>
</div>
</div>
AS you can see, I have a main div. Inside it, I have 2 divs: red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows. What I need is either enter text in the red or green divs and make the main div to auto resize. (I'm using Mozilla FireFox) Any Idea? Hi, My site is divided into 2 columns: The left column is 760px in width. I want the right column to take up the remaining space of the screen - no matter what resolution i'm on. Here's the page: http://www.3003online.com/demos/ecoceylon/ As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt... Here's the code: Code: <div id="container"> <div id="logo"> <div class="hide">test</div> </div> <div class="spacer"> </div> </div> <div id="bgcolor_area"> </div> And the CSS: Code:
body {
color:#FFFFFF ;
font-family: Trebuchet MS, Arial ;
font-size:9pt ;
font-weight:normal;
line-height: 18px;
background-color: #FFFFFF;
margin:0px;
width:100%;
height:100%;
}
#bgcolor_area {
background: #000000;
height: 100%;
width: auto;
float: left;
}
#container {
text-align: left;
width: 760px;
float: left;
}
#logo {
height: 89px;
width: 760px;
background: url(../images/0_top.jpg) no-repeat;
margin: 0;
}
Does anyone know what I'm doing wrong? Thanks a lot! I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh |
|||||||