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;
Related
I am creating my first site from scratch using PHP, MySQL, CSS, HTML, and some script languages. It is a dating site. Sorry for my bad english, but it's not my native language.
I have found a solution to every other problem/issue I have faced. But as I started testing cross-browser compatibility, a weird bug happened in Chrome.
The website is here http://www.writech.net.ee/testsite
The site's idea is that everyone who wants to date someone fills a form with his/her contact data and description and submits it. Every advert shows up as a floating div. These divs are floated left. The divs have fixed height, so if anyone writes a longer description and it doesnt fit to the div a scrollbar appears. The divs which should hold the description text are outlined with 1px red border.
The advert divs are OK in IE9 and Firefox 11 but in Chrome the div with too much text to fit the div which should be applied the "overflow: auto" to show vertical scrollbar for some reason renders to elevated position compared to other divs. At first I thought the problem is related to appearing scrollbar, tried "overflow:hidden" - overflow:hidden hides the excessive text but the div still appears elevated compared to other divs. So the problem is related to how much text the div contains.
As I have no previous cross-browser adaption experience I don't know where to look and what to do. Does anyone have thoughts on which CSS hacks to try?
Have to say I think it's a bit weird that this happens, but if you set the vertical-align property of your .boxes to top it works: .box {vertical-align: top}.
I had a similar problem once before, and float:left worked for it. You can use the same solution, but you'll have to change how the div containing the boxes is centered. I managed to get it to look right in Chrome on a Macbook with the following (you can move the styling to you CSS file, of course):
<div style="margin-left: auto; margin-right: auto; width: 1080px;">
<div class="box" display="float:left">
...
</div>
<div class="box" display="float:left">
...
</div>
...
</div>
You could try applying block display(it's inline-block atm) on the .box class and also throw a float:left on it. (line 324)
I've been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two to the right.
The whole site is only 960px wide and my screen resolution is 1680px so clearly it should fit with plenty of space.
The site still displays exactly the same but the scrollbar is annoying me. I've tried adding borders to everything using the * selector in CSS but nothing seems to be protruding that extra inch. I've also used the Google Chrome console to highlight different sections of the site but none of them are causing the problem.
Every browser shows the same problem, do you have any explanations?
This is the site in question: http://compressmycode.com/
remove the position:relative in your #body-wrapper style around line 31 of your CSS and use margin-top:50px instead of top:50px
if you must keep the position:relative you can also just apply an overflow:hidden to your wrapper to remove whatever overflow may be there, but there are some inherent dangers in doing so.
EDIT
Upon further inspection, I've discovered that your .right div is the issue. For some reason, its being floated to the right is causing your problems.
The problem comes form your JS. if you disable it, it works perfectly.
More precisely with the facebook button:
div#body-wrapper > div#site-title > div.right > div.fb-root > div
setting this to overflow: hidden, fixes the problem
I had a similar issue. There was nothing that seemed to exceed the width but still there was a scroll bar at the bottom.
My structure of page was:
<body>
<div id='appContainer'>
<div class='page'>
<div>All the content along with "Youtube video"
which meant there was
an iframe within my page,
some other stuff like *sharethis buttons,
Which meant i had to add a few scripts.</div>
<div>more stuff</div>
<div>more fancy stuff</div>
<div>some more stuff with shadows and floating elements</div>
</div>
</div>
</body>
*sharethis: http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs
I'm not sharing the CSS as there was nothing other than box-shadows at the outer levels and top-margin.
Although i'll share how the problem got fixed.
I gave the
<div class='page'></div>
css:
.page{
overflow: hidden;
}
This fixed the scroll issue for me.
Although the fix was just to find the right parent and give it the above CSS
I still would like to know the root cause for the scroll. Kindly share that knowledge if you have it.
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. :-)
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.
<div style="background-color:red;width: 300px;">
<div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>
<div style="float:left;border:1px solid green;">BBB BBB BBB</div>
<div style="clear:both;"></div>
</div>
Pasting the above HTML here: http://htmledit.squarefree.com/
And then zoom out in Chrome, you will see that <div> B will eventually be forced down to the next row. If you do the same thing in Firefox and IE, both <div> A and B will stay on the same row.
Adding a height attribute on the parent <div> may help, but if the height of the content is not known beforehand, this will not be feasible.
I would like to know how this problem can be fixed in Chrome.
Many thanks to you all.
EDIT: uploaded a screenshot here: http://img52.imageshack.us/i/screenshot1xd.jpg/
On your first div, add this:
<div style="background-color:red;width: 300px; white-space:nowrap;">
See if that helps.
I can't reproduce this either, but it seems that you are only zooming the text and I can't find this as an option in Chrome right now.
However you should keep in mind, that this is something that always can happen in any browser, if the user somehow overrides the font-site you specified. There is not much you can do other than keep your layout flexible enough to handle it. For example, in this case don't set the width of the surrounding element in pixels, but in ems so that it is relative to the font-size.
There may be other solutions, such as using other methods of placing elements beside each other, but that would require that you give a more concrete example of what you are trying to achieve, especially explaining you don't want the elements to wrap.
Works just fine on my Chrome 5.
What I could suggest to you is to specify the width on the parent div in "em" instead.. Though it seems that your particular version of chrome had a bug, which has already been fixed :)
Another solution is to set nowrap, as proposed by #Kyle and instead of setting static width - set the min-width. This way the div will expand, instead of having the children wrap to the second line ^_^
try using the max-width attribute!