Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS not loading in HTML

Posted on 2013-12-03
15
Medium Priority
?
320 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 800 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 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 400 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 44

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

885 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