How do I center the counter in IE7? - html

Have a look at the link below. Works fine in all other browsers but not IE7.
http://www.sonnyt.com/countie/
Now go to this site and paste the link into the box to see how it views in IE7
http://netrenderer.com/index.php
Any ideas how to make it work in all?
Just the counter element that I need to be centered.
Thanks

Add a width to #countdown and then set the left and right margins to auto. Chrome reports the counter width to be 697px, so this should work:
#countdown {
width: 697px;
margin: 0 auto;
}

display: inline-block only works on elements with natural display: inline in IE7. There are several possible solutions, but I'll give two:
Remove float: left from <li> elements and use display: inline instead, plus margin: 0 auto on the <ul> (which must be display: block).
Stop supporting IE7

Related

How to center a floated list?

This is what my page looks like:
Now when I add another post:
It is aligned to the left, but I want them to be centered.
How can I center them?
#demo {
float: left;
margin: 0 auto;
width: 980px;
list-style: none;
}
#demo li {
background: #fec722;
float: left;
margin: 10px 0 10px 15px;
width: 178px;
}
#demo img {
height: 243px;
margin: 3px;
width: 172px;
}
<ul id="demo">
<li><img src="http://goo.gl/0nSAIH"></li>
<li><img src="http://goo.gl/0nSAIH"></li>
</ul>
(JSFiddle)
All you really need are two lines of code (and you can get rid of all the floats and clearfix divs):
#shelf {
display: flex;
justify-content: center;
}
Revised Fiddle
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer. More details in this answer.
You just can't float something to the left and align it to the center at the same time.
What I recommend you here, is to avoid the float, and instead set display: inline-block; to the li's. That, in addition to a text-align: center; to the ul makes the trick.
Here's the jsfiddle updated: https://jsfiddle.net/jormaechea/tm91znz2/5/
Look Here It is not identical, but it's a start.
A few things worth mentioning
ID's must be unique to one element, you had multiple list items with the same ID.
To align an element horizontally, it needs to have a display of block, a set width, and a margin on the left and right of auto. This will not work on floated elements. You can also control inline elements with text-align.
Avoid floating elements about the page. Floats are over used, there are much better options to aligning content.
First, about the floats
Stay as far away from floats as you can. They will cause problems with your layout unless you are experienced in their use. 90% of the time, if there is a problem on a page with floats, the floats are the problem. Instead, you should use display: inline-block, it's the best thing since sliced bread.
Floats can be useful for things like putting an image in a paragraph of text, then allowing the text to flow around the image naturally. Other than that, you can probably find a better way to achieve what you're after.
Next, the spacing
So you have some spacing problems. In general, stay away from margins as much as possible (kind of like floats, but not as bad). Margins add to the box sizing, instead of being included in it, as well as they can do other funky things in different situations. If you have to use a margin, use a margin, but try to avoid them. Instead, use padding where you can. You can utilize a container element, then apply padding to it in order to give the appearance of a margin.
When it comes to inline-block elements, space between the tags in the HTML itself will be rendered as a single space. To get around this, set the font-size of the parent to 0, then reset the font-size on the child elements (the default font-size on all modern browsers is 16 pixels).
Lastly, the alignment
Once you've taken all of the advice above into consideration and applied it to your code, just use text-align: center on the parent, reset it on the children, and you're good to go!
Here, have an example, free of charge
#demo {
text-align: center;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
#demo li {
text-align: left;
font-size: 16px;
display: inline-block;
padding: 10px;
}
#demo img {
height: 243px;
width: 172px;
}
#demo .inner {
background: #fec722;
padding: 3px;
}
<ul id="demo">
<li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
<li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
</ul>
Related
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/float
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
Farewell Floats: The Future of CSS Layout
What You Should Know About Collapsing Margins

Incorrect vertical alignment in WebKit of inline elements

I have a small definition list that I would like to center on the page both horizontally and vertically in four columns. I have the html-element set to display: table and the body to display: table-cell; with vertical-align: middle;.
See this Fiddle. If you change the font-size on line 27 to 4em; (or anything larger than 1em), you will see that on Chrome the content jumps to the wrong position, while it was correct before. On IE the font-size does not matter, it stays in the correct position either way.
If you set the dl to display: block, it works on both browsers as well but I visually need them to be displayed inline.
Am I doing something wrong or is this a bug in Chrome. If so, how can I work around it?
Add
vertical-align: top;
to your dl. Check here http://jsfiddle.net/qVcLE/6/ . Unfortunately display: inline; etc causes that type of issues.

How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?

It seems I've stumbled on an annoying Internet Explorer 11 layout bug. (Ugh, I thought these days were behind us.)
In the following example, the padding on the right table cell disappears when you hover over it in IE11:
http://jsfiddle.net/xx4Z4/
This seems to arise because of an incredibly specific CSS scenario:
The element uses display: table-cell
The element uses percentage-based padding, e.g., padding: 0 5%
A subelement adds text-decoration: underline when the parent element is hovered over
If you change any of those three things, the problem goes away.
This seems to be an IE11 bug, but I'm wondering: Can anyone think of a workaround for this problem without abandoning display: table-cell and percentage-based padding?
Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".
I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.
Use margin
Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.
span
{
margin-left: 10%;
}
and ofcourse reset the padding of the sides:
div.table-cell {
display: table-cell;
padding: 20px 0;
}
This "solution" is not as dynamic as with percentage padding on the table-cell itself.
Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).
So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.
However this is not dynamic when you want to add more cells.
jsFiddle
Use border
Use border which its position is "reserved" before the padding is resetted.
Reserved border
span
{
border-bottom: 1px solid transparent;
}
Change property that doesn't need re-calculation of position; color
div.table-cell-bug:hover span
{
border-bottom-color: black;
}
Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.
jsFiddle
I hope one of these quick fixes work for you.
I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)
Strange, no one mentioned to set table-layout:fixed; It's really important, otherwise the padding/width won't be calculated correctly on IE (and some other weird side-effects, depending on the use case), especially when you are using images inside it.
<style>
.table { display:table; table-layout:fixed; }
.table-cell { display:table-cell; }
</style>
<div class="table">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
Adding invisible top and bottom borders seems to fix the problem.
a {
border: solid rgba(0,0,0,0);
border-width: thin 0;
}
This prevents the anchors from moving on hover or focus.
I use rgba(0,0,0,0) instead of transparent for better compatibility with old IE which displays transparent in colour while rgba is rendered invalid and not displayed at all.
We had a similar scenario where none of the solutions above worked.
Instead we animate the width of our affected div after the page has loaded:
if (!!navigator.userAgent.match(/Trident\/7\./)){
$("#karina-rosner2").animate({'width': '20.1%'},1);
$("#karina-rosner2").animate({'width': '20%'},1);
}
This forces IE11 to recalculate the div's relative padding value and solved our problem well.
This can be "helpfully" solved by setting the paddding css-rules like this ->
element:hover,
element:active,
element:focus {
// padding example
padding-left: 1.5%;
}
Rememeber to set this only for IE since it can make all normal browser behave like a disco.
EDIT: Flexbox works for IE 10 and above so this "solution" is only needed for ie 9 and below.
These are all really good answers, and the media query option works well to identify only IE which has this problem with display:table-cell
What I did that I found worked well was employ vertical-align as a great way to direct the text contained within the display:table-cell element to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.
Here is my simplified HTML:
<li id="table-cell-element">
<a href="#">
<img src="event.png"/>
<small>Register for Event</small>
</a>
</li>
And here is the CSS:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;}
li a {display:inline-block;}
li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
small {display:block; font-size:60%; font-weight:bold; color:#333;}
}
You may also have to adjust the li a:hover {line-height} depending on what is in your CSS for those elements
Also, if you want this to work for IE 9 and below I suggest using conditional comments that add an "ie" class to the <html> tag and then create an IE9 style sheet. Thankfully the styling required for IE9 is relatively the same. But I only tested through IE9 and I am uncertain of your results for IE8 and IE7.

Horizontal line inline-block IE7

I would like to put 3 horizontal line in a row.
Does anyone know how to put an horizontal line displaying in inline-block in IE7 ?
Here is my CSS:
hr.small {
width: 28.9%;
margin-right: 6px;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
height: 3px;
border: 0px;
color: #7c8690;
background-color: #7c8690;
}
but it doesnt works.
here is the JSFiddle Link: http://jsfiddle.net/sRuz3/6/
If anyone has a solution.
Thanks a lot.
Here you go: http://jsfiddle.net/eq3Z2/
It works in IE7 also.
Granted, they aren't HRs. They are DIVs. Trying to render the HR as an inline element
is tripping up IE7 but I don't know of a workaround.
Does it have to be inline-block? Can you not simply float them and set a height if necessary?
Edit - Example:
hr.small {
float:left;
width: 28.9%;
margin-right: 6px; /* Choice: Use border instead or halve the margin for IE7 and lowwer (double margin float bug). */
height: 3px;
background-color: #7c8690;
}
Edit again - Question:
Is this going in a fluid layout and how big is the container? You are setting a dynamic width but a fixed margin, this will cause issues in small scale and introduce unwanted white space to the far right in large scale. If it is a fixed area then consider using a fixed width.
It seems there's a solution if you can wrap the hrs in divs.
Set the div's to display:inline (we could use spans instead but hrs are not valid in spans)¹ and also give the divs hasLayout via zoom:1
See http://jsfiddle.net/YqKDJ/1/
¹ As an aside, there's a reason why hrs are not valid in spans and it's relevant here. An hr is not primarily a way of drawing a horizontal line - it has a specific semantic meaning of "Thematic break". It makes no sense to have two or more hr elements with no content betwwen them - there's nothing for the second thematic break to break from. If you want multiple horizontal lines for presentational purposes, you should use CSS to create them, along the lines of #Cynthia's answer.

Floating divs not displayed in IE7

OK I don't see what's wrong here:
https://www.e-capture.net
When browsing this site in IE7, the divs with IDs #blog and #social are not being displayed. The reason seems to be the #content div, which has a different height in IE7 vs IE8/FF/Chrome. But I don't see what I'm doing wrong.
Fun fact: the site displays better in IE6 than it does in IE7 :-)
Any ideas?
Thanks!
I've tested this in IE7 and Firefox.
You just need to move around a bunch of your <div> tags, and add a single new one (highlighted below).
Here's what Firebug looked like after I'd finished:
(I did the same thing in IE7 first, and it fixed your problem. Then, I did the same in Firefox to make sure the fix won't kill it in modern browsers.)
Here's my attempt at a textual description of what I did:
I moved #blog, #social and #footer respectively to outside and after #content.
I wrapped a new <div> around #blog and #social, with these styles:
margin: 0 auto; width: 960px.
I swapped around a few things concerning #buttons, to make them consistent between FF and IE7:
On ul#buttons li, remove margin: 10px 0, and add float: left.
On ul#buttons li a, remove float: left and add display: block.