On my website, the search box on the top moves and changes right when you load the page on Google Chrome. It doesn't do this on other pages even though the header on the top has the same HTML and CSS code. Can someone look at the code to see what's wrong?
And also, how can I change the URL to from something like http://www.example.com/user?u=username to http://www.example.com/username and have it load the same page?
First, you're asking 2 different questions:
How do I make this CSS Transition run on page load?
How do I change my links from parameters to paths?
The CSS transition? I don't see any transitions. If you're asking about the opacity, your tos and user pages use two different stylesheets, formstyle.css and style.css. The opacity of style.css is set to 1 and the opacity for formstyle.css is set to 0.8. And I don't see any searchbars.
For changing paths, look into .htaccess. It is what configures how browsers view files on your server.
EDIT: You fixed the avatar issue.
Related
My nav menu items (li's) are changing size on different pages and I can't figure out why. Nothing is different with the dom prior to the main content, however, from the home page to the contact page, the size of the entire menu increases by about almost 7 pixels, from 655px to 672px. I tried both Chrome and MS Edge and it happens in both browsers. I am using em for the menu font size but in the inspector it computes as 16px for both pages so its not that. The menu is actually brought into the page using server side includes so the html itself and the associated css is identical in both pages.
It's not really a big deal, but I do want to figure out why it's happening. I would put the relevant code here but have no idea which code is causing it. Its a basic html/css website (although the contact page is php, could that have something to do with it?).
https://avayoupaint.com
I shouldn't be doing this, as you shouldn't be sharing a link to a production site, but instead share code of your menu and relevant styles.
If you are on a Mac like me, and inspect your menu, you'll see the letter o for "Home" is different. Inspect with DevTools, and you'll see one is serving Open Sans, the other page serving Helvetica.
Somewhere in your code, you are not loading the fonts consistently (probably a file path issue). One font has slightly different letter shapes than the other, explaining that 7px difference.
EDIT: DevTools might be showing this for you:
Blocked loading mixed active content “http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800”
Make sure to load the Google Font using the https protocol to avoid this issue.
I'm following a PHP Ecommerce tutorial and for personal reasons I had to stop with the tutorial for a few months and today I got back to it and started off with a video where we are writing CSS code for a sidebar with categories so that it can have a scroll feature on it when more categories are added. I wrote the CSS and it didn't work, I tried watching the tutorial again and everything seems to be fine...then I noticed that if I delete the link for the stylesheet in index.php or any other file the CSS obviously won't work, but when I got into the styles.css file itself and delete all the code, save and refresh the page, the CSS remains on all page's while the CSS code doesn't exist anymore.
Please can anybody help? I will also post any code that you need.
There might be a default css file that's resetting your styles.css file. Check to make sure there is no other css file that controls the styling (one that acts as the main-stylesheet); simply do an inspect element on whatever div/id you want changed and see the css style that controls it.
I just started working on a Wordpress theme, but it won't reload the stylesheet after I update. I searched throughout here and tried the common remedies, including:
Reload holding ctrl/shift
Reload while Developer Tools is open
Reload twice quickly in a row
Get firefox/firebug
Add the timestamp generator to the end of the href
Install an extension, specifically this one: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?utm_source=chrome-app-launcher-info-dialog\
It seems like it only reloads every once in a while, and it really impedes my ability to write CSS...
Does anyone here have any ideas to fix this?
Thanks.
edit: I think it may have something to do with my host (it's free). I'm just going to move offline for development, I think.
You can always go into Incognito which does not use any chached data. It also does not save any history information.
To use it you can press Crtl+Shift+N then navigate to the page / website that you want to see.
You can also access Incognito by pressing the ☰ icon in the top right of your chrome window and click on New incognito window:
If your page is still not updating I would make sure that the file is even being saved. Because at this point your issue would not be because of files being cached..
My only other thought is that it could be your CSS itself... Sometimes your CSS is not applied due to an error in your code, another piece of code counteracting it, etc...
So see what is being applied:
press F12
OR
right click somewhere on your page and press Inspect Element.
You should see something like this (except with your code / webpage):
The parts of the "Inspect Element" will be sized slightly different but you can change those around...
Essentially click on the html element that you are trying to change the css on...
You will now see what css elements are being displayed... If they are crossed out, it most likely means that there is some other parent (or just some other property) that is canceling out the css you are adding.
These are just some of the reasons why the CSS may not be working! But I hope this helps!
When working with child theme, make sure you are loading the right css file. Sometimes you load the parent's css file.
Make sure to disable cache plugin in development time.
I have a WordPress site up atm where i need to hide the header and footer but still load them. I tried using css to set their display to none but they still appear on the site, is there a way to hide them, have i just done something wrong?
the site is: Link to website you can see there is a white band at the bottom.
Or maybe its a problem with something else, i am running this jquery script to set the background of the page to the browsers height.
<script>
$(window).resize(function() {
$('body').css('height',window.innerHeight);
});
</script>
Road to the solution:
Make sure the CSS rules you have created for this purpose are applicable to the elements you are talking about
Make sure that those CSS rules are the most specific CSS rules, beating any other CSS rule which is in conflict with your display: none;
Make sure you do not have display in the inline CSS
Make sure there is no script adding display value to the given tags
Make sure that your CSS is not cached
Profit
If you go to "Game rules" section and click around the sections "Backgammon, Narde, Nackgammon, Tavla, Old English" you will see that some sections load normally and the scrollbar works fine. Bigger sections like Backgammon and Narde do not load fully. The content in backgammon section is going out of the margin and the Narde section simply won't load fully.
What could be the issue here? All of the sections with scrollbar have the same identical settings. The only difference is that Backgammon and Narde sections have more text and more images. Could this be a reason for the glitch? Maybe the plugin somehow doesn't get to load all the content and already locks itself in place? What could be the possible solutions?
EDIT: I'm pretty sure it has something to do with tinyscrollbar plugin loading a bit too fast (before the inside content has loaded). What method could I use to put a timer on the plugin so it doesn't load as quickly or refreshes?
first it seems that your "p" elements styles do not have width set to it and when rendered they hide behind the scroll bar making some of the text not visible.
This may not answer you question directly but it may have something to do with portions of text being hidden by overflow:hidden / overflow:scroll that is being used for the scroll bar.
You could also try using the jScrollPage plug in as it simplifies the scroll bar coding.