I have problem where I can't apply the style in CSS in my ASP.NET MVC application.
The behavior is it applies for the first time and then the subsequent changes to the CSS is not getting reflected in my _Layout.cshtml. I am not sure what I am missing here.
CSS file
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
header,
footer,
nav,
section {
display: block;
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset
{
border:1px solid #ddd;
padding:0 1.4em 1.4em 1.4em;
margin:0 0 1.5em 0;
}
legend
{
font-size:1.2em;
font-weight: bold;
}
textarea
{
min-height: 75px;
}
.editor-label
{
margin: 1em 0 0 0;
}
.editor-field
{
margin:0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid
{
display: none;
}
#Header
{
color:white;
padding:1px;
}
#Content
{
float:left;
margin:10px;
}
#SideBar
{
float :left;
margin:10px;
padding :10px;
border: dotted 1px red;
width:180px;
font-style:italic;
}
#Footer
{
text-align:center;
clear:both;
}
For example I changed "border" in #SideBar from red to black. But it always show red. I might be doing something fundamentally wrong here.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<!--link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
<link href="#Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;" >
</div>
<div id="SideBar">
#Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
</div>
<div id="Content">
#RenderBody()
</div>
<div id="Footer">
<p>Copyright © XXXXXXX</p>
</div>
</body>
</html>
However, if rename the physical file and change the reference in _Layout.cshtml, I could see the changes I made.
Please help.
Thanks
Hit the Ctrl-F5 for reloading the page without using the cached contents
The browser can cache static files such as CSS files.
If you update a CSS file and the change does not appear when you browse, try using CTRL-F5 within your browser.
This will work when anything else won't, like in my case:
Credit goes to: atticae
You can append a random query parameter to the stylesheet url (for example via javascript or server side code). It will not change the css file that is being loaded, but it will prevent caching, because the browser detects a different url and will not load the cached stylesheet.
<link rel="stylesheet" type="text/css" href="http://mysite/style.css?id=1234">
Unfortunately ctrl+f5 does not work for me. I have to go to Chrome: F12 -> Network tab -> right click within white area where all the get and post records are -> Clear browser cache. Now if you press ctrl + f5 or just f5 it should work.
In my case the problem was I had a resource style file which was referring by the code
string location = Page.ClientScript.GetWebResourceUrl(typeof(PageBase), "MyNS.Common.Web.Base.CommonStyle.css");
LiteralControl include = new LiteralControl(string.Format(tempLink, location));
When I change / add some style in the file it was not reflecting in the CommonStyle.css
it was not reflecting in the web page even after clearing the cache(ctrl + f5 , ctrl + shift + f5)?
On my analysis I found the reason was -
stop the debugging, rebuild the solution and run it again so that all
the web resource styles load once again, simply clearing the cache as
we does normally for any html change will not help,after doing this my
change in the style got reflected in the web page and it fixed my problem.
Related
So I plan to make my login page responsive using bootstrap. But when I add bootstrap link in my code, the display of my HTML is affected for some reason. I wanna know why is that, and can you give me a tip how can I make my login page responsive?
Here is the image if there is bootstrap link added:
Here is the image if there is no bootstrap link:
My code:
body {
width: auto;
margin:0;
padding:0;
}
#font-face {
font-family: "Gidole";
src: url(CODE Light.otf);
}
h2 {
text-align: center;
}
.container {
width: 960px;
height: 500px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.row {
width: 320px;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
color: #191919;
background-color: green;
box-shadow: 0 1px 1px #ABBEB5;
font-family: "Gidole", sans-serif;
padding: 10px 55px 40px;
border: 1px solid black;
}
input[type=text],[type=password] {
width: 97%;
height: 22px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
color: #191919;
font-family: "Gidole", sans-serif;
margin-top:5px;
}
#login {
width: 100%;
margin-top: 5px;
padding: 10px;
font-weight: bold;
cursor: pointer;
/* display: block; use for centering */
display: block;
color: #000000;
}
#signup {
color: #191919;
margin-top: 5px;
cursor: pointer;
font-size: 12px;
text-align: center;
display: block
}
#forgotpass {
color: #191919;
cursor: pointer;
font-size: 12px;
text-align: center;
display: block
}
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<h2> User Login </h1>
<div class="myForm1">
<form action="p1.php" method="POST">
<input type="text" name="username" placeholder="Username" /> <br/>
<input type="password" name="password" placeholder="Password" /> <br/>
<input type="submit" name="submit" id="login"/>
</form>
<form action="register.php" method="POST">
<p> Sign up </p>
<p> Forgot password? </p>
</form>
</div>
</div>
</div>
Twitter Bootstrap is a collection of css and js components ready to be used in your project.
You used some class names used by Bootstrap in your project. Without loading Bootstrap, the rules defined in the library for those classes do not apply, because you're not loading the library. When you load it, they apply.
Some of the classes used by you and which Bootstrap styles up are: container and row. You should take some time and look through their examples and also inspect the applied CSS rules to better understand what each does.
Also, when you decide to use Bootstrap, best practice (by far) is to start from their provided examples and try to keep modifications to a minimum, especially regarding layout.
Please note Bootstrap provides fixes and solutions for most common layout problems such as
browser rendering differences
responsiveness
But, again. Bootstrap is not a robot which analyzes and fixes your page. It's just a collection of CSS rules, #media queries (and sometimes small js snippets). If you plan on using it, you need to learn what each of those components does.
Pretending it works out of the box is like pretending a plane to fly itself. Some do, but it's still best you know how to steer, land and take-off, just in case the automatic systems fail.
To further elaborate what #Andrei Gheorghiu answered, Kindly open
up your console on your Google Chrome browser (right click then 'Inspect Element' or press Ctrl + Shift + I or F12)
You can see in the image that your class {container} from your [style.css]
{width} property was override by Twitter Bootstrap [bootstrap.min.css] class {container} property (check your console).
CSS properties will change depending on the importing order of your css files. In this case, I import the css files in this order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css" />
This means that the css properties will start off by [bootstrap.min.css] follow by [style.css]
So if we reverse the order like this:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
This will happen:
And this one....
Now the Twitter Bootstrap [bootstrap.min.css] class {container} property overrides your [style.css] class {container} property.
You can also see that there's a prefix here '#media'. You can learn more about using #media queries
to make your login page responsive here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
But like #Andrei mention, you can start of your login page layout from Bootstrap's provided example and keep your styles to a minimum if possible. Hope this helps for you.
I need my "column" class in the internal CSS to float center while the external CSS has it set to left.
Here is my CSS file:
body { text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
#report { width: 1269px; margin: auto; float: left;
}
div.column{ margin-top: 10px; padding: 0px 0px; float: left; }
div.first{ padding-right: 8px; border-right: 1px grey solid; }
div.second{ margin-left: 8px;
}
...
Here is my HTML with internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Dual Server Report</title>
<link rel="stylesheet" type="text/css" href="ServerReport.css">
<style type="text/css">
div.column{ float: center; }
</style>
</head>
<body>
<div id="report">
<h1>Automated PowerShell Install Report</h1>
<h2>This report was ran: 07/07/2015 09:03:21</h2>
<div class="column">
...
I checked out these three similar questions but nothing I tried worked.
Internal Stylesheet NOT overriding External stylesheet?
“Inner” CSS Not Overriding “Outer” CSS
Overriding External CSS
Edit:
I remembered looking up the "float" property yesterday but I did not remember what I found; I feel pretty silly for posting this before going to double check. It makes sense that float would not have a center property.
I'll leave this up in case anyone in the future makes a similar mistake. Thanks to everyone who answered for being so respectful in pointing out this error I should have found on my own.
The property value of float: center does not exist.
The float property has four values: left, right, none, and inherit.
The only valid values for float are: left, right, none, inherit.
So this code will be skipped and not override the css file.
Please look here for more information on the float property.
There is nothing like float: center in CSS
Another way to do it
Change your CSS under the html page
div.column
{
float: none;
margin: auto;
width: 200px; /* set the width (Except 'auto') */
}
So on the current website i'm working on, I can't make any changes to the css stylesheet on the page. When I try and make a change it works initially but as soon as I let go of the mouse it reverts back to what it was. It is like the stylesheets or locked or something. I would like to take some of the top padding of the title and change it's size but but it will not permanently change. Have a look at the website emmaanddavidswedding.com and you will see what I mean. I know for sure that it is my coding and not the dreamweaver program because I dont have this problem when working on other files/websites. If anyone can lend me a hand that would be great. Thanks in advance. Here is the code:
html
<div class="title">
<a class="title a href" href="http://www.emmaanddavidswedding.com">Emma & David's Wedding</a>
</div>
css
.title {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: 363%;
width: 100%;
padding-top: 15%;
margin-top: 1%;
text-align: center;
}
.title a href {
color: #ffffff;
}
.title a:hover {
color:#ffffff;
text-decoration:underline;
}
The following is the issue here.
<a class="title a href">
You cannot have gaps in your class names. For to work you need this in your CSS
.title.a.href {
}
I would advise against having a .a class name and .href class name.
Instead try
<a class="title">
and use
a.title { }
to target it
Have a page to install links to other sites with link inputs as follows:
<div id="mainContent">
<div id="links">
Go To Google
Go To Yahoo
Go To ESPN
Go To ABC News
Go To Youtube
</div>
</div>
controlled by the following css in an external stylesheet
div#links a {
width:550px;
display:block;
margin-left:10px;
margin-top:2px;
padding: 2px 5px 2px 5px;
text-decoration:none;
font-family:arial;
font-weight:bold;
text-align:center;
background-color: black;
color: white;
font-size:9pt;
border: 3px red ridge;
}
a:hover {
background-color:navy;
color:red;
font-style:italic;
}
The display including the hover worked when operated in a standalone situation with the css in the head, however when I move it into a real content area in a page and install the css in the external style sheet the hover no longer works!
You are probably not linking to your stylesheet the right way.
Either you haven't linked it at all:
<link href="/style/style.css" rel="stylesheet" type="text/css">
Or you are using a local path:
You should (almost) always use relative paths for linking to content on the web.
So:
http://example.com/style/style.css
or
file://host/path/style/style.css
becomes
/style/style/css
My print.css pages are printing out very small, super reduced and the text is like 6 pt.:
#charset "UTF-8";
/* CSS Document */
body {
background: white;
font-size: 12pt;
/* Change text colour to black (useful for light text on a dark background) */
.lighttext
color: #000
}
/* Remove unwanted elements */
#menu, #header, #nav, #prod, #home, #our, #work, #whole, #contact, #circle, #logo, #flower, #navblank, #bottom, .noprint
{
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
Do not understand why - does anyone have any suggestions to correct the output of this print.css?
As pt stands for points being 1/72th of an inch I would hazard a guess that it may be down to screen size, although in reality it could be any number of things. We'd really need more information.
Have you tried using em's instead? They're the best way of dealing with font sizes.
What about an absolute value for font-size (instead of 90%) just to rule that out?
Check if is there is any script that modify inline styles, forgotten CSS that applies to all types of media. Try adding !important. Then check your printing options. If it is something like shrink to fit, then there is not much you can do in CSS. Also try printing with alternative browsers, maybe that will diagnosing.
Perhaps you have another stylesheet that is being loaded when printing? What does it look like in Print Preview?
It's possible you have another stylesheet that you don't intend to be loaded for printing but is being loaded for printing anyway. Check the 'media' attribute:
something like this will be loaded on screen or in print:
[link rel="stylesheet" href="css/style.css" type="text/css" media="all" /]
so will this:
[link rel="stylesheet" href="css/style.css" type="text/css" /]
And of course this is for print only:
[link rel="stylesheet" href="css/print.css" type="text/css" media="print" /]
To keep a stylesheet from being loaded for print, use something like this:
[link rel="stylesheet" href="css/print.css" type="text/css" media="screen, projection" /]
(NOTE: use angle brackets, not square brackets as I have above. Somehow 4 space indenting is not working for me)
More about media attribute types
You're missing a } to close your body declaration:
body {
background: white;
font-size: 12pt;
/* Change text colour to black (useful for light text on a dark background) */
}
.lighttext
color: #000
}
try pressing ctrl+0 you might have unknowingly reduced the font size on browser-side