I'm working on an interface and this thing is bugging me.
Please see: http://jsfiddle.net/NUKxX/
It works in Chrome but not in Firefox. The basic idea in Chrome is that the longest word in each columns stretches the td or th to appropriate length in order to preserve space. But in Firefox input elements seem to completely ignore max-width and min-width.
I tried fiddling around with position:absolute on the input and position:relative on the th but Firefox ignores the latter mentioned as well.
How do I make it work?
th input {
min-width: 10px;
max-width: 100%;
width: 100%;
}
Correct the problem here (FF 17.0.1).
Fiddle: http://jsfiddle.net/Regisc/PcKMJ/
Related
I'm building a flexible progress-bar with a number of constraints. It needs to be able to contain any number of items within it, have these items all be the same width, vertically centered, support content of varying lengths, work in IE9 and above and have an icon next to them without any additional markup. display: table-cell seemed to be the most appropriate solution for the potentially unlimited number of items inside as well as vertically aligning the text nicely, and :before would take care of the icon, which would also be vertically aligned with the top: 50%; translateY(-50%) method.
This seemingly works fine on modern browsers, as there's nothing particularly fancy here. However, in any version of Internet Explorer, this isn't going as smoothly as I'd like. If the items are of a variable height, the icons aren't vertically centered on anything but the tallest element. IE9 has support for translateY and it's been ages since we had difficulties with display: table/table-cell. Even IE11 can't make this work.
I have created a reduced test case on CodePen so you can see it in action:
Here's a screenshot of the method working perfectly in Firefox:
And failing in IE11:
I initially thought the failure was due to the height of the elements not being calculated correctly in IE, but the borders being uniform indicates that this isn't the case.
If I set the list items to display: inline-block and manually set their widths, the icon vertically centers as expected, but I'd like to retain the more flexible behavior of table-cell display, if at all possible.
Any insights would be greatly appreciated. Thanks in advance!
The issue seems to be with how IE is calculating the heights of the cells. Their heights seem to be based on the height of the contents, not the element itself. So I moved the relative positioning to the list itself as its intrinsic height should be consistent:
.progress-bar {
display: table;
table-layout: fixed;
width: 100%;
position: relative;
counter-reset: progressBar;
}
Then I positioned the check in a slightly different manner using your top offset of 50%, but leaving the left offset to “auto” and using negative margins to move it into place (since they have better backward-compatible support than transform), but that choice is up to you:
&:before {
content: "✓";
color: green;
display: block;
position: absolute;
top: 50%;
margin-top:-.5em;
margin-left: -1em;
}
I hope this helps.
Here’s the Codepen fork: http://codepen.io/aarongustafson/pen/PwPxEp
So I have a standard 960 width website where the content is, and I have boxes set up that are 300 width, and 10 margin on each side, so they will float 3 across. It looks fine in FF and Chrome, but why in IE does the 3rd box always jump down to the next line and throw off the positiong. It's like IE reads widths differently than any other browser. It is soooo annoying, is there any way to fix this?
You have to reset all elements before start (CSS reset)
Example : http://necolas.github.io/normalize.css/
Why ? : CSS reset - What exactly does it do?
As l2aelba says, you need to reset your elements. The problem is that each browser has its own set of default values for various elements. So IE might add padding that the others don't, making your elements too big to fit so they wrap around.
Resetting makes each browser display things as similarly as possible.
Without seeing your HTML and CSS there is no sure way to determine what your problem attribute is.
Solution:
Your problem is this line:
max-width: 68.571428571rem;
It is on ine 1967 of your css. It is overriding your 960 width, because that value is actually smaller than 960px, because it comes second. Not even sure why you have that in there...
After looking at your site, you have this style in your style sheet
.site {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}
beware of em as it's calculated differently in different browsers, in IE it calculates to around 955.4px, which is why you're getting the wrapping.
Change the style to
.site {
margin: 0 auto;
max-width: 960px;
overflow: hidden;
}
and you should be fine.
A few other questions have already addressed how best to apply text-align: justify to get inline-block elements to spread out evenly… for example, How do I *really* justify a horizontal menu in HTML+CSS?
However, the 100% width element that "clears" the line of inline-block elements is given its own line by the browser. I can't figure out how to get rid of that empty vertical space without using line-height: 0; on the parent element.
For an example of the problem, see this fiddle
For my solution that uses line-height: 0;, see this fiddle
The solution I'm using requires that a new line-height be applied to the child elements, but any previously set line-height is lost. Is anyone aware of a better solution? I want to avoid tables so that the elements can wrap when necessary, and also flexbox because the browser support isn't there yet. I also want to avoid floats because the number of elements being spaced out will be arbitrary.
Updated the "Future" solution info below; still not yet fully supported.
Present Workaround (IE8+, FF, Chrome Tested)
See this fiddle.
Relevant CSS
.prevNext {
text-align: justify;
}
.prevNext a {
display: inline-block;
position: relative;
top: 1.2em; /* your line-height */
}
.prevNext:before{
content: '';
display: block;
width: 100%;
margin-bottom: -1.2em; /* your line-height */
}
.prevNext:after {
content: '';
display: inline-block;
width: 100%;
}
Explanation
The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.
Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.
Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.
UPDATE for minified text (no spaces) issue
Kubi's comment noted that a minification of the html that removes the spaces between the <a> elements causes the justification to fail. A pseudo-space within the <a> tag does not help (but that is expected, as the space is happening inside the inline-block element), a <wbr> added between the <a> tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character --other space characters like thin space and en space did not work (surprisingly).
Nearing a Future Clean Solution
A solution in which webkit was behind the times (as of first writing this) was:
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE */
}
It works in FF 12.0+ and IE8+ (buggy in IE7).
For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit- extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.
Consider the following:
.prevNext {
display: table;
width: 100%
}
.prevNext a {
display: table-cell;
text-align: center
}
(Also see the edited fiddle.) Is that what you are looking for? The advantage of this technique is that you can add more items and they will all be centered automatically. Supported by all modern Web browsers.
First off, I like the approach of the pseudo-element in order to keep the markup semantic. I think you should stick with the overall approach. It's far better than resorting to tables, unnecessary markup, or over the top scripts to grab the positioning data.
For everyone stressed about text-align being hacky - c'mon! It's better that the html be semantic at the expense of the CSS than vice versa.
So, from my understanding, you're trying to achieve this justified inline-block effect without having to worry about resetting the line-height every time right? I contend that you simply add
.prevNext *{
line-height: 1.2; /* or normal */
}
Then you can go about coding as though nothing happened. Here's Paul Irish's quote about the * selector if you're worried about performance:
"...you are not allowed to care about the performance of * unless you concatenate all your javascript, have it at the bottom, minify your css and js, gzip all your assets, and losslessly compress all your images. If you aren't getting 90+ Page Speed scores, it's way too early to be thinking about selector optimization."
Hope this helps!
-J Cole Morrison
Attempting to text-align for this problem is pretty hackish. The text-align property is meant to align inline content of a block (specifically text) -- it is not meant to align html elements.
I understand that you are trying to avoid floats, but in my opinion floats are the best way to accomplish what you are trying to do.
In your example you have line-height:1.2, without a unit. This may cause issues. If you're not using borders you could give the parent and the children a line-height of 0.
The other options I can think of are:
Use display:table on the parent and display:table-cell on the children to simulate table like behaviour. And you align the first item left, and the last one right. See this fiddle.
Use javascript to do a count of the nav children and then give them a equally distributed width. eg. 4 children, 25% width each. And align the first and last items left and right respectively.
There is a way to evenly distribute the items but is a convoluted method that requires some non breaking spaces to be carefully placed in the html along with a negative margin and text-align:justify. You could try and adapt it the the nav element. See example here.
Your fiddle is awfully specific. It seems to me for your case this CSS would work well:
.prevNext {
border: 1px solid #ccc;
position: relative;
height: 1.5em;
}
.prevNext a {
display: block;
position: absolute;
top: 0;
}
.prevNext a:first-child {
left: 0;
text-align: left;
}
.prevNext a:last-child {
right: 0;
text-align: right;
}
As stated by #Scotts, the following has been implemented inside Chrome, without the -webkit part , which I really loved btw, specially since we need to get rid of the -browser-specific-shǐt real soon.
.prevNext {
text-align: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify; /* not implemented yet, and will not be */
text-align-last: justify; /* IE + Chrome */
}
Note: Though still the Safari and Opera don't support it yet (08-SEPT-16).
I think the best way would be to create the clickable element with a specific class/id and then assign float:left or float:right accordingly. Hope that helps.
So, I think this is a CSS issue more than anything, but basically, the HTML I've provided contains a fixed header table in a reactive layout.
Code:
http://jsfiddle.net/JpRQh/10/
There are 3 rows of data, but in IE9, it seems like table rows are crazy high, and the scroll bar hase been disabled.
The example that I followed on fixed header tables:
http://www.imaputz.com/cssStuff/bigFourVersion.html
has the same problem in IE9.
Any ideas on how to fix it?
EDIT: I promise the table scrolls if there is enough data. But i only included 3 rows for example.
This is the rule that causes the trouble in IE. Live example: http://jsfiddle.net/JpRQh/12/
html>body tbody.scrollContent {
margin-top: 24px;
padding-top: 8px;
display: block;
height: 400px; /* If you delete this rule you will see the table rows return to their normal size */
overflow: auto;
width: 100%
}
Styling a scrolling tbody and fixed headers etc. tends to cause a lot of issues with cross-browser compatibility. You might look at this link about cross-browser scrolling tbody.
This however seems to be the best looking cross-browser solution. You will need to inspect the CSS.
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/