site.css not overriding bootstrap.css for .field-validation-error - html

I have an MVC form (with layout page _Layout.cshtml) using jQueryVal. When I submit with empty required fields the validation message displays properly BUT the style in Site.css is not being applied (overriding bootstrap.css). I suspect it is because jQueryVal is running client side. The only way I've found to make it work is to place the actual style on the _Layout page.
BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/Site.css"));
Site.css
.field-validation-error {
color: red;
font-weight: bold;
}
_Layout.cshtml (This style block works but not when placed in Site.css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans" rel="stylesheet">
#Styles.Render("~/Content/css")
#*TODO site.css not overriding validation error text color*#
<style>
.field-validation-error {
color: red;
font-weight: bold;
}
</style>
Rendered Tags

I tried this page in IE and the style for red validation errors worked fine. Apparently, in Chrome, with a .cshtml utf-8 meta data header, it expects the .css file to be utf-8 as well. Who knew?? I opened a new document in Notepad++, making sure it was utf-8, pasted my .css content, saved it overwriting existing .css and LIKE MAGIC! IT WORKS! :)

In layout.cshtml you have used !important, but in site.css no - have you tried to use it in site.css? If yes, have you tried cascade css, e.g.
body .field-validation-error {
color: red !important;
font-weight: bold !important;
}

Related

Transition starting on page load for some reason

Update: when I put the CSS internally, the problem goes away. I went in the dev tools on my chrome and compared what was happening when I reloaded the page. First image is with internal CSS, the second one is with external stylesheet, you can see different results for the background-color property:
Initial post: I have no idea why this is happening, here's a demonstration. Basically, the a takes some time to appear fully on the page.
The time it takes to 'fully' appear is the same duration specified in transition: background 5s; as in 5 seconds.
Here's the same code on another page where the effect is not observed, I also opened it in the same browser.
Here's my code in Visual Studio and in Chrome, the same behavior is observed in Edge but not in Firefox, in Firefox it just loads as it should and the :hover effects work properly. All 3 browsers are updated to their latest versions at the time of writing.
This only happens when I link to an external CSS stylesheet. When I copy the css to the html file the problem goes away!!!
CSS
a {
color: #fff;
border: none;
margin: 20px;
padding: 10px 20px;
display: inline-block;
font: bold 18px sans-serif;
background: #fd7c2a;
text-decoration: none;
-webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
transition: background 5s; /* For modern browsers */
}
a:hover {
background: #3cc16e;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
<meta name="keywords" content="" />
<!-- Specifies a comma-separated list of keywords - relevant to the page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title></title>
</head>
<body>
<p>Hover on me</p>
</body>
</html>
I solved the issue, been going through google for answers. The solution is to add <script> </script> opening and closing tags in the html file separated by space. Apparently its a bug in the browsers mentioned before.

Background Image Only Showing White Background CSS

I'm a veteran to CSS and HTML, but never before have I seen this problem. I have the background image, CSS, and HTML files placed properly. I believe I have all the code right too since I checked it against a site I already made, but my image will not appear for anything.
CSS
body {
background-image: url(am-stage.png);
background-repeat: no-repeat;
background-color: black;
background-size: 100% 100%;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> AM </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
</body>
</html>
EDIT: Chrome is giving an error saying that the CSS file can't be found. Not sure why though. The CSS is in the same directory as the HTML and the image.
I figured it out, Sublime wasn't saving the CSS as a CSS file. I told it to save as a CSS, but it wasn't adding the extension this time for some reason. I just chose CSS and manually put in the .css at the end and now it's working.

Windows UWP Webview with Local Relative URLs

I am developing an application that uses a webview for the primary interface. Upon startup, the program loads a page that is included in the Content directory of the project, complete with external style sheets and scripts and they all load properly. The code to load is:
webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));
And the content of landing.html is as follows. It all works properly.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<title></title>
</head>
<body>
...
</body>
</html>
A problem has arisen when I try to use NavigateToString() to load rendered content into the viewer and try to use these style sheets, and specifically FontAwesome. I am loading the file using this code:
webViewer.NavigateToString(song.RenderHtml(appSettings));
And the RenderHtml() function looks partially like this:
string content = #"<DOCTYPE html>
<html>
<head>
<base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
<link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
<style type=""text/css"">
body { font-family: Tahoma, Geneva, sans-serif;
margin: 15px;
font-size: " + settings.Values["settingsFontSize"] + #"pt; }
span.flat { margin: -4px -2px;
font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 1.2em;
height: 0.9em;
display: inline-block; }
h3 { font-size: 1.5em; }
th a { text-decoration: none;
font-weight: bold;
color: #127690; }
td a { text-decoration: none;
font-weight: normal;
color: #000; }
i { color: #000;
width: 1em; }
</style>
</head>
<body>";
// Rest of rendering function.
However I cannot seem to get FontAwesome to load properly. As far as I can tell the font-awesome.min.css is loading properly, because the icons' i tags are the right size (square blocks) but they are blank, meaning the font file is not being loaded. I tried using the <base> tag but that does not seem to work. Is there any way to make this work?
Edit: I edited the stylesheet and hardcoded the full url of the font file into it, and it still doesn't work.
It seems that you may need to use the BuildLocalStreamUri / NavigateToLocalStreamUri. In this case, the string-passed html can't refer the contents of css folder. You need to build the 'stream' that contains string, css, or other external files.
Following is an api reference:
BuildLocalStreamUri
You may need to refere the sample also. It's complicated to use.
XAML WebView control sample

Browser ignores CSS Selector for HTML element

I am following a tutorial in a book and it says to use CSS to set different background colors for the html and body elements. The body is capped at a max-width of 1020px, so the html background color will show on either side if the window is wide enough. Here is the CSS code for the background colors, the layout CSS is in a separate file:
html{
background-color: rgb(235, 177, 131);
background-color: hsl(27, 72%, 72%);
}
body{
color: rgb(91, 91, 91);
background-color: ivory;
}
I have tested this in Chrome, Safari, and Firefox and all three ignore the html style rule. However, when I specify the background color inline, such as:
<html style="background-color: hsl(27, 72%, 72%);">
Then it works. Does anyone know what might be going on here?
** EDIT **
Here is the beginning of the HTML file, you can see that I am linking the stylesheets in the head element:
<!doctype html>
<html style="background-color: hsl(27, 72%, 72%);">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="triathlon, running, swimming, cycling" />
<title>Tri and Succeed Sports</title>
<link href="tss_layout.css" rel="stylesheet" />
<link href="tss_styles.css" rel="stylesheet" />
</head>
** UPDATE **
Found the problem. I was missing the semi-colon at the end of the #charset directive before the html style rule. This caused the browser to ignore it. Works fine now.
You could try creating a class like
.html {
background-color: red;
}
and then
<html class="html">
</html>
Also, here is a fiddle of your code, and pictures in Chrome, Firefox, and IE
Chrome:
Firefox:
IE (trashy browser on win7):
EDIT: I shrunk the body 4 times so I could show it works.

Stylesheet linking not working

I am unable to link my CSS stylesheets:
Hierarchy:
index.html:
// index.html
<!DOCTYPE html>
<html>
<head>
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="blue">Hello</p>
</body>
</html>
index.css:
// index.css
.blue {
font:blue;
font-size: 20px;
}
The "font" property isn't correct.
Try to replace this :
.blue {
font:blue;
font-size: 20px;
}
By this :
.blue {
color:blue;
font-size: 20px;
}
The css path seems correct, you can check on the network tab of your browser console, if you get a HTTP 200 the file is loaded, if 404 it's not found.
Try the w3 css validator: http://jigsaw.w3.org/css-validator/
I had a similar problem and it said there was a Chinese character in the css file but the file looked fine in notepad and elsewhere. Using BabelPad http://www.babelstone.co.uk/Software/BabelPad.html I found the encoding of that file was UTF16LE. I changed the encoding to UTF8 and it worked fine.