1. Home
  2. Forums Index
  3. Browser Side / CSS 10:21 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

css stops working

         

Oddjob41

7:21 am on Mar 15, 2022 (gmt 0)

5+ Year Member Top Contributors Of The Month



Hi,
My non-commercial site uses a combination of css, some css animations, javascript and jQuery. It relies totally on jQuery load() to update content, mostly text. This content is in a column on the left side of the browser window. I have not used any <head> or <body> tags on the html pages thus loaded.
A few days back, a whole bunch of css suddenly stopped working, both in local testing, and online. Browsers used include current versions of Safari (and its userAgent combinations), Firefox, Chrome and Opera. Safari gives no error messages; I can't understand Firefox messages, as they refer to code very deep in the system somewhere...
So far I've found one common denominator in the problem code. A page code will begin with one, sometimes two, relatively big images, 480px x 300px: these are styled, from an external css page, with position:fixed, and margins, height and width so that they will appear not in the primary text column, but on the right side of the window. These images will be transparent gifs, with a background-image, to prevent the background-image being easily downloaded. Here's a page sample, with one image and background:
css 
#bigimage{
position:fixed; top:50%; margin-top:-18.37rem; right:19.33rem;
height:35.7rem; width:22.89rem;
display:none;
z-index:98; }
#bigimage img {
height:35.56rem; width:22.89rem;
border-top:#999 1px solid; border-bottom:#bbb 1px solid; }
html 
<div id="bigimage"> 
<img src="imagebank/trans.gif" style="background:url(imagebank/bigimage.jpg);" /><br/>
</div>
<div id="bigimage_story">
[i]FarFar far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated, they live in Bookmarksgrove right at the coast of the Semantics (a large language ocean[/i])...etc </div>
When I say "stopped working", I mean the code for the images begins to render, but appears as a tiny square above the text column, not as a full image on the right of the window.
The one OS/browser combination I have access to which renders correctly is Safari on a MacPro 17" laptop....
Any recommendations? before I go on testing. I'm thinking of: adding head and body tags; putting the css inline; getting rid of the <div> container around the image...
Cheers!

not2easy

12:51 pm on Mar 15, 2022 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Your image is inside the 
<div id="bigimage">
and the css includes the instruction for that div: 
display:none;
so the little square you see could be the background image, I do not see the css for background.


You cannot expect that a browser can write the html to structure your page. This:
I'm thinking of: adding head and body tags;
and no alt tags on images and missing spaces on <br/> for example, just leaves too many output decisions up to the browser. You should at least start with a proper html outline for the page.

I apologize but I do not think the problem is due to css here. If you instruct the div containing the image to display: none; it is working as expected.

NickMNS

1:53 pm on Mar 15, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The minimum code required to have a valid HTML document is: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Some Page Title</title>
 </head>
 <body>
 </body>
</html>


You also likely want to add meta name="viewport" tag to ensure that the page displays correctly on mobile.

After that your good to go, add all the content, styles and meta tags you want. But if you don't have the minimum you risk running into problems. Browser are designed to be really forgiving, so even without the minimum you will get a page to display, but as your are experiencing what gets displayed can vary across different browsers and OS's.

But the reason your image doesn't display is almost certainly due to the display:none as not2easy points out above.

Oddjob41

1:41 am on Mar 16, 2022 (gmt 0)

5+ Year Member Top Contributors Of The Month



Many thanks for those comments: tidy up the code, give browsers something to work with, and try to think clearly... bit of slippage these days, 81 tomorrow.
Cheers.

not2easy

2:43 am on Mar 16, 2022 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Hope you enjoy a special birthday celebration. Congrats on a long road!

Oddjob41

8:28 am on Mar 16, 2022 (gmt 0)

5+ Year Member Top Contributors Of The Month



Thanks not2easy.
NickMNS, thanks for the comments, too. Re "viewport" tag: I don't attempt to make this site mobile-friendly--folks get separate alerts if they're on a mobile device or if the screen size is too small: I worked in film for a long time still see a screen as something horizontal, generous, without scrollbars, with content flowing through it...
As for browsers being forgiving: my first instinct--to simplify the css and put it inline-- now works for the real version in multiple browsers. Sort of like 
<img id="bigimg" src="imagebank/trans.gif" title="a big image"
 style="position:fixed; top:50%; margin-top:-18.37rem; height:35.7rem; 
  right:19.33rem; width:22.89rem; 
  border-top:#999 1px solid; border-bottom:#bbb 1px solid; 
  background:url(imagebank/bigimage.jpg);" />
but I doubt if this solution will work in more complex cases.
And there's still every reason to give browsers a lot more to work with.

Brett_Tabke

11:53 am on Jun 4, 2022 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Debugging tip:

In Chrome, Opera, Vivalidi, or Brave - right click and "Inspect Element" Or "Developers Tools - Inspect".

There are several tabs. Go over to the Network Tab and reload the page. Look for load errors (missing fonts, css, js).
Walk through the Sources Tab to see if anything is loading you did't want too.

Look at the Console Tab, and look for errors that have been thrown by the js.

Using a 3rd party for Jquery, or font loading? Are you using a specific version number in your filename, or a generic one? (eg: jquery.min.js or jquery.v3.1.js). Often if you are pulling your JS from a 3rd party (Google), they will update that generic file to a new version after a security fix and then it can break stuff on your site.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:21 am May 1, 2026