Solved

CSS not loading in HTML

Posted on 2013-12-03
15
308 Views
Last Modified: 2013-12-03
Hi,

Here is my css and html file attached.  css  is not loading in this HTML.

Can you please tell what I am missing ?  what correction is required here ?
css-issue.zip
0
Comment
Question by:cofactor
  • 8
  • 4
  • 2
15 Comments
 

Author Comment

by:cofactor
ID: 39692077
comments please.
0
 
LVL 17

Expert Comment

by:Chris Millard
ID: 39692088
First of all, '.portlet-paymentservices' from your css file isn't referenced anywhere in the HTML file so none of the styles beginning '.portlet-paymentservices' will display correctly.

Next, you should remove the '<style>' tag from the beginning of the css file - it's not needed. Also, you do not need to put the '<link>' tag inside of '<style></style>' tags within the HTML code.
0
 

Author Comment

by:cofactor
ID: 39692097
>>>First of all, '.portlet-paymentservices' from your css file isn't referenced

true. .................. but there is a class .tbl for  table  which is referenced ....please check  that.

>>>Also, you do not need to put the '<link>' tag inside of '<style></style>' tags within the HTML code.

will check this out and let you know soon.
0
Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

 
LVL 17

Expert Comment

by:Chris Millard
ID: 39692111
Yes - but again, in your css, all of your .tbl reference are inside the .portlet-paymentservices styles.

If you go to the tables section of your css, and remove .portlet-paymentservices from each of the .tbl styles then you'll see that they then load ok.
0
 

Author Comment

by:cofactor
ID: 39692135
If you go to the tables section of your css, and remove .portlet-paymentservices from each of the .tbl styles then you'll see that they then load ok.


this   did not work.  .....I have tested this here..............did you check it at your side ?

If its working for you ,then  please  attach the file so that I can check the same here.
0
 
LVL 17

Accepted Solution

by:
Chris Millard earned 200 total points
ID: 39692148
Yes it works for me. Zip file attached.

Screenshotcommon.zip
0
 

Author Comment

by:cofactor
ID: 39692164
my quick  comments in italics..

1.  you did not comment out  </style>  in css file.  

 //  is it a typo  or its required ?

2.  you  have removed   DOCTYPE in html
//   I  want to make it HTML 5 compliant ..so I want to keep  DOCTYPE here.....Is it not possible ?


Anyway ,I will do these changes at my system  and deploy in server to see this and will revert back soon.
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
ID: 39692194
3 things wrong that you need to fix:

1. In an HTML document, you add CSS by linking an external file, or wrapping the CSS in <style> tags. You don't link the external file inside of <style> tags.

2. You don't wrap CSS inside style tags inside of an external CSS file - remove the start and end <style> tags from your CSS file.

3. Every single rule in your CSS file is qualified to only act on elements contained within a wrapper element with a class of .portlet-paymentservices. Either remove all of that from your CSS or add that class to the <body> element (or possible the form, depending on what you need)
0
 

Author Comment

by:cofactor
ID: 39692269
thanks....this is working now.....issue resolved.


I had  a hard time  to pass through this though.... it was not working because  browser cached old css ...and so I was not able to view the new css. I cleared browser cache and now  I can see your new modified css.

Things are fine.


Now  little bit learning time ....

you said    ....
Every single rule in your CSS file is qualified to only act on elements contained within a wrapper element with a class of .portlet-paymentservices.


I am not aware of multiple css class syntax.


say if I have..

 .class1 .class2 .class3{
 // some css rule here
}


now does this css rule will be applicable to only  class3  elements in the above hierarchy ?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39692287
If you have a rule like this:

.class1 .class2 .class3 { color: blue; }

It will only be applied to elements with a class of class3 that exist within an element that has a class of class2 that exists within an element that has a class of class1!! Make sense :) For it to apply, your HTML would look something like this (and it would only apply to the class3 div!!):

<div class="class1">
   <div class="class2">
      <div class="class3">Some Text</div>
   </div>
</div>


If you want it to apply to all 3 classes, then you separate with commas

.class1, .class2, .class3 { color: blue; }

Now that would apply to elements with a class of class1, class2 or class3. All of these:

<p class="class1">SomeText</p>
<p class="class2">SomeText</p>
<p class="class3">SomeText</p>
0
 

Author Comment

by:cofactor
ID: 39692299
>>.class1 .class2 .class3 { color: blue; }

>>.class1, .class2, .class3 { color: blue; }

Thanks.  Its beautiful.  I liked it.
0
 
LVL 17

Expert Comment

by:Chris Millard
ID: 39692305
No points even for an assisted solution?
0
 

Author Comment

by:cofactor
ID: 39692350
>>>No points even for an assisted solution?

oops ...I am so sorry....I thought I was interacting with one expert only.... i.e  roybridge

I want this to be modified.....Is it possible to change to this ?

Points to be given
roybridge  point = 200   //accepted solution ...helped to fix problem first.

Chis = 100  // assisted solution....helped to learn concept.


I don't see any Edit button to modify points.

sorry ...@roybridge ........Its a mistake  because I did not look at the expert names.....I  thought I was discussing with the same expert.......let me know if I can change point distribution.
0
 

Author Comment

by:cofactor
ID: 39692896
I have updated points.  Thanks for the  quick  reply.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question