Solved

CSS not loading in HTML

Posted on 2013-12-03
15
306 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
Comment Utility
comments please.
0
 
LVL 17

Expert Comment

by:Chris Millard
Comment Utility
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
Comment Utility
>>>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
 
LVL 17

Expert Comment

by:Chris Millard
Comment Utility
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
Comment Utility
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
Comment Utility
Yes it works for me. Zip file attached.

Screenshotcommon.zip
0
 

Author Comment

by:cofactor
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
Comment Utility
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
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
>>.class1 .class2 .class3 { color: blue; }

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

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

Expert Comment

by:Chris Millard
Comment Utility
No points even for an assisted solution?
0
 

Author Comment

by:cofactor
Comment Utility
>>>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
Comment Utility
I have updated points.  Thanks for the  quick  reply.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now