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
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 am creating a webpage off of this bootstrap model. The problem I am facing, and what I cannot figure out, is why the two companies inside the span10 class do not take up the entire row?
The easiest way to understand this would be to first look at this fiddle. Then, do an inspect element on the company row. Notice that the span10 div is taking up the correct width (its going to the end of the page). However, the two span5 divs inside of that should be taking up the entire width inside the span10. At least, according to my understanding of the bootstrap scaffolding, they should be. (I may be mistaken). In any case, they are not taking up the whole width as I believe they should.
The CSS in the fiddle is copied straight from an uneditted bootstrap file. So the css should not be the problem (with version 3 coming out, I was having trouble pulling from the bootstrap server).
Also, the problem is not (I dont think) having a row within a row, because if you look at the bootstrap example page I provided, that is what they are doing and it is working for them :).
If it is unclear what I am asking, please ask questions and I will reply promptly!
Thanks
Bootstrap uses a 12-column grid layout, so use .span6 if you want two columns to take the whole width of the row. Every new row inside a column will be treated as a full 12-column grid.
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.
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.