Situation:
I have a PHP written page, wich will include a css via
<style type="text/css">#import url(/css/my.css);</style>
Afterwards (and on demand) a javascript file is loaded, that opens a new "Window" where the css declarations would be used.
This works in all Browsers except Internet Explorer (7-9).
Problem:
According to the IE Developer Tools (F12) the css file is loaded and I can see all declarations made within this file (they are correct), but when the new window is displayed, the css declarations do not seem to be in effect.
"Solution":
Deselecting (and reselecting them, even if it's not necessary) some of the rules of the given CSS File in the CSS-Tab of the IE Developer Tools make the page "render" correctly.
Question:
Where does this behaviour come from, and how do i get rid of this?
Additional Information:
I do not have more than 4095 (not even counting all in all CSS Files alltogether) selectors (in fact I have less than 2.5k) and I only load less than 31 (exactly 7) different CSS Files.
As requested:
<div class="navigate">
<div class="nav-slider">
<div class="nav-slider-left">
<span role="button" class="nav-link nav-page-back"><</span>
<div class="page-number">
<span>1 of 1</span>
</div><span role="button" class="nav-link nav-page-next">></span><span role=
"button" class="nav-link nav-now">â—</span><span role="button" class=
"nav-link nav-prev-week"><<</span><span role="button" class=
"nav-link nav-prev-day"><</span>
</div>
<div class="nav-slider-content">
<div class="nav-slider-bar">
<a class="nav-slider-button"></a>
</div>
</div>
<div class="nav-slider-right">
<span role="button" class="nav-link nav-next-day">></span><span role="button"
class="nav-link nav-next-week">>></span><span role="button" class=
"nav-link nav-zoomIn">+</span><span role="button" class=
"nav-link nav-zoomOut">-</span>
</div>
</div>
(i have reduced the HTML Code to the relevant part [ExtJS is creating a massive amount of structure around the given code)
CSS Declarations are here
I'm not sure but it might be a caching problem since your styles are interpreted as inline-css and won't be saved when you open a new window. Did you try to use:
<link href="yourcssfile.css" type"text/css" rel="stylesheet"/>
UPDATE:
It seems to be a bug. I found your problem in this article (point5). Solution is in there aswell.
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
Related
I am using Bootstrap v4.3.1 with no modifications and I implemented a dropdown menu with the following markdown:
<li class="nav-item dropdown">
A
<div class="dropdown-menu">
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/B">B</a>
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/C">C</a>
<a class="dropdown-item nav-link text-dark nav-headlines" asp-area="" asp-page="/D">D</a>
</div>
</li>
I did no changes to the Bootstrap code whatsoever.
The displayed hoveron on all dropdown items appear to be rendered partly out of bounds to the right.
The problem is that the dropdown-item class gets this rule width: 100%; which if I disable in Firefox/Chrome it seems to solve the issue.
I tried going the not recommended way and going to the bootstrap.css and commenting out the width: 100%; rule. It did not work.
The problem is that the browser somehow imports the rule not from bootstrap.css but rather _dropdown.scss even though such a file does not exist...
How do I fix my dropdown items hoveron?
I am using .NET 6 if that matters.
I also tried setting the CSS with inline CSS added to the DOM using jQuery but it also seems to have no effect ($(".classnamehere").css("width","");)...
Is this a bug from Bootstrap's side???
How does Bootstrap generate .scss files which I can see in the browser without actually having those files?? I don't import anything from the internet for Bootstrap, everything is local.
Here's a picture to visualize it:
This markup is able to be read by JAWS arrow navigation in IE11, however in Microsoft Edge it only allows it to be fully read via tab navigation. Does anyone have any idea why Edge refuses to read this list item? We have other list items that are similar to this that are read just fine, but this one in particular doesn't seem to be available to be read via JAWS arrow navigation.
<li id="some-id">
<a href="/destination">
<span class="submenu"></span>
<span class="label"> Destination </span>
<span class="count">
<span class="value" data-info=0></span>
</span>
</a>
</li>
I've tried setting data-info=0 with and without quotes. I'm stumped.
I am trying to combine a tooltip with a horizontal FAB, from the Materialize library. However, the outcome is being corrupted by another library, or some of my site's custom css (I am using angular2 so there are a few different css files). You can see the specific issue below, but I wondered how I can approach finding which css rules in which file are corrupting the default materialize behaviour. At the end of the question you can see my approach to date.
In the following code, the end action icon of the FAB should display a hovering tooltip below it:
<div class="fixed-action-btn horizontal" style="bottom: calc(100% - 80px); right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
However, the tooltip message seems to replace the contents of the action icon?
I am assuming that there is a clash between materialize and some other js/css on my site. By forcing overflow: display, I can get this result:
So now the issue us a colouring and positioning one? Any ideas what properties are likely to be corrupting this, or how I could find them. I targetted the element in Chrome Dev tools, but there wasn't any obvious cause and I couldn't inspect the actual tooltip, only the underlying button.
I'm using font-awesome in my Django project, as icons in front of nav-bar list. My problem is, as the title says, some icons show up normally, some icons show square with 4-digit unicode inside, and some icons show up but mismatch the code. What a mess!
I've been stuck here for long, and i tried a lot to solve it. Read the docs through, and googled a lot, but no effective solutions found.
Environment information:
I'm using the latest version of Font-awesome(4.6.3) local copy on linux server(Ubuntu 14.04).
I've tried to load this page on Chrome/Firefox/IE, the results are no different.
I've tried to disabled the AdBlock plugin, resulted in vain.
Specific code:
The 1st icon is normal.
The 2nd icon only show square with unicode (the same with official).
The 3rd one show a mismatch icon.
<li class="openstack-panel">
<a class="openstack-spin" tabindex="6">
<i class="fa fa-home fa-fw"></i>
Security Group
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="7">
<i class="fa fa-key fa-fw"></i>
Key Pairs
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="8">
<i class="fa fa-git fa-fw"></i>
Floating IP
</a>
</li>
Here is how icons are displayed on browser:
Could anyone help me out?
Use the following link for Font Awesome and try,
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
or
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css
I am having issues formatting my drop down list. Code is as follows.
<div class="row" id="row02">
<div class="dropdown" id="meters-toggle-container">
<button class="btn btn-default dropdown-toggle" type="button" id="metter-dropdown-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Meters
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="meters-dropdown-ul" aria-labelledby ="metter-dropdown-btn">"></ul>
</div>
</div>
List Items are appended via Jquery depending upon an ajax request/response.
var html = "<li><a href='#'>" + meterNumber + "</a></li>"
$("#meters-dropdown-ul").append(html);
After reviewing several css options I have found one that seems to control the width of the drop down how I would like it. I am having dificulty of 1) containing the drop down inside of its row parent and 2) setting the menue to overflow so that it can be scrolled through.
As you can see in the picture bellow. The dropdown menu not onlyy runs past its parents boundaries about 50% of the page but runs off the page as well not allowing to view whats beyond.