I have tw ostyle sheets that im trying to combine basically (its actually a little more complicated than that) but I think these entires are conflicting..... are they?

First entry from stylesheet 1

.shoutbox a, a:visited {
color: #6E7A8A;
font-size: 12px;
font-weight: bold;
text-decoration: none;}

.shoutbox a:hover {
color: #6E7A8A;
text-decoration: underline;
}

Second entry from stylesheet 2

.hmenubutton a:hover{
    color: #999999;
    text-decoration: none;
}
p a{
    color : #000000;
}
p a:hover{
    color : #294A7B;
}

When the page loads, and these stylesheets both load, it throws the entire sites CSS out of whack. I can really only think of these entires.
If they conflict, im not sure how to fix the problem.

also, the weird part is, on my index.html file, it looks just fine. both of these sheets are loading, and everything is working.

on my other pages, which are basically just copies of index.html the css looks like crap.

What i'm doing is loading a shout.php file in the middle of the html, and my html is executed as php.
the HTML page loads a style sheet, and the shoutbox loads its own stylesheet.
this is also causing the problem that the shoutbox is loading is stylesheet right in the middle of the page, not in the actual head tag (its an include remember) so its making the page invalid xhtml.

im not sure at all what to do about this.

(its an include remember)

So!?

As in your other thread on the subject -> http://www.webmaster-talk.com/css-fo...le-sheets.html

The answer is to fix the includes.

awesome, great advice, wow, that has solved all my problems.....

how do i fix them? this is what im asking, and you havent really helped.

remove the styles that get placed in the document body and put them in an include that places them in the head.

Until that is done no amount of changing the CSS rules will make a difference.

.shoutbox a, a:visited {
color: #6E7A8A;
font-size: 12px;
font-weight: bold;
text-decoration: none;}

.shoutbox a:hover {
color: #6E7A8A;
text-decoration: underline;
}

In in order for that first one to work, it has to be be like this:
.shoutbox a, .shoutbox a:visited

Originally Posted by chrishirst

remove the styles that get placed in the document body and put them in an include that places them in the head.

Until that is done no amount of changing the CSS rules will make a difference.

If i move all of the style info into the head/external stylesheet, then when the shoutbox loads, it doesn't have its style applied, and just looks like crap.

how do i load my shoutbox, with its style applied, and have all of the style info in the head?

Originally Posted by LadynRed

In in order for that first one to work, it has to be be like this:
.shoutbox a, .shoutbox a:visited

thanks, i'll make that change when i get a chance.

I looked at your page (the one that was in the thread chrishirst linked to) and it looks like you are using an iframe for your shoutbox. Is that what you are talking about when you say you are including an external php page?
If so, here is what I would do:
1. Add the stylesheet that goes with the shoutbox page to the head section of your main page.
2. In the shoutbox code, remove everything except for the shoutbox table. By everything, I mean the html tag, the head tag, body tag...everything but the actual shoutbox html.
3. where you currently have the iframe, use this piece of code instead:
<?php include("http://www.teamspeakdisplay.com/HTML/Shout.php?p=box"); ?>

That should work. Does it make sense?

If i move all of the style info into the head/external stylesheet, then when the shoutbox loads, it doesn't have its style applied, and just looks like crap.

I suspect you are removing the wrong styles.

A page that loads into an iframe is a seperate entity to the page that loads it and as such should be a complete document.

It is just the CSS code that loads into the body of the host document that needs to be placed in the head or externally.

Originally Posted by angele803

I looked at your page (the one that was in the thread chrishirst linked to) and it looks like you are using an iframe for your shoutbox. Is that what you are talking about when you say you are including an external php page?
If so, here is what I would do:
1. Add the stylesheet that goes with the shoutbox page to the head section of your main page.
2. In the shoutbox code, remove everything except for the shoutbox table. By everything, I mean the html tag, the head tag, body tag...everything but the actual shoutbox html.
3. where you currently have the iframe, use this piece of code instead:
<?php include("http://www.teamspeakdisplay.com/HTML/Shout.php?p=box"); ?>

That should work. Does it make sense?

The shoutbox is php, its loaded using a PHP include in the HTML page.
The iframe you see, is actually a part of the shoutbox itself. the iframe is loading the actual shouts... thats how the script works.

The shoutbox script contains no head, or body.

PHP Code:

<?php
//------ Edit Below This Line ------//

define('SHOUTBOX', 'shoutbox');

$host = 'localhost';
$dbuser = '*****'; // Username to access database.
$dbpass = '*****'; // Password to access database.
$dbname = '*****'; // Database name.

$allowed_tags = '<b><i><u><a>';

//------ Edit Above This Line ------//

mysql_connect($host, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());

function clean_string($string, $tags = '')
{
  $string = trim($string);
  $string = str_replace("\'", "''", $string);
  return $string;
}
?>
<link href="Includes/style.css" rel="stylesheet" type="text/css"/>
<?php 

switch($_GET['p'])
{
  case 'box':
    echo "<body class=\"shoutbox\">\n<table cellpadding=\"0\">";

    $result = mysql_query("SELECT * FROM " . SHOUTBOX . " ORDER BY id DESC") or die(mysql_error());
    for ($i = 1; $i <= ($row = mysql_fetch_assoc($result)); $i++)
    {
      $nameid = (!($i % 2)) ? 'name1' : 'name2';
      $contentid = (!($i % 2)) ? 'content1' : 'content2';

      $name = strip_tags(stripslashes($row['name']), $allowed_tags);
      $website = strip_tags(stripslashes($row['website']), $allowed_tags);
      $content = strip_tags(stripslashes($row['content']), $allowed_tags);

      echo '<tr><td id="' . $nameid . '" width="50" align="right">', // This line controls the width of the name column.
      ((!empty($row['website'])) ? "<a target=\"_blank\" href=\"$website\">$name</a>" : $name),
      '</td><td id="' . $contentid . '" width="340">' . $content . "</td></tr>\n"; // This line controls the width of the shout..
    }

    echo "</table>\n</body>";
  break;

  default:
    echo '<div class="shoutbox">';

    if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['name']) && !empty($_POST['content']))
    {
      $name = clean_string($_POST['name']);
      $website = clean_string($_POST['website']);
      $website = (!empty($website) && $website != 'http://') ? (!eregi('^http://', $website) ? 'http://' . $website : $website) : '';
      $content = nl2br(clean_string($_POST['content'], '<a>'));

      mysql_query("INSERT INTO " . SHOUTBOX . " (name, website, content) VALUES ('$name', '$website', '$content')") or die(mysql_error());
    }
    // echo '<iframe src="' . basename($_SERVER['PHP_SELF']) . '?p=box" width="348" height="75"></iframe>
    echo '<iframe src="../HTML/Shout.php?p=box" width="348" height="75"></iframe>
    <form method="post"><table class="form">
    <tr><td><input type="text" name="name" style="width:344px;" value="Name"></td></tr>
    <tr><td><input type="text" name="website" value="http://" style="width:344px;" ></td></tr>
    <tr><td><textarea name="content" rows="3" style="width:344px;" value="Message"></textarea></td></tr>
    <tr><td colspan="2" align="center" style="width:100px;"><input type="submit" value="Submit"></td></tr>
    </table></form>', "\n</div>";
  //break;
}

?>

Originally Posted by chrishirst

I suspect you are removing the wrong styles.

A page that loads into an iframe is a seperate entity to the page that loads it and as such should be a complete document.

It is just the CSS code that loads into the body of the host document that needs to be placed in the head or externally.

I should have mentioned this in my previous post, just incase it wasn't clear.

the HTML page has a PHP include to load shout.php
shout.php echos an iframe to load the actual "Box" (shout.php?p=box)

if i remove the stylesheet info from the php file, the shoutbox doesn't load its style. I have already moved shout.phps style into the main stylesheet for the site, but it still won't load the shoutbox style, if it isnt linked in the actual php file.


This is currently what i'm trying to fix, so i can remove the stylesheet from the php file, and still look like its supposed to.
when I made the modification above, to the conflicting style entry, it stopped throwing the entire site CSS out of whack... so thats fixed anyway.

it also has to be fixed so it spits out xhtml valid code.

So when you move this: "<link href="Includes/style.css" rel="stylesheet" type="text/css"/>" from the shoutbox code you posted above, and put it in the head of your main page, the styles do not show up?

the style for the shoutbox doesn't show up. when i changed that one CSS entry you mentioned above, it stopped messing up the entire site.
the only problem now is that with the shoutbox's style loading in the "middle" of the page, it is no longer a w3c valid document, which is what im going for.

Ive merged the stylesheets, both the shoutbox, and my site, use the same style.css file, which is why i cant figure out why the shoutbox loses its style if i remove its link, even though my site itself is still loading the main style sheet.

I think it is losing its style because it is using an iframe. The page that loads inside the iframe is like a separate entity. I don't think the content in the frame is able to use the stylesheets attached to the "parent" page. Are you able to modify the iframe and turn it into an include instead?

the page that loads inside the iframe, is the actual shoutbox.
the iframe also loads shout.php, but loads its "box" function, which is what fills in the data in the shoutbox.

since its part of shout.php itself, i dont think i could rewrite it.... otherwise it would be the HTML including a php, which is including a php.... i think it might run into a loop.