I have wrote my own embed-server, which can generate response to web browsers.
The generated "main page" is like the following html.
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="styles.css"><title>ABC Inc. Web Configurator</title></head><body>
<nav><p>[<b>Home</b>]</p></nav>
<table>
<tr><td><a href=Config>Config</a></td></tr>
<tr><td><a href=Logger>Logger</a></td></tr>
</table>
<footer>Web Configurator © ABC Inc. 2014 - 2015</footer></body></html>
And the generated CSS file is
.even{
background-color: #EFF;
}
.odd{
background-color: #FFE;
}
.title{
background-color: #226;
color: #EEF;
}
a{
color: #36C;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
body{
font-family: Tahoma;
font-size: 100%;
}
footer{
color: #999;
font-size: 0.7rem;
}
nav{
background-color: #DDF;
font-size: 1.1rem;
}
td{
min-width: 60px;
}
When I browse the main page by Chrome 43 or Firefox 39, they're both okay.
However, when I use IE11, the CSS not apply to the html, even though that I can make sure IE11 have access the CSS file from my server. If I press F12 in IE, the DOM manager shows no stylesheet in this page.
BTW, my URL is http://localhost:8888/, and need a basic authentication.
Any idea how can I fix it?
UPDATE
I've read the stackoverflow thread before, and I'm sure my problem is not about browser caching. Thanks Mauro for notification.
I've tried Chrome + IE tab2, the CSS works, but not apply to nav and footer tag. I guess IE tab not support HTML5.
UPDATE
I've try both of closed and non-closed link tag, both of them are not solve my problem with IE11.
I've try to disable Basic Authentication, still not working.
UPDATE
The CSS also works in Firefox 39.
The CSS works with IE11 + Compatible mode (but HTML5 tags will be ignored).
Try adding this attribute to the link tag:
type="text/css"
Example:
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
After I compare a lot of website, I find out this problem could be solved easily by just remove the html5 declaration <!DOCTYPE html>. However, I don't understand why IE11 act like that, it should have support html5.
PS. I've read this SO article and add type="text/css", but it seems IE11 never care about that.
I know this is an old problem, but I ran into it trying to solve the same problem with my webserver.
IE/Edge was not honouring the css generated by my (custom-built) webserver. The problem was when my webserver returned the css it didn't mark the mime-type as css and IE/Edge reported (hidden in its console output):
SEC7113: CSS was ignored due to mime type mismatch.
Fix was simply to mark the HTML response mime-type as "text/css" and all was OK.
Note that all the other browsers (Firefox, Chrome, Safari, Android) I tried had no problem with the incorrect mime-type, they just got on with it.
Check if HTML1202 issue described here can resolve your problem.
if so, check this: How to avoid ie8 compatibility button?
Related
So i have this weird problem that any css i write doesn't work. I tried to create multiple pages and link css but it simply doesn't apply.
If i download a template of the internet if i run the page, their html works.
Here is an example of the most basic code i've written that doesn't work, even though i've run it through validators. It doesn't matter what element im trying to apply styling to it doesn't work.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Test Page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Sup! </h1>
</body>
</html>
CSS
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
}
I have tried numerous solutions i've found online, but none of them work.
Can you check your network tab that your style.css is fetched from server and there is no 404 not found.
I would say try "/styles.css"
1. Check your Devtool, see if any error in network, make sure that style.css successfully loaded.
2. Try - Importing External Style Sheets
Write in html head tag:
<style>
#import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
This could be because of the folder structure. So maybe try and make sure your html file and css file are on the same level.
Or you could try "../styles.css" - Again this depends on where your files are in your dir
Everyone has given almost everything that I know. Sometimes its the silly things that we missed out that gives us tough time. Do try and follow this:
make sure both the html and css are under the same folder, in my case the folder is named "ROUGH"
Check for any white spaces before and after the file name. Example: "style " has one white space after the name, it should just be "style"
Using "/" inside the href. Example below href = "/style.css"
So, finnaly figured it out. The encoding was set to utf-16 and everything rendered as chinese kanji. This is the problem solution. Stylesheet taken-over/replaced by Chinese characters
This one is stumping me, as I've searched and searched through similar issue topic threads on this site but none of them are helping me resolve the issue.
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<link rel="stylesheet" type="text/css" href="./main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
and the below CSS file code in my main.css file in the same directory as my HTML file (C:\HTML)
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
The text formatting works correctly when I open the code in IE, but not in Chrome or Firefox, what might I be missing about these two browsers that could be causing the issue?
Presentation (css) can appear different in different web browsers because each web browser has their own default and user configurable settings. You will always see differences between browsers because of differences in the default settings. eg. In the screen shot below using your sample code you can see that on my computer IE and other browsers display the page 'more or less' the same.
To make browsers display the same web pages 'more or less the same' you need to configure each of them with the same default settings for presentation (fonts, font sizes, color, background colors etc)
To debug rendering differences between browsers you need to use the DOM Explorer tab of the Dev tool in each browser(screen shot above) and compare the applied rules.
To help you further we would really need a screen shot from your computer, showing the browsers side by side. As you can see by the screen shot on my computer different browsers display the page 'more or less the same'. That's because I have configure all of my test browsers with the same user settings for presentation/accessibility (text size, zoom, color, background-color, font family, link and hover color etc).
The best way to test between browsers is to use https://www.browserstack.com/ because you are using virtual instances of vendors' browsers that have the 'factory' default settings. Comparing browsers on your own computer you should expect that the best result is that they will display the same web page "more or less the same", but not exactly the same.
To debug presentation, you need to use the DOM Explorer tab of your browsers dev tool.
<!DOCTYPE html>
<html>
<head>
<title>Sprout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
h1 {
font-family: Palatino, 'Palatino Linotype', serif;
color: blue;
font-size: 90px;
}
h2 {
font-size: 32px;
}
</style>
</head>
<body>
<h1>Mysample</h1>
<div class="hero">
<h2>Sprout.</h2>
<p>A book by J. Daniel Bedford</p>
Read now.
</div>
<p>© Mystwood Publishers Limited</p>
</body>
</html>
This also stumped me for a long time - Page looks okay in Edge\IE11 but not Chrome or Firefox. Eventually found there was nothing wrong with the HTML or CSS syntax. The fix was simple. The HTML file was encoded in UTF-16. I overwrote the file saving it as UTF-8. It now works fine in all four browsers.
i have used condition css for internet explorer to show the auto cursor in internet explore but it is not working correctly
i have used following code to link the
<!--[if IE]><link rel="stylesheet" href="newstyle_ie.css" media="screen" type="text/css" /><![endif]-->
i have to show the default cursor in internet explore for that i uses
body{ cursor:auto !important;}
and for other browsers i have used
body{ cursor:url("some url");}
any hint ???
Your conditional comment is ok, you should check the cursor url, and set a fallback value(i.e. pointer, separated with a comma), just in case the first cursor isn't found. Also check the path to css file
Try this:
body {
cursor: auto;
cursor: url(url path), auto;
}
or
$(document).ready(function(){
$("body").css('cursor','url(your url),auto');
});
Please try to use hack css for browser to fix your issue .
Please refer this link http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ how to call hack css.
Thanks.
My styles are not showing up. I linked it like normal, it made sure the name was correct, the are in the same directory, but still nothing. It works on every other web page I make, it just isn't working right now.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="classyclass.css">
<title>Classy Fun</title>
</head>
CSS:
body
{
color: white;
background-color: navy;
font-family: Times;
}
That is just a sample of the code, there is more.
Edit: It works in IE, but not Chrome.
I tried it on a different computer, it still only works in IE.
You may need to clear your browser cache. You can do that by pressing ctrl + alt + delete and select cache. If you are using an older version of Internet Explorer you will need to go to tools->Internet Options.
ctrl + F5 also reloads everything without cache in most browsers.
I have a jsp file that holds html elements, it has a table in it with a specific id. When I add the border: 1px; styling internally then it works, but when I want to use a css file that specifies styling, then it doesn't, there's no border at all as a result.
the relevant part of the jsp file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Airline Database</title>
<link rel="stylesheet" type="text/css" href="styles/PassengerStyle.css"/>
</head>
<body>
<table id="main" width="1300px">
...
</table>
</body>
</html>
the PassengerStyle.css file:
#main {
border: 1px solid black;
}
the css file is in the styles folder that is in the same folder as the jsp file.
What did I miss?
It probably can't find the stylesheet, i.e. the url is wrong. Have you tried navigating to where the code in 'view source' thinks the file is located? That's probably different then where it is.
You can also try adding body { background-color: red; } to see if any styles from that stylesheet apply.
I would try to see if any other styles from the stylesheet apply (or do a test), if they do, then I would wonder is the table dynamically generated? If other styles do work, I would try giving the table to be styled a class in the tag versus using the id reference in the style sheet and see if that works. If nothing applies, probably a broken style sheet link.
I would also recommend putting the 'width=1300px' in the css style sheet along with the other css styles.
You can use Firebug or Chrome developer tools to see if your CSS is being overridden by different rule, and you can use the network tab of those tools to see if there were any errors loading the external stylesheet.
Adding !important to your css style can help in debugging, although I don't recommend it for production use.
Also try clearing your cache to see if a previous version of the stylesheet is being used.
Try this:
#main {
border: 1px solid black !important;
}