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;
}
Related
I'm having problems with a 2-column layout, using display-style="inline-block".
I have this html:
<div class="A">tekst</div>
<div class="B">tekst</div>
with css:
.A {
background-color: blue;
height: 200px;
width: 250px;
padding-left: 25px;
margin-right: -254px;
display: inline-block;
vertical-align: top;
position: relative;
box-sizing: border-box;
z-index: 1;
}
.B {
background-color: red;
height: 400px;
width: 100%;
padding-left: 300px;
display: inline-block;
vertical-align: top;
position: relative;
box-sizing: border-box;
}
http://jsfiddle.net/eaFn9/9/
But as you can see, the width of the first div is 250 pixels, but it needs a margin-right of -254px before the second div is shown "next" to it.
Why is this? I cannot figure it out. Also, most examples do not use the box-sizing, but if I remove it, the layout goes awry again.
I am using Chrome, but it seems to work the same in FF and Safari too.
Any help is greatly appreciated!
Regards,
Michael
After some attemps to find the problem, I bet you have some blank or even some Enter keystroke between the 2 divs. This problem is very hard to find out. So to solve it you just need to clear all that blank or Enter keystroke so that the 2 div tags have to be close next to each other:
<!-- place 2 divs close to each other without anything between. -->
<div class="A">tekst</div><div class="B">tekst</div>
Here is the expectedly working fiddle
For anybody with the same problem:
It seems that adding 'font-size: 0' to the parent container fixes it for every browser, just not for Safari for Windows (all other Safaris work as expected).
Make sure that you reset the font-size to a sensible value inside the child divs if you want to have text in them (so in my example, both divs A and B would have font-size: 14px; for instance to show the text).
I assume (I have not done any research at all) this is a bug in Safari for Windows, as it's the only Safari with this issue.
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
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
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;
}
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.