I spent way too long trying to remove extra spacing to the left of a select box, when in Chrome Developer Tools, I finally saw that the user agent stylesheet was adding 2px margin-left (looking under the Computed Style). But when I click the margin-left dropdown to see where this style is being defined, it says it's being defined as 0em, as in the following screenshot...can someone explain this to me??
I ran into this issue as well - setting an explicit height fixed the issue.
The reason:
"*The purpose of intrinsic margins is to try to prevent adjacent controls from butting up against one another. Especially with rounded controls this looks terrible. The reason you see the values change is that we only set intrinsic margins when we think it won't disrupt the layout of the page. If the author specifies an explicit height/width on the control, then we assume the designer is needing pixel-precise control, and so we turn the margins off to avoid disrupting the page layout.
This feature was originally motivated by cases like Google's front page, which had two buttons that butted right up against one another. They have spacing now on the modern version of the page, but in the past they did not. This happens all over the place on the Web as well, especially with text fields next to buttons. They end up looking terrible on OS X especially (they look bad on Windows too, just not quite as bad).*"
Source: http://code.google.com/p/chromium/issues/detail?id=128306
From that screen shot, it looks like there is a rule like:
margin: 2px 2px 4px 2px that is overriding what the user agent originally spec'd as 0em
Related
So while working on a project I noticed that when I scrolled to the bottom the scrollbar would bounce back up a page.
Originally I had to make the front page have less vertical space for the footer and add the space for every other page.
So I moved:
body {margin-bottom: 150px;}
To:
body:not(.home) {margin-bottom: 150px;}
I'm answering my own question here though it's very clear Chrome has widespread issues with the scrollbar behavior in general. For people who aren't web designers it is possible to override the behavior on a live website and in some cases (with extreme subjectivity) programs (e.g. maybe the bookmarks page) though the issue in browser pages is overriding the browser's internal CSS which isn't always possible.
The fix, at least in the scenario I faced, was to split the margin in two and give the other half of the spacing to the padding-bottom.
So in example, this:
body {margin-bottom: 100px;}
Would become this:
body
{
margin-bottom: 50px;
padding-bottom: 50px;
}
This is however generally not an acceptable solution as there are very explicit reasons why margin and padding are two different contexts however the project I'm working on is very graphically heavy and requires breaking proper CSS conventions.
For non-web developers/designers who may come across this issue and page, as I mentioned in the question above, it is possible to override a website's CSS code if the CSS selector can be specific enough to only effect one website. The code would then have to be applied to the browser's master style sheet. I've done this in the past to negate Google forcing ads even around my Adblock Plus filter subscription and won. Each browser has it's own way of applying default styling, since this is a Chrome specific issue and I'm not as familiar with Chrome I did some digging to provide some bread crumbs and hopefully make someone's life just a bit easier:
https://superuser.com/questions/52967/change-default-css-of-google-chrome
I have created a Wordpress child theme based on Thematic and I'm currently trying to debug the site in IE 6/7. My suspicion is that the problem is hasLayout, as that seems to be very common and the symptoms are congruent, however I have checked many of the broken elements and added hasLayout properties to those that did not already have them with no advancement.
I did have z-index set in several of the CSS classes, which I have now removed, and I'm wondering if any of you have some other suggestion about other debugging approaches.
The site is: http://032b4a6.netsolhost.com/WordPress/
I have posted here instead of the Wordpress forum as I believe my problem is more related to a standard CSS issue than anything specific to WP.
EDIT:
To detail the kind of errors I experience in IE6/7:
The header, which is an anchor with a css background property, pushes down on the search box, causing large gaps.
The nav displays as if it has an extra 75px of margin under it, causing another large gap.
The right sidebar is missing. It can be found just barely peeking from the left side of the container below the left sidebar.
The left sidebar appears to have an extra 15px of left margin, pushing it onto the main content div.
To check if a layout problem in IE6 / IE7 is hasLayout-related problems, I sometimes find it useful to use a rule like this for debugging - it's propably not something you want to use in your final stylesheet (as it will probably introduce new problems), but often it can reveal what elements needs to be given layout:
* {
zoom: 1 !important;
}
Welcome to the world of conditional comments and IE stylesheets: http://codex.wordpress.org/Conditional_Comment_CSS You need to tweak the CSS for IE and test with native IE, not browser shots.
Try taking the slider out for a minute to see if there is a CSS conflict.
And you have a few minor html errors, one having to do with an inline style sheet:
[Invalid] Markup Validation of 032b4a6.netsolhost.com WordPress - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
Is there any workaround for IE which makes me able to use border-image? I'm developing a site and it's working properly in every browser but IE. I need to mimic these bars
I could use the ie-css3.htc hack but border-radius works only with the four corners together (which doesn't apply here, 'cause the top border isn't rounded) and the filter css property (for gradient) doesn't work with border-radius at all (it fills the whole element ignoring the border radius limits). In case there's no workaround for this, how would be the best way for doing this?
The .png files are unnecessary. Just use CSS3 pie: http://css3pie.com/
Get rid of the proprietary IE filter entirely, and use (heh, the proprietary) -pie-background:linear-gradient(values) instead.
Works harmoniously with individually rounded corners: border-radius: 0 5px 5px 5px
In that case, the top-left corner would be no border-radius, and the other corners (clockwise) would be at 5px each.
Then use behavior:url(path_to/pie.htc); in the same style.
Remember also that the path_to is relative to the document being viewed, not the CSS file that calls it. Make sure to check that if it doesn't work right off the bat.
I've tested this plenty of times and it works like a charm.
Additional information:
If sometimes your styling appears and vanishes, try giving your element a position:relative and a specified z-index. The way CSS3 PIE works, it plays with the z-index and can make your styled gradients (and rounded corners, etc.) appear underneath the background if not specified, particularly if you use negative margins or something odd like that.
The only real solution might be to make your corners or sides images. Its looks as though everything is the same size just has an expandable width. so it should be farely easy to code with almost no lag time for load.
This is why I stick the the concept of using what is proven available. Meaning, if your target market is using IE7+ you should be conscious while designing and programming, so you dont run into small problems like this.
All this CSS3 and HTML5 is awesome stuff but we, as developers, are still limited to what everyone see's. If you want to have an even playing field for all users, then you can rely on new coding practices until you can do things, like border-radius, across the board in all browsers.
On the flip side, you might just not care about what IE users see; therefore you can just have the different style as a browser enhancement, for people who use the other browsers.
Take a really wide image of that red gradient with the proper 4 corner cutouts, save it as an image (transparent PNG on corners since you are not supporting IE6).
For each of those header areas you will wrap it like so:
<div class="outer"><div class="inner">ENQUETE</div></div>
You set this image as background on both of those elements, offset one of them so you can get the image endcaps on both beginning and end. Adjust the spacing/shift until you are clear on both round segments.
.outer {
background: transparent url(redgradient.png) no-repeat 0px 0px;
margin: 0 10px 0 0;
}
.inner {
background: transparent url(redgradient.png) no-repeat 100% 0px;
position: relative;
left: 10px;
}
Hit the exact same issue and gave IE<=9 via conditional comments a fall-back. However, this solution is now broken with the latest IE10 prev4 still not supporting border-image and also does not support IE conditional comments. Back to the drawing board...
Working on the solution we should really use: feature testing.
Using Modernizr which adds CSS3 class names to html tag and testing for border-image (do things the web standards way) or no-border-image (give IE users the best you can do but not the same experience as compliant browsers and display an IE visible only link to your page that tells them how to get a better experience: drop IE for example).
No, but the ie-css3.htc thing may be the only possible work around if that's the one I'm thinking of. Or was there another js script I'm thinking of that solved this? Can't remember.
I know it's possible with jquery to make something that looks like a select box so I can make it look however I want. However, with just css, how much control do I have?
I use border, padding, and width, and the end result looks great.
The only thing that bothers me is the part that drops down. Is there any control over this? (It looks dumb to have padding and on the drop down list have none).
You have some control, but there is quite a bit of variation between browsers and operating systems. For example, Internet Explorer on Windows will always show the standard grey down arrow, even though you can re-colour this in other browsers.
As for the part that drops down - these are option tags, not select; so to change them you'll be applying styles to the option tag instead:
select {
border: 1px solid red;
}
option {
background-color: blue;
}
Luckily some other people have done some research detailing what works and what doesn't, so here are some resources for you:
Styling form controls in general: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
Selects specifically: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
Browser comparison: http://www.electrictoolbox.com/style-select-optgroup-options-css/
The jQuery time-picker plugin that I wrote uses a div as the containing block for the list of times, and on Mobile Safari there are no scrollbars to indicate that there are more available times than are visible. I know about using two fingers to scroll within the div (on the iPad at least), but that only works if the user knows that there is more content to scroll to, and there's no indication that there is. So, my question: Has anyone been able to get scrollbars to show in Mobile Safari? How'd you do it?
Assuming you are using iOS5.0 or later, I think you have to use the following:
-webkit-overflow-scrolling: auto (this is default style)
auto: One finger scrolling without momentum.
The other available style is
-webkit-overflow-scrolling: touch
touch: Native-style scrolling. Specifying this style has the effect of creating a staking context (like opacity, masks, and transforms).
Using touch mode, the scrollbar will be visible when the user touches and scrolls, but disappear when not in use. If you want to make it always visible, then this old post will help you:
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
Another Piece of Code for Thumb by #BJMC:
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Original Source
Edit: with respect to this demo's behaviour, you should use jQuery because it will help you a lot, $(document).ready(function(){//your code with timer}) code with timer will need to reset the CSS property to normal after desired time(let's say 5 sec.)
For the demo( that you have described), this is initiated with the onhover event, please check this fiddle I have created for that.
That reproduces the results in a desktop browser, and will also work in iPad, just add your timer code to suit your requirements.
Regarding the original question: the best solution to have scrollbars would be to use an external library (already recommended iScroll is good, but even jQuery UI itself contains scrollbars). But displaying ever-present scrollbars might deviate from the general iOS UI (see below).
Alternative would be to indicate with other GUI elements that the content is scrollable. Consider small gradient fields in the end of the element (the content fades to background there) that suggest that content continues when touched and scrolled.
In iOS5 overflow: scroll functions as expected, i.e it allows the the div to be scrolled up/down with one finger within the area specified by the dimensions of the div. But scrollable div doesn't have scrollbars. This is a bit different from the general UI in iOS(5). Generally there are no scrollbars also, but they appear when user starts scrolling a content area and fade out again after the touch event has stopped.
To answer Sam Hasler comment above.
Nicescroll 3 is a jquery plugin that does just what you want with fade in/out effect and work in all major Mobile/Tablet/Desktop browsers.
Live demo
Code:
$(document).ready(function() {
$("html").niceScroll({styler:"fb",cursorcolor:"#000"});
$("#divexample1").niceScroll();//or styles/options below
$("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
$("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
});
If you want to have the scroll to be always visible,
Do not set -webkit-overflow-scrolling: touch
then set custom style for scrollbar
::-webkit-scrollbar {
-webkit-appearance: none;// you need to tweak this to make it available..
width: 8px;
}
You loss the momentum effect, but scrollbar will always be there.
(tested under iPhone 4/ iOS 7)
Mobile safari, as far as I have seen won't support scrollbars.
The best plugin I could find to get the job done is this.
Its Demos are available here.
It also has multiple predefined skins to suit your application.
here's a sample of what you'll get -
By convention, scrollbars are not used on iOS.
For a div with overflow: scroll, the only native way to scroll is with two fingers.
You might take a look at iScroll, a JavaScript library which handles touch events and implements single-finger momentum scrolling (what users generally expect in native apps) for divs.
until ios5 you could not scroll internal divs - so you probably are not seeing a scroll bar when you try to scroll because there isn't one.
I haven't tested on ios5 but supposedly scrolling internal divs now works.
If it isn't an internal div then you should be able to see the scroll bar when it is scrolling only - this isn't just on ios anymore - lion has gotten rid of all native scroll bars too. You can only see them when a window is scrolling or when the window is first loaded.