Jump to content

Baffling CSS


Recommended Posts

I have a link for a css file but I don't have a css file.

Yet my has <p class='five'>   (see code below)

I'm baffled as to where does my browser get the box, with borders and background color as follows:

image.thumb.png.288503331bd19986dcb9054312146f78.png

 

Also, if I include the css file with the p.five defined with a smaller box, the result is still the same as above.

(see my css file attached - perhaps I haven't defined it correctly.)

...

<link rel='stylesheet' href='HA_StyleA.css' type='text/css' />

...

print("
<form name='Reg' >
<br><br><br><br><font size=4 color='maroon'><b><center>
<p class='five'>
Select the desired function<br>
from the above menu items.
<br></font>
</b></p>

HA_StyleA - Copy.css

Link to post
Share on other sites

You should be able to open your developer tools on your browser to find out what and where styles are being applied.

In most browsers you can Right Click > Inspect Element or some other permutation of that to see it.

 

Otherwise, you may have more luck pasting the PHP here in a code block for us to look at.

XcQfW3F.png

Link to post
Share on other sites

I just can't understand what's going on.  At the bottom of this post is my results - which doesn't follow at all the CSS and I have no idea where the blue bordered incorrect sized box comes from.  I did the Inspect Element thing but can't see any answers in there.  Would much appreciate your help.

Here is a sample code of my page followed by the code of my HA_StyleA.css file.

<?php
session_start();
print("
<html lang=\"en\">
<head><title>Index</title></head>
<link rel=\"stylesheet\" href=\"HA_StyleA.css\" type=\"text/css\" />
<script language=JavaScript>
</script><noscript>Your browser does not support JavaScript!</noscript><body>
");
//==========================================================================================================
print("
<form name=\"Company\" action=\"HA_LogInCheck.php\" method=\"POST\" onsubmit=\"return formcheck(Company)\">
<br><br><br><center>
<p class='onea'>
<br>
<font size=3 Color=\"Crimson\"><b>
This is my test data.<br>
The quick brown fox jumped over the lazy dog's back.<font Color=\"blue\">  Mary had a little lamb and was the doctor upset!<br>
</b><font color=\"black\">
The quick brown fox jumped over the lazy dog's back.
<br><br>
</p>
</body></html>");
?>

//Following is my HA_StyleA.css file code:
.onea {max-width: 80%; border-style: solid; border-width: 2px; border-color: transparent; padding-left: 5px; padding-right: 5px; text-align: left}

image.thumb.png.f2f49f11d32a07df54920dfa0517c764.png

Link to post
Share on other sites

If you have experimenting with a css file of same name and styling used in another project folder, it could be saved in cache history. Therefore it would exist.

By not correcting opening and closing tags, the browser will try to interpret the best it can to what you want, which will usually be wrong! an browser (looking at web developer tools, elements tab) interprets your html as

<noscript>Your browser does not support JavaScript!</noscript>

<form name="Company" action="HA_LogInCheck.php" method="POST" onsubmit="return formcheck(Company)">
<br><br><br>
  <center>
<p class="onea">
<br>
<font size="3" color="Crimson">
  <b>This is my test data.<br>
The quick brown fox jumped over the lazy dog's back.<font color="blue">  Mary had a little lamb and was the doctor upset!<br>
</font></b><font color="blue"><font color="black">
The quick brown fox jumped over the lazy dog's back.
<br><br>
</font></font></font></p><font size="3" color="Crimson"><font color="blue"><font color="black">

</font></font></font></center></form>

See what a mucking fuddle it interprets as.

Edited by dsonesuk
Link to post
Share on other sites

I concur with dsonesuk, it's probably some form of caching issue. Make sure you hard-refresh (CTRL + F5 on Windows) each time you update your CSS.

However, your first picture perfectly (I think) matches your given CSS file. (Below)

p.five {
  max-width: 80%;
  height: 80px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  text-align: center;
  background-color: Lavender;
}

And other than what dsonesuk has pointed out about the use of tags, there really isn't anything too outlandish going on.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...