I'm building this page: http://ss.rsportugal.org/
As you can see, there are two 10 pixel shadows in the page. One just bellow the menu and the other just above the footer bar.
These shadows are made using box-shadow: 0 0 10 rgba(...);
It works as expected in WebKit engine and for some reason that I am unable to figure out and I could use some fresh eyes on this, Gecko and Opera add 5 extra pixels to #header width and not to #footer-container, making a horizontal scrollbar appear on the body. Also works fine if I remove the box-shadow but I kind of want to keep it. ):
Thats because youve set the width to 100% so after the box-shadow is added its 100%+10px (the 10px beign divided between the two sides). If you used position:fixed; on the header as well you wouldnt have the issue. Its doing the same thing in Safari by the way, so webkit IS effected. What you could do is wrap them in a container and set that to 100% with overflow:hidden then on the inner element make it also 100% with the box shadow as desired.. this way it will get clipped off the left/right sides.
Something like:
<style type="text/css">
#header {
background:none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
left:0;
overflow:hidden;
position:absolute;
top:0;
width:100%;
z-index:4;
}
#header-inner {
width: 100%;
-moz-box-shadow: 0pt 0pt 10px rgb(0, 0, 0);
}
</style>
<div id="header">
<div id="header-inner">
<div id="logo">
...
</div>
<div id="menu-background"></div>
<div id="menu-wrapper">
...
</div>
</div>
</div>
Try checking box-sizing property.
Webkit uses different box-model for box-sizing than FF. IE differ from both.
Ensure you declare the same kind for all browsers, and everything should be processed in the same box-model, thus, not making any disgusting surprises.
It looks like you've already fixed the site, but it sounds like this is a known bug that I landed the fix for last week (so the fix should be in Firefox 4 beta 8, though we haven't shipped beta 7 yet).
Related
I have added a sticky footer to a SharePoint master page using the flexbox method, and it is working fine in all browsers on Windows, but does not work correctly for Safari or Chrome on OSX.
The HTML is roughly as follows:
<body>
<form>
<!--
a whole bunch of SharePoint stuff here that I can't mess with
-->
<div id="s4-workspace">
<div id="s4-bodyContainer"></div>
<div id="footer"></div>
</div>
</form>
</body>
And my initial CSS is this:
#s4-workspace {
display: flex;
flex-direction: column;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
}
Now after searching around a bit I found this question, and based on that I started playing around with all kinds of vendor prefixes, and I even realized that the way I was using the flexbox was maybe a little unorthodox. Instead of having the main content div #s4-bodyContainer grow to use extra space, I was getting the footer div to expand it's top margin up to fill any extra space, which I guess flexes the #s4-workspace to fill the viewport if necessary.
So then I tried adding
#s4-bodyContainer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
But that didn't help either (and actually started causing problems in IE on Windows, which had worked fine before).
The behavior that I'm trying to fix in Safari and Chrome on OSX is this:
When the page renders, it seems as though the footer calculates it's top margin based on the viewport. It is always initially sitting at the bottom of the window, as if it was the case that there was little content and it should push down to the bottom of the window. But this happens even if there is a lot of content flowing underneath it, and it really should have pushed down to below #s4-bodyContainer (out of the viewport). If I scroll the page, it just sits on the page exactly where it was initially drawn and remains covering whatever content was under it on the initial rendering.
What can I do about this? What secrets are out the for getting flexboxes working correctly on OSX?
Found the answer here.
Apparently (should I say unsurprisingly?) there are some bugs in the way certain browsers handle flexboxes.
I was able to get the behavior I wanted reliably across IE, Firefox and Chrome on Windows and Safari, Firefox and Chrome on OSX with the following:
#s4-workspace {
display: flex;
flex-direction: column;
}
#s4-bodyContainer {
flex: 1 0 auto;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
flex-shrink: 0;
}
This HTML-Code...
...works with this CCS-Code...
a.testclass
{
background: transparent url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
...in Firefox 12 but not in Internet Explorer 8.
The code is inspired by this question regarding anchors, sprites and CSS. I've found a similar questions, but since this code is placed within a rather complex Drupal installation, I still hope that there's an easier way to fix this issue than going through the code to find some "absolutely positioned outer div and some menu styles", which had been responsible for the issue in 2.
Thanks for your help.
Edit-1:
This is the Firebug HTML-Log:
<div id="banner-area">
<div id="banner-left">
<div class="region region-banner-left">
<div>
<a href="LINK">
<img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
</a>
</div>
</div>
</div>
<div id="banner-right">
<div class="region region-banner-right">
<p>
<a class="testclass" href="LINK"></a>
</p>
</div>
</div>
</div>
The referenced CSS-Code is:
#banner-area {
width:756px;
margin:0;
padding:0;
overflow:hidden;
}
#banner-left {
width:378px;
float:left;
margin:0;
padding:0;
}
#banner-right {
width:378px;
float:right;
margin:0;
padding:0;
}
The first picture (IMAGE.GIF) is shown in FF and IE8. The second hoever, the one i'd like to replace with a sprite, is only shown in FF but not in IE8.
I've turned transparency on and off as Florian suggested, but to no effect. I've reduced the image size by 10px in width and height, but that didn't help either.
After two days of wasted time I've found out that IE8 doesn't import more than 31 css-files: http://drupal.org/node/228818?page=1
After enabling the "optimize css-files"-feature again in the Drupal administration panel of my installation, which I had turned off so it doesn't interfere with my development, everything worked fine.
This question is related:
IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
so change your code to:
a.testclass
{
background: url(sprite.png) no-repeat -125px -671px;
display: block;
width: 378px;
height: 150px;
}
if you really need to erase that background-color (and therefore setting it to transparent) try other settings like
a.testclass
{
background-color: transparent;
}
However, IE8 does not like that so be aware to have some fix included for IE8.
In the following scenario, we see two divs with applied CSS3 3D transformations within a container.
Both should fire a event when they are clicked. In this case an alert is shown, indicating which div was clicked.
<!DOCTYPE html>
<html>
<body>
<div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;">
<div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;">
</div>
<div onclick="alert('2');" style="-webkit-transform: translate3d(200px, 0px, 100px); background-color: red; position: absolute; width: 100px; height: 100px;">
</div>
</div>
</body>
</html>
The problem is now, that only the second div shows the desired behavior.
Clicks on the first div don't result in as shown alert (tested on the latest safari, chrome and safari iOS).
As soon as I change the negative z value from -100px to 0px or a positive value, everything works fine.
Is this a bug of the browser?
And is there any way to achieve the desired behaviour?
I've seen this problem before:
CSS3 transition problem on iOS devices
Webkit Mobile doesn't like negative z-index values coupled with 3d transforms. The W3C states that the z-index must be an integer http://www.w3.org/TR/CSS2/visuren.html#z-index, but in practice—because of legacy issues with Firefox and now Webkit— it's better to stick to positive numbers.
Add a positive translateZ to the clipped object's parent element to compensate for the negative value of the child. This translates the items above the body element's (z:0) browser plane, which is stopping click and hover events when the div goes negative relative to the browser Z plane. This only appears to happen in Chrome and Safari (and in mobile Safari as well).
I don't believe it is necessarily a bug if you think of the body as the last event handler.
On parent DIV, change -webkit-transform-style: preserve-3d; to -webkit-transform-style: flat; it works fine for me.
Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.
Any way to fix this without setting the image as a background image or processing it before I put it on my site?
Workaround: Set the image as the background of a container element, then add border radius on that element.
Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.
--edit
OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:
img {
border: 10px solid white;
-moz-border-radius: 10px;
}
But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.
I think to have the answer but sorry for my english...
I resolved the question putting another div with border and no background color over the image.
#imageContainer {
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:1;
}
#borderContainer {
position:absolute;
border:1px solid #FFFFFF;
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:10;
}
Workaround: Set the image as the
background of a container element,
then add border radius on that
element.
This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.
So I agree with Alex, that is if you make the image the size of the div/other elm.
I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.
So that looks like this:
<div id="container">
<img src="images/fubar.jpg" alt="situation normal" />
<div class="rounded lt"></div>
<div class="rounded rt"></div>
<div class="rounded lb"></div>
<div class="rounded rb"></div>
</div>
Then the CSS:
#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.
Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.
.round_image_borders {
position:relative; // fix for IE8(others not tested)
z-index:1; // fix for IE8(others not tested)
width:114px;
height:114px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior:url(border-radius.htc); // fix for IE8(others not tested)
}
I got the "border-radius.htc" script from this link:
http://code.google.com/p/curved-corner/
What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.
This works for:
FF 3.6.16
IE 8
Chrome 12.0
And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.
If you use overflow: hidden it won't display the image corners sticking out.
Who knows, they still might be there, just hidden.
img {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)
Is there a good cross-browser way to set a max-height property of a DIV and when that DIV goes beyond the max-height, it turns into an overflow with scrollbars?
Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:
div{
_height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:scroll;
}
Overflow:auto would most likely work in most cases for have any extra spill over.
I found this solution from a post made in 2005 (Min-Height Fast hack). It's a hack but it's simple and pure CSS:
selector {
max-height:500px;
height:auto !important;
height:500px;
}
The example is for max-height, but it works for min-height, min-width and max-width. :)
*Note: You must use absolute values, percentages don't work.
All you need now is the "overflow:scroll;" to make this work with scroll bars
selector
{
max-height:900px;
_height:expression(this.scrollHeight>899?"900px":"auto");
overflow:auto;
overflow-x:hidden;
}
Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?
Major hack (RedWolves-style):
.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
I was getting no love from the max-height attribute so I had this alreadyand succeeded with these 2 classes. But it's ugly so in searching for better hit this question. divMax having position:absolute lets content underneath show through but controls the ultimate height of divInner to 200px.
I found this from http://www.tutorialspoint.com/css/css_scrollbars.htm and modified a bit. It seems working for both IE9 and FF19
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
max-height:100px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height: 100px !important;
max-height:110px;
overflow:hidden;
overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>