I would like to know why if I run this code into a browser (I just write it into a new local jsp file and run it into a browser):
<style>
.rounded_control {
border-radius: 20px;
background-color: #e00;
color=#e00;
}
</style>
<textarea rows="3" class="rounded_control"></textarea>
The style is correctly applied. But if I run this code on a liferay server JSP page, the style does not apply.
PS: The style is ugly and stupid, this is just for test purpose of course :)
Related
I have a strange behavior that in my ASP.NET MVC project when I apply inline styling to html elements - they are not shown in the browser. But if I put the same styling in an external css file using a css class it will work (even putting the css class in a <style> tag on the same page doesn't work.
Example:
NOT Working
<div style="height: 100px; width: 100px; background: red;">
ABC
</div>
NOT Working
<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="myClass">
ABC
</div>
</body>
</html>
Working
mystyle.css
.myClass {
height: 100px;
width: 100px;
background: red;
}
index.cshtml
<div class="myClass">
ABC
</div>
If I don't use a cshtml file and just load a static html file then all variations work.
Why is that? How do we fix it?
At the end of the day, what truly matters in this case is the code that's sent to the browser, not the backend means that was used to send the code to the browser. If it works when you send it via an html page but it doesn't work when you send it via a cshtml page then something different is being sent to the browser in these two cases.
So the key to understanding the issue is to figure out what's different. Use developer tools to view source on the page sent via the html page, and view source on the page sent via a cshtml page. Compare the html sent in both cases. Given that the sample code is quite small it should be easy to spot the difference. Once you find the difference, you will have a good clue as to what's going on.
Your code sample doesn't contain anything related to MVC, therefore it should be sent "as is" to your browser.
So if it works in a simple .htm file (and it is), it will also work in a .cshtml, unless you forgot to tell us something about "what is not working".
Depending of your browser, you can use F12 or Ctrl U (etc) key to see page source, and check if it matches what you put in your editor.
You can also use Developer tools, or Firebug in Firefox to examine exactly which style is applied to which element.
Also, if your sample is not complete, your MVC website is maybe using some features as a layout page and some default CSS which prevent your inline style to do exactly what you were expecting.
Using w3.school's example, I had navigation buttons working. Now they incorporation a class I have in the CSS file, but not modifications on the tags.
I did a bunch of changes since yesterday, I'll go into below in case it's a clue.
For testing, I moved the CSS into the top of the same file. There's a navbar class that I created in the .css file that appears to be impacting.
<!DOCTYPE html> <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="/NavigationBarStyles.css" type="text/css"> <link rel="stylesheet" href="/test.css" type="text/css"> <style> ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; }
li {
float: left; }
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase; }
a:hover, a:active {
background-color: #7A991A; } </style>
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
Here's the list items I want converted to a horizonatal nav bar:
<td width="71%">
<div id="nav">
<ul class="NavButtonsOriginal">
<li>Home</li>
<li>Upcoming<br>Events</li>
(etc.)
</ul>
</td>
I switched all files to .php extension so I can pull the navbar.html file into all of them with an (include) php statement. I left the navbar an html.
Currently I took the nav id off the CSS in the file. I was testing here without id=nav" and put it in only to show it here. I also tried class="nav". (I had put .nav at the front of tags that were being modified.) In the file I have tags but it was the same once removed.
It's in DW and there's not yellow tag mismatch complaints.
I'm running mostly in DW and on my local machine into the browser. But none of this is php code, so it doesn't matter that I'm not on the server side?
When I put the address straight into the URL bar and everything has been uploaded, the results:
enter link description here
I'm completely baffled. It has to be some simple setting, that I have no idea of. I'm almost done with the whole site and it's needed immediately for our coming stuff.... so this is the last highly necessary piece.
Thank you so much for helping!
==============================
Now it's working!
The links from that list were in error (all missing the dc in genafterdc). They were giving a 404 not found. I just corrected them. I noticed too that I have a .html and a .php navigationbar file which are the same and both were giving the non-css impacting response. So that doesn't appear to be it.
Using the PHP file it's working now. Can it be that if the href's addresses are wrong the .css doesn't modify the tags? That's not logical. What caused it to now work? So I know for the next time it stops.
Thanks for reading through all this!
=====
Came back to post that I took the CSS out of the same file and left it only in the .css file and it's still working. Only thing I changed is the genafter to genafterdc in all my links.
Your using a class in your css .nav but your using a id in your html change the class to an id in your css #nav
I'm the person who asked this question. I'm quite sure it's a refresh, caching issue by the server. Or the loads to the server aren't working correctly.
Sometimes old versions appear, other times new. It's a mix of random timing for when the old appears. Sometimes it's after the new has posted and I've loaded the new.
Notably: It's obvious the .css file needs to be uploaded for the tag modification to be implemented, while the longer line of .css in the file with a full class setup got implemented immediately every time even when not uploaded to the server. No idea why these would be different, but it's a consistent pattern.
There were old .css styling reappearing, after it's already brought new up. So I'm not sure what cacheing is happening & when. It may be specific to my website provider's tools.
It's definitely not the .nav issue because I as I said in the question, I didn't have the .nav in while running the tests. (Though those comments did answer another question for me on .css syntax (#id vs .class ) that I was puzzled about.)
Thanks for being here and letting me know what you thought. It at the least verified it wasn't something basic I was missing. And kept me sane while at a frustrating point.
Website is up and running with it working including the paypal and input forms.
I found that I don't need to write css links in the head.But the css still works.If so,then how do I manage my css file.For example, use different css file in different page.
A the moment, you have something like this:
<template name="myTemplateName">
<p>HTML!</p>
</template>
/* Should only affect paragraphs in the template above. */
p{
color: red;
}
You must change that to something like this:
<template name="myTemplateName">
<div class="myTemplateName">
<p>HTML!</p>
</div>
</template>
/* Will only affect paragraphs in the "template" above. */
.myTemplateName p{
color: red;
}
Use css files named like template and meteor will include it
Meteor is for SPA - Single Page Application .In SPA, all your Css files will be complied and minified into a single file and served to the client in the initial page load. It is same with Html and Javascript file. In meteor it is one of the seven core principle (Data on the wire). The only things that goes between your client and server after the initial page load is your data, not the HTML or Css content.
Meteor team working on a mechanism to control the file load order. Check the trello board for information.
I'm trying to include a datepicker in one of my WebUserControl. The javascript works fine, however I can't manage to load the css.
I have my css files organized as follow :
My scripts and stylesheet are called as follow :
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src ="js/datepicker.js"></script>
<link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
In the jquery-ui-1.10.3.custom.css, the images are loaded as follow :
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #fcefa1;
background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
color: #363636;
}
The result however is the following :
intead of :
As you can see the javascript works as intended but the css won't load. I've checked the applied style with the chrome debug tool and the style is never loaded on the textbox. It worked perfectly fine when I was loading jquery from the Microsoft CDN however I felt it would be more right to have the file on my server.
I'm 100% sure that my images and css files exist in the folder of the project. I've tried to use relative path (with "~") and the property runat="server" on my link but nothing so far have worked. Any help would be great.
I'm trying to program a template with smarty, so i started to build a layout in HTML and, as expected, with CSS in an extra .css-file. When i had finished it, i started to adapt it to smarty, but i had realized, that Smarty does not work with "normal" css. Damn delimiters ^_^
Though, i tried to include the .css-file with:
{include file="templates_css.css"}
and changed my css-code a bit:
<style type="text/css">
.body {ldelim}
width: 990px;
margin: 0 auto;
{rdelim}
.title {ldelim}
font-family: Verdana;
font-size: 275%;
margin-left: 230px;
padding: 40px;
color: #929292
{rdelim}
</style>
This is what i read the last hour about "including css-files in smarty, and they recommended "Thanks! It
It is better to have stylesheets seperated from .tpl files.
It is simple to use html tags with smarty.
And so you can simply call css from .tpl file as:
<link rel="stylesheet" type="text/css" href="{$RootDirectory}/path_to_css_directory/templates_css.css" />
Hi
You Can call external style sheet like add following line in your tpl file
OR
If you want to use internal style then just write
{literal}
here start style tag
add inline style here
Here End style Tag
{/literal}
Thanks
The secret on using smarty is not how to use the delimiters. The secret hides in the way smarty handles the path. For example:
...\htdocs\smarty <- smarty library
...\htdocs\myWebsite\css\your.css <- your stylesheet
...\htdocs\myWebsite\templates\base.tpl <- the file where you load your .css
...\htdocs\myWebsite\index.php <- the file where you load the template (base.tpl)
So... If you see your template is in \templates\base.tpl and your css in \css\your.css, you may think that you need the relative path from your template to your stylesheet. That is wrong! Note, that the, let's call it "position", of your template file will be the same as the file which is loading the template file(here it is the index.php). That means your css include, like you do it in HTML will not have the path from your template to your css, but from your index.php to your css.