Member Avatar for andreiviziru

Hi I have the folowing problem:

The css wont apply to html although everything is corectly

<link href="../../../../default.css" rel="stylesheet" type="text/css" media="all" />

...

<h4><?php echo $gamename[2]; ?></h4>

and in the css i have the following

h4 {
    color: #FFF;
    font-size: large;
    font-family: "Courier New", Courier, monospace;
}
  • 5 Contributors
  • 20 Replies
  • 456 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Member #905211

Dani AI

Generated

Quick recap: reports that the stylesheet at the site root is loading (backgrounds and some DIV rules take effect) but paragraph and heading styling don’t. and were right to suspect the stylesheet path and load order, correctly pointed to using the browser inspector, and ’s validator note is important — large HTML/CSS errors or unexpected server output can change how rules apply.

Practical checklist (follow in this order):

  • Confirm the element actually exists in the served document: use View‑Source to see the raw HTML and DevTools → Elements to see the live DOM (JavaScript can insert or remove tags after the page loads).
  • Verify the stylesheet that you think is being served is the one the browser loaded: DevTools → Network shows the CSS request, response code, content-type and any caching (304). If the file shown in Network doesn’t contain your rules, the wrong file or a cached copy is being used.
  • Use DevTools → Styles / Computed to see which rule wins for a given p or h4 and where it comes from (file and line). Look for inline styles, later stylesheets, more specific selectors or !important that would override your rules.
  • Check for syntax problems in the CSS or stray characters before an @charset (BOM): a broken rule earlier in the file can prevent subsequent rules from being applied. Also fix the HTML validation errors noted earlier — malformed markup can move or remove elements.

If styling still fails, try a controlled test: put a very simple rule with higher specificity or as an inline style in the page head (temporarily) to determine whether the issue is ordering/specificity or that the element isn’t present/visible at all. Common culprits after that are frames/iframes, server-side includes that output different markup, or a CDN/server caching an old CSS.

Recommended Answers

All 20 Replies

Member Avatar for pritaeas

Do you have this online somewhere to view? My guess is that the path to the CSS is incorrect.

Member Avatar for andreiviziru

click on ACTIUNE and Boom zombie there is

Member Avatar for pritaeas

I don't even see the h4 in your CSS file. Are you sure you uploaded a new version?

Member Avatar for Member #905211

Your page doesn't even have an h4 tag, so how do you know it's not working, not to mention what pritaes said?

Member Avatar for andreiviziru

sorry i'm working on a local server i update right now

Member Avatar for andreiviziru

My server is down for the moment i will update as soon is back online

Member Avatar for almostbob

if the file is at the document root, or a subfolder of the root, it is often more convenient to reference the root, the path is a constant regardless of the depth of the folder structure the site attains
<link href="/default.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/default.css" rel="stylesheet" type="text/css" media="all" />

Edited by almostbob
Member Avatar for cmps

Use firebug or inspect element, it will make your life easier

Member Avatar for andreiviziru

The css is at the root of the document is working properly for Div's and background but not for p and h4

Member Avatar for almostbob 
@charset "utf-8";
/* CSS Document */

body {
    background-image:url(images/background.jpg);
    background-color:#000;
    background-repeat:no-repeat;
    background-position:top left;
}

try body { backround:url(images/background.jpg) #000 no-repeat top left; }
small is beautiful

cant see a definition of h4 or p in the css,

try to get away from px as dimensions, they dont work,
on anything except the screen you laid it out on.
em or % are current best practice, scalars that auto adjust to almost every device, fixed width elements push offscreen in partscreen windows or small devices, users usually wont scroll right, mice dont have hscroll wheels

Edited by almostbob
Member Avatar for andreiviziru

Now is working and i updated the css still the problem persists

Member Avatar for Member #905211

Again, there is no H4 tag on the page, therefore your CSS will not apply to anything.

Member Avatar for andreiviziru

There is a

<h4></h4>

Right under

<div id="content">
Member Avatar for Member #905211

ok so I just realized that the url you gave is not the url the problem is on, apparently you have to navigate to it. Next time, just put the url of the actual issue.

Also, there is no <H4 tag anywhere on the page, no where, notta. If you view source, there is not a single <h4 tag.

This is what I see for the <div id="content"> div:

<div id="content">
<table><tr><td align="center"><a href="jocuri/Ghosts_Vs_Zombies" style="text-decoration:none"><img src="jocuri/Ghosts_Vs_Zombies/image.php" style="display:block" />Ghosts Vs Zombies</a></td><td align="center"><a href="jocuri/Ninja_vs_Zombie" style="text-decoration:none"><img src="jocuri/Ninja_vs_Zombie/image.php" style="display:block" />Ninja vs Zombie</a></td><td align="center"><a href="jocuri/Boom_Zombie" style="text-decoration:none"><img src="jocuri/Boom_Zombie/image.php" style="display:block" />Boom Zombie</a></td><td align="center"><a href="jocuri/Trojan_Hero" style="text-decoration:none"><img src="jocuri/Trojan_Hero/image.php" style="display:block" />Trojan Hero</a></td><td align="center"><a href="jocuri/Cake_Cafe" style="text-decoration:none"><img src="jocuri/Cake_Cafe/image.php" style="display:block" />Cake Cafe</a></td></table><br>
    </div>

So either you haven't updated the proper files or you have PHP that causes it not to render. At any case it's not on the page, plese just view source and you will see.

Edited by Member #905211 because: needed to add more info
Member Avatar for andreiviziru

Select a game from there and acces it there you'll see the tag

Member Avatar for andreiviziru

Acces this

Member Avatar for Member #905211

does not contain a definition for h4. Also, like it's been suggested, use absolute paths instead of relative, easier to read and understand rather than a relative link four levels deep.

Member Avatar for andreiviziru

It does now, and how should i use the links?

Member Avatar for andreiviziru

I changed the link to absolute path but still doesnt work. What else could i do?

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.