What i have:
I have a player status script for our Minecraft Server which displays the name of the server the ip and the heads of the current players. 2 Div boxes for the statusbox: An outer 1 to fix the position and the 2nd one for the divbox itself.
What i want:
I want the current divbox where the iframes are in:
<div class="statusbox">
<div class="statusboxinner">
<iframe src="players_main.php" height="auto" width="140px" frameborder="0" scrolling="no" padding="fixed" marginheight="auto"></iframe> <iframe src="players_hg.php" height="auto" width="140px" frameborder="0" scrolling="no" marginheight="auto"></iframe>
</div>
</div>
To be 100% fixed to the php file which is loaded by the iframes.
CSS codes:
.statusbox {
position: fixed;
background: none;
margin-top: 472px;
margin-left: 1000px;
#pointer-events:none;
z-index:0;
}
.statusboxinner {
float: right;
margin-right: -243px;
#pointer-events:auto;
position: relative;
padding: auto;
height:auto;
padding-top:auto;
margin-bottom:auto;
background-color: white;
border-radius: 3px;
text-shadow: 0px 1px 0px black;
box-shadow: inset -4px 0px 5px rgba(0,0,0,0.2);
}
You can look at it on this page www.ravand.org (right floating box)
What my problem is:
I could simply add a fixed amount of pixels to be the height of the divbox but the problem is, that according to how many people are playing on the server the php file/ the iframe enlarges to the bottom.
When i try to set "height:100%" the statusbox simply just gets enlarged all the way to the buttom which is not what i need.
I would gladly solve this problem without iframes if you have any suggestions.
Thanks in advance
ravand
found a cool script I think should do the trick here.
<script type="text/javascript">
<!--//
function sizeFrame() {
var F = document.getElementById("myFrame");
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
window.onload=sizeFrame;
//-->
</script>
Related
I am facing an issue where few images are not properly shown on firefox, chrome, edge browser but internet explorer it perfectly fine. Some part of code is as below.
.header_top-left1 {
float: left;
padding-left: 8px;
}
.header_top-left1 a {
float: left;
padding-left: 2px;
color: black;
display: inline-block;
font: bold;
font-size: 18px;
position: relative;
}
.header_top-left1 a img {
width: 20px;
height: 15px;
display: block;
}
<div class="header_top-left1">
<a href="callto:"> <img src="https://via.placeholder.com/350x300" alt="Call" />
Call
</a>
</div>
What i see on the first look is that you missing the units in width property.
Your code:
.header_top-left1 a img {
width: 20; // hast to be 20px for example
height: 15px;
display: block;
}
It looks as though IE is ignoring the Fontawesome classes and just showing the png green backed phone image while the other browsers are attempting at least to use fa.
Your given code doesn’t show any setting up of the font. Is this done somewhere?
I started making a new WordPress theme with Bootstrap when I stumbled across a problem.
I found out that when I create a new post with some text and an image at the top(Aligned to left) then the image is actually not aligned.
The image is in the top left corner and the text is underneath it.
I searched on Google and read blog posts and so on.
Most people suggest adding some styling in style.css that would align the text.
Example:
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
Of course, this aproach didn't work for me so I checked and I think that the problem is because these classes work only if applied to image tag.
When accessing the_content() function, the image is printed inside a div tag.
<div id="attachment_66" style="width: 310px" class="wp-caption alignleft">
<img class="size-medium wp-image-66" src="path/to/img" alt="Sphere" width="300" height="169" sizes="(max-width: 300px) 100vw, 300px">
<p class="wp-caption-text">Who doesn’t like spheres?</p>
</div>
If the problem really is because of those tags, how can I get alignment classes to be applied to img not div tags?
This is how it looks.
Thanks to #Andrei Gheorghiu I managed to solve the issue and I am gonna answer my question.
Premade WordPress themes have some css that I haven't included.
So, this is what you need to include in you style.css
.alignleft { float:left;}
.alignright { float:right;}
.aligncenter { display: block; margin: auto; }
Instead of creating the following style:
img.alignleft { float: left; margin: 0 1em 1em 0; }
Why don't you create it like:
div.alignleft img { float: left; margin: 0 1em 1em 0; }
Ok, so when I see my div on my site and whenever I load it up there is always a someone significantly noticeable gap between the text and space above the text. I dont know if somethings wrong with my CSS and I have no clue how to fix this...
Here is a screenshot and code -
Thank you :-)
#box2
{
overflow:auto;
border: 10px solid #a1a1a1;
padding: 95px; 40px;
width: 180px;
height: 5px;
border-radius: 25px;
margin-left:auto;
margin-right:0;
}
HERE IS SOME HTML
<!---Bad Rats--->
<img src="" width="450" height="200" align="left"></img>
<div id="box2">
<div id="reviewtext">
</div>
</div>
I guess the problem is in the invalid CSS making padding from all sides 95px:
padding: 95px; 40px;
Make it look something like:
padding: 0 40px;
JSFiddle
I have this script that work with no problems on my XAMPP local host:
<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 500px;
color: #000000;
position: relative;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
margin: 10px;
padding: 0;
float: left;
width: 120px;
height: 100px;
}
.gallery img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
width: 110;
height: 90;
}
.gallery a:hover img
{border: 1px solid #0000ff;
position: absolute;
top: 0; left: 0;
width:400;
height:300;
}
</style>
</head>
<body>
<ul class="gallery">
<?php
//header("Content-type: image/jpg;\n");
$db_connect = mysql_connect('localhost', 'Beta_tester', 'alfa1gama2');
if(!$db_connect)
{
die('Не може да се осъществи връзка с базата данни' . mysql_error());
}
mysql_select_db("Beta_tester", $db_connect);
$rs = mysql_query('SELECT * FROM gallery WHERE oferta_id=2');
while($row = mysql_fetch_array($rs))
{
echo '<li><a target="_blank" href="http://mysite/fimage.php?id='.$row['id'].'"><img src='.$row['location'].' alt="image"/></a></li>';
}
?>
</ul>
</body>
</html>
On my local server it's ok, but when I upload it on the production server i get this output:
Pic1:
It's not shown very good but this is just an empty block with an icon of broken image.The head(content) is commented - I added it later because I saw a similar problem solved with this, but maybe I'm using it wrong or maybe it's something else.
Thanks
Leron
Make sure the location of the image (URL) is a valid one. Try to print the image url and try to open in another tab to make sure it's a valid URL.
Also, pass double-quotes on your image src attribute like:
<img src="'.$row['location'].'" alt="image" />
I guess the problem is here:
<img src='.$row['location'].' alt="image"/>
Please show us the value of $row['location']
Your browser must have a view source function. There you can see the whole output of the script. If something went wrong you should see it there.
Check the value of the image src through firebug, and see the soruce. In this way you can figure out if your path is correct ornot.
I see alot of contradictory information on this online and I figured people here would know better than the vast majority of other places.
Is it possible to have an div with an iframe inside of it autosize the width (and possibly height) ->WITHOUT<- the use of javascript.. also it needs to be crossbrowser capable (browsers like lynx and ie5 are not a concern at all).
I have been tinkering and following various peoples suggestions online in regards to this for days but I still do not see my div and iframe limit their width to whatever data is loading in the iframe (just tables of random info).
Here is some of the css I have and the associated html, as you can tell it has since gone through some revisions that do not have width:auto; height:auto etc.
div#topleftdiv
{
float: left;
width: 25%;
height: auto;
}
iframe#topleftframe
{
background-color: transparent;
-moz-opacity: .00;
filter: alpha(opacity=00);
}
div#toprightdiv
{
float: right;
width: 25%;
height: auto;
}
iframe#toprightframe
{
background-color: transparent;
-moz-opacity: .00;
filter: alpha(opacity=00);
}
div#topmiddlediv
{
float: left;
width: 49%;
height: auto;
text-align: center;
align: center;
margin-left: auto;
margin-right: auto;
}
iframe#topmiddleframe
{
width: 100%;
height: 40em;
text-align: center;
align: center;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 15px;
border-radius: 15px;
}
div#bottomdiv
{
clear: both;
}
<div id="topleftdiv" scrolling="no">
<iframe id="topleftframe" name="topleftframe" scrolling="no" allowtransparency="true" frameBorder="0">
</iframe>
</div>
<div id="toprightdiv" scrolling="no">
<iframe id="toprightframe" name="toprightframe" scrolling="no" allowtransparency="true" frameBorder="0">
</iframe>
</div>
<div id="topmiddlediv" scrolling="no">
<iframe id="topmiddleframe" name="topmiddleframe" scrolling="no" allowtransparency="true" frameborder="0" noresize>
</iframe>
</div>
No, it's not possible. You need JavaScript to communicate the frame size back to the parent window.
The basic JavaScript, should you change your mind:
from the iFrame:
parent.document.getElementById('iframe_id').style.height =
document.body.offsetHeight;