i have trouble with internet explorer and centering , my question is how can i centering a div without the CENTER tag
and it got to work in all the browsers ,
because i was using
margin:auto;
it works in all borwsers
but it does not work in internet explorer
i'm looking for something that will work in all the browsers
someone told me to put
text-align: center;
to the body but than all the text has go to the middle
so how can i do that?
You're close. Use the CSS below:
margin:0 auto;
Here's a working jsFiddle. Note that I gave the div a fixed width.
You need to specify a width as well as margin:
div.center { width:980px; margin:0px auto; }
Example HTML:
<html>
<head></head>
<body>
<div class="center">CONTENT</div>
</body>
</html>
IE has spotty support for auto margins (i.e., different behavior in quirks mode). This should work in pretty much all cases though:
CSS:
.container {
/* for IE */
text-align: center;
}
#the-div {
/* reset text-align */
text-align: left;
/* for "good" browsers */
margin: 0 auto;
}
HTML:
<div class="container">
<div id="the-div">centered content</div>
</div>
Yes this works perfectly in IE.
.container {
/* for IE */
text-align: center;
}
#the-div {
/* reset text-align */
text-align: left;
/* for "good" browsers */
margin: 0 auto;
}
Your CSS is close, the your issue isn't the browser. The simple fix is to change the inner div class.
You have your position absolute with Left 25%... Use Left 50% and it will autocorrect.
Remove the left: 50% entirely and add margin: 0 auto; as previously noted on another answer.
Related
Over the past few weeks I've been developing a website for a friend of mine and while it works perfectly in most browsers, it breaks in 2 seperate ones.
I have a div, with css of
#div2 {
width: 70%;
margin: 0 auto;
display: block;
text-align: center;
}
In Chrome, Opera, Internet Explorer and many other browsers, it loads fine, and centers the div.
But in Firefox and Safari (Both on windows), the div stays on the left of the page.
div2 IS inside a parent div, but the parent div only has a border set on it, nothing else.
I've been trying for ages to rectify the issue, even using the #-moz-document url-prefix() css, but it still doesn't fix it.
Any suggestion would be gratefully recieved.
Try specifying "width: 100%" on the parent div. This same issue happens when there isn't a container div, and the solution is specify "html, body {width: 100%}", so this is likely the same case.
Use:
{
left:50%;
margin-left:-200px; //minus half of your div width
}
A Firefox moderator already gave a solution:
#div2 {
border: thin solid #000000;
width: 760px;
height: 1px;
margin-left: auto;
margin-right: auto;
}
Strangely certain aspects of one of my page doesn't show on FireFox. I have narrowed the problem down to this:
Main Page (Works On All Browsers)
The <div id="wrapper"> has the following CSS:
margin: 0px auto;
width: 1000px;
background-color: #272727;
min-height: 100%; /* ie6 ignores min-height completely */
height: 100%;
background-size:100%;
This ensures the nice grayish background. Also I am using the masonary jquery script for floating all my stuff. At the end of all my floats I clear them with :
<div style="clear: both;"></div>
This makes everything perfect. However on another page, that didn't seem to work so instead I added this line of code to the wrapper style (for that page)
style="overflow: auto;"
Now on IE and Chrome that's all good and well, and restores the background, but on firefox neither the content or the background is to be seen. On removing the code, the content is there but the background is not.
Why is this? What surprised me most is that IE worked and firefox didn't?!
EDITED:
Add clear:both or clear:left and overflow:auto; in the wrapper css.
#wrapper {
background-color: #272727;
background-size: 100% auto;
height: 100%;
margin: 0 auto;
min-height: 100%;
width: 1000px;
clear: both; /* Added Clear Property */
overflow:auto; /* Added Overflow Property */
}
Because tagbar <div> above the wrapper <div> is floating left, So you need to clear the floating.
http://img841.imageshack.us/img841/3145/imgej.png
I have this HTML source:
<!DOCTYPE html>
<html>
<head>
<title>Stylish Web Page</title>
<style type="text/css">
body { padding: 0; margin: 0; }
div.table { display: table;}
div.tableRow { display: table-row;}
div.tableCell { display: table-cell;}
div.contentWrapper { width: 100%; height: 760px; position: relative;
margin: 0 auto; padding: 0; }
div.footerBar { width: inherit; height: 60px; background-image: url("BarBG.png");
background-repeat: repeat-x; position: absolute; bottom: 0; }
</style>
</head>
<body>
<div class="table contentWrapper">
<div class="tableRow"> </div>
<div class="footerBar"> </div>
</div>
</body>
</html>
The footer is supposed to appear at the bottom of the page, and it does so in Opera and Chrome; However, in Firefox, there's a lot of empty room following the footer. What am I doing wrong? How to fix it?
Here's a screenshot: The blue highlight is the footer.
(Please note: "position: fixed" is not what I want; I want the footer to show up at the bottom of the page, not the browser window.)
The issue in Firefox is caused by display:table. Essentially you are telling Firefox to treat this element as a table.
In Firefox position:relative is not supported on table elements. It isn't a bug though, as in the spec the treatment of position:relative table elements is undefined.
This means that in your example the footer is being positioned relative to the window and not the container.
One solution is to use display:block instead or just remove the display rule entirely. You will see the footer will drop down to its rightful place.
A second solution would be to wrap another non-table div around the container and set position:relative to that instead.
A third option is to add position:relative to the body. Live example: http://jsfiddle.net/tw16/NbVTH/
body {
padding: 0;
margin: 0;
position: relative; /* add this */
}
What version of FF do you have? In FF 6 it displays correctly: http://screencast.com/t/zAjuG8FP99nX
Have you cleared the cache? Maybe there's something left from previous versions of the page.
Did you close the Firebug window? That pushes the content up when open.
Later edit: the last line means: "after you close firebug, scrollbars disappear and div is at the bottom"
I have the following CSS code being used for centering an <img> tag
.img {
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
The above code works an intended in Firefox, Safari, Chrome and IE8.
But it does not work in Opera
If i add padding-top to the above code, it messes up the other browsers but opera works.
How do I target Opera for padding-top or solve the centering issue with Opera ?
If all you're trying to do is center the image all you need to do is:
img{
display: block;
margin: 0 auto;
}
You can put your Image in an Div Box and then Center it.
#image {
width: 100px;
height: 100px;
margin: 0 auto;
}
you only have to adjust the height and the width of your Div Box
Try removing top, right, bottom, left.
img {
position:absolute;
margin: auto;
/*If it doesn't do it, try to add display: block; also*/
}
and make sure you are referencing the tag img and not the class .img but I presume that was only a typo.
Try using the JavaScript Navigator object to identify that the browser is Opera or not navigator.appName
I've never personally used it since I use jQuery, but for such a small thing, jQuery would be a large overhead.
I would make it with a
<div id="div" ....>
<img ...>
</div>
and the style
#div {
width:980px;
margin:10px auto 40px auto;
}
I use this often to center my Website.
Maybe it works directly on the img.
if your problem is to center the image there is set of solutions the fist is to put the element in <center> tag the second solution depend on the image width for example if the image width is 300 you can use this code .img{position:absolute;left: 50%;margin-left: -150px;}
and it is a bad practice to use the top:0 with bottom:0
I just test tested it in Chrome and IE 10.
<div style="margin: 0 25%; width:800px;">
<img src="~/Images/yourimage.png" width="300" height="300" style=" margin: auto;" />
</div>
The best way to do it is like :
//html (no css is needed)
<center><img src = ""></center>
When placing fixed with DIVs center by using margin:0 auto. It is ok in all browsers except IE. How to fix this issue for IE so that the div center aligns in IE.
Pffff... after trying all of the above solutions I was still stuck with my DIV floating to the left. In ALL IE browsers.
My solution is this:
body { text-align: center;}
#content { margin-left: auto; margin-right: auto; text-align: left;}
and voila - it works!
And people, a good place to check how your work renders in all browsers is www.browserstack.com. Then you don't have to have this crappy IE *#/&%%$$(( browser installed!
I think you mean a "fixed width div"?
if so What's your Doctype?
in Quirks rendering mode IE will not centre a div with margin: 0 auto;
First I would suggest you change to a Strict Rendering Doctype, so you can avoid many of IE's other quirks, but if you absolutely can't do that, then the following should do it for IE.
body {text-align: center;}
div {width: 500px; text-align: left; margin: 0 auto; background: #eee;}
<body>
<div>this div is in the center, even in IE Quirks Mode</div>
</body>
the text-align: center should be set on the parent element of the one you want to center, then reset the text-alignment how you want it to be on the actual element..
However I really would like to stress that if the cause is indeed a Quirks rendering Doctype that changing it (or adding one if you've not got one!) would be the better solution.
Define a fixed width to your element.
.myElement {
width:500px;
margin:0 auto;
}
Otherwise provide some code so we can see what exactly you are doing.
If you have a fixed width, you can use the following css:
#content {
position: absolute;
left: 50%;
width: yourWidth;
margin-left: - halfYourWidth;
}