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.
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 .
So I've got a nice floated form layout that works beautifully in FF and Chrome, but not IE (shock, horror!):
So, off to testing I go and the first shot across the bow is to add in a 1px pink border to the FIELDSET on IE to see where it's borders lay, and this is what I get:
...neat IE, neat. So I remember something about "display" triggering something or other in IE's layout engine to make stuff behave like they should, so I'm off to see the Google. But it seems the hasLayout stuff is an IE7-ism.
Specifics are thus-ly: The element not positioning correctly is a FIELDSET. It only has a single CSS attribute against it; "white-space: nowrap;" (tags underneath it are styled with floats). Adding the "new" clearfix doesn't work.
So.. anyone have any ideas on what the heck is going on in IE? Also, as an aside, the conditional statements don't seem to be working for me (...) which is also just weird.
Agh... the warmth and glow of remembering why I hate IE so very, very much...
Isn't it always the way? You take the time to do a write-up for StackOverflow, and as you post it something comes into focus that you didn't see before?
So... it seems that the cause of this is related to IE9 not setting a width during the render. When the border was put on the FIELDSET it forced a width of at least 2px which was enough to force the wrap. Setting a width of 0px still caused the issue, but with a width of 1px (or more) it wrapped as expected. In the end I simply added in a "clear: left" to the CSS class (which is arguably proper anyway as that is what I expect) and all was again right in the world.
So... in some cases, it seems that IE9 will not set a width on a rendering (rendered?) element (a FIELDSET in this case). This probably has something to do with the hasLayout stuff, but I'm not 100% certain. This may have been caused by the fact that all elements within the FIELDSET are being FLOAT'd left.
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.