Why does Opera 9 have a space between these two images? - html

Every other browser is rendering this correctly.
<body>
<div>
<div><img src="img/logo_top.png" width="168" height="85" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" width="168" height="83" alt="Logo bottom" /></div>
</div>
</body>
It's the same thing without the divs, and with a < br /> between images.
Update:
Here is my HTML, with doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img {border: none;}
body {font-size: 0px;}
</style>
</head>
<body>
<div>
<div><img src="img/logo_top.png" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" alt="Logo bottom" /></div>
</div>
</body>
</html>

If it's the issue I think it is, it should be fixed if you add this CSS:
img {
vertical-align: top
}
Or this:
img {
display: block
}

Try removing the whitespace between the first </div> and the second <div>. Sometimes these CRLF whitespace characters are interpreted by the browser as an indication of physical space.

Related

Misalignment when displaying image on different browsers

This is quick simple but I'm really a noob and don't know how to resolve this.
Basically, I have an e-card to be displayed on a webpage. There's an image and music playing in the background. The html works fine on Chrome and Firefox (centralised and playing well even though size differs on Chrome and Firefox) but the main problem lies on IE. When I open the webpage on IE, the image is not aligned correctly.
Below is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
background-color: #214353;
}
</style>
</head>
<body>
<div align="center"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>
<div>
<div align="center">
<embed src="media/Feliz Navidad Instrumental Karaoke..mp3" width="32" height="32" hidden="ture" loop="ture"></embed>
</div>
</div>
</body>
</html>
Please help!
Thank you!
Use this style on your container div.
<div style="width: 800px; height: 533px; margin: 0 auto;"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>

Uneditable Div On HTML5

I just starting html see my following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>jklm</title>
</head>
<body style="background-color: black;">
<div contenteditable="false" id="uiti"
style="width: 100%; background-color: whitesmoke;">
<img src="universal.bmp" alt="universal" height="80"
width="60">
kkk</div>
</body>
</html>
The above created a div which can editable. You can write anything on it which I don’t want. I just want it as uneditable how to do?.
I see minor problems in your code:
you need to close the img tag by adding a / before > ... like this:
<img src="universal.bmp" alt="universal" height="80" width="60"/>
also ... you don't need contenteditable="false". It's not editable by default.
If you want to make it editable do: contenteditable="true"
A div is uneditable by default. You add that feature with the attribute contenteditable set to true or simply the attribute itself.
Remove it (or set it to false) & add the missing /> to image
<body style="background-color: black;">
<div contenteditable="false" id="uiti" style="width: 100%; background-color: whitesmoke;">
<img src="universal.bmp" alt="universal" height="80" width="60" />
kkk
</div>
</body>
Here is a fiddle

HTML anchors in iframe not working in Chrome or Safari

First off I do not consider myself to be anything more than a hack at HTML/CSS. With that said , I am having a problem with the attached code in Chrome and Safari (Firefox and Opera work perfectly fine). The problem is clicking on one of the help icons in the center iframe should send the right iframe to the appropriate anchor, but it does not. I would like the help topics to move from topic to topic without a scroll bar.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum dolor</title>
<link href="apstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Body">
<div class="leftnav"><p>Something</p></div>
<div class="main"><iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"></iframe></div>
<div class="right"><iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"></iframe></div>
</div>
</body>
</html>
Setup.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="apstyle.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="options">
<p>Get Help #2
<a href="Help.html#help2" target="help">
<img src="helpicon16.png" alt="help2" class="help_icon"/>
</a>
</p>
<p>Get Help #3
<a href="Help.html#help3" target="help">
<img src="helpicon16.png" alt="help3" class="help_icon"/>
</a>
</p>
</div>
</body>
</html>
and the css
#charset "UTF-8";
.Body {
float : left;
clear : both;
width : 100%;
margin-top : 5px;
margin-bottom : 5px;
}
.leftnav {
float : left;
height : 500px;
width : 155px;
margin-left : 25px;
background-color : #eae6e3;
}
.main {
float : left;
height : 500px;
width : 445px;
margin-left : 5px;
}
.right {
clear : right;
float : left;
height : 500px;
width : 185px;
margin-left : 5px;
}
iframe.help {
overflow : hidden;
}
div.spacer {
height: 1000px;
}
Any help would be greatly appreciated
I suppose adding the Help.html might make this easier to replicate
Help.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
remove :
scrolling="no"
and it works for Chrome 21 on windows.
Edit
Still remove the scrolling="no" but change the html code for Help.html to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
<style>
html {
overflow:hidden;
}
</style>
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
See here: testing.dpwebdev.co.uk/stackoverflow/anchors

Change image on hover

How can I change this exact code to do the hovering effect on mouseover?
I tried following some of the other questions and answers, but I could not really follow them.
So the HTML is:
<img src="R3.jpg" width=700 height=300 />
<div>
<img src="SSX.jpg" height=100 width=120 />
<img src="MaxPayne3Cover.jpg" height=100 width=120 />
<img src="NC.jpg" height=100 width=120 />
</br>
</div>
Now what I want to do is change the big size image when the mouse hovers over the small images.
Try this it`s so easy and the shortest one, just change the Image's URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
Try the following code. It's working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
Or do like this:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.
No JavaScript needed if you are using this technique
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)
The easiest way for Roll Over image or Mouse Over image for web pages menus
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>
<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
src="R3.jpg"
width=700
height=300/></a>
<div>
<a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
<img src="MaxPayne3Cover.jpg" height=100 width=120/>
<a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
</br>
</div>
If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
Here's how:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
Just Use this:
Example:
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
Copy This
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
Here is a simplified code sample:
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}

Padding between images doesn't pad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#action-icons
{
float:right;
}
#action-icons.img
{
position:relative;
top:-30px;
padding-right:200px;
}
</style>
</head>
<body>
<h1 class="edit">Some nifty title
<span id="action-icons">
<img src="foo.png" width="64" height="64" alt="" id="newsticky"/>
<img src="bar.png" width="60" height="60" alt="" id="trash"/>
</span>
</h1>
</body>
</html>
Try adding:
#action-icons.img
{
position:relative;
top:-30px;
padding-right:200px;
}
Might do it.
Edit: You have #action-icons.img remove the dot so it's #action-icons img.
The dot sets img up as a class, so as you have it, the HTML would look like:
<img src="bar.png" width="60" height="60" alt="" id="trash" class="img"/>
Hope it helps.
Edit - Here is the full working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#action-icons
{
float:right;
}
#action-icons img
{
position:relative;
top:-30px;
margin-left:50px;
}
</style>
</head>
<body>
<h1 class="edit">Some nifty title
<span id="action-icons">
<img src="foo.png" width="64" height="64" alt="" id="newsticky"/>
<img src="bar.png" width="60" height="60" alt="" id="trash"/>
</span>
</h1>
</body>
</html>
Change
#action-icons.img
To
#action-icons img
and check
it works for me on firefox
Try margin-right
and use
#action-icons img
to address the image.
#action-icons.img
means "any element with the ID action-icons and the class img.