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)
Related
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 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 have following problem. I've integrated facebook send/like buttons to my website and when i click send, it overlaps with the underlying div.
Since I'm really no CSS guru, i would like that you point me in to a direction where i can find a solution for this problem.
Thank you
the problem is that the div with class box-center & div with class box have the css property overflow: hidden; so anything that's bigger then the div when is loaded will not be shown
but the problem if you remove that is that the box above will be messed up. But that can be resolved by adding (just before closing the div):
<div class="clear"></div>
and in css
.clear {clear:both}
edit: This should give you a better picture (for a bigger preview -> http://i.stack.imgur.com/nvsJW.png)
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.
I'm having a rare CSS issue in Internet Explorer 7 (I'm actually testing it on IE8 in compatibility view, but the client sent me screenshots in native IE7 too), it's easy to reproduce:
Go to this site (spanish).
On the left column, click the border (or somewhere around) the box labeled "Fiestas anteriores"
The element should now be moved downward, but if you click the empty space left, it'll come back like a good dog.
I've been looking around for IE7 bugs and playing with the width, border and other CSS properties with no luck. Any input is welcome!
I found if you apply the following styles it seems to stop it breaking when you click anywhere near it:
#prevparties_middlerow
{
float:left;
width:150px;
}
one little suggestion though, if I may, instead of having divs either side of the content in your panels to create the borders like so:
<div id="prevparties_left"/>
<div id="prevparties_contentBox">
content
</div>
<div id="prevparties_right" class="boxmiddle"/>
you'll probably find it alot easier to wrap the content box in a div that has the borders set as a background, like so:
<div id="prevparties_contentWrap">
<div id="prevparties_contentBox">
content
</div>
</div>
the main advantage here is that the wrapping div will go down as far as the containing div goes, so you dont have to apply specific heights to all these border divs. And when things are wrapped like this I find there is much less possibility of it breaking :D
anyways, hope this helps.