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.
Related
My Distill Blog is not showing the scroll bar for wide codes and outputs.
It is possible to scroll on mobile devices (without the bar appearing), but in the Desktop browser not even that.
Also, I don't know how to set the code cells' width to match the body text's width.
I really couldn't find anything to help me manage the CSS needed to deal with this problem, and I think it's something related to alignment stuff.
Here is the visual problem:
You can add overflow: auto !important; to div with class sourceCode. !important must be there, because you are using it somewhere else and without this you cant overwrite it.
Here is example:
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.
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 can't seem to get the graphics on the top and the bottom of the navigation menu to have no gaps. Since the top and bottom images need to be stretched it can't be done as a background image. The 3 pieces need to be touching. I have tried using tables, setting margins and padding to 0px on everything, even tried using a css clear file and I still cannot get them touching.
jsFiddle... http://jsfiddle.net/PerryCS/JXVGM/1/
Am I trying to force the browser to do something it's not capable of doing? Where is the extra spacing coming from?
Please and thank you!
I don't mind trying things out. I have spent about 11 hours fiddling with this and I'm very frustrated at the lack of understanding on my part at why there is still a space. Ugh.
Needs to work on IE7 and above please. :)
Add display: block to .navribbon img: http://jsfiddle.net/thirtydot/JXVGM/2/
It seems like repeat-x for background property is not working on iphone safari browser.
Is there an alternative solution to this issue?
Don't use repeat-x or repeat-y but just repeat.
Works, tested.
I'm thinking this might be the problem with your page...
Incorrect width on iPad Note that even though the guy never accepted.. My way of doing it at least solved that problem..
On ipad like half of his page bg and header and footer went missing. This is really quick fix ( if you have the same problem ), basically you just set the same background ( the one that gets cut off ) again in inner elements that have a static width. Static width is the key word here, because window width doesn't cut those off.
Also as stated in that answer, in desktop browsers if window width is smaller than page width and you scroll to the right it will cut the bg. That is very common thing to see actually.. your page does the same.
Im fairly certain this will solve your ipad issue.