Okay, time for my dumb question of the day.
I have an external css file that basically assign a background image to a button.
Css Code:
input.keypad
{
cursor: pointer;
display: block;
min-width: 64px;
width: 64px;
height: 64px;
margin: 0;
border: 0;
background: url(images/btn1.jpg) no-repeat center top;
}
Html code:
<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">
My dilema is that the first time I load the page it works 100%, but when I refresh it, it seems to ignore the width and height set in the css file. The image is is in the background, but cut off because of this.
I thought it might be some sort of caching so I included pragma tags which did not help at all. Any ideas?
Use Firebug to find the reason. It will help you to see which css properties are applied to the element and so on.
You select the element and you will see all css properties of it.
(source: getfirebug.com)
You have to learn that there are many useful tools out there which can help you solve many of your problems :) Especially Firebug. It is a must-have tool.
Here's some suggestions...
First, do all your page refreshes with Ctrl+F5 in Firefox to override browser cache each time.
Second, check that the button doesn't have a parent element somewhere in the CSS overriding it, such as "form.myForm input { ... }".
Third, instead of declaring the button background in the CSS, move that declaration into your HTML like this:
<input type="image" class="keypad" src="images/btn1.jpg"/>
... whilst keeping the size declarations in CSS as they are now.
See if some of those might help.
Firstly I'd like to thank Balon for pointing me in the right direction.
After using the browser add on he suggested and viewing the html source, I noticed that my <link tag pointing to the external css file was being placed within the <body of the html which I found very odd. Upon reviewing my html code, I saw that my <link tag was infact in the <head> tag, but was below the <script tag, which after swapping the tags around, the code now works 100%.
Here is an example of what I am trying to put across:
Code Before (Broken):
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
Code After (Fixed):
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
Related
I've experienced this problem multiple times and I haven't found any clear solution yet, so I was hoping you guys could help. I have simple index.php:
<?php
require('libraries/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="libraries/style.css">
<meta charset="UTF-8">
<title>Phantom 0.1 - Log In</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and style.css in libraries/styles.css:
.container {
background: url("/libraries/images/background.png") no-repeat fixed center;
}
the css works when I try to change, for instance, background color of the body element, but whenever I try to change anything from the .container (or pretty much any other class/id element) the changes won't show.
I've tried it on multiple browsers, cleared the cache and css validator (just in case) but no luck there.
Seems like the problem might be not setting the width/height of the picture. You should also add a ?> on the end in the PHP document in libraries.
First look//Sometimes requiring another file using PHP can lead to the of that file instead. When you run the website localy or online, do inspect element and check if your CSS document line is in the head. https://gyazo.com/fe8f2282e6686d432f75ff994e65c0f7
Also try going into sources when inspecting and check if all the lines are there, there might be a log made if you use Chrome. Do CTRL F5 to load everything over again.
I have a jsp file that holds html elements, it has a table in it with a specific id. When I add the border: 1px; styling internally then it works, but when I want to use a css file that specifies styling, then it doesn't, there's no border at all as a result.
the relevant part of the jsp file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Airline Database</title>
<link rel="stylesheet" type="text/css" href="styles/PassengerStyle.css"/>
</head>
<body>
<table id="main" width="1300px">
...
</table>
</body>
</html>
the PassengerStyle.css file:
#main {
border: 1px solid black;
}
the css file is in the styles folder that is in the same folder as the jsp file.
What did I miss?
It probably can't find the stylesheet, i.e. the url is wrong. Have you tried navigating to where the code in 'view source' thinks the file is located? That's probably different then where it is.
You can also try adding body { background-color: red; } to see if any styles from that stylesheet apply.
I would try to see if any other styles from the stylesheet apply (or do a test), if they do, then I would wonder is the table dynamically generated? If other styles do work, I would try giving the table to be styled a class in the tag versus using the id reference in the style sheet and see if that works. If nothing applies, probably a broken style sheet link.
I would also recommend putting the 'width=1300px' in the css style sheet along with the other css styles.
You can use Firebug or Chrome developer tools to see if your CSS is being overridden by different rule, and you can use the network tab of those tools to see if there were any errors loading the external stylesheet.
Adding !important to your css style can help in debugging, although I don't recommend it for production use.
Also try clearing your cache to see if a previous version of the stylesheet is being used.
Try this:
#main {
border: 1px solid black !important;
}
I have added
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css/" />
in the index.html above tag. But my stylesheet is not working. my style.css code is:
body
{
background-color: #23314F;
}
main
{
margin: 0 auto;
width: 880px;
background: #FAFAFA;
}
What changes should be made?
The link provided is incorrect
href="http://blogsoc.org/mail1/style.css/
must be
href="http://blogsoc.org/mail1/style.css
without last /
Not too much discriptiv question.
But try removing last slash.
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css" />
"Not working" is a very vague description of the problem.
The only obvious issue is that main will select <main> elements which do not exist in HTML. We can't tell you what to change it to because can't see your HTML. I recommend reading selectutorial.
Since the question has been updated:
http://blogsoc.org/mail1/style.css/ gives me a 404 error. You need to provide a working URI to your stylesheet. http://blogsoc.org/mail1/style.css appears to be what you want.
I had that problem before. And I solved it. The problem was that I originally declared my page as a <frameset> in Eclipse. Even when I changed it, the problem persisted. I copy and pasted the page and tested in different browsers.
The source page was linking to the stylesheet on the browser perfectly. It was just not showing the style on my page.
I created a new page with no declaration and it works.
The `<link>` tag was not the problem.
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Test Title</h1>
this is a test page.
</body>
</html>
I'm pretty new to the realm of web design, however, I've been having a problem that really has me stumped. My CSS file will not link with my HTML file. I've checked everything(I think). The file paths are identical, I linked the files with the correct syntax, yet it's still not working. I've attached some photos to help you guys get a better understanding of my problem. If you need more info, I'll be happy to provide it.
The first image is the folder I'm keeping the files in. The second one is the syntax I'm using to link the HTML and CSS. And the third and fourth files are screenshots of my editor, with the file paths on top. (And yes, I'm aware the CSS file is empty. But since it wasn't working correctly, I left it blank for now)
How do you know its not working if the CSS is empty?
Type body { background-color: #f0f; } to test if it's working.
Sometimes you need to force the browser to use the latest styelsheet. You can achieve this by adding a query string in the link.
Like this:
<link rel="stylesheet" href="Joe.css?v=1.1" "type="text/css"/>
As you can see I've added ?v=1.1 after "Joe.css
Then simply change version number every time you have done some changes in your CSS file. So in this case, when you have updated the CSS file you can change the number to ?v=1.2 and so on. By doing this you are forcing the browser to use the latest css.
But please note that you should only add this to the link not to the actual filename Joe.css - that stays the same.
Hope that helps!
You should debug your code.
Firstly, replace your <link> tag with the following and see if it works:
<style type="text/css">
body { background-color: #000; }
</style>
If your background color is changed to black - that's a good sign.
If not, something's wrong with your script or browser.
Next, replace the above piece of code with the following:
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
Create the file style.css in the same directory as your HTML script and put the following code in it:
body { background-color: #000; }
If that doesn't work, something's wrong with your script or browser.
btw, try to clear your browser cache.
Use a debugging tool in a web browser - Firebug in firefox, or the F12 developer tools in IE for example - to see what CSS is being loaded with your web page.
Try using syntax: body { background-image: url("Joe-Image/Joe-logo.png");} and are you sure you added the CSS in your html file?
Try this:
<link href="./joe.css" rel="stylesheet" type="text/css" media="all" />
I inserted the relative path. You could also try this:
<link href="./Joe.css" rel="stylesheet" type="text/css" media="all" />
With upper case j. Perhaps your web server is case sensitive?
I have a small CSS file with contents:
<style type="text/css">
li {
padding: 10px;
font-family: Arial;
}
</style>
Supposed to leave some space between list elements and change the font. Now, If I include this CSS file in the HTML like below:
<link rel="stylesheet" href="./css/lists.css" type="text/css" />
it does not work :(.
However, if I include the actual CSS code inside the html "head" block, it works.
I really prefer sourcing CSS (so different files can share the code). Any idea whats wrong and how to fix?
regards,
JP
You are supposed to omit the
<style type="text/css">
and
</style>
tags from your .css files, as those are tags used only in HTML to denote CSS styles if you're including them in your page <head>. If you include them, the browser will attempt to treat them as CSS code, which it isn't, and that causes your stylesheet to not work.
You shouldn't use script tag in your css files. Just li {..} is enough.
Also, checking path (./css/lists.css) might help. If it has mistake, nothing will be included.