I have a case that I want the css to be in the body not in the header, because the header is for all pages and each page have a different css file.
I have a problem that the style is working on chrome and firefox but it is not working on IE11.
I tried to use F12 to debug the problem and I discovered the problem.
when I click on the div class=waitingTime" on IE 11, the style is not appeear on the right view.
but when I do the same thing on chrome and firefox, the style is appears on right.
IE 11
Chrome
you can see that the code of adding the css file is above the div
Update
For people who can't see the images, I upload them here
http://postimg.org/image/dd2p19gkh/
http://postimg.org/image/c5a0dntvn/
Update 2
this is how I add the css
<link href="http://localhost:8082/ParkingProject/public/css/waitingTimes" rel="stylesheet" type="text/css" media="all">
<div class="waitingTime">
</div>
You can use link tags in the body (only in HTML5) documents, but only when they have an itemprop attribute, not when they have a rel attribute.
So, your HTML is invalid. It's very nice of Chrome that it accidentally processes your page correctly, but you cannot blame IE for not doing so.
See also
Can I use <link> tags in the body of an HTML document?
Finally I found the problem
The file is waitingTime.css but I forgot to say .css
chrome and firefox so clever to udnerstand it but IE is stupid :) so when I added .css it works
Related
I have this simple situation, I have an style with no defined display property value, I recently added bootstrap to my project with no major problems, just one.
In label bootstrap style is defined a display: inline-block; what I don't need and is causing some troubleshooting on my page. So simply I overwrite it, but it seems It's getting the bootstrap value. !important is not working also. As you can see in the image below:
Even, It's marked as overwritten on Developer Tools. I also tested removing the line from the bootstrap file and it works, but that's not viable option in my situation.
I'm stuck here, as I said, no more problems with bootstrap, and haven't had this situation before.
I have to add that I'm setting right position for style sheets on my page.
EDIT:
I'll attach the result and the expected result, when I remove the bootstrap style. It seems to be working even It is overwritten.
Expected result when bootstrap style is removed (this apply to in time Developer tools and when removing from bootstrap.css)
PS: IE as needed browser.
EDIT2:
Problem solved, It was related to IE version, our company gives support to IE only on this application, and the problem was that some previous change was forcing IE to run compatibility on version 5, for reason that anyone knows, switched to IE as standards and it's working.
Thank you all any idea or comment.
Problem was related as IE compatibility mode.
This worked for me:
My problem was the way I linked it.
example: lets say input tag inherited style from vendors file(say bootstrap), and say you are too far in the project and linking files the other way round screws up your layout then, create a new style sheet and link it after the bootstrap link.
<link rel="stylesheet" href="styleSheet.css">
<link rel="stylesheet" href="bootstrapStyles.css">
<link rel="stylesheet" href="newStyleSheet.css">//write the style for elements that you don't want styles from bootstrap to be inherited and link it this way.
right way of doing:
<link rel="stylesheet" href="bootstrapStyles.css">
<link rel="stylesheet" href="styleSheet.css">
I'm seeing a strange scenario where, according to the Firefox dev console, the matched color for a css element is different from the visible output. If it matters, I'm using Bootstrap 3 as the source of styling. Here is the (very short) HTML file that I'm using for the example.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<button class="form-control btn btn-success">Hello world</button>
Here is a screenshot from the Firefox dev console with the purported 'winning' css rule for:
And here is a screenshot of the actual browser rendering:
As you can see, the text in the button is rendered as white. From the top of the CSS rules, it appears that white was, indeed, selected. But it's not clear where that comes from. The only rule say "it's white (#FFF)" is crossed out, and the only rule that's not crossed out says "it's dark grey (#555)". So why is the text white?
Interesting observation! It would appear that the Firefox developer tools use the line number of the declaration block to determine selector importance, when the specificity of two selectors is the same.
This can be an issue when the CSS file is minified though, and all declaration blocks end up on the same line.
It becomes more apparent if you use the non-minified resource:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
A JSFiddle with the minified CSS exhibits this problem, but not one using the fully expanded CSS.
Hope this sheds some light on the issue. Maybe it's worth a bug report?
EDIT: A bit more testing indicates that the Firefox tools places precedence on the left-most block when faced with multiple same-specificity selectors on a single line. (An example.)
Yep that sure is weird, but if you look under inspector instead I see what you would expect:
Must be an error with firefox dev tools?
So my website is located at but right now it is not displaying properly in IE8. I have added the following css where I used to have display:inline-block to try and compensate but it is not working:
display:inline-block;
*display:inline;
*zoom:1;
Is there a quick hack to get my items to comply, or am I going to have to completely redo the style with float?
Does IE8 not respond to css on HTML5 elements like section,article, and nav?
It seems that you are using html5 elements and in your css you are calling them as ex.
header div#header_left {float: left;
width: 350px;} and so on. IE8 does not recognize these tags for the most part.
When I inspected the elements, what I saw was this.
AS you can tell, IE8 is not even recognizing your css.
Suggestion: Use divs or get IE to recognize the tags (several answers here that show you how).
After looking it up, I found that a lot of your HTML5 tags don't work well in IE 8. There's a simple way to shim IE8 so it recognizes those tags. You basically have short script that runs document.createElement on all the html5 tags you want to use.
Here's a link for the script and the css that goes with it.
http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8
I am writing a very simple HTML code which is listed below. Written in notepad and opening in IE-8 and Firefox (OS: Window Vista).
<html>
<body>
<table border="1"><tr><td>test</td></tr></table>
</body>
</html>
There is nothing special in the above code, It is creating some space from top left corner.
Which can be easily removed by using the following code
<body style="margin:0; padding:0">
Now i have find out the default margin and padding, which is 4 for Firefox and different for IE-8.
<body style="margin:4; padding:4">
I have some question on this scenario.
Why this value is 4?
From where this value is coming, is it saved somewhere?
Can we modify (configurable) this default value?
How these values are different for browsers?
Thanks.
First of all, it's probably 4px and not 4. Second, that's just the way the browser vendor decided should be the default.
It is saved in the default browser stylesheets.
You can, but you shouldn't. It differs with each browser. Google it! How do I change default stylesheet on <insert browser here>?
There probably are slight differences, you should be able to tell... by looking at the default stylesheets :)
That difference is one of the main reasons we as designers use a CSS reset, to normalize all of the CSS awkwardness that follows different browser implementations.
Browsers have built-in "sane defaults" for the CSS of most HTML elements - this just prevents your page looking completely unreadable if you have pure HTML without CSS, but they are of course intended to be overridden by your own CSS.
The default browser styles are typically referred to as a "User Agent Style Sheet" - the following site is a good reference of the various peculiar UA sheets IE has had over the years and also provides ones for other browsers at the bottom:
http://www.iecss.com/
One method a lot of people use to "normalise" the defaults so you have the same starting point in all browsers is a "CSS Reset" - this is just a snippet of CSS that you place before your own CSS that sets all of the UA styles to the same thing. This is a well known one:
http://necolas.github.com/normalize.css/
Try this
body{
line-height: 0
}
Add this on top of your stylesheet
*{margin:0px;padding:0px;}
This eliminated all differences in padding and margin across browsers.
The following page is mucked up in IE8 -- the bulk of the content starts appearing half way down the screen and the tables/divs do not look as they should. It works in other browsers and in IE8 compatibility mode. I've inspected the HTML and can't work out what's wrong. Any help would be appreciated. Thanks.
http://www.moviemonitor.com/browse/itunes
After a quick glance in Firefox and IE8, I'd say there is some malformed HTML in there somewhere. Looks to me like a mismatched open/close tag that IE8 isn't forgiving. Run the whole thing through an HTML validator.
I suggest removing the min-height: 800px; CSS value from the first DIV element after <div id="mainContent">. Apparently IE8 renders the first child block level element with that height irrespective of any other contained elements.
Then again, those HTML validation results are pretty grim. Try to fix some of the invalid HTML and make sure that all of your tags are closed properly.