Please, can someone explain why my classic PHP table only showing correct in Chrome, but in Firefox or IE content of the table goes outside of the <div>? Everything that is in style.css effect correctly on table while displaying in Chrome, but don't react in Firefox or IE.
My table:
<?php
include('db.php');
$sqlget="SELECT * FROM table ORDER BY timestamp_oglas DESC";
$sqldata= mysql_query($sqlget);
echo"<table>";
while ($row=mysql_fetch_array($sqldata)) {
echo "<tr><td>";
echo"<b><font color='#e73535'>".$row['heading']."</font></b>";
echo "<br/>";
echo $row['text'];
echo "<br/>";
echo "<img src=\"download.php?id=".$row['id']."\"><br />\n";
echo "<div style='text-align:right'><font size='1px'>".$row['timestamp']." </font></div>";
echo '<br />';
echo "</td></tr>";
}
echo"</table>";?>
My .css:
table{width:95%;margin-left:auto; margin-right:auto;margin-top:25px;}
Screenshot (Chrome):
http://img708.imageshack.us/img708/9603/r40m.png
Screenshot (Firefox):
I found the sollution. I added this line table-layout: fixed; in style.css. Now works perfectly all browsers.
Related
Blurry Image
Original image
I have a simple image upload function in php. It takes an image and uploads it to the database as a blob. When i call the image into the gallery it becomes blurry. Is there a way around this i have heard of people using GD etc. My code is below for the upload and the calling.
gallery.php
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;">
<?php
$result = mysqli_query($connection, "SELECT * FROM tbl_images");
while($row = mysqli_fetch_array($result))
{
?>
<div>
<?php echo'<img width="100%" height:"100%" class="img-fluid" src="data:image/jpg;base64,' . base64_encode($row['name']) . '" />' ?>
</div>
<?php } ?>
uploadFile.php
<?php
if(isset($_POST["insert"]))
{
$file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));
$query = "INSERT INTO tbl_images(name) VALUES ('$file')";
if(mysqli_query($connection, $query))
{
echo '<script>alert("Image Inserted into Database")</script>';
}
}
?>
Try adding image-rendering: pixelated CSS style to your img element.
I want to know what is the wrong with following code; I want to make the inner div color appear as a part of the outer div color. I am using this for a percentage poll bar:
echo '<div style="width:130px; height:20px; background-color:#ecf2f9; overflow:hidden;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; position:relative; z-index:3"></div>';
echo '</div>';
or if there will be another solution to get the result i need.
Thanks in advance for your help
In your case it is relatively simple. Just set the hight for the inner div and you are done ;)
A DIV has no default height. That's the problem.
Example:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
You can see a plain HTML example of your bar here:
https://jsfiddle.net/eaz1vbex/
Beside that, using <?php print $percent1; ?> that way won't work, because echo outputs the content without further parsing by the PHP interpreter. If you want to keep the above style of code, you should change it to the following before continue reading:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:' . $percent1 . '%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
Alternatively:
echo "<div style='width:130px; background-color:#ecf2f9;'>";
echo "<div style='width:$percent1%; background-color:#ff33cc; height:20px;'></div>";
echo "</div>";
Please read this for better understanding:
http://php.net/manual/en/function.echo.php
Hints:
You should use CSS for all style attributes (except width, which is dynamic). Using the style tag is not recommended because it makes it hard to maintain and redesign later in the product lifecycle. It also bloats up output.
You maybe want to use some sort of template engine or at least the "here document"-syntax, for better maintainability of markup.
Example:
echo <<<END
<div style="width:130px; background-color:#ecf2f9;">
<div style="width:$percent1%; background-color:#ff33cc; height:20px;"></div>
</div>
END;
Example with seperate CSS:
CSS:
.progressBar { width:130px; background-color: #ecf2f9; }
.progressBar .progress { background-color:#FF33cc; height: 20px; }
PHP:
echo <<<END
<div class="progressBar">
<div style="width:$percent1%;" class="progress"></div>
</div>
END;
See: https://jsfiddle.net/fchp5aqa/
it's work : i have set a height : 20px and your $percent1 did not print !! so i change it and fix it. i think it enough to understand what i done!!
echo '<div style="width:130px; height:20px; background-color:red; overflow:hidden;">';
echo '<div style="width:'.$percent1.'%; background-color:blue; position:relative; z-index:3; height:20px;"></div>';
echo '</div>';
I'm wondering if anyone could provide me with some advice on where I went wrong. I'm trying to get a photo to resize when loaded in a DIV but the photo keeps taking it's own dimensions. Does anyone have any idea why my code isn't working? Thank you in advance!
if($row['coverphoto'] === NULL){
echo"<li>";
echo"<img src='images/slider-4.jpg'>";
echo "<div class='banner'>Customize Your Banner!</div>";
echo "</li>";
}
else{
echo "<li>";
echo "<img style='height:auto; width:auto; max-width:1025px; max-height:503px;' src='/coverphotos/" . $row['coverphoto'] . "'/><br />";
echo "<div class='banner'>Customize Your Banner!</div>";
echo "</li>";
}
?>
Try this,
else{
echo "<li>";
echo "<div style="width:50px;height:50px;"><img style='height:50px; width:50px;' src='/coverphotos/" . $row['coverphoto'] . "'/></div><br />";
echo "<div class='banner'>Customize Your Banner!</div>";
echo "</li>";
}
If it is not worked means, please check your, css file
<li>
styles. May that style makes this mistake.
I have a minor problem, i just want a simple image preview with a go back button or something similar, I made
<div id="image1">
<a href="../assets/image_large1.jpg"><img src="../assets/image_1.jpg" width="160" height="107" alt="Example 1" />
</div>
but I don't know how to put a button inside
how could I do it?
In the most simple solution to your problem, I would do special show_image.php page, for example:
<?php
$directory = 'assets/';
$filename = $_GET['image'];
if(empty($filename) || is_file( $directory . $filename ))
{
echo 'No such image!';
}
else
{
echo '<img src="' . $directory . $filename . '" />';
}
echo '<br />';
echo 'Go back';
exit;
And link for the image will be: http://mysite.com/show_image.php?image=image_1.jpg
Of course this code should be made more secure and this thing could be done other ways.
Nope. Ignore this. The space is put there by browser.
This is a HTML snippet from my application:
Correct answers:
0 / 6<br /><br />
You have failed to pass the final test.
<a href="/module/controller/course/id/5" class="accessible-link">
Click here
</a>
to return to the training.
As you can see, there is a single space after the </a> closing tag. Yet in the browser the space is added inside the anchor. So it looks like this:
This is the PHP code which produces the HTML:
<?php if (isset($this->correctAnswersCount) && isset($this->answersCount)): ?>
<?php echo Zend_Registry::get('translate')->_('Počet správnych odpovedí'); ?>:
<?php echo ToHtml($this->correctAnswersCount); ?> / <?php echo ToHtml($this->answersCount); ?><br /><br />
<?php endif; ?>
<?php echo Zend_Registry::get('translate')->_('Záverečný test sa vám nepodarilo úspešne absolvovať.'), "\n"; ?>
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
</a>
<?php echo Zend_Registry::get('translate')->_('pre návrat do kurzu.'), "\n"; ?>
I am completely baffled by this and cannot figure out what's causing this even though I've been staring into the code for 30 minutes now.
This is a relevant part from the translation file:
'Kliknite' => 'Click here',
As you can see, there should be no space added by Zend_Translate.
Change this:
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
</a>
Into this:
<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
<?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?></a>
The </a> should be in the same line after the <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?> aka Click Here
EDIT:
The new line and the spaces after it renders like 1 space that is still inside de <a></a> tags, that is where the blank space is coming from.
EDIT2:
For the record I also don't like the closing tag to be next to the content instead of a being in a new line but that's how it has to be done in order to work correctly.
I like good formatted code and I always look for a autoformat command in my IDE.
But at least for example in Visual Studio when you hit Ctrl + K, Ctrl + D (the Format Document shorcut) the closing tags like the </a> are not automatically moved to a new line for this exact reason: that it should not break the way it looks before the auto format.
Close the 'a' tag directly after the next, without a newline, like this:
Click here
Try it like this:
Click here
I am not sure if this will work, but it is worth trying.
Put immediately after the </a> tag.