can you tell me where's the problem with my code in IE?
http://dv-projects.bluefile.cz/huno/
Slideshow does not work. Seems like a problem with CSS.
IE version: 11.0.2
HTML:
<div class="slider-wrapper">
<article class="slider">
<div class="slide-1">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Nový produkt v nabídce</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slide-2">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Novinka na trhu!</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slide-3">
<div class="slider-image"></div>
<div class="slider-info">
<h2>Kvalita a spolehlivost zaručena</h2>
<p>Lorem ipsum...
</p>
</div>
</div>
<div class="slider-radio-buttons">
<div class="on slide1"></div>
<div class="off slide2"></div>
<div class="off slide3"></div>
</div>
</article>
</div>
Thanks
Absolutely positioned elements aren't affected by the parents opacity being set to 0. In order to resolve this, set the opacity on the children to "inherit":
.slider-image,
.slider-info {
opacity: inherit;
}
This appears to have resolved the issue for me in IE11.
As was pointed out in the comments above, your document is getting loaded into Quirks mode in some older versions of Internet Explorer. It appears to be the result of the Mark of the Web:
<!-- saved from url=(0014)about:internet -->
This should go below your Doctype, as demonstrated in the linked documentation:
<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
Related
https://codepen.io/06444929923/pen/gOMKaJd
<div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 MuiGrid-direction-xs-column">
<div class="x-a MuiGrid-root MuiGrid-item">
<div class="x-b">
<div class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2">
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto">Lorem ipsum</div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true">
Lorem
</div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-auto">
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
I have created a codepen as above to demonstrate the issue. Classes for material UI are also included. It is all okay when viewing the page using chrome. However, unexpected spaces are inserted into the div for Safari.
The yellow div should have the same height as the blue one however it isn't in Safari. It is not margin or padding when I inspect using developer tools. What is causing the issue?
I've got a single page of my website which I'm struggling to make responsive. It looks fine on normal screens but is very small and doesn't fill the whole screen on an iPhone. I've narrowed the issue down to this block of code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-6">
<div class="post-preview">
<h2 class="post-title">Blah</h2>
<p>Blah</p>
<hr>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="post-preview">
<h2>Blah</h2>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<p class="post-title">Blog Post</p>
<hr>
</div>
</div>
</div>
</div>
I think I'm not using the grid system properly but would welcome any input!
My source is here: http://pastebin.com/JC6XzTMT and I'm using this as a base: http://ironsummitmedia.github.io/startbootstrap-clean-blog/
Thanks
Make sure the following meta tag is the head of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've been using conditional comments as a way to ensure a background image displays correctly in Internet Explorer 8. However, when I do, some of the content (some text and an image) disappears. Furthermore, an image I wanted removed in IE8 still shows up.
EDIT: Here's the URL: http://rbk.tushausweb.com/claria/development (My issue is on the second page, so just click the navigation button on the right.)
Here's a link to what I have so far: http://pastebin.com/agHxJxb0
<div id="introduction2" class="contentContainer" data-role="page" data-prev="index" data-next="introduction3" data-title="Introduction" data-url="introduction2">
<div role="main" class="ui-content">
<!--[if IE 8]>
<link href="css/clariaIE8.css" rel="stylesheet">
<div id="bg">
<img alt="" src="image/bubble.png" />
</div>
<![endif]-->
<div class="background">
<div class="container banner">
<div class="widthContainer">
<div id="banner" class="info-banner">
<p id="smBannerTitle" class="info"></p>
<h1 id="lgBannerTitle"></h1>
</div>
</div>
</div><!-- /.container -->
</div>
<div class="widthContainer">
<div class="contentBody contentBodyWithBanner">
<div class="container media">
<div id="imgIntro2">
<img src="image/Homechoice-Claria-Unit-250-million-exchanges-and-counting-427x188.png" class="img-responsive"/>
</div>
</div>
<div id="pageContent1" class="container"></div>
</div>
</div>
</div>
</div>
A screenshot:
What it should look like:
Is there a way to ensure that using conditional comments doesn't remove content?
It's hard to tell without a demo, but it looks like your IE workaround is using an <img> tag to display the background. If that's the case, you may have a conflict in the z-indices and the content may be on the page but behind the background. Try setting z-index: -1 to the false background image as a first step in debugging.
I'm trying to do a tab group using Foundation 4. The tab buttons are all rendered overlapping each other (FF and Chrome). I've double checked the markup but can't see what I'm doing wrong..
<div data-section class="section-container auto">
<section class="section">
<p data-section-title class="title">First Tab</p>
<div data-section-content class="content">
<p>Content..</p>
</div>
</section>
<section class="section">
<p data-section-title class="title">Second Tab</p>
<div data-section-content class="content">
<p>Content..</p>
</div>
</section>
</div>
Doh Forgot to include
<script src="/js/foundation/foundation.section.js" />
Following HTML block:
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
</div>
</body>
</html>
Produces following:
How can I have Karl Mac too covered with color of parent container in this 2 column layout?
If I add "overflow:auto", it gets fixed in Firefox and Chrome. But issue persists in IE.
thanks!
As you've done for Chrome & Firefox:
overflow: auto;
To make it work in old IE as well:
overflow: auto; zoom: 1;
zoom enables "hasLayout" in old IE, which resolves many CSS bugs. There are also other ways to enable hasLayout, for more info: http://www.satzansatz.de/cssd/onhavinglayout.html
You need to <div style="clear:both;"><div> in the main div.
<html>
<body>
<div style="background-color: #fecfff;">
<div style="float:left;">
<div style="height:40px; width:40px; background-color:Red"> </div>
Karl Mac
</div>
<div>
some comments details<br />
<div style="padding-top: 10px">
links
</div>
<div style="clear:both;"><div>
</div>
</body>
</html>
Code: http://jsfiddle.net/cCuab/