I am not able to show an image in Firefox when using the img tag. In IE it's working as expected. Why is this?
<html>
<head>
<title>my PAGE</title>
</head>
<body>
<table height="100%" width="100%">
<tr>
<td>
<img border="0" src="D:\Pictures\sam.JPG" alt="wiki" width="500" height="1"/>
</td>
</tr>
</table>
</body>
</html>
The right way of referencing an image on local disk would be
file:///D:/Pictures/sam.JPG
But you will never see the image anyway - you're setting its height="1"
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to setup a new email signature for Apple mail using Adobe Photoshop--> Dreamweaver
Please find attached:
the way I WANT my signature to look (the gridded one)
the way my signature currently looks
I've been working on this for 6 hours. I can't get:
the social media buttons to align directly under the left border of the square part of the logo
the phone numbers and social media buttons to exist on the same plane on the bottom
Here is my code as it currently stands:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BPM Email Signature</title>
</head>
<body>
<table width="600" border="0">
<tbody>
<tr>
<td>
</td><img src="http://s19.postimg.org/lj4nfr0cj/BPM_Email_Siganture_1_03.jpg" />
</td>
<td><img src="http://s19.postimg.org/ia40eige7/bpmcontact_info_17.jpg" width="150" /><td><table width="600" border="0"> <tbody <td> <img src="http://s19.postimg.org/hdyc7kry7/BPM_Email_Siganture_1_07.jpg""/> <img src="http://s19.postimg.org/ng5yy2ge7/BPM_Email_Siganture_1_09.jpg"/> <img src="http://s19.postimg.org/kncre1g1r/BPM_Email_Siganture_1_11.jpg"/> <img src="http://s19.postimg.org/fsj2frhq7/BPM_Email_Siganture_1_13.jpg"/> <img src="http://s19.postimg.org/jfytltpxb/BPM_Email_Siganture_1_15.jpg"/></td>
Something like this should do it;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>BPM Email Signature</title>
</head>
<body>
<table width="600" border="0">
<tbody>
<tr>
<img src="http://s19.postimg.org/lj4nfr0cj/BPM_Email_Siganture_1_03.jpg" />
</td>
<td><img src="http://s19.postimg.org/ia40eige7/bpmcontact_info_17.jpg" style="width: 150px; margin-left:-5px; margin-right: 45px; margin-top: 15px;" /><td>
<table width="600" border="0">
<td>
<img src="http://s19.postimg.org/hdyc7kry7/BPM_Email_Siganture_1_07.jpg"/>
<img src="http://s19.postimg.org/ng5yy2ge7/BPM_Email_Siganture_1_09.jpg"/>
<img src="http://s19.postimg.org/kncre1g1r/BPM_Email_Siganture_1_11.jpg"/>
<img src="http://s19.postimg.org/fsj2frhq7/BPM_Email_Siganture_1_13.jpg"/>
<img src="http://s19.postimg.org/jfytltpxb/BPM_Email_Siganture_1_15.jpg"/>
</td>
</html>
Where you see the "###" in the...
<a href="###" target="blank">
replace with the appropriate link. :)
How can i overlap the collapsed/expanded content display in the frameset ( i dont want top frame details to be shorten) ? I use a 3 framed frameset(top frame,left frame and right frame), and can't make this thing work (script made for overlap the expanded content in top frameset something like z-index logic). Is it possible to make this change? please give some advice. thanks
frameset page
<html>
<FRAMESET rows="18%,*" frameborder="YES">
<frame src="frame_a.htm">
<FRAMESET cols="15%,*" frameborder="YES" >
<frame src="frame_b.htm">
<frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*">
<frame src="frame_c.htm">
</frameset>
</html>
frame a page
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/>testing content
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Screenshot of current system layout.
But when i click on expand link, all the top frame details will be shorten. how to make the expanded details layout overlap the topframe instead?
expected output:
"please give some advice"
Stop using frames: they are not supported in HTML5.
Use tables when you need a table. Do not use tables for layout purposes.
Always specify a docytpe.
Use lower case for the HTML tags (or upper case if you want, but don't mix them)
Take this list as a recommendation and not as criticism. I made those mistakes too.
As you mention in the question, this can be fixed with z-index. The problem that you are facing can be solved by making both tables have absolute position (aligned to the top-left), and giving the first table a higher z-index than the second table:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table style="background-color:#DDDDDD;position:absolute;top:0;left:0;z-index:2;" border="1" width="100%">
<tr>
<td>
<a data-toggle="collapse" data-target="#demo">Simple collapsible >></a>
<div id="demo" class="collapse">
<br/>testing content
<br/>
<input type="button" value="readMore">
</div>
</td>
</tr>
</table>
<table style="position:absolute;top:0;left:0;z-index:1;" border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
</tr>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left " >TOP FRAME</td>
<td width="45% " >TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
I did ask a similar question not too long ago, but I found some new information on the topic and I think that I can explain a bit better now.
I have two puzzle pieces, both are transparent .pngs (except the actual pieces):
Here's the code that I'm using to display my two pieces right now -
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png">
</td>
</tr>
</table>
</div>
The images are beside each other, but not interlocking like they should. I know that this is supposed to happen, because who wants overlapping pictures. So my question is, how do I have them overlap?
The puzzle isn't meant to be built, it's meant to be pre-built and the pieces appear at different times using opacity, if that makes any sense.
Any direction would be awesome, as I'm new to this (having a blast learning though).
Here is an example of a "fancier" solution using the Jquery UI draggable widget:
http://plnkr.co/edit/BYDyqjBLUOXFcuPvqWvx?p=preview
html
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<img src="http://i.imgur.com/UPYw2i4.png" class="draggable">
<img src="http://i.imgur.com/7rkQ0hz.png" class="draggable">
</body>
</html>
JS
//js
$(function(){
$( ".draggable" ).draggable();
});
This allows you to grab and move each piece with the mouse. Had to use plnkr...because like you, i could not figure out for the life of me how to save a JSFiddle.
You cannot do this with a tableset. The columns won't overlap properly. Even if you could pull it off, you can't expect it to work across all browsers.
You could easily accomplish this with DIVs and CSS. There you have complete control over placement.
I was able to produce the desired result with some CSS Magic
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://i.imgur.com/UPYw2i4.png">
</td>
<td>
<img src="http://i.imgur.com/7rkQ0hz.png" class="merge">
</td>
</tr>
</table>
</div>
</body>
CSS
.merge
{
position:relative;
right:92px;
top:4px;
}
I have html like below, when I'm trying to browse this in IE9, nothing will come up until you mouseover the div. if I change the "X-UA-Compatible" to "IE=8" it will show up.
your suggestions are highly appreciated.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>
<body>
<table>
<tr>
<td>
<div style="height:400px; width:400px">
<OBJECT ID="Player" HEIGHT="100%" WIDTH="100%" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>
</div>
</td>
</tr>
</table>
</body>
</html>
I've been trying to make an image resize as you resize the window of the browser. It works in all but Internet explorer. I was requested to do this without external sheets.
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; margin:0; padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tidsaxel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="dstyle.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 100%; margin:0;">
<table cellpadding="10" height="100%" width="100%" style="margin:0;">
<tr>
<td rowspan="20" height="100%" style="margin:0;">
<img src="pil.png" height="100%" width="48" />
</td>
<td class="Rubrik">Tidsaxel för krav, program, granskning och beslut</td>
</tr>
<tr>
<td>Sverige satsar på utveckling av kärnkraft (1945). Kärnavfallet betraktas inte som något problem.</td>
</tr>
And then it goes on with 20 more rows, I don't think it's nessessary to print them all.
</body>
</html>
The picture doesn't even take up 100% of the height to begin with, and when I resize the window it just gets smaller. Is there a way to fix this? I've read that it's possible with javascript, but I haven't found a solution. It's IE 7 and IE 8 that I've tried on.
In the table, set cellpadding="0" cellspacing="0". But this affects the content area as well. You might want to look into designing your site with DIVs instead.
You might want to look into a CSS solution:
<style type="text/css">
body {
background-image:url(background.png);
background-repeat:repeat-y;
}
</style>