I'm having a problem with border-radius on Chrome (latest build). I have a border-radius: 10px; on the slider frame from this page: http://next.lab501.ro/
In Firefox and IE9 everything works, but not on Chrome and I can't figure it out why, because I have other elements with border-radius that work just fine in Chrome.
I've checked using Safari's "Web Inspector", and your CSS is definitely being successfully applied to your container.
I think the problem is related to the contained content of an element with border-radius "breaking out" over the container's rounded corners. See this article for more background. I believe the problem was first properly reported by Richard Rutter.
In your case, you are already using overflow: hidden on the container, and that's not working -- this may be related to the z-indexes you've got going, but it's hard to tell with such a complex example.
I would try rounding the corners of the contained elements that appear to be overflowing, though. This seems to work for me on that page:
dl.slidedeck {
border-radius: 10px;
}
div.sd-node.sd-node-caption {
border-radius: 10px;
}
Related
I'm learning how to use the Skrollr.js library. Awesome cool tool on using the scroll bar in the DOM to manipulate the appearance of a web site. It does have a bit of a steep learning curve to understand exactly how it works. I'm playing with a simple sample. I have an image that I want to stay on screen in the background for 500% of vertical height. I have other text items that I want to scroll in the foreground. I wanted to do a test and have one of the text items fade to zero.
helpful references: Classic Parallax Scrolling Example, and I Hate Tomatoes Example
I've got an image in a div loaded in a position: fixed; location, and a few divs in the scrolling area below <div id="skrollr-body"> I have a text header that I wanted to fade to zero as I use the scroll bar. Note: I started skrollr.init() without any arguments. Also, I am not using jQuery at all.
My problem is it works erratically on Chrome, and works just fine on Firefox browser. I'm at a loss to figure out why?
I've created a jsFiddle to exhibit the issue. http://jsfiddle.net/q3z3v6op/4/ Fiddle works the same as my test program; Flaky on Chrome, okay on Firefox. When looking in the Chrome dev tools, you can easily see that the red box text opacity value is changing correctly to zero as the box goes towards the top of the display, but the actual display doesn't fade most of the time. I can get it to work if I go to the Chrome Dev tools, open up the drawer (where the console / search / emulation / rendering tab is), then select 'rendering' and click on [ ] Enable Continuous Page Repainting.
Anybody else been here? Any ideas what's going on with this issue? Many thanks.
I updated your fiddle. This is a little bit of a different approach, but it should be more cross browser compatible. I guess Chrome does not like display: block and opacity: 0. This looks like a bug. I tested in on Safari (which is also WebKit) and it does not have a problem. By using inline-block I was able to fix the bug on Chrome.
http://jsfiddle.net/christianjuth/q3z3v6op/5/
Fixed code:
.hsContent {
display: inline-block;
position: absolute;
left: 50%;
width: 400px;
margin-left: calc(-200px - 8%);
color: #ebebeb;
padding: 0% 8%;
text-align: center;
}
I've created a jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/2/
its all about the css styles
div.ding-wrap {
position: absolute;
}
As you can see there is an image well positioned if you open it with chrome or any other normal browser.
But if I open it with internet Explorer the image is gone! I need to change the positioning of ding-wrap to relative.
i would do so, but then my animations (not there) does not work very well. So I need the positioning absolute. How can I teach IE to take me serious?
Thanks, Falk
jiangshui gave a push in the right direction. I stopped centering via table and table-cell and used
margin: auto;
height: 100%;
for centering. Sadly, always if I googled vertical centering, everywhere I read only about the first method because the auto-margin shouldnt work. And I never tried. So thanks a lot to jiangshui!
Here the updated jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/5/
I've been trying to format the appearance of the RSS button in css, and for some reason there's a big difference between browsers. Chrome renders it perfectly, as if I don't need to mess with it at all. But on Firefox and IE9, it is uneven with the rest of the menu. So I added padding to even it out, and to elongate the hover colour to the bottom of the menu bar. That fixes the issue on Firefox, but it makes the menu uneven in the opposite way on Chrome. Suddenly the bar is too long for the other menu items.
.menunav a {
padding-right: 6px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
font-size: 100%;
}
.menunav-rss:hover {
background: #ff6600;
font-size: 100%;
padding-top: 3px;
padding-bottom:3px;
}
This is coming from a wordpress site. I'm quite new to css or coding, so I'm not entirely sure how to amend this. Fixing one seems to make the other worse, and I'm not sure why only the rss button is uneven.
For reference, this is what the menubar appears without any padding on both Firefox and Chrome.
Any help would be appreciated. If you need more information, I can easily give it.
Its due to browsers having different "preset" values. Think of it as each browser having their own stylesheet that gets applied before yours.
The only workaround really is to use a CSS reset. Eric Mayers is considered to be the 'goto' one, and covers pretty much everything you'd want it to.
Simply load the reset before your own styles, and then you should be able to adjust everything to look more or less the same across all browsers.
It's a bit of a pain to have to do it, but you shouldnt really rely on the browser's built in default styling.
I've run into the same issue multiple times. I've found that setting vertical-align: top makes it look the same in both FF and chrome (probably IE9 as well, although I haven't tested that), after which you can add padding-top to position the text within the anchor exactly where you want it.
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
I have researched this and found some IE CSS bugs, but none of the known fixes seem to cover this scenario.
This site went live today and the issue that was found is that the logo does not display in SOME versions of IE8. If the person resets IE to factory settings it works, but otherwise the logo is invisible.
Site can be seen here: http://www.ethicsgame.com/exec/site/index.html
CSS to display the logo is
h1 a {
background:url(images/logosmall.gif) no-repeat left center;
padding-left:325px;
text-decoration:none;
color:#1f396d;
position:relative;
top:45px;
left:15px;
width: 325px;
}
it seems to be working fine on my IE8, have your tried adding display: inline-block to its css? Also, for good measure you could throw a inside the a tag.
so you get:
<h1> </h1>
just so it has content...
good luck -ck
Looks like a difference in spacing with IE8 vs Chrome. Check it out in the fiddle: http://jsfiddle.net/5Vt3f/.
Basically your image is probably displaying, just too far to the left that it's not visible.
Also, you have "left" and "center" on the image. This is conflicting. It's either left or center.
Mary,
This has to do with the fact that A tags are inline elements. in IE < 8, the height/width of the element isn't getting rendered--so it's collapsing and becoming invisible. Adding display: block; into your CSS declaration for this element will fix this in IE < 8. You'll want to apply this same principle to other inline elements that you're trying to get to behave more like block-level elements (setting width/height/margin/padding is usually a good hint on this behavior).
If you don't need to support IE 5.5 (which most people don't nowadays), you can also use display: inline-block; (keep in mind that IE 6-7 only support inline-block on elements that are natually inline elements, such as A, SPAN, STRONG, EM, etc.). You can find much helpful compatibility information here:
http://quirksmode.org/css/display.html
You'll probbaly also notice that once you change that display type, the padding which isn't being rendered will be--so you might need to change that markup a bit to compensate.
Using the Developer Toolbar in IE is a great way to test old versions, as well as test these solutions in the older versions.
It works perfectly alright on IE8 but if does not show earlier versions of IE then replace center with left in background attribute.
background:url(images/logosmall.gif) no-repeat center left;
ie8 doesn't support background image position, in your case "left center". If you remove "center left" it should work. You might be able to specify background image position if you specify !DOCTYPE