I'm trying to figure out why in Chrome (and only in Chrome) an element of the header of my site change position after reloading. It has certainly something to do with the cache, since when I press Ctrl + Shift + F5 the layout fixes itself.
The troublesome part is this:
#header-helpful {
clear: right;
color: #696969;
display: inline-block;
float: right;
font-size: 15px;
font-weight: 500;
line-height: 1.4em;
}
header-helpful .action {
display: inline-block;
float: left;
line-height: 20px;
padding: 4px 0px;
}
header-helpful .value {
margin-left: 5px;
}
<div id="header-helpful">
<div class="search-form">
<form method="get" id="searchform" action="https://rhesis.it/"></form>
</div>
<!-- end .search-form -->
<div class="action">
<div class="value">ISSN 2037-4569</div>
</div>
The element <div class=action"> looks fine on the first load, but after a reload goes down along with the <div class="value">.
I tried to look for a solution, but nothing I tried works.
You you want to check, the site is rhesis.it.
Do you have any idea? Any help appreciated!
Edit 1: The problem fixes itself just by increasing/decreasing the size of the window. But realoading it resurfaces.
Edit 2: here's what I (and other) see:
first load or Ctrl + Shift + F5
after reloading
I checked the page with Chrome and the issue you describe never appears.
To check if cache is envolved try this: type in Chrome location the address adding a random number after a ?, something like rhesis.it?5675859 or whatever number you want.
At this point your page should appear correctly paginated, than reload it...
If the problem disappear shurely the cache is envolved and should disappear deleting the whole cache of Chrome or the single envolved file of the cache.
I'm working on my first custom Tumblr theme, and the pagination isn't working correctly. I have the links for "Next" and "Previous" set to go to {NextPage} and {PreviousPage} instead of URLs, but they only link right back to the same page they're on instead of going backward or forward. My html looks like this:
{block:Pagination}
<p id="pagination">
{block:PreviousPage}
←
{/block:PreviousPage}
Page {CurrentPage}/{TotalPageCount}
{block:NextPage}
→
{/block:NextPage}
</p>
{/block:Pagination}
CSS:
#pagination {
font-size: 25px;
color: silver;
text-decoration: none;
}
#pagination a {
font-size: 50px;
text-decoration: none;
margin-top: -20px;
}
When I click on the links, they take me to the exact same page I'm clicking from (i.e. if I'm on the homepage, the link is the homepage; if I'm on page 5, they take me to page 5). Does anyone know why they're not linking correctly?
The only thing I see is
{TotalPageCount}
should be
{TotalPages}
Although I don't suspect that would cause prev/next to output current page. Any other html or template tags interfering?
Sorry if this question seems trivial, this is the 1st time I've used an svg file, and was unable to resolve the issue with existing Q and A on stack.
I have a logo which is an svg file. I want to make the logo 'clickable' and work as a link to the home page. I initially did this with a jpeg and all worked as expected, but once I switched to an svg the logo does not display (however I verify if I click in that general area the link works). Does anyone have any recommendation on what I need to change so the image displays?
I'm beginning to think this may have to with Azure (while the svg opens locally it does not open through the project, while other image files do.
SVG file was created using inkscape and renders correctly on a browser when opened as a standalone.
JavaScript loads header onto each page:
//Header for Main pages, with Logo
function getHeader()
{
var header='<ul id="hlogob">'+
'<li>Home</li>'+
'</ul>'+
'<h1 > Big Hat</h1>'
document.getElementById("header").innerHTML=header;
}
CSS Styles the header, and link with a background image (want it to be my svg)
/*Header styling and Logo*/
.header
{
background-color:#FAFAEB;
text-align:center;
font-family: Algerian;
color: #37342a;
height:100px;
padding-bottom:10px;
/*border-bottom:5px inset #DCDCDC;*/
margin:0px;
line-height:20%
}
ul#hlogob li
{
display: inline;
list-style: none;
}
ul#hlogob li a
{
color: #999;
text-decoration: none;
}
a.hlogo
{
display: inline-block;
background: url("../Images/bighat4.svg") no-repeat;
background-position: center;
background-size: 100px 70px;
width: 100px;
height: 70px;
text-indent: -9999px;
text-align: center;
margin: 0;
}
a.hlogo:hover
{
border: none;
}
Header is loaded by js onto each page
<header class="header" id="header">
<!--Loaded by Script-->
</header>
<script type="text/javascript">
getHeader();
</script>
The issue as it turns out is not with the code, but with the default settings on azure which do not have mime type for svg. See Use SVG in Windows Azure Websites
I want to use an external .CSS file.
When I load a page in chrome I see only the Html part. The CSS part seems to be ignored.
So I go to inspect element and look at the sources tab an there are 2 files. When I open the html and CSS file it looks nice. But the page is still not rendered the way it should be.
Only when a edit something in the CSS file,the page gets re-rendered and everything looks fine.
When I save the html and css file together in a local folder and open the html in a browser everything looks fine too.
this is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>server</title>
<link href="server.css" rel="Stylesheet" type="text/css">
</head>
<body>
<ul class="navbar">
<li class="navbar">Assignment</li>
<li class="navbar">Solution</li>
<li class="navbar">Logout</li>
</ul>
<H1>server</H1>
</body>
</html>
And this is server.css file:
body {background-color: #efefef;}
ul.navbar {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
ul.navbar li.navbar {
display: inline;
}
ul.navbar li.navbar a.navbar {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
ul.navbar li.navbar a:hover {
color: #000;
background-color: #fff;
}
I tried searching for tornado CSS external files and found tips on using a static directory but while both files do show up as source in the element inspection I do not think anything is wrong with the tornado script.
Edit -- I set aside my stubbornness and tried the "static" approach. This works fine. So I guess that writing out a .css file is different from delivering a static .css file. There seems to be some HTML interpretation going on but I would still like to here what goes wrong and why. -- tidE
These are the handlers I use:
class CSSHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.write(file("html/server.css").read())
class MainHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.render('html/assignment.html', title="server")
But again this part works. I can GET /assignment and I can GET /server.css. When I include the css part in a style tag inside the header of the html file everything works fine too. But this is not what I want to do. I want to provide some basic css stuff in one file for several html pages.
You need to set an appropriate content-type header for all non-html pages. self.set_header('Content-Type', 'text/css').
Also consider using StaticFileHandler (just set the static_path keyword argument to the Application constructor) instead of serving static js/css files yourself. It will take care of the content-type and other headers for you and improve cacheability.
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.
I have created a test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
File: /css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* #import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
and now the file: /css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Problem:
When I use the above code, the site_header div does not have any formatting/background.
When I remove the link line from the HTML doc for site_header.css and instead use an #import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div.
Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...
So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.
The #import directive has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
To quote WC3:
"any #import rules must precede all
other rules (except the #charset rule,
if present)"
See http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each #import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
Can I just say, pet peeve here, but place images related to the CSS file in the CSS folder itself, not in /images/.
The point of CSS is the separation of style and content, and only content images should go in /images/. Any images called by the CSS should be placed in the same directory and called pathlessly, e.g.:
body {
background: url(wallpaper.png) repeat;
}
That way at a later date if it comes to changing the style, or making multiple styles it's just a case of updating one link and moving one folder (/css/) rather than having a mess of images scattered all over the filesystem. Plus it's always a bad idea to use absolute paths to files (such as /images/wallpaper.png).
First of all, you have invalid markup. The link tag must be closed...
<link rel="stylesheet" href="/css/main.css" />
Second, why don't you use double-quotes consistently for element attributes (here in the link tag you happen to use single-quote)? This is not part of the problem, but I find it daunting that you would intermingle various syntax conventions like this.
Lastly, I would not recommend using #import because it does not offer a compelling benefit. It must be the first thing in the CSS file. An additional HTTP request still has to be made for each of the additional CSS file(s). And on top of that, IE cokes when you to specify a target media for imports. I stick to the good old classic link tag because it just works (given that you have valid markup!).
Use firebug to inspect the div and see what styles are being applied to it, you might get some more insight.
use #import rule into your main.css file like:
#import url("css/site_header.css");(this code should be on top of your main.css)
the above import snippet will bind your multiple css files into single css
then that main.css file use into your HTML.
For any issues with CSS like this I would recommend using firebug. You will be able to see if your site_header.css is loading properly.
If it is loading you will be able to see which styles are being applied to which elements, perhaps some are being overwritten?