i am facing a very weird issue, i was working on a wordpress site on version 4.9.1 i included some css which the client then told to remove i have removed the css but that css is still loading up on the website although it does not exist
here is the screenshot!
i have checked this file a dozen times, i have cleared the browser cache ,tried hard refreshing it, opened it in incognito mode, everything still it loads up , is there something about this scenario i don't know?
the domain is Website link
If you check the CSS file included: http://smirksbrand.com/wp-content/themes/Avada/assets/css/style.min.css?ver=5.1.4
at the end of it there's still this:
.fusion-main-menu > ul > li {
padding-right: 20px!important;
}
that you want to get rid of.
Consider removing this from your head tag...
<link rel="stylesheet" id="avada-stylesheet-css" href="http://smirksbrand.com/wp-content/themes/Avada/assets/css/style.min.css?ver=5.1.4" type="text/css" media="all">
Isn't this the one that's disturbing you?
Edit:
Based on your picture, if you want padding-right to be 45px, put !important to it...
.fusion-main-menu>ul>li {
padding-right: 45px!important;
}
This will take precedence over the rogue loading style... Hope it helps...
Related
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 had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.
In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:
.radioscrolllist .list {min-height: 2em;}
However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.
Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:
dialog.css
plonebrowser.css
columns.css
This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:
/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
/* Image browser was jumbled */
float: none;
}
#content #internallinkcontainer .list.item span,
#content #internallinkcontainer .list.item a {
/* Link browser was packed too much */
position: inherit;
}
#internallinkcontainer input[type="radio"] {
vertical-align: middle;
}
/* #end */
Which get's my Link Browser looking like this again:
Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with
plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.
plone.css
plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.
plone.css generation:
https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py
Note: plone.css is #import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.
I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):
#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }
(Clearly we should find a less hacky solution, but I haven't had a chance.)
You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.
Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.
I can not explain this at all, but I've put a theme selector on my site. A javascript dropdown box that changes the CSS the site is using.
Theme 7 is a theme that had an image of lights in the background. I didn't think it worked with the rest of it so I changed it to a different image using cPanel on my hoster, hit save, and it saved and changed like any other file.
I refreshed multiple times to get the changes, and scrolled down to Theme 7 to see how the new image looked.
Same image as before.
I tried a new image. Same thing.
....I deleted the line background-image altogether, and then quit out of the browser and restarted it.
The lights are still there.
What is going on??? I'm using Chrome btw. In Safari the image was just straight black. I think I've stumbled on a cursed picture.
Here's the css
body {
font-family: Calibri, Arial;
text-align:center;
*/background-repeat:repeat-y;
background-size: 100%;*/
}
input {
padding: 3px;
font-size: 22px;
}
select {
padding: 4px;
}
/*-----CLASSES-------*/
More stuff here
Try pressing ctrl+r to clear Chrome's cache.
It probably cached the css you were using before in your browser (and possibly the image too?) That's the only answer that makes much sense. You can force-clear the browser's cache of the css by changing the call to the file my-styles.css?abcdefghijkl in your html (or wherever it is you are loading up the styles from).... but manually clearing your cache will work too.
You may want to incorporate a dynamic Cache Control... every time you change the theme with javascript, have it change or reload the cache so your users won't have to continuously clear their own cached files when they change the theme... Depending on what server you are using, you can do this with php and .htaccess or .NET and web.config, im not sure if there is a way to do it with javascript directly..?
Well I used css3pie in asp.net which is not working. I tried every possible solution. Searched a lot of forums but failed to properly use PIE in asp.net. Let me show you my project structure.
I have master and inner master pages in my project hierarchy.
The css3pie is working on those pages which don't use master pages.
My css and .htc files are as follows
Root
css
script
When I use css3PIE without Master page the it works:
<script type="text/javascript" src="../Scripts/html5.js"></script>
<link href="css/IE.css" rel="stylesheet" type="text/css" />
The above code is working. But when i used any page with master. It is not working. My css looks some thing like this:
behavior: url('../Scripts/PIE.htc');
The css is placed in IE.css file. You can see the in above code.
Remember i tried every possible combination to refer .htc in css
behavior: url('../Scripts/PIE.htc');
behavior: url('/Scripts/PIE.htc');
behavior: url('/PIE.htc');
behavior: url('PIE.htc');
with and without quotes
One thing more. A lot of people are saying it is due to relative path. Well i tested those things. when i look at the rendered html in Development tools in IE. It applys the behavior but not working.
Please help me. It will be highly appreciated. Thanks in advance
Ok I fixed the issue. So i am writing here to help other peoples. When you are using master pages in asp.net and you are using .htc file as relative path in css then use position as relative. for target element which used css3 style. For example the css class is round-box
<style>
.round-box
{
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(PIE.htc);
}
</style>
The html element on which we will apply .round-box style is
<div class="round-box">This is a round Div<div>
So those who have issue with round corners not working on IE just put IE specific position:relative for IE browsers like.
<!--[if lt IE 9]>
<style>
.round-box
{
position: relative;
}
</style>
<![endif]-->
This will fix the round issue or those that have no border visible. Keep in mind position:relative will effect child elements. Use it wisely
It's not a path issue... it has to do with the web server understanding how to serve the .htc file. There is a wrapper script included that does this for PHP, you can start with that and tweak it for IIS.
I already double checked my URL, and the name of the files, but I can't seem to get the image to show up. Why is it like that? Here's my code (take note the <p> is inside the body tags, I didn't add the full code, I only added the head and the specific problem).
<html>
<head>
<title>Head First Lounge.</title>
<link type="text/css"
rel="stylesheet"
href="stylesheet/style.css"
media="screen"/>
</head>
<p class = "guarantee">
Our guarantee: at the lounge, we're committed to providing you,
our guest, with an exceptional experience every time you visit.
Whether you're just stopping by to check in on email over an
elixir, or are here for an out-of-the-ordinary dinner, you'll
find our knowledgeable service staff pay attention to every detail.
If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
And here's the CSS rule for that part
.guarantee{
background-image: url(images/background.gif);
font-family: "Geogia", "Times New Roman", Times, serif;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
line-height: 1.9em;
font-style: italic;
color: #444;
}
Try this:
background-image: url(../images/background.gif);
Without the ../ it is looking for an images folder inside your stylesheet folder which does not exist. So you have to go back a directory where the images folder is located.
Edit: You can also shorten up your CSS styles like so:
.guarantee{
background: #a7cece url(../images/background.gif);
border: 1px solid black;
}
The browser will be searching for the image within your stylesheet directory at the moment.
Might be worth trying changing
background-image: url(images/background.gif);
to
background-image: url(/images/background.gif);
which might be the cause of the problem.
I was having this same problem solved it by adding / to the beginning of the image url
(example: background-image: url(/images/background.gif);)
Hope this helps :)
I know this answer is a bit late but this link will give you a detailed explanation for css file paths.
/ returns to the root directory
../ moves one directory backwards
../../ moves two directory backwards
https://css-tricks.com/quick-reminder-about-file-paths/
FYI This page just helped me figure out the solution to my problem, where I was viewing an html page in my Chrome browser and the main.css was not loading the background image, and THE REASON WAS, because the 'relative link' in the main.css had a / at the beginning, and as someone said above, that goes to the ROOT folder, which on my Windows OS is of course C:, but on the server it is the root for that site which DOES work! So I had to remove that initial / at the beginning of the /images/backgroundimage.jpg link and then it DID work on windows. Now lets see if it works on my server without that slash...YUP!
So it DOES work with or without the / at the beginning of /images/backgroundimage.jpg in my css on this server, but on Windows the / brings it to the root c:\ drive. And btw I used "inspect" in the Browser and the "Console" at the bottom to see the link C:\images... that it was looking for, then found this page with this answer, that beginning / brings it to the ROOT folder.
May be you've used backward slashes (\) instead of forward slashes (/) in the image path.
I did this mistake and was fighting with my chrome browser. I copied the image path from Windows Explorer (which uses backward slashes)