Floating divs not displayed in IE7 - html

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.

Related

Margin not working only in Safari (element is at the bottom of the page)

Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}

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.

How do I center the counter in IE7?

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

Firefox displaying padding differently to all other browsers

I have a tab that has two borders on either side, the borders must fill the toolbar they are within and to achieve this I have used padding. In Chrome, IE, etc. the top and bottom padding must be set at 9px to fill the toolbar, however in Firefox they must be at 4px.
Here's a jsfiddle with a mockup of the toolbar added.
The markup is pretty simple;
<a href="Discover">
<span class="navButton">
Discover
</span>
</a>
I have removed transitions and other unneeded styles from the css;
.navButton {width:50px; border-right-color:#171717;
border-right-width:1px; border-right-style:solid;
position:relative;
padding-left:10px; padding-right:10px;
padding-top:9px; padding-bottom:9px;
}
display:inline-block would be quite appropriate here (at least a reasonable suggestion without seeing the rest of the code). You'll also need to drop the width declaration as your tab caption is wider than 50px - the reason you can't notice it now is because elements rendered inline (including <span> with default display property) can't have dimensions applied to them.
Works fine in this fiddle
I've had a fiddle and it works fine now. I have set it to display: inline-block and changed paddings and positions around.
Span is an inline-element by default and maybe handles the padding completely different than a block-element. Try setting:
.navButton {
display: block;
}
and check the results.
In general, you should include a CSS reset script (Google for it).

how to fix site for IE7

I am having tough time finding out what CSS property to change to get my page working in IE7.
Page is here
It works fine in Firefox, Chrome, IE8 but not in IE7 (maybe IE6) as well.
Notice that navigation menu goes up and #header that contains logo shrinks to a small size...
/hate IE/
Your .content has a height of 4.2 pixels. Try using a border-top:4px solid #whateverhex instead of using a 41px high repeating gif.
Then remove height:4.2px.
Alternative would be #nav { clear:both; }
my guess is that IE isnt using the Psuedo after class, which is where you clear your float. you can just add a height to the #header, or clear your float in a line break tag after the content.