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.
Related
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.
I have a very irritating issue on the live site I'm designing for a client. I've dug into the CSS and HTML of the site to no avail. This only occurs in Chrome. The work in progress can be found at live.dancingsheepcoffee.com
Background:
Using Wordpress as CMS, theme designed with Underscores (_s)
Also using 960.gs system to aid layout design
Issue only occurs in Chrome; IE, Firefox, Safari, all display great.
Here's the breakdown:
On a virgin load of the site, the page displays as designed, issue free.
Upon a refresh (or second visit) the page loads "zoomed in" almost 200%, for no apparent reason. Text, navigation, headers, sidebar, and even the tiled background image. Site-wide. The main logo seems to be unaffected.
Zooming out and then back in (i.e., zoom to 90% then back to 100%) 'fixes' the page and displays as designed.
Also following the link to the same page from the menu bar loads the page correctly, however the content "jumps" sizes before displaying the correct content.
Content box remains at 960px wide (except when user toggles zoom, appropriately)
Background image also "zooms" on page load but then displays correctly when resolved above.
And the worst part is, I can't duplicate this on my main work computer, but the issue displays on every other computer. The way the issue works, it sounds like it's something on the client side, as the web server seems to render the page perfect every time, but perhaps the cached version isn't working. A thought to consider.
I greatly appreciate the time considered and help with this issue. I'll provide any applicable code to aide troubleshooting. Thanks again!
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.
I'd like to improve the "help" page of my website by adding screenshots of various sections of the site. I'm hesitant to make these static images since the site is still in development and is cosmetically changing constantly. In fact, I'm even thinking that creating images at all may be overkill.
Is it possible to load (via PHP or JQuery) a small section (with static size and x y) of another page and display it in a div?
We're doing a thing like that in our Help section, but I think that dynamically loading live screenshots is a waiste of resources.
Actually, we're doing this in our build process, just after our tests. A headless browser (selenium under xvfb) is used to take a full screen screenshot of our different pages, on our pre-deployed application.
Then, we a modification occured, the build process take care of including the modifications...
Load the Page you want the "screenshot" of into an <iframe> with the desired size and use an anchor or http://api.jquery.com/scroll/ to move the contents to the position, you want to show.
if you don't want the user to scroll away or interact with the iframe, just put a transparent layer over it.
It is also very helpful to make a GIF of the screen to show the user how to do something fast, instead of written explanations, so if there are cosmetics changes, the user can continue seeing how to do something, you can create the Screen recording GIFs with http://www.getcloudapp.com
We all know that Firebug / Web Developer Toolbar, etc. can change the HTML/CSS of any page to our local machines. Upon refreshing, however, we know these changes are not saved.
How does someone save these changes for just our local machine, in an automatic fashion that would have our changes reappear after refreshing the site?
For example, say I go to a blog posting website, which is updated by someone every day. Say I wanted to color the background of every blog's title I've read a bright annoying red, (so quick viewing in the future would allow me to skip over these). In this case, imagine the title is always an h2 element. I would add an inline element to this heading, so:
<h2>The world ends this year!</h2>
becomes
<h2 style="color:red;">The world ends this year!</h2>
Is there any way to Mark, Highlight, or change this blog post title on just our local machine for automatic viewing in the future?
If you're aiming to personalize your own web experience I recommend a Greasemonkey script
that applies CSS programmatically. There is an equivalent plugin called Stylish which is the analog of GM for CSS. There are equivalents for Chrome.
If you're aiming to provide this functionality to users of a website you're creating, I'd look into storing personalized styling on the client-side using HTML5 DOM Storage.
You don't need any plugin or program to do that, just create the userContent.css file in your Firefox profile directory, and paste your custom CSS for the webpage you want, like:
#-moz-document url-prefix(http://www.domain.com/blog/) {
#content h2 {
color:red !important;
}
#content h2 a {
color:red !important;
}
}
you can find more customizable technique on the mozilla developer site
I'm sure there are browser plugins to do something like this - especially for Firefox, etc. (If not, it wouldn't be too complicated to create one.)
Otherwise, I'd investigate Greasemonkey, and write some custom user scripts to do just this. You could have the custom user script apply to all sites, and use a local data store to determine if the site has been previously visited or not.
Ideally, instead of duplicating the history store (since your web browser is already storing history), such a plugin would integrate with the browser history. However, this may not be desirable if you have your browser history configured to only save the most recent # of days, and if you want this listing of "read" posts to be maintained longer-term.