I have a div (Facebook comments plugin, for what it's worth) styled with only the following CSS.
div.fb-comments
{
margin-left:30%;
margin-right:30%;
}
On Chrome, this puts the <div> in the center of the screen. However, on Firefox, it remains at the left. Why might this be?
As suggested by YoannM, I defined a width for this element and it solved the problem. Thanks!
Related
I am using a wordpress template and everything looks fine in FireFox.
But- Surprise, Surprise - it looks wrong in Internet Explorer 8
On this page there are two issues:
http://www.thebuddhagarden.com/blog/
1) The search box (which is supposed to be to the right in the navigation menu) is pushed DOWN so that it is hidden behind the word Categories.
2) And (probably related) the navigation menu (which starts with Blog Home, Shop Our Store, etc.,) is supposed to be aligned to the LEFT. Looks great in FireFox, but it is aligned center in IE8.
No this is not a float issue.
I figured 2 issues in IE-7 its working fine in IE-8.
do the followings
1.Remove line height:18px from your h1 this will show your title which is mixing with navigation in ie7.
2.Put width:690px (or your desired, obv it should be less then 695px) on your <div id="navmenu-wrapper"> and things will be okay.
Internet Explorer doesn't like elements that are floated right following elements that are floated left. I'm not sure why this is, but for some reason it considers right floats to be new line right floats. You have two options here.
Put the box-search div above the navmenu in your code. This should not have any affect on other browsers - FF, Chrome, Safari, Opera - they will all display it as they do now. IE, however, will allow your right float to be on the same line as your left float, thus fixing the issue.
Or, give your navmenu a specific width such that it uses all but the space needed by search, and float both left.
Your problem is because of this property:
#navmenu ul {
margin:0 auto;
}
On line 656 of your styles.css stylesheet. You're trying to center a list when you want to float it to the left, so just change it margin:0 and you should be all set.
http://jsfiddle.net/sBKk4/
I'm using Twitter Bootstrap and have built the page and everything looks correct in Chrome. But the bottom div which the code is provided above, when viewed in Safari is not center aligned.
--UPDATE--
Ok, I think ive narrowed it down to the width css property with is different from Chrome to Safari for some reason?
Ive wrapped the whole thing in a div called paraWrapper.
http://jsfiddle.net/sBKk4/
The above code will display fine in Chrome but be out of place on Safari..
If I change the width however to something like 720px then it'll look fine in Safari but be out of place in Chrome..
So I guess my question at this point is. Does anyone know why this difference would be?
I guess I can get around this by using CSS hacks but if I can fix my code for a more permanent fix that that would be great!
when you are using rows, you should use this:
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
remember to use a div with class row, and in there divs with spanX classes, where this Xs of all spans sums 12
and don't use the center attribute. Bootstrap makes that for you. Look at the code from this examples
If you having a compatibly issue, be sure to specify your margin and padding of your div's, even if it's 0.
padding: 0;
margin: 0;
I've recently started to setup a website and ran into a problem in firefox 4.
My main navigation bar has an unexpected margin from the top of the page.
- Only in Firefox 4.
Chrome, IE8, IE9, IE7, Safari work fine. Only FF4 seems to bug around.
How can I solve this elegantly without cluttering my css with ff hacks?
Thanks for your adive:
URL for live demo: http://www.creativeworkx.at
The 2em margin from the #main-wrap div are causing it.
Adding margin-top: -2em to your #doc div fixes.
This css is the badguy:
#main-wrap {
margin: 2em auto auto;
}
I've worked out a simple test for your case:
<div style="float:left;">test</div><div style="margin-top: 50px;"></div>
Note: Setting margin-bottom instead of margin-top acts similar but can be solved by adding contents into the second DIV
It shows that it's a kind of complicated float problem which cause an unexpected rendering.
This unexpected rendering even appears in browser besides Firefox, like Chrome.
However, I've recently find a quick, but not formal solution, to solve your interesting problem unpredictably.
Just add a text, no matter empty string or after the menu, the first DIV or before the DIVs which have margin.
You can wrap the text by an element with a property of zero height and block display.
Like:
<div style="height:0"> </div>
The problem will look like solved by this trick. :-)
Enjoy the fun of writing CSS. :-)
Here is my site:
http://smartpeopletalkfast.co.uk/ppp/welcome.html
In Firefox and IE8 it's fine, but in IE7 the down arrow image to the right of the big 'CHISTOPOL' heading is further down that it should be. It looks like its being pushed down a row, as if the 'CHISTOPOL' text is taking up 100% of the width.
Why is this happening and how can I stop it?
Not sure exactly what the problem is but it also happens in IE6.
You could apply the following CSS
#welcome-title-bottom {
position:relative;
}
And then add style="position:absolute;right:5px;" to the "arrow" anchor and remove the class="right" which fixes the problem for me in IE6.
Personally, I try to avoid using CSS float when I can due to these sorts of cross browser layout issues.
Try removing width:auto from #welcome-title-bottom a see if it helps.
this is my first post here.
I have Code for displaying the scrollbar on the left side of the div:
body
{
direction:ltr;
}
and
<div style="direction:rtl;">
and the text is still left to right
everything works great in IE
but in firefox and safari it displays still on right side
I'm not getting any issues in firefox. Have you considered:
1) using a class instead of a style via the div (ignore if you're just using style for example purposes)
2) using text-align, which has a very similar end result.
You should make sure you are using the correct Doctype, as IE might display incorrectly without the correct declaration.