This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?
Related
I built header and section hero in wordpress. I used clean code and i have an overflow on mobile. Always in devtools and sometimes on my mobile phone. Its so difficult to find it beacuse when you edit or delete any element in devtools, overflow gone.
https://fisite.pl/page/
Screenshot:
see devtools screenshot
Sometimes Chrome DevTools can be a bit buggy. I'd suggest trying to reproduce the problem in Firefox DevTools first of all.
There can be many reasons as to why something is overflowing - check for elements with a fixed width-size, position: absolute and other CSS-properties that could cause overflow.
One solution is to give all elements a border in CSS - that way you have the option to visually see if there's any overflowing content.
* {
border:1px solid red !important;
}
If you have a relatively small page, you can use Chrome DevTools to delete elements separately. Keep doing this on elements you suspect might cause the overflow until your site doesn't have overflow anymore. Then you'll know what element is causing the overflow:
Hope this helps!
You can add the below classes in the style sheet.
.ct-section, .ct-inner-content{
overflow:hidden;
}
As well as the above answers, another thing to check is the styling rules on pseudo elements like ::before. (width, padding, margins)
Issues for pseudo elements can be hard to spot in the developer tools using above techniques.
Another fix is:
#media only screen and (max-width: 768px){
html,
body{
width:100%;
overflow-x:hidden;
}
}
(from discussion at: https://wordpress.org/support/topic/overflow-issue/)
I'm creating a new website for my webshop - And I have this css problem ...
The system is made on the prestashop platform, but this is basic CSS so that doesn't matter.
On the CMS pages, I'm having a problem centering the page, i've tryed using the -tag, margin: 0 auto, margin-Left/right auto, 100% width and so on.
The problem isn't that the text isn't centered, it's that the browser doesn't realises it untill you change something with the inspector or change the browser width.
So if you update the site, the content jumps into place.
(if you don't see the problem, try pressing the same menu item again - sometimes it works sometimes it doesn't. The sites with most problems are: /betingelser-3, /udtalelser-6 and /om-os-4.)
The problem is only in Safari and Chrome (webkit) Everything is fine on IE, firefox, Opera.
http://forsejt.dk/mackabler.dk/content/betingelser-3
I think there is just too many div's and css-styles so the browser times out? If that can happen:) I've tryed on a Macbook pro 15", Macbook air 13" and Mac pro.
Any Css tricks for this?
So I'm not quite sure why this is, but it seems like the overflow:hidden in .row is the culprit. Try removing that or overriding it and it seems to work.
My guess would be that it gets in the way of webkit calculating the width properly for some reason?
There's also some other suggestions on a similar question here: CSS centering not working with margin auto and overflow hidden
But it seems to me that the accepted solution there won't work for you, as it looks like all of your floats are properly cleared.
Try adding:
text-align: center;
to #columns in the css.
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've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
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.