CSS stylesheet acts unnatural

Hello,

I have the CSS stylesheet like this, in file stylesheet.css(it’s a styled box for image display):

= means ID right?


#popUpDiv {
position:fixed;
bottom:10%;
left:15%;
top:10%;
right:30%;
bottom:10%;
border:30px solid rgba(0,0,0,0.5);
}
#popUpDivcom {
width:250px;

background-color:#ffffff;
}

#popUpDiv img {
max-height:100%;
max-width:100%;
 display:block;
  margin:auto;
  -moz-box-shadow:    0px 0px 5px 6px #000;
  -webkit-box-shadow: 0px 0px 5px 6px #000;
  box-shadow:         0px 0px 5px 6px #000;
}
#popbg {
background-color:#111111;
padding:10px;
height:100%;
}
.popmenu {
position:absolute;
float:right;
right:5px;
}
.popmenu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
color: #FFFFFF;
font-weight:bold;
border:1px solid #ffffff;
background-color:#111111;
cursor:pointer;
}

If I add a stylesheet reference to any page, the entire css style box appears on that page, example like this:

If i add test.php this line of code:

<link rel=“stylesheet” href=“http://www.domain.com/css/stylesheet.css” type=“text/css”/>

THE CSS BOX APPEARS AT THAT PAGE JUST LIKE THAT, it’s a blank php page, no div IDs or anything, if I move the cursor(twice) over that box it disappears?

WHAT did I miss, because it’s not logical at all, the CSS should appear only places with ID?

(this happens only with firefox, in one PC), I changed ID to class (.) and there are no problems anymore.

Thank you

Hi tosta,
That’s strange. It’s difficult to find a reason without knowing more:

  1. Can you post the complete php code of the test.php?
  2. Is it a part of a CMS?
  3. Is the php-version on the server up to date?
  4. Can you post the complete css code of the stylesheet? Or is the above css the only css of the stylesheet?
  5. You said “this happens only with firefox, in one PC” - Not with FF in other PC’s?
  6. Then maybe it could be something wrong in the FF program (or a registry-error); tried a re-install of FF?
  7. And which version of Firefox? On which device / operating system?
  8. Are you visiting the test.php real online (and not in a preview of a html-editor)?

tosta, we need to see the HTML for the page that uses that stylesheet. A working page… starts with <doctype>, ends with </html>. I can’t imagine how it is coded. :slight_smile:

THE CSS BOX APPEARS AT THAT PAGE JUST LIKE THAT, it’s a blank php page, no div IDs or anything, if I move the cursor(twice) over that box it disappears?

Use Firebug and inspect the html output to make sure you are not looking at a cached page.

If its happening only in Firefox on one PC then clear the cache and temporary files etc.

Hello,

the CSS above is complete.

and complete PHP file is. test.php:


<!DOCTYPE html>
<html lang="et">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blah blah</title>
<META HTTP-EQUIV="Content-Language" Content="et">
<link rel="stylesheet" href="http://www.domain.com/css/style.css" type="text/css"/>
</head>

<body>
</body>
</html>

(I made the test.php for simplicity, and still this thing is strange, works strange)
(the CSS box appears, that is designed in style.css)

It is strange!

  1. yes did that above
  2. no, just simple as it gets.
  3. the latest
    4.yes its already posted
  4. yes one of my friends PC(vista, firefox 25), not in IE.
  5. Can this happen? no eligible to investigate at this time.
  6. answer in 5.
    8 it’s live online, tested several times with different URLs.

I do not think that the style.css will be taken from the cached file with normal firefox, if you press refresh. I did not clear all the browser history, because it was too strange, even for that, the file was legitimate, so cached file can not do this, if there is any logic here?..

Thanks for the replies!

The link to style.css is opening a 404 page.

It would be most helpful if you could give us a links to the working files. The stuff that you’ve posted does not work together to allow us to replicate the issue.

Oh it’s that simple, but I have attached all the files you need(2files, just remove txt, and one image that shows what is the problem, if visiting the test.php (1 person from 1000?)):

btw replacing the #(ID tag from CSS) with .(CSS class tag) solves the problem and the CSS bug disappears, but why ID # tag makes this mess at all. Your browsers probably will work just fine and will not show any issues, it’s quite rare I guess.

by visiting the test.php, this box appears, seen on the attached image… it appears one of my friends PC (how is this possible?) no browser should display this CSS box. and the image disappears/changes transparency while moving mouse over and disappears after pointing mouse cursor over it twice.

I can not get any clearer

thank you

You’ll be surprised what Firefox can do and I’ve often had to re-install it in the past to get it back on track. The cached gets corrupted and you get the wrong information passed to files.

As I said above a quick inspection with Firebug of the live code will show you where the styles are coming from and will allow you to fix it.

If all is as you said then it seems like an issue with that single browser unless you can reproduce the issue elsewhere. Or the only other explanation is that there is something else being added to the page that you are not telling us:) You are not on a free host are you as they upload all kinds of junk into your page?

It’s not a free hosting, It’s a company website, I just did redesign and one of my friends told me that the gallery is not working for him (I changed # to .class so It’s working now for him 2 ). So I made everything very simple to investigate the issue( with test.php). anyways the site is also in my last line of signature, the image gallery.

Thank you

tosta,

This is what you have sent to us. There is no content in the HTML body and the page renders empty. The CSS has nothing to do.

There must be more code than this.


<!DOCTYPE html>
<html lang="et">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>blah blah</title>
    <META HTTP-EQUIV="Content-Language" Content="et">
    <style>
#popUpDiv {
    position:fixed;
    bottom:10%;
    left:15%;
    top:10%;
    right:30%;
    bottom:10%;
    border:30px solid rgba(0,0,0,0.5); 
}
#popUpDivcom {
    width:250px;
    background-color:#ffffff;
}
#popUpDiv img {
    max-height:100%;
    max-width:100%;
    display:block;
    margin:auto;
    -moz-box-shadow:    0px 0px 5px 6px #000;
    -webkit-box-shadow: 0px 0px 5px 6px #000;
    box-shadow:         0px 0px 5px 6px #000;
}
#popbg {
    background-color:#111111;
    padding:10px;
    height:100%;
}
.popmenu {
    position:absolute;
    float:right;
    right:5px;
}
.popmenu a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #FFFFFF;
    font-weight:bold;
    border:1px solid #ffffff;
    background-color:#111111;
    cursor:pointer;
}
    </style>
</head>
<body>

</body>
</html>

Well, I pasted your css-code in this stylesheet: [U]stylesheet-only.css[/U]
Nothing wrong with the css, [U]says the css-validator[/U]. :slight_smile:

Then I made 2 versions of your “test.php” code:

In the source code of the visited pages is no difference: ok, for there is no extra php-code running in the php-version.
Both versions have the same html-error according to the html-validator, [U]this one[/U]: “Using the meta element to specify the document-wide default language is obsolete. Consider specifying the language on the root element instead.”

Ok, I omitted the meta in this pair:

[U]No objection[/U] of the html-validator anymore.
So everything is according to the standards. :slight_smile:

My results in Firefox 23 on WinXP and Firefox 25 on Win7: with no one of the 4 pages is something strange happening, just 4 beautiful empty white pages.
So I cannot reproduce the error!

Now the questions!

  • For safety: are the files I made exactly the same as the files you made?
  • Is one or more of these 4 doing strange things in the FF25 on the Vista of your friend?
  • If yes, which one(s)?

Ah, now I see in the “[U]Firefox 25 System Requirements[/U]”:

[INDENT]Please note that while the 32-bit and 64-bit versions of Windows Vista and Windows 7 can be used to run Firefox 25, only 32-bit builds of Firefox 25 are supported at this time.[/INDENT]

The FF25 on the Vista of your friend is not a (nightly build) 64-bit version of FF25?

[edit]Aha, lots of crossposts! :slight_smile:
I started just before post #9, and did some other things in the meantime too. I’ll see wat is written![/edit]

If this only happens in one browser on one computer

Try viewing with CSS turned off
Try viewing with Javascript turned off
See if the browser is using a custom “user” CSS file

Thank you, I will send these links to my friend and let him make a screenshot.

Current firefox is 26.0. vista operation system. cleared all history and cache. the gray box still appears…(I visited the links provided by <Francky, a gray box appears)

this seems to be browser problem…

I

It seems like it’s your friends browser that is at fault if the error can’t be reproduced anywhere else.

It may be an add-on or extension that is creating a div in the page called #popUpdiv and therefore it gets styled by the stylesheet. Try changing the id name(s) to see if this is the issue.

This is one of those issue where you really need to get on the machine with the problem and see what’s what. As I mentioned above if you have Firebug or the webdev extension you can just view the generated source and it will show you exactly what html it is seeing.

It does sound rather peculiar but there must be an answer in one of the methods we’ve covered so far.

I do not know if I get the chance to try this any soon.

Also suggested him to re-install Firefox, works a bit strange, by clearing the history the homepage starts loading/appears, after done clearing it, it goes back to my browsed page. Forgot to check any add-ons…

Because of this issue I will recommend using class instead of ID.

Thank you for the suggestions and samples, will post if any progress is made.

Hi Tosta,
Just saw another topic, in which was stated that some add-on’s in Firefox can be malware, doing unexpected things.
See over here: [U]sitepoint.com/forums/showthread.php?1157372-EasyInline&p=5544482&viewfull=1#post5544482[/U].
Especially I should suspect extra toolbars.

I think running [U]MBAM[/U] etc. on your friends pc is not a bad idea.