this css file wont work on firefox and chrome but works fine on IE
anyone can tell me why ?

caption 
{
color:#33CC00;
font-style:bold;
}
p
{
font-family:"Times New Roman";
font-size:16px;
text-align:center;
}

and here is the first HTML file that the caption class should works

<html>
<head>
<link href="styles/mystyles.css" rel="stylesheet" type="text/css">
<title>Home Page - My Schedule</title>
</head>
<body>

<center>
<h2>write your name here...</h2> 

<a href="index.html">Home Page</a> 
<a href="CV.html">My CV</a> 
<a href="Schedule.html">My Schedule</a> 
<a href="Icourses.html">My Courses</a> 
<a href="Banner.html">Banner</a>
<a href="Links.html">Links</a>
<a href="Frames.html">Frames</a>

<br/>
<table border="1" width="800" height="300" align="center">
<caption><h3>My Schedule</h3></caption>

<br/>
<thead>
<tr align="center">
<td><img src="img3.jpg" " width="200" height="280"></td>
<td colspan="4"><center><h4>write your name here - level 4</h4> </td>
</tr>
</thead>
<tr align="center">
<td>1</td>
<td>Web Design</td>
<td bgcolor="#C0C0C0" >Off</td>
<td colspan="2">management</td>
</tr>
<tr align="center">
<td>2</td>
<td>management</td>
<td bgcolor="#C0C0C0" colspan="3">Off</td>
</tr>
<tr align="center">
<td>3</td>
<td bgcolor="#C0C0C0">Off</td>
<td >management</td>
<td colspan="3">management</td>
</tr>
<tr align="center">
<td>4</td>
<td>Web Design</td>
<td>management</td>
<td>math</td>
<td bgcolor="#C0C0C0">Off</td>
</tr>
<tr align="center">
<td>5</td>
<td bgcolor="#C0C0C0" colspan="4">Off</td>
</tr>
</table> 



<a href="index.html">Go Back</a> 
</center>
</body>
</html>

and here is the second HTML file that the p class should works

<html>
<head>
<link href="styles/mystyles.css" rel="stylesheet" type="text/css">
<title>Home Page - My Courses</title>
</head>
<body>
<a name="Top"></a>
<center><h2>write your name here...</h2> 

<a href="index.html">Home Page</a> 
<a href="CV.html">My CV</a> 
<a href="Schedule.html">My Schedule</a> 
<a href="Icourses.html">My Courses</a> 
<a href="Banner.html">Banner</a>
<a href="Links.html">Links</a>
<a href="Frames.html">Frames</a>

</center>
<ol>
<a href="#Web Design"><li>Web Design</li></a>
<a href="#Management"><li>Management</li</a>
<a href="#Math"><li>Math</li></a>
</ol> 


<h4><u>Web Design</u></h4>
<p>Web design encompasses many different skills and disciplines in the production and maintenance of websites.</br> 
The different areas of web design include; web graphic design, interface design, authoring; including standardised code and proprietary software, user experience design and search engine optimization.<br/>
Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all.<br/>
The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up, but this is a grey area as this is also covered by web development. Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines. </p>
<a href="#Top">Back To Top</a>
<a name="Web Design"></a>

<h4><u>Management</u></h4>
<p>Management in all business and organizational activities is the act of getting people together to accomplish desired goals and objectives using available resources efficiently and effectively. <br/>
Management comprises planning, organizing, staffing, leading or directing, and controlling an organization (a group of one or more people or entities) or effort for the purpose of accomplishing a goal. <br/>
Resourcing encompasses the deployment and manipulation of human resources, financial resources, technological resources and natural resources.</p>
<a href="#Top">Back To Top</a>
<a name="Management"></a>

<h4><u>Math</u></h4>
<p>MathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMath<br/>
MathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMath<br/>
MathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMath<br/>
MathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMath<br/>
MathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMathMath<br/>
</p>
<a href="#Top">Back To Top</a>
<a name="Math"></a>
</body>
</html>

Dani AI

Generated

Good catches already from (DOCTYPE) and (use font-weight not font-style). Since the DOCTYPE was added and the problem still appears in Chrome/Firefox, the most likely reasons are that the stylesheet is not actually being loaded by those browsers or that the rules are being overridden by other styles (for example a heading inside the caption). The checklist below helps narrow this down quickly.

  • Open Developer Tools (F12). In the Network panel reload the page and look for mystyles.css — confirm it returns 200 and the response is the actual CSS file (Content-Type should be text/css).
  • Open the stylesheet directly in the browser (enter its URL). If the file is not shown, the link/href or server path is wrong or case-sensitive.
  • In the Elements/Styles pane inspect the target element (the caption or the p) and look at applied rules and the computed style. Rules that are invalid or overridden will appear crossed out.
  • Check for basic problems: wrong path/case (e.g. styles vs Styles), accidental file extension (.css.txt), caching (force reload / Ctrl+F5), or extensions blocking resources.
  • Look for syntax/encoding issues in the CSS (stray characters, BOM, or earlier unclosed braces) — these can cause browsers to ignore following rules.

If the caption contains an h3 (as in the sample), style that heading directly so browser defaults do not override the color/weight:

caption h3 {
  margin: 0;
  color: #33CC00;
  font-weight: bold;
}

Final notes: modern Chrome/Firefox follow standards strictly; IE in quirks mode can hide markup or CSS problems. Fixing markup validity, serving the CSS with the correct path and MIME type, and using DevTools to trace the loaded stylesheet usually finds the issue within minutes.

Recommended Answers

All 4 Replies

Your CSS looks OK (Chrome and IE 9). I tried both pages. However, you should note that you did not include the DOCTYPE in your HTML files.

You really need to include this in the first line of your code.

<!DOCTYPE html>

The DOCTYPE declaration tells the browser to load in "Standards" mode.

No such thing as font-style: bold; should be font-weight:bold
Line 26 of your first HTML file you have an extra " in the image tag

thanks for DOCTYPE explantion now understood the benefit of it thanks alot
I did add it but same same problem :((

thanks for the first correction and the second error happened when I post this thread it not exist in the original files Thanks

anyone can help guys this problem is going to drive me to crazy !!! :S :(

any sulotion guys please help :(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.