I got list. In every browser looks good. But in IE7 there's no line-break after displaying three elements.
Any hacks?
add the following css to your list elements :
display: block;
<div id="gallery-cont" style="width:900px; float:left;">
<div>text></div>
<div>text></div>
<div>text></div>
<div>text></div>
</div>
float:left;
height: 348px; /* 285px + 63 */
padding-right:6px !important;
margin:0px 4px 12px 4px !important;
text-align:left;
width:285px;
clear:right;
It's only preview code, but it's the same.
Working correctly in FF3, Opera, Chrome and even IE8. But does not work in IE7. Child divs are displayed in one line.
Anyone?
Related
I'm assuming this happens due to certain components taking longer to render on occasion, causing the browser to scroll to its position when it eventually renders?
I've searched around and tried using a scrollTo(0, 0) function at the end of my app.js, but is this the best way to deal with this issue? It works on most browsers but doesn't solve the problem on Firefox.
Here is the main app function that calls all the react components:
function App() {
return (
<div>
<ParaDiv>
<Nav />
<Fade>
<Splash />
</Fade>
</ParaDiv>
<Section2 />
<Card1></Card1>
<Fade>
<Popular />
</Fade>
</div>
);
}
There are several reasons why that happens, and it could be a symptom of a much bigger problem which can cause serious performance issues down the road. You can use tools like React DevTools/Profiler and see what components are causing unnecessary rendering, and then try and use hooks like useCallback/useMemo to solve that. Using Styled components within the functional component can cause similar behavior, even some css styling can cause that as well. I think it's better to find the root cause rather than look for a quick fix.
I would suggest using skeleton loaders instead, it is better practice.
Simple example found on Google:
https://codepen.io/ishaqzain/pen/yRMQOd
html
<div class="container">
<div class="post">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="post">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="post">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
css
// forked from https://codepen.io/viktorstrate/pen/yoBRLy
$base-color: #F4F4F4
$shine-color: rgba(229,229,229,0.8)
$animation-duration: 2.0s
$avatar-offset: 52 + 16
// this unfortunately uses set px widths for the background-gradient, I never got around to changing it to work with all widths :(
#mixin background-gradient
background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px)
background-size: 600px
body
margin: 0
.container
height: 100vh
display: flex
flex-direction: column
justify-content: center
align-items: center
.post
width: 220px
height: 80px
.avatar
float: left
width: 52px
height: 52px
background-color: #ccc
border-radius: 25%
margin: 8px
#include background-gradient
animation: shine-avatar $animation-duration infinite ease-out
.line
float: left
width: 140px
height: 16px
margin-top: 12px
border-radius: 7px
#include background-gradient
animation: shine-lines $animation-duration infinite ease-out
.avatar + .line
margin-top: 11px
width: 100px
.line ~ .line
background-color: #ddd
#keyframes shine-lines
0%
background-position: -100px
40%, 100%
background-position: 140px
#keyframes shine-avatar
0%
background-position: -100px + $avatar-offset
40%, 100%
background-position: 140px + $avatar-offset
Maybe a few other things to mention, not actually an answer:
The scrollToTop should happen while the content is relatively "fixed", so nothing slides around that can change document height while scrolling up
you have to scroll to the top while loading new content, because if it's there you already want the user to be right there
you don't want the user to look at the "old" content while scrolling up, so you could make it disappear of put a modal layer over it, that prevents the user from clicking around
to show something like the skeleton loader from #Dorwey is a good idea, but that has to happen right after the click and then scrolling up
I have working plunker with my accordion:
http://plnkr.co/edit/Qk4AxzXLuDDAAXt3wZ6z?p=preview
Did the same in my project and when I click to the accordion header, it shows accordion content but its height is 1px and data successfully binds.
What's wrong? :(
(it's not a problem with angular and bootstrap version)
You need to handle the CSS on your own. Refer following dummy CSS for your purpose:
#accordion .ui-accordion-content {
width: 100%;
background-color: #f3f3f3;
color: #777;
font-size: 10pt;
line-height: 16pt;
}
where #accordian is id of the div.
Better than few words, here is the code which doesn't work on IE.
<div ng-repeat="favcolor in favcolors" class="favorite" alt="{{favcolor.name}}" title="{{favcolor.name}}" style="background:#{{favcolor.hexa}}">{{favcolor.hexa}}</div>
The css :
.favorite{
width: 50px;
height: 20px;
display: inline-block;
border: 1px solid black;
}
Everything is ok on other browsers, but on IE my boxes doesn't have any background color. When I replace {{favcolor.hexa}} with some hexa, it works fine...
Thx.
Try to use ng-style.
<div ng-style="{ 'background' : '#' + favcolor.hexa }" ... >
Issue in IE7 for extra space at bottom for list items where as in FF it works fine.
Code:
<ul class="sub_menu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
CSS:
ul{
margin:0 0 20px 0;
padding:0;
}
ul.sub_menu li {
background:#E8E8E8;
border-bottom: 1px solid #E5E4E4;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
padding: 0 10px;
}
Can anybody help me out on this?
Thanks in advance.
Adding "overflow:hidden" to li solves my issue.
CSS:
overflow:hidden
I am not sure but sometime adding overflow:visible also works for IE7.
Can anybody clarify the exact cause?
Thanks
I'm trying to make a cross browser CSS nav-bar for mobile and desktop using Jquery Mobile.
I don't want to use media queries for retina/non-retina devices, so I'm basically trying to use a single hi-res CSS icon/sprite on all devices. The following works nicely except on IE7+8.
HTML
<span class="hasIcon">
<span class="someText"></span>
<span class="someBackground"></span>
</span>
CSS
.hasIcon {
display: inline-block;
position: static;
height: 30px; width: 30px;
background-color: none;
background: url("http://www.franckreich.de/x/IMG/gen/6060dummy.png") no-repeat;
background-size: 30px 30px;
-o-background-size: 30px 30px;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-ms-background-size: 30px 30px;
}
JsFiddle example here
Of course this breaks in IE7+8, as backgrond-size is not supported...
My question: Does anybody have an idea how I can achieve this effect on IE7+8?
Solutions, I don't want to use:
CSS Media Query for retina/non retina = miss out on good looks on desktop
put retina/non-retina icons in single sprite & position accordingly = works so-so & serving bigger file
Curious to see if anybody can help me out.
Thanks!
You can use a filter: http://jsfiddle.net/thirtydot/QTT4N/3/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.franckreich.de/x/IMG/gen/6060dummy.png',
sizingMethod='scale');
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Duplicate of IE 8: background-size fix.
Short answer: Use IE Filter. http://www.pziecina.com/design/turorial_demos/resize_background.php