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;
}
Related
I'm trying to write a stylesheet that styles the following html
body > * {
width: 49%; /* should be 50% */
display: inline-block;
text-align: center;
overflow: hidden;
margin: 0;
}
body {
margin: 0 auto;
line-height: 0px;
width: 80%;
}
<html><body>
<span><h1>some text here</h1></span>
<img src="img.png"></body></html>
But on iOS Safari, the bottom margin from the h1 expands past the baseline and (in the full version, that has multiple rows), pushes down the rest of the content. If I use overflow: scroll, this fixes it for Safari, but on other browsers messes up the view. How can I detect that this is Safari and fix it or use a different way to construct the block formatting context? I would prefer not to use Javascript, but I think that there's a chance I'll have to.
Does overflow:hidden applied to <body> work on iPhone Safari?
body > * {
position:relative;
overflow:hidden;
}
The issue is NOT the block formatting context. Instead, it's the vertical-align: text-bottom that Safari defaults to. vertical-align: text-top fixes my issue by forcing the inline-blocks to align their upper baselines (which are located strictly above the text's margin or padding) rather than lower baselines which vary based on the bottom element and what margin it has, even though the margin isn't "leaking" out of the element.
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
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;
}
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.
Hi all
I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly.
This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!
.main_content {
float: left;
width: 816px;
background-image: url(Images/evokedesign_bg_tile.png);
background-repeat: repeat-y;
overflow: hidden;
}
.portfolio_buttons {
float: left;
width: 634px;
}
Site link: http://evokedesignstudio.com.au/Portfolio.html
Now you posted a link to your live site, I found the answer very quickly:
On .gallery, remove the height: 400px rule.
Done.
This fixes IE7, and nothing changes in IE8/other browsers.
You have got your .page_container set to a fixed height of 730px.
Try updating the CSS to
.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}
Same with the .gallery as #thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).
By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.