I have some setup, I have replicated it here: jsfiddle.net/vtWsU/9/
Basically there are list items and in every one (not neccessary) there is 1 or 2 'a' tags. I want 'a' tags to float on the right on the same line. It works fine in IE9 and IE8 (its messed up for some reason on this fiddle example in IE8 but I got it working in my full example) but IE7 is still a problem.
I would like to get this working without adding new elements in the dom if possible.
Thank you!
Here is my workaround for your issue: http://jsfiddle.net/vtWsU/13/
First I added a css style for .playlistNonSelected and set the float to 'left'. This places .playlistNonSelected to the left within the list element.
And then I set for .playlistItem 'display:inline-block' and 'width:100%'. It is necessary because it will prevent the elements within the list from collapse as it was before.
I guess that's all what you need.
Related
I've been using ng-repeat to construct tables for a while now, and this is the first time I have this problem,
ng-repeat="users in [].constructor(10) track by $index"
basically all the elements generated by the ng-repeat get ignored by some css (borders of the container) and the DIVS below, which have position relative, ignore the newly generated elements, and position themselves just after the original element that gets repeated with ng-repeat.
why is that?
I used the ng-repeat in the same table, above for the rows, and I don't have this problem, any clue?
https://jsfiddle.net/buwgq14a/28/
here a fiddle with everything, you can see the last section, footer, is in the middle, because it positions itself just after the first element of the ng-repeat, while the rest gets ignored and doesnt even get the borders!
thank you so much
ok, solved by myself, stupid mistake, I was giving a set height of 35px to the container of the ng-repeat, instead of putting 'height: 35px' to the row container... after putting 'height:100%' it fixed everything –
We are trying to create a menu style layout. I'm using a css-columns properties to achieve the effect of columns. The content is variable, so we'd like to stick to this solution because we want the browser to organise the content for best fit.
In the example below we are seeing some odd behaviour in Chrome (Version 32.0.1700.77) and some different (but equally odd) issue in Firefox (Version 24.0) so I'm assuming it's our implementation.
In Chrome, we see a large gap underneath the first column as if it's placing the 3rd LI there to start off with, then moving it to the top of the second column at some point in the render process.
In Firefox, we see the H3 "scrambled egg" being left at the bottom of the first column, when the rest of the 3rd LI's content moved to the top of the second column.
Live Example: http://codepen.io/daviddarnes/pen/BeEIp
Speculations:
- We are using "break-inside: avoid;" on every element inside the OL. This could be causing the issue, but we can't seem to rectify it.
- Based on the H3 issue... might be something to do with that? Or the elements near to this H3 tag.
The point of the page-break properties is not to shrink content to fit on a page, but to help decide the optimal place for a page break to occur.
So, if you use 'page-break-inside:avoid' on an element, and there's not enough space on the current page to fit the entire element, the browser will consider inserting a break so as to force the element onto a new page, theoretically giving it more space.
However, if the element is so big that moving it onto a new page won't help, then there's nothing to be done (in terms of page breaks at least).
If you know in advance that your content will need to be shrunk when printing, you could try adding a scale transform on the problem elements (restricted to the print media type), so that they're a more manageable size.
Is this of any help to you?
I set up a search box using divs and floats to create a multiple column layout. My IE 7- clients see a line break between the filter-label and filter-input-controls.
They have corporate policies that won't let them upgrade or use Chrome or FF. I tried using a clearfix and a comment before the doctype. No luck.
jsfiddle here
Consider using LABEL tags and a styled, unordered list, as a container for your form elements. This results in cleaner code and it makes more semantic sense.
See: http://alistapart.com/article/prettyaccessibleforms
It looks to me like your "Deviation Status" span is in a different div than your select, one would expect them to be displayed in different block elements. As I don't see "display:inline(or inline-block);" anywhere in your CSS, it doesn't look like you are accounting for this default behavior..
Looks like your search box is too wide. Try adding a *width: to the containing div. The * is a filter for IE7 and below.
IE7 will need everything spelled out layout wise (width, height, float, etc). If one element is too large, it will break the layout. More modern browsers are more forgiving.
Please see this jsFiddle example for reference.
Most of us are fairly familiar with a simple technique to get CSS Colunms (2 divs side-by site) which involves floating one and pushing the other over using margin & width:auto followed by one of many clearing techniques. (Exibit A # jsFiddle Reference).
This Technique works fairly well and works nicely with all forms of clearing I know personally:
clear: both div at bottom of container
overflow: hidden for the container
Clearfix for the container
However the simple implentation of this works great when you know the width of the left element and want the right element to fill up the rest of it's container.
This technique works great in reverse too (float: right and using margin-right) with the caveat that you must put the floated (right) element first in the container for IE to render correctly. (Exibit B # jsFiddle Reference)
However, I've noticed a problem when we deal with nested clearing. (Aka Clears inside one of the colunms).
Once I put a clearing container inside the un-floated colunm (Exibit C & D) I notice some strange behavior in WebKit & Gecko browsers. The clearing element is getting caught on the outer float and clears the float from it's parent.
This does not happen when the master float is to the left. (Exibit E)
Is there a way around this, I'd like to continue using float: right on the known-width column if possible, this seems a bit strange that the one works and the other doesn't.
Also, strangely enough, this isn't a problem in IE9, (but is in IE 6-8).
For reference, this is the output of the jsFiddle as rendered by Chrome 17.0.963.46 on Windows 7 64bit:
Any Ideas?
Edit: I should note that wrapping the inner float with overflow: hidden seems to work, but it has it's own complications (such that it basically breaks anything with relative/absolute positioned components, DHTML Dropdowns. etc and isn't always a possible solution.
I could be missing something important here... but does this work?
http://jsfiddle.net/mikecruz/8Hnjg/
I found fixed header template and I want to use it in my website, I modified this template and make it in 3 column layout. My problem is the select element over in the fixed header in ie6. I used an iframe to fix this problem but no luck. Originally this template is a single column layout and fixing iframe works fine, but when I modified it in 3 column layout, it doesn't work anymore. If you need to see the code then I will post it.
Any help would greatly appreciated.
Thanks in advance.
here is the link of single column layout which select element under fixed header in ie6
http://webberzsoft.com/clients/csslayouttest/fixheader_center.php
here is the link of three column layout that I was modified which select element became over fixed header in ie6
http://webberzsoft.com/clients/csslayouttest/template_fix_header.php
Do you mean the select element in the first column?
If so your fixed header is getting in the way. I noticed this with the first link you had as well, try to select text on say the first line (you can't).
Try some other layout, like CSS Play or Fixed tables.
Personally I would just make a table, 100% height and width of body # [0, 0].
Then set the header to a certain height, add a single row with 3 columns , space them as need be, and be done. Or if your feeling lazy those links are right there.
Hope this helps