[RESOLVED] Echo out HTML depending on IF statement

Johny7126

echo '<tr style="background-color: #322F30;"  background="http://127.0.0.1/images/team_images/background.jpg">';

Well I would have thought that would work, I have also tried this:

echo "<tr style='background-color: #322F30;'  style='background-image: url('http://127.0.0.1/images/team_images/background.jpg');'>";

Any ideas why the background colour works but the background image does not.

Thanks anyone.

leatherback

How's this:

echo '<tr style="background-color: #322F30; background-image: url("http://127.0.0.1/images/team_images/background.jpg")';

Johny7126

That did not work, it moved the footer also, heres my code:

<?php 
				if($team_category == "skate")
				{
					echo '<tr style="background-color: #322F30; background-image: url("http://127.0.0.1/images/team_images/background.jpg")"'; 
					echo "<td>";								
					echo "<table align='center'>";
					echo "<tr>";
					echo "<td width='20px'>";
					echo "</td>";
					echo "<td>";
					echo "</td>";
					echo "<td width='20px'>";
					echo "</td>";
					echo "<td style='vertical-align: top;'>";
					echo "<div class='text' style='margin-right: 27px;'>There are currently no team members in this category.</div>";										
					echo "</td>";
					echo "</tr>";
					echo "</table>";
					echo "</td>";
					echo "</tr>";					
					echo "</tr>";
				}
				else
				{
					echo '<tr style="background-color: #322F30; background-image: url("http://127.0.0.1/images/team_images/background.jpg")"';
					echo "<td>";								
					echo "<table align='center'>";
					echo "<tr>";
					echo "<td width='20px'>";
					echo "</td>";
					echo "<td>";
					$image_url = str_replace (" ", "", $team_athlete);

				if($image_url != "")
				{
					echo "<img src='../images/team_images/$image_url.jpg' />";
				}

				echo "</td>";
				echo "<td width='20px'>";
				echo "</td>";
				echo "<td style='vertical-align: top;'>";
				echo "<div class='heading'>$team_athlete</div>";
				echo "<div class='text' style='margin-right: 27px;'>".$text."</div>";
				echo "</td>";
				echo "</tr>";
				echo "</table>";
				echo "</td>";
			}
			?>

Cheers

JVassie

Perhaps it would be better to not bother using echo statements continually but end the php block and continue in plain html?

<?php
                if($team_category == "skate")
                {
?>
<tr style="background-color: #322F30; background-image:url("http://127.0.0.1/images/team_images/background.jpg")"
<td>                                

<table align='center'>
<tr>
<td width='20px'>
</td>
<td>
</td>
<td width='20px'>
</td>
<td style='vertical-align: top;'>
<div class='text' style='margin-right: 27px;'>There are currently no team members in this category.</div>                                        

</td>
</tr>
</table>
</td>
</tr>                    

</tr><?php
                }
                else
                {
?>
<tr style="background-color: #322F30; background-image: url("http://127.0.0.1/images/team_images/background.jpg")">
<td>                              

<table align='center'>
<tr>
<td width='20px'>
</td>
<td><?php
                    $image_url = str_replace (" ", "", $team_athlete);

                if($image_url != "")
                {
                    echo ("<img src='../images/team_images/$image_url.jpg' />");
                }
?>                    

</td>
<td width='20px'>
</td>
<td style='vertical-align: top;'>
<div class='heading'>$team_athlete</div>
<div class='text' style='margin-right: 27px;'>".$text."</div>
</td>
</tr>
</table>
</td>
<?php
                }
                ?>

See if that works any better 🙂

bpat1434

Probably not. But you can combine both the "background-color" and "background-image" into one definition:

background:#322f30 url(http://127.0.0.1/images/team_images/background.jpg) repeat left top;

Basically it says:
background: <default color> url(<url of image>) <repeat type> <position of image horizontally> <position of image vertically>

The "repeat type" is one of:
repeat, repeat-x, repeat-y, or no-repeat

Also note that the first " inside the url() for the image ends the "style" section of the <tr> tag. Look at the html in a text editor with syntax highlighting:

<tr style="background-color: #322F30; background-image: url("http://127.0.0.1/images/team_images/background.jpg")">
<td>                              

<table align='center'>
<tr>

You should either not use quotes (it's acceptable) or change the quotes either for the style attribute, or the quotes used in the url() call.

Johny7126

I tried what was mentioned in the second from last post and it did the trick.

Johny7126

Okay so I used that in it worked fine.

Theres still a slight problem though - in IE7 (not in IE6 or Firefox) I get borders around the athlete thumbnails.

Obviously I have tried to change the CSS and the actual HTML but have had no luck with that.

Top of HTML:

<![if !IE]><link rel="stylesheet" type="text/css" href="../CSS/default-stylesheet.css" /><![endif]>

HTML/PHP:

<?php
				}
				elseif($team_category != "")
				{
				?>
					<tr style="background-color: #322F30; background-image: url('http://127.0.0.1//images/team_images/background.jpg')">
					<td>                              

					<table align='center'>
					<tr>
					<td width='20px'>
					</td>
					<td>
						<?php
						$image_url = str_replace (" ", "", $team_athlete);

					if($image_url != "")
					{
						echo ("<img src='../images/team_images/$image_url.jpg' />");
					}
					?>                    
				</td>
				<td width='20px'>
				</td>
				<td style='vertical-align: top;'>
				<div class='heading'><?php echo $team_athlete; ?></div>
				<div class='text' style='margin-right: 27px;'>
				<?php 
				if(isset($team_athlete))
				{
					echo $text; 
				}
				else
				{
					echo "Please select an athlete from the list.";
				}
				?>
				</div>
				</td>
				</tr>
				</table>
				</td>
			<?php
            }
			else
			{
			?>

Thanks anyone

leatherback

What did you do in your css to get rid of the borders?

img {
border: 0px;
}

Johny7126

Strange - IE7 does not accept border: none which is what I was using before. IE6 and Firefox seem to like it.

So I changed it to what you said and it works fine.

Cheers

leatherback

I htink if you use none it should be border-style: none

bpat1434

I'm still convinced that the problem with backgrounds was just quotes, and nothing more. The border: should take "none" as a value. Since border is just:

border: border_width border_style border_color

You should be able to move the parameters around (as you always can) and use:

border: none;

I think IE just bites because it's a standard 🙁 This is why I code to Firefox/Safari/Konquerer and just pray that it works in IE. And if it doesn't, I tell them to use Firefox instead. There's no reason IE can't support the standards. Every other browser does.

But I'm willing to bet that there was a CSS parse error in your file which prevented your "border: none" from being seen. This is why I validate my CSS when I start to see errors. Many times I'm missing a semi-colon, other times I just forget to code the class/id 🙁