EDIT: Three days ago my site was perfect and I didn't update any of the css or html.
A few days ago I noticed that my website's style was not being displayed as it should be. It's almost as though the browser overrode my stylesheet and displayed everything inline in Times New Roman. (I checked my website in Chrome and IE)
When I try to style a particular html element in my stylesheet, the browser won't read it. But when I style it within the html it does.
You might say that the html document isn't reading the css file properly, but the funny thing is that some of the elements are being read like the header, navigation bar and footer.
HTML Page
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="new-site.css" media="screen"/>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300|Open+Sans:400,700|Roboto:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<?php include('includes/googleAnalytics.php'); ?>
<?php include('includes/nav.php'); ?>
<div id="content-custom">
<div id="main-custom">
<div id="main-intro-custom">
<br>
<br>
<span>Contact Us</span>
<p>Questions or comments? Send us a message. We would love to hear from you.</p>
</div><!--end mainintrocustom-->
</div><!--end main-custom-->
<div id="contact">
<div id="checkfaq">
Check our FAQ to see if your question has been answered.
</div><!--end checkfaq-->
<form name="contact" method="post">
<br>
<input type="text" name="name" placeholder="name" required/>
<br><br>
<input type="text" name="email" placeholder="email" required/>
<br><br>
<textarea name="message" placeholder="message" required></textarea>
<br><br>
<input type="submit" name="send" value="Send" />
</form>
</div><!--end contact-->
</div><!--end content-->
<?php include('includes/footer.php'); ?>
</div><!-end wrap-->
</body>
</html>
Take this page for example, the only elements that aren't styled are the ones within <div id="contact">.
If I write
#contact{
background:orange;
}
in the external stylesheet, the browser won't display it.
But when I add this:
<div id="contact" style="background:orange;">
The browser displays it.
The weirdest part of all is that I never changed a single thing in the CSS nor in the HTML. I contacted hostgator to see if it was something on their end and they told me it's not a server error.
How can I fix this mess? Has anyone else encountered this problem.
EDIT: Here's a link to my stylesheet: CSS HERE
EDIT: I think the problem was that I didn't close .imgThumb:hover. Why did it take a couple of days for the browser to screw up the layout while I was testing? And why were other pages affected by this mistake if this class .imgThumb is not included in those pages?
I doubt that any one of your plugin(may be a wordpress) would have used !important to avoid overriding of style.
You can check this by inspecting the element using FireBug or dev tools. If that the case then no other choice simply go for it
#contact{
background:orange !important;
}
You're running into a style priority collision with your CSS. From what I can gather, since you can apply inline styles successfully but not from a stylesheet, you probably have another style overriding the styles in your stylesheet. You can check this by opening Developer Tools in Chrome, inspecting the element, and viewing the Computed styles. If you expand the styles you're interested in, you should see which styles are overridden, as they are crossed out.
I don't recommend this since it can get out of hand, but in a pinch you can force your styles to be applied (assuming another stylesheet doesn't do the same) by adding an !important tag to them.
#contact {
background:orange !important;
}
If you want to avoid this, you can use a more specific selector, which in CSS raises the priority of the style. If you can get this to work, I highly recommend using this approach instead, as it will lead to much less headache going forward with style changes:
.parentContainer #contact {
background: orange !important;
}
The more specific you can be, the better. If you know the element's immediate parent, I would advise you use the selector parentContainer > #contact, which is more explicit than the previous one, which will simply detect any descendant, not just an immediate child node.
Related
On my webpage there are DIV's that are created dynamically with the class of jOUT.
I want to change the color of every other iteration of the class.
I'm trying to do it this way:
.jOUT:nth-child(even){
background:#eeefff;
}
.jOUT:nth-child(odd){
background:#cccffe;
}
My HTML is as follows:
<div id="outData">
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT">
<!-- ... -->
</div>
</div>
Full HTML here
But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.
Your current CSS is working as it should, because you're targeting ALL children (including input); which means, in this scenario, all your div.jOUT are even - you should rather use :nth-of-type, which will only target instances of div.jOUT ...
.jOUT:nth-of-type(even){
background:#eeefff;
}
.jOUT:nth-of-type(odd){
background:#cccffe;
}
DEMO fiddle
This would work here:
.jOUT:nth-child(4n){
background:#eeefff;
}
More on that
This is somewhat fragile, though. A better approach is to add an alternative style class on those elements, possibly via your server-side app.
Your input[name="outDivider"] elements are in the way, thus making every jOUT element even. Here's a working pen where I took them out and made the selector work properly. I also changed the colors, so it's easier to see.
Edit: #isherwood beat me to it, but if this input[name="outDivider"] elements are absolutely necessary, his solution works best!
I just started Code Academy and I'm doing a project where I create a mock website for myself. I completed the whole thing basically, however, there were a few steps that I couldn't submit. It just gives me the "Oops" alert. Firstly, it's step 5/21. The command is to create an empty style tag. I thought I did it correctly.
This is my code:
<style>
</style>
<h1> Valentina </h1>
<p>Hi! I am learning how to make
my very own web page! I really don't care much about
blueberry muffins and long walks on
the beach.</p>
<input type="email" placeholder="Email">
<input type="submit">
But Code Academy gives me Oops!, why?
All the answers you recieved might be the case.
This code goes in the <body> section of the webpage:
<h1> Valentina </h1>
<p>Hi! I am learning how to make
my very own web page! I really don't care much about
blueberry muffins and long walks on
the beach.</p>
<input type="email" placeholder="Email">
<input type="submit">
Whislt the style tags goes inside the <head> section of the webpage.
I haven't tried, but a wild guess would be that your empty <style></style> should go in the <head> tag
There is a chance that they are expecting a complete style tag
<style type="text/css"></style>
And even though style tag can go anywhere, it's maybe you need to try to put it in <head> tag
Define Complete style tag
<style type="text/css"></style>
It wil work for you I guess.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.
I have an alerting system that sends out alerts by email. I would like to include diagnostic information but only make it visible if the end user clicks a [+] button.
Is this possible to do in email? Can I do it without using Javascript and only CSS?
If it helps, most of my clients use Outlook, iPhones, or Blackberries
Most likely, not. JS has been disabled in a lot of clients, due to viruses and stuff.
A workaround might be to include a URL to the full error-page with all details, and edit your mail to only summarize the diagnostic information.
Also, you could try to see if you can use :hover CSS, to show the element with some nasty selectors... CSS3-style? http://www.campaignmonitor.com/css/
You can do this with a checkbox, but I don't know if it is cross email client compatible. I would thoroughly check it. Here's some more information:
Reveal and hide a div on checkbox condition with css
There are tonnes of other examples throughout the web. Here is a really good working example on Litmus which uses a Hamburger Menu:
https://litmus.com/community/discussions/999-hamburger-in-email
Here's the simplified version:
<style>
#hidden-checkbox:checked + div #menu{
... css to display menu ...
}
</style>
<input id="hidden-checkbox" type="checkbox">
<div>
<label for="hidden-checkbox">Hamburger Button</label>
<div id="menu">Menu Content...</div>
</div>
Based on https://stackoverflow.com/a/31743982/2075630 by Eoin, but using classes to avoid the use of IDs for this.
Edit. For me it works for standalone HTML files, but not in Emails; In Thunderbird, the checkbox is not changeable, and in Gmail <style> tags are stripped before displaying the email and applied statically as inline style attributes. The latter probably means, that there is no way to make it work for Gmail recipients, for Thunderbird I am not sure.
Minimal example
<style>
.foldingcheckbox:not(:checked) + * { display: none }
</style>
<input type="checkbox" class="foldingcheckbox" checked/>
<div class=>Foldable contents</div>
.foldingcheckbox:not(:checked) selects all unchecked checkboxes with class foldingcheckbox.
.foldingcheckbox:not(:checked) + * selects any element directly after such a checkbox.
.foldingcheckbox:not(:checked) + * { display: none } hides those elements.
The attribute checked makes it so, that the default state of the checkbox is to be checked. When omitted, the default state is for the checkbox not to be checked. The state is preserved when reloading the page at least in this simple example.
Larger, visually more appealing, example
In order to demonstrate how it works for larger examples:
<style>
.foldingcheckbox { float: right; }
.foldingcheckbox:not(:checked) + * { display: none }
h1, h2 { border-bottom: solid black 1pt }
div { border: 1px solid black; border-radius: 5px; padding: 5px }
</style>
<h1>1. Hello there</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>Hello World.</p>
<p>This is a test.</p>
<h2>1.2. Nesting possible!</h2>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>Hello World.</p>
<p>This is a test.</p>
</div>
</div>
<h1>2. More things.</h1>
<input class="foldingcheckbox" type="checkbox" checked/>
<div>
<p>This is another test.</p>
<p>This is yet another test.</p>
</div>
I don't think you can, email clients won't allow you to run javascript code due to security issues. And you can't do what you want only using CSS.
you can't respond to click events without js.
you can try an approach using :hover on css, but i'm not sure how many email clients support it
Does anyone know how to create a coupon (printable is even better) with HTML & CSS? Forgive the horribly simple question, I don't do much of any web development :)
Thanks in advance.
EDIT: EDIT: Seth posted his answer again, which I accepted, thus I removed the answer from here (it was just a copy of his original deleted post).
I'm guessing you want
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
<div class="coupon">15 points for your reputation</div>
around a div? Or something more involved?
I stole it from here.
I'll not cover the HTML part of the question because that's very , very basic, and very specific to yourself.
For print specific styling, in your HTML mark-up you can add a stylesheet explicitly for print media, like so:
<link rel="stylesheet" type="text/css" media="print" href="my-printable-style.css"/>
You can also do this directly in an existing CSS doc, by using CSS directives, like so:
//sample ripped from http://www.w3schools.com/CSS/css_mediatypes.asp
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
#media print
{
p.test {font-family:times,serif;font-size:10px}
}
but this is generally viewed as the weaker tool because it can lead to confusion and maintenance problems to bloat a single document like this, and it achieves the same as the element based method.
For a good run down of some printable CSS issues read this list apart article.
<label for="dwfrm_cart_couponCode">
CODE
</label>
<input type="text" placeholder=" CODE" name="dwfrm_cart_couponCode" id="dwfrm_cart_couponCode">
<button type="submit" value="dwfrm_cart_addCoupon" name="dwfrm_cart_addCoupon" id="add-coupon">
</button>
<div class="error">
Please Enter a Code
</div>