Solved

CSS not loading in HTML

Posted on 2013-12-03
15
310 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 
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

Industry Leaders: 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

749 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