HTML - Flipping Images - Flawless In Ie8, Not Working In Ie9

I have a website that has an image that loads at the top of the page, and then text about the image that loads below it. My problem is I placed an anchor by the text, underneath the image, so when a certain link is clicked it skips the image and goes right to the text where the anchor is....but when I click on a link to refer to that anchor, it loads to where the anchor is before the image size (width and height) loads. Then, the image loads, and expands th epage, and the image is on screen instead of the text I anchored to.

Is there any easy way to make it so the anchor waits for the image to load before going to where it is....or so the image preloads the size and expands to that width and height before bothering to load the entire image so the anchor will be positioned right....or anything along those lines?

To clarify, it looks like this:

<p><img src="image location" /></p>
Text: <a name="reviews" id="reviews"></a>

and then the link : <a href="site.php?cnt=<? echo($cnt); ?>&pg=<? echo($pg - 5); ?>#theanchor"> Prev 5 </a>

and the anchor position loads before the image loads, so instead of skipping the picture and displaying the text, it just displays only the bottom 90% of the image or so.

Any ideas would be welcomed ,

--Tony

Hello to all, I am new to the forum and I hope some of you experts can give me some advice.

I use firefox and my website looks exactly how i want to in it, however I just noticed that in IE it seems as though my little spacer images arent working properly, is there any quick/easy fix for this? Im not exactly a "pro" so the easiest work around would be awesome, however i do have to get this fixed one way or another so any help is greatly appreciated.

Here is the link for the site:
http://infinityreinforcing.com/photos.html

the projects line up perfectly in FF, but in IE it is a big ol mess, thanks in advance.

Hello!

I'm new to these forums and am looking for a little help with my website I'm currently building. I'm trying to look for a unique way to display my images on a page. One particular way I'm thinking of is to hover over a tumbnail of the image and it pops up bigger so you can see it. Is there any code out there for that?

Hi

My site is at www.bigbadroo.com.au/dht/index.php

It's looking ok in most browsers at the moment, but I have a couple of questions:

1) why is ie6 cutting off and repeating the background images?

2) why is ie6 putting big red crosses and borders on my three main button images?

3) how do I get the DIV box1 to extend all the way to the top of the screen in IE6 and IE7?

Thanks for your time and help guys.

Shaun

ok i found a website i registerd got my domain and i uploaded my website my index.html and all the other files and i added all my images but wen i look at my site the images do not appear its just the blank site with text what do it?

Hello everyone,

I am currently working on a website that will have a simple gradient border (something like an "outer glow" from Photoshop) along the border of a nested table in the page. The final result will be a simple box with data centered in the middle of the page...

However, my question is more related to programming in general. I have two options:
1. Have a linear gradient (1 px by 5 px) which is rotated in the 4 cardinal directions, and then tiled all around the page. Also there will be corners (5 px by 5 px) on, you guessed it, the corners.

2. Creating tables, for instance:

//"invisible" is a font class with size="1px"

<table class="invisible" cellpadding="0" cellspacing="0" width="710">
<tr height="100">
<td width="1" bgcolor="#000000"></td>
<td width="1" bgcolor="#333333"></td>
<td width="1" bgcolor="#666666"></td>
<td width="1" bgcolor="#999999"></td>
<td width="1" bgcolor="#CCCCCC"></td>
<td width="1" bgcolor="#FFFFFF"></td>
<td width="700" bgcolor="#FFFFFF">
<!-- TemplateBeginEditable name="body" -->

SITE CONTENT HERE

<!-- TemplateEndEditable -->
</td>
<td width="1" bgcolor="#FFFFFF"></td>
<td width="1" bgcolor="#CCCCCC"></td>
<td width="1" bgcolor="#999999"></td>
<td width="1" bgcolor="#666666"></td>
<td width="1" bgcolor="#333333"></td>
<td width="1" bgcolor="#000000"></td>
</tr>
</table>

which recreate the same action as tiling the gradient along the outside edges using the simple HTML colors. Which, from the standpoint of REDUCING actual work done by the server, would be the more effective (not my time, which clearly option 2 takes more of).

I know very little about image compression, and how the whole process works for calling up images from a server. Any explanation is appreciated.

Thanks again,
BlitzKampf

I am still new to html so still learning the ropes. Heres what i have, im trying to get the gallery image next to the home image, instead its right below it by X pixels..

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head><title> Profile</title></head>
<body background="white">
<table cellpadding="0" cellspacing="0" border="0"  align="center" >
	<tr>	
		<td valign="top" width="94" height="42" >
			<div style=" margin-right:600px; margin-top:150px "><img src="images/home.jpg" alt="" border="0"></div>
	    </td>
	</tr>
	
	<tr>
		<td valign="top" width="94" height="42" >
			 <div style=" margin-right:600px; margin-top:150px "><img src="images/gallery.jpg" alt="" border="0"></div>
		</td>
	</tr>
</body>
</html>

Simple question.

I have 2 images I'm displaying but they are displaying side by side. I want them to be one on top and one on the bottom.

Here is my code:

<p>
<img src="images/GoldCard_Page_1.jpg" Align="left">
</p>


<p>
<img src="images/GoldCard_Page_2.jpg" Align="left">
</p>

Hello,

Yes on the same computer, I am quite happy with FF, but when I check the same image
on IE, it seems lower quality image even though it is the same image on the same site!!

I could not find any previous post for this question but someone has sure had the same problem.
Everying looks fine on my website if you use: http://sdgroceryoutlet.com
However, if you use: http://www.sdgroceryoutlet.com it scrambles the .jpg images.
Why would the images not show when adding the www. prefix?
Need some help, please.

Hi People,

I am trying to take a basic background image.
Split it into 3 chunks (top bar, middle blank 1px high, bottom bar)
The idea was that I would set the middle image to be 1px and make it repeat so that when the user scrolls down the page, the background image scales accordingly. Also so that it would look ok via different browsers.

I cut my image into three, no problem there.
I then thought it would be a simple case of inserting my image and setting the CSS accordingly but I am getting different results in IE and FF (but of course).

Example:
HTML CODE

HTML Code:

<div id="image1"><img src="images/image1.jpg" alt="image description"></div>

CSS CODE

PHP Code:

body {
    margin-top:20px;
 }


#image1 {
    text-align: center;
    padding-top: 540px; 
    padding-bottom: 0;
 } 


When I put this in, the image moves down to the bottom of the page in both IE and FF. Of course FF looks like it place the image in the right place but IE ends up putting lots of white space underneath the image. Any ideas ?

Also, Is there a much simpler way of getting the image to scale according to the person scrolling? I am keep to learn a few different methods as it all helps.

Thank you all

The title thread says it all i can't get the image next to each other it always seems to end up underneath...here is a screenshot.



The arrow is pointing to were I want it to go.

So how do I do thi guys ?

Greetings,

I just recently started learning HTML and I am currently taking an HTML class in my college. One of my assignments was to create a web page with a certain amount of requirements but for some reason my teacher was not able to view the pictures when she tried to look at my assignment. Can someone please take a look at my source code and let me know what is wrong with it?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
"http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<title>Internet Security</title>

<style type="text/css">

h1 {text-align: center}
h3 {text-align: center}

body {background-color: #FFEBCD}

</style>
</head>

<h1>Security and the Internet</h1>

<body>

<p>Internet Security has become vital in today's society. With the imposing attempts to breach other computers, it is important to have good anti-virus software.
Viruses can come in many different types. First and foremost are your standard <em><strong>trojan viruses</strong></em>. These viruses are used to steal passwords
so the hacker can attempt to gain pertinent user information. Another form of a virus is a <em><strong>boot virus</strong></em>. A boot virus infects floppy disk or
master boot records on a hard drive. They replace the boot record program (which is responsible for loading the operating system in memory)
copying it elsewhere on the hard drive or overwriting it. Boot viruses load into memory if the computer tries to read the disk while it is booting.<hr /></p>


<h3>Other Types of Security Dilemmas</h3>

<p>Other security problems that are slowly rising include wireless network hacking. In this particular method of breaching, the perpetraitor attempts to steal a
wireless connection by using DOS (denial of service attacks), man in the middle, Identity theft or MAC spoofing and sometimes, caffe latte attacks.
The most frightening part of this type of breach, or any for that matter is the hackers ability to gain personal information by using the aforementioned methods.
It is very important to secure your computer with an anti-virus program as well as, a firewall to ensure you are not a victim.
Below is a security checklist which will aid in keeping hackers out of your system.<hr /></p>

<h4 style="color:#DC143C">Ways to Stay Internet Safe</h4>

<!-- The following six lines represent how ordered list work and would appear on a web page -->

<ol>
<li>Install an anti-virus program and firewall and, <strong>keep the definitions up to date</strong></li>
<li><strong>NEVER</strong> open any attachments unless you know the sender</li>

<li>Do not close your anti-virus and firewall. Real time protection is often active while they are open</li>
<li><strong>DO NOT</strong> visit un-safe websites. Again, virus protection usually has a site watch plug in to aid in this</li>
</ol>

<p>Follow these helpful tips and you should remain virus free</p>

<p>The following pictures to the right indicate two great antivirus and spyware programs used for Internet security today. I personally use both of these.
Each of these particular pieces of software serve their own purpose. The AVG Free is used for scanning for viruses while the SuperAnti-Spyware is used
to scan and resolve issues pertaining to spyware and adware.

<!-- Picture links are displayed below -->

<p><a href="http://free.avg.com/" title="click here to visit AVG's website">
<img src="AVG.gif" alt="photo of anti-virus software" border="0" align="right" width="140" height="140"/></a></p>

<p><a href="http://www.superantispyware.com/" title="click here to visit SuperAnti-Spyware's website">
<img src="super.gif" alt="picture of SuperAnti-Spyware" border="0" align="right" width="140" height="140"/></a></p>
<br>
<br>
<br>
<br>
<br>

<br>
<br><hr />

<p>In the next few steps I am going to describe how to stay virus free if using a wireless network</p>

<h2 style="colorC143C">Instructions For Setting Up a Safe Wireless network</h2><br>






</body>
</html>

Can't seem to find the discrepancy within the code. All the image files are in the same location. As stated in the title, some images appear and some do not.

http://webpages.charter.net/projects...vertmedia.html

Thanks for you help,

-=Devil Duck=-

I have a two questions if you see an image on the web for example a map you would like to create yourself can you look at the webpage's source and use that as a guide? Does copyright laws apply?

Well second question will come when I get an answer to first question.

Thanks
sunrise