I'm working on a table that has cells requiring a background with lowered opacity, and text on top not effected by the background. The content in the cells is dynamic.
http://jsfiddle.net/6zszm/3/
In IE9 (have not tested in other IE versions) the background is clipped at the span content. In firefox, the background runs wild and overflows to bottom right. In chrome this works like a charm.
Some similar questions that didn't quite cover it:
How to make <div> fill <td> height
Someone suggests a 1px height to the td - this did not work for me, nothing changed. I would also rather not use JS to fix this problem.
Another somewhat related issue: CSS absolute positioning bug with IE9
The strange thing is in IE9, this worked in compatibility mode, but not without.
This is indeed seemingly impossible - unless you specifically define each cell's width and height, which kind of defeats the object of using a table.
Possbile solutions...
RGBA
Assuming you are going to use background colours you can always use background-color: rgba(200,200,200,0.5) with a fallback to solid colours if it fails. Support for RGBA is in all of the top browsers, it doesn't work for IE8 and below however...
Transparent PNGs
The obvious easy one is to fallback to using transparent PNGs, but then this relies on the colours you are using being predefined and rather rigid.
Use -moz-element
Another mad solution to get FireFox to work (if you are using background images rather than colours) would be to use the background: moz-element() ability. Here you create hidden elements on your page of each different opacity that you might require and reference them as a background via id. For example:
<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>
Then reference that on the element you want the background to appear on:
<td style="background: -moz-element(#image1);"></td>
I'm not vouching for this method however, it's rather inelegant and browser specific. Tbh I'm quite suprised to find that this problem is indeed not fixable (esp. in FF) using plain old absolute and relative tricks.
Don't us Tables
The more browser supported solution by far would be to drop using tables and recreate a table structure using good old divs and floats. The only problem with this solution is again you'd have to define most widths and heights and you wouldn't be able to achieve vertical cell alignments unless you fallback to something even more experimental like FlexBox.
You could try working with a CSS framework, like LESS or Blueprint. Most frameworks have background code that makes your styling look the same in all browsers, even if tweaking would normally be required.
Related
Imagine CSS like:
.x {
background: blue none;
border-radius: 6px;
}
and HTML like:
<div>Words and <span class="x">decorated</span> words</div>
The height of the span reading 'decorated' is going to vary wildly between different browsers, and between different OSes running otherwise the same browser.
Is there any way to make it be the same height?
(I don’t want to move to inline-block or sacrifice the text using exactly the same baseline.)
My experience with avoiding of different height is setting exact line-height and font-size
Sounds like there is something else causing your problem. I just tried a basic html5 document with the snippits from your question and compared the alignment on Windows with Chrome, Safari, FF & IE. They all rendered exactly the same except for IE9 which had a 1px gap above the span only.
Granted Mac renders fonts differently from Windows, and I didn't test on linux or mac, but 9px!!!??? Here are some things I'd investigate:
First, try a basic test file if you are working in a larger project, this will limit your variables.
Second, try setting explicit fonts and ensuring they exist on all of your test machines - perhaps linux is falling back to a different font.
Third, make sure you are not zoomed in or using a custom font size browser setting on any of the browsers (I ran into this one a while back where somehow my IE was set to 105% zoom.)
Finally, if all of that fails, you might want to try using a web font (#font-face) and see if that renders more strictly.
Edit:
In lieu of the new information in your comment, another strategy would be to use JavaScript to inspect the rendered heights of some off-screen elements and then programmatically adjust styles accordingly. You'll probably get a huge FOUC, but you can use a whiteout div to minimize the shift.
I have a layout in which two divs appear stacked vertically inside a parent div which will be a specific height (due to containing a left hand menu). I wish the two divs to take up all the available vertical space. However, they must resize depending on their content. The easiest way to explain is with a diagram:
Reading the diagrams from top to bottom, this is the scenario:
both divs take up 50% of available height as this is sufficient to contain their content (this is the default).
there is a lot of content in top div and less content in bottom div. Top div expands to fit content and squashes bottom div.
reverse situation of (2).
both divs must expand to fit their content. Containing div must expand to accomadate.
I think I could figure out how to do this with a table, see the example here which is almost correct (in chrome anyway) except the outer div doesn't expand properly.
Is there a better CSS solution to this without using a table?
I cannot use JavaScript and solution must work in all browsers... including IE6 :(
.
This can be done using CSS, with a feature called the flexible box model. It's an extension to the box model that's been in use in CSS since the begining, and allows you to do stuff like vertical stacking, etc, which wasn't possible before.
You would start off with display: flexbox;, and then use other related styles to define the characteristics of the layout you want. It is very powerful. You can read the full W3C spec for it here: http://www.w3.org/TR/css3-flexbox/
Now the bad news: It's a very recent addition to CSS. It actually has reasonably good browser support (albeit with vendor prefixes), but the problem you'll always hit is that it isn't supported in IE, not even IE9 (though it is planned for IE10)
Other browsers require vendor prefixes, so even for supported browsers you'll need to write your styles in four or five versions.
In addition - and this is the real killer - there isn't a good fall-back solution for browsers that don't support it. If you design your page using flexbox layouts, and load it into a browser that doesn't support them, it will be a disaster.
For this reason, it is hasn't really seen much use in the real world yet. It's time will come, but as long as IE9 and earlier are in use, it won't become mainstream.
You can see a full browser compatibility chart for the feature here: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module
In the meanwhile, you're going to have to use a Javascript solution.
My recommendation is the JQuery Masonry plugin. I think this will be your best solution for now.
You could fake it using a 100% height wrapping div and a white border like so:
http://jsfiddle.net/cBV88/2/
You can also remove the fixed height and it will still work.
SuperStretch might get you part of the way there.
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).
I use css to apply rounded corners to li navigation elements. This elements have a border too.
So this is how it looks like:
Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.
Any idea how to fix that? Do I have to use bg-images?
Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.
Yes it can be done using this jquery plugin.
http://jquery.malsup.com/corner/
No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.
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.