Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Copied CSS not working

W

wadori

Coder
I have a line of CSS to format the basic div (.textdiv) that I put the text into on my website. I wish to have an alternate div for the page that I am presently working on. I have copied the CSS for .textdiv and then given it a different label, .textdivbigger. Currently, it reads exactly the same as the orginal. I will make changes to it once it is working. However, when I call for textdivbigger in my script, it doesn't work. Specifically, the white background that I have when using the original CSS doesn't appear. I don't understand how this can be when it is the exact same script. Does anyone have any idea why the second CSS script won't work?

Code: 
.textdiv {position: relative; top: 30px; left: 80px; width: 800px; background-color: #ffffff; padding: 20px;}
.textdivbigger {position: relative; top: 30px; left: 80px; width: 800px; background-color: #ffffff; padding: 20px;}

Code: 
<div class="textdivbigger">
 
Sort by date Sort by votes
wadori said:
I have a line of CSS to format the basic div (.textdiv) that I put the text into on my website. I wish to have an alternate div for the page that I am presently working on. I have copied the CSS for .textdiv and then given it a different label, .textdivbigger. Currently, it reads exactly the same as the orginal. I will make changes to it once it is working. However, when I call for textdivbigger in my script, it doesn't work. Specifically, the white background that I have when using the original CSS doesn't appear. I don't understand how this can be when it is the exact same script. Does anyone have any idea why the second CSS script won't work?

Code: 
.textdiv {position: relative; top: 30px; left: 80px; width: 800px; background-color: #ffffff; padding: 20px;}
.textdivbigger {position: relative; top: 30px; left: 80px; width: 800px; background-color: #ffffff; padding: 20px;}

Code: 
<div class="textdivbigger">
Click to expand...
Hi there,
Can you post the relative html code as well? It would make things a lot easier for anyone wanting to help out to be able to diagnose the issue quicker
 
Upvote 0 Downvote
Antero360 said:
Hi there,
Can you post the relative html code as well? It would make things a lot easier for anyone wanting to help out to be able to diagnose the issue quicker
Click to expand...
I posted the line that calls for the div. I don't know what other code would be relative, but I have deleted all my php code, except for that at the very beginning, and all my paragraphs of text. This leaves a pretty "bare bones" script:

Code: 
<?php
$category = "Miscellaneous";
$title = "Star Voting system";
$description = "comparing Star voting with IRV voting";
$keywords = "voting";
include "header.php";
?>

<br />
<br />
<br />
<br />

<div class="textdivbigger">

</div>
</body>
</html>
 
Upvote 0 Downvote
wadori said:
I posted the line that calls for the div. I don't know what other code would be relative, but I have deleted all my php code, except for that at the very beginning, and all my paragraphs of text. This leaves a pretty "bare bones" script:

Code: 
<?php
$category = "Miscellaneous";
$title = "Star Voting system";
$description = "comparing Star voting with IRV voting";
$keywords = "voting";
include "header.php";
?>

<br />
<br />
<br />
<br />

<div class="textdivbigger">

</div>
</body>
</html>
Click to expand...
Hmmm, I have a feeling it may be due to any other styling that you may have on that particular class... try this:

override the precedence by adding a
"!important" flag on each attribute, after the value, but before the semi-colon. like this
CSS: 
position: relative !important;
 
Upvote 0 Downvote
Antero360 said:
Hmmm, I have a feeling it may be due to any other styling that you may have on that particular class... try this:

override the precedence by adding a
"!important" flag on each attribute, after the value, but before the semi-colon. like this
CSS: 
position: relative !important;
Click to expand...
Not sure what you mean by other styling on that class. What I posted is the styling for the class .textdivbigger. I tried putting !important in after each of the attributes, as you suggested. It didn't fix it.
 
Upvote 0 Downvote
Malcolm said:
Hey @wadori

Can you provide all the code in the HTML (including <head) and the style file? May help us determine what the actual issue is
Click to expand...
You already have all the html from the main document, except for the paragraphs of text that I doubt you feel like reading. I will provide the contents of the head document and the style file here. (You asked for it!)

Code: 
<?php
if(!isset($_SESSION))
{
session_start();
} 
if(!isset($_SESSION['background']))
    {
        $random_number = rand();
        $divided = $random_number % 13;
        $_SESSION['background'] = $divided;
    }
$background = $_SESSION['background'];


echo <<<_end
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> $title </title>
_end;


if(isset($noindex))
    {    if($noindex == "noindex") echo "<META NAME='ROBOTS' CONTENT='NOINDEX, NOFOLLOW'>";    }

echo <<<_end
<meta name="description" content="$description" />
<meta name="keywords" content="$keywords" />
<link href="stylesheet1.css" rel="stylesheet" type="text/css"/> 
_end;

$stylesheet_name = "stylesheet1-add" . $background . ".css";


if($background > 0)
    {   
        echo "<link href='$stylesheet_name' rel='stylesheet' type='text/css'/>";   
    }

if (isset ($paragraphs))
    {
        if($paragraphs == 'normal')
            {   
                echo "<style>
                p {margin:0; text-indent:15px}
                </style>
                ";
        }
    }

echo "<meta http-equiv='author' content='Ward Ricker' />";

echo "\n";

if(isset($thispage) and $thispage == "index")
    {   
echo <<<_end
        <script type="text/javascript">

          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-13166821-3']);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();

        </script>
_end;
    }

echo <<<_end
</head>

<body>
<div class="titlefirst"> Welcome to </div>
<div class="titlesecond"> Ward's Web Pages </div>
<div class="titlethird"> $category </div>
<div>
<table class="linktable" border bgcolor="#ffffaa" cellspacing=0>
  <tr>
    <td align=center width=130px> <a href="http://www.wardricker.com/index.php"> Home </a> </td>
    <td align=center width=130px> <a href="http://www.wardricker.com/songs.php"> Songs </a> </td>
    <td align=center width=130px> <a href="http://www.wardricker.com/brainteasers.php"> Brain Teasers </a> </td>
    <td align=center width=130px> <a href="http://www.wardricker.com/games.php"> Games & Puzzles </a> </td>
    <td align=center width=130px> <a href="http://www.wardricker.com/funnystories.php"> Funny Stories </a> </td>
    <td align=center width=130px> <a href="http://www.wardricker.com/otherstuff.php"> Other Stuff </a> </td>
    <td align=center width=130px> <a href="http://www.wardricker.com/contact.php"> Contact Me </a> </td>
  </tr>
</table></div>

_end;
?>

Code: 
/* CSS for wardricker.com */

.titlefirst {position: absolute; left: 100px; height: 75px; width: 200px; background-color: #ddeeff; padding: 10px: 20px; color: #cc3333; font-size: 2em; text-align: right; font-style: italic} /* #66ccff */
.titlesecond {position: absolute; left: 300px; height: 75px; width: 600px; background-color: #ddeeff; color: #cc3333; font-size: 4em; text-align: center}  /* #66ccff */
.titlethird {position: absolute; left: 900px; height: 75px; width: 200px; background-color: #ddeeff; padding: 10px: 20px; color: #cc3333; font-size: 2em; font-style: italic}  /* #66ccff */
.linktable {position: absolute; left: 100px; top: 83px}
.blogentry {border-color: black; border-width: 1; border-style: solid; margin: 50; padding: 20 }

body {background-image: url(pics/backgrounds/gold.JPG); background-repeat:repeat; margin-left: 100px; margin-right: 100px; margin-bottom: 100px; width: 900px; border: 0px; border-color: black; border-style: solid}

.maindiv {position: relative; top: 30px; left: 80px; width: 800px; background-color: #ffffff; padding: 20px; text-align: center} /* #ffccff */
.textdiv {position: relative; top: 30px; left: 80px; width: 800px; background-color: #ffffff; padding: 20px;}
.textdivbigger {position: relative !important; top: 30px !important; left: 80px !important; width: 800px !important; background-color: #ffffff !important; padding: 20px !important;}
/*.textdivbigger {position: relative ; top: 30px ; left: 80px ; width: 800px ; background-color: #ffffff ; padding: 20px ;}*/
.songdiv {position: relative; top: 30px; left: 200px; width: 500px; background-color: #ffffff; padding: 20px; padding-left: 60px; border-style: solid; border-width: 4px; border-color: #ffcccc}  /* #ffccff */
.extrapad {padding-left: 50px; padding-right: 50px}
.inset {padding-right: 15%;  padding-left: 15%}
.smallinset {padding-right: 5%; padding-left: 5%}
.insetcentered {padding-right: 15%;  padding-left: 15%; text-align:center}
/*.gamepad {margin: 20%; height: 80%; width: 60%; background-color: white}*/ /*intended for modified birdgame */
p.indent {text-indent: 50px; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px}
p.noindent {margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px}

.bordered {margin: 20px; border-style: solid; border-width: 4px; padding: 5px; border-color: #ffcccc}

.answer {background-color: #00ff00; width: 120px; height: 10px}

.bold {font-weight: bold}
.boldcentered {font-weight: bold; text-align: center}
.centered {text-align: center;}
.centered2 {margin-right: 25%; margin-left: 25%; text-align: center;}
.blue {background-color: #ccffff}
.borderedlarge {border-color: black; border-size: 1; border-style: solid; width: 90%; margin: 2%; padding: 2%; font-size: 1.5em}

.floatright {float: right}
.floatleft {float: left}
.alignleft {text-align: left}
.nobullets {list-style-type: none; }
.bigred {color: red; font-size: 3em}
.smalltext {font-size: .8em}
 
Upvote 0 Downvote
Okay. I have attempted to simplify the problem. (Please forgive me for that ugly mess of code I previously supplied!) I have created a new page without any PHP at all. The only thing it contains is a single paragraph, contained in a div which I assign to class .textdivbigger. So now the weird thing that is happening is this. If I link to the previously supplied CSS script, the white background doesn't appear. However, I made a copy of the CSS script with a different name (stylesheet-temp.css), and, even though I have made no changes to it (It is identical to the original CSS script), for some reason when I use this alternative CSS script, the white background appears! Here is the HTML below. The CSS I have already posted.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="stylesheet-temp.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="textdivbigger">
<p>Here is a paragraph of text to text my texdivbigger class.  This should appear inside a white background.</p>
</div>
</body>
</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom