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.
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 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!
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.
i'm having a very strange problem with the wordpress template.
i'd like to place 2 divs besides each other like this:
<div style='float:left;'>
left div
</div>
<div style='float:right'>
right div
</div>
normally this works as it should - both divs should stick directly to each other -
but something in the style.css (which uses css reset) causes the right div to overlap the left div with ~ 5pixels.
i searched the whole .css for it but couldn't find out :((
it's just a fact that it must be something with the default css.
anyone knows what is causing this - some fix?
thanks
Do either of your divs have widths? Give them a width, float BOTH left and add margin-right to the first div.
Make sure your width + margin doesn't add up to more than the surrounding div. For example if your surrounding div is 600px your boxes shouldn't be more than width:290px; a margin-left:20px; on the left div.
Also, you can use Firebug or any other web development broswer tool to check to see what styles in your stylesheet/s are affecting your divs.
Float both left or use inline-block. You can also just float the first one left.
I would highly recommend that you (if you don't already have it) download FireFox and install the Web Developer Toolbar plugin. This plugin is GREAT for tracking down problems like this. Under the CSS portion of this toolbar when you're viewing the page with the issue you can select to "View Style Information". Then just click on the divs that are the issue on the page. Off to the left you should see a little window pop up that shows all the styling that is affecting those divs and what css source they are coming from. With CSS if you rely on "bug" fixes to fix things that aren't really bugs then you'll just cause more headache later on in most cases.
I think the problem is probably with parts further on in your code. May I suggest clearing the floats:
Html:
<div class="clear"></div>
CSS:
.clear {
clear: both;
}
The code you have posted would work fine, but I expect you have more divs or containers or something somewhere which is messing it up.
Total width = margin_width + border_width + padding_width+ width of the box + (the same for the other box).
Make sure you have width defined for both floating device. The best way is to debug the code by hitting F12. You can do it FireFox, IE,Chrome or Safari but usually you have to enable this option yourself.