I'm building a site layout ( should be cross-browser ie7,8,9 and all the recent ones ) and everything was great until i tried to zoom in. When the scrollbars appear, the header's floated elements move out of its container ( so it seems ).
Currently the behaviour persists on every browser, and also the page is using a sticky footer so i can't really modify the main structure i guess.
Here is the page:
http://www.mindsinfusion.com/k/
Any ideas on how to fix this? Am i doing something terribly wrong ?
Thanks
Your #pageHeader & footer DIV's are defined for 100% width, which applies to the window. when you zoom, you're window effectively is getting smaller.
I tried adding a min-width: 1030px; to your css and it worked, in chrome & firefox, but it may not be fully cross-browser solution.
Related
I'm tearing my hair out for a couple of days on a "simple" css case with two nested div.
Basically, I have two div; a container and a content. To reproduce the case, I've attached a jsfiddle link below. The width and the height in pixels of the content are deduced from the container size and you need to input these values by hand by using chrome developer tool for instance. At the end, if you take a look to the size of the content via a developer tool, the container and the content have the same size in pixel. Under Chrome and IE, scrollbars appears whereas the two div have the same size but with FF they don't.
Of course, I could get rid of the overflow: auto but I'd rather like to understand what's wrong and what could be solved my issue.
See an example below.
Link to the example: Scrollbars issue with Chrome&IE
Thanks for your help.
You should use overflow:hidden to hide the scrollbars.
if you want to hide both scroll you should use overflow:hidden .
We've coded a site, everything works great until you start using the zoom function of Safari/Chrome.
It seems some elements zoom correctly (see the search in attached screenshot) making a horizontal scrollbar, but html and head don't scale more than 100% of the viewport so when you scroll right making it look pretty bad…
I've tried width: 100% !important and many other things but nothing seems to affect it, any ideas would be most appreciated!
Fix seems to be putting a min-width on the body that's the same as the containers width, not ideal but seems to do the trick…!
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
I run a site using a liquid tri-column layout with a header. The layout runs nicely for more than a decade with all browsers I ever dared to try. It is based on absolute positioning in CSS. This page provides an example of the actual site.
Watching the page from my tablet I found that the right column overlaps the center matter. Further investigation using Firebug showed that once the center content reaches 360px width, the right margin of the div shrinks. Why is that? Since Firefox and Android render the same, I guess that this is something, which is actually supposed to be.
However, I tried to make virtue out of necessity and experimented setting min-width for body and content and made the body scroll overflow. The body actually scrolls, but the right column is positioned on the right edge of the viewport instead of the body element (Firefox). Is this intentional CSS standard?
Any ideas how to solve the presentation on small displays?
Thanks for your efforts,
– lars.
I pondered a while whether I should revoke the question or provide this self-answer. I decided for the self-answer since I wished some of the answers in related had been presented when I wrote the question.
First the 360px limit apparently is my own stupidity. There is a comment form, which refuses to shrink. It scrolled out of my view.
The issue of the wiered positioning had been solved by adding position:relative; to the body. The reason is explained in this question.
The overflow setting I used during experimenting is not necessary, since the default behaviour scrolls already. But using any overflow directive wrecks IE8.
So thanks a lot, the pool of answers finally had it all.
I'm working on http://www.lceonline.co.uk
When working on a smaller screen res, anything less than 1000px, I'm getting a horizontal scroll bar appear. This happens on all browsers.
I've tried
overflow-x : hidden;
but then the web pages' background doesnt repeat, it just seems to be one large gray background. It also is a css-3 property, One i'd rather try and avoid.
I've had a look at the sites' DIV tags and still cant see what is actually causing the problem. I havent built this from scratch, someone else worked on it before me and I feel they have used too many containers.
Can someone provide me with a possible solution on how to get rid of it?
Thanks
Your issue is that
#page-container and #page-container2 both have width:1000px;
If you remove the width from both of those the scrollbar disappears, as does the centring and the gray background.