HTML - Chrome Absolute Positioning Bug

I'm new here so forgive me if I've posted in the wrong place.

I'm working with HTML. My goal is to use an image as a link but I also need to use absolute positioning for the image as well.

Is there a code that combines absolute positioning of an image where the image is also a link?

I've attempted to combine : <IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="---THE URL OF MY HOSTED IMAGE---"> with:

<p align="center"><a href="---the URL of the link---" class="fw_link_page"></p>

But I simply don't know how to do this. Any assistance would be greatly appreciated.

Hi,
Ive spent hours upon hours painfully sculpting this website and i can't for the love of gaaawd get the positioning of my element standard throughout the website.

The home page and the watercolour-classes page have the bottom graphics bar in the same position But different from all the other pages. All i want it to do is be the same throughout and its only out by about 10px.

why oh why

Ive been struggling for days and weeks with this problem and cant work it out. Im sure its something simple but as a self taught web designer i dont know it all.... far from it.

Any ideas or suggestions Please.

The website is http://www.miriartist.co.uk

Any help or light on the matter would be great THANKS

Cheeeers
Ben

I want to use my images as links, but I also want them absolutely positioned relative to their parent div. However I have come across a problem, to make them links I need to wrap <a>s around them which then means their positioning becomes relative to the anchor tag.

Can anyone suggest anything to counteract this problem? I do need them absolutely positioned. The only alternative is an image map, but I'm reluctant to do that because of the slow load time for the whole image, plus all the extra co-ordinate coding I'd have to do.

The problematic page has this url:

http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html

It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize?
I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie.

Hi guys, I'm a newb here, and I'm trying to create a table with a fixed position like this one

http://www.adachiu.me/

I have made one, but if I resize the window it will move into the table and look all wrong.
This website that I have provided does not do that; it will go up and down with the page when you scroll, and if you resize than it will not move into the table.

Does anybody know how to fix this?

Thanks
Sean

could someone please help me out!

I just need this flash code

<embed
allowScriptAccess="never"
src="http://www.amarasoftware.com/slideshow.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"
width="200"
height="200">
</embed>

to have an absoulte postion on it...

thank you. I would greatlly appreciate your help

Hi,

I am looking for the easiest and reliable solution to make the "View on Google Maps" image to look like here
http://www.dublinbynumbers.com/troubleshooter.html
instead of here http://www.dublinbynumbers.com/categories/cinemas

The solution should work in both IE/FF and any screen resolution.

Thanks in advance for your help,
Sorin

Hello everyone,
I've go this code here for positioning the "comments and frieands" together in in a scroll box at the bottom of the page.

But I'd like to put it in a sertante position. Could anyone plaese help me find out were and what to put in this code.

And for more information this is a code I want to put within a "div" image and place it in relation to were the image is (0,0) not were the page starts (0,0).

--------------------------------------------------------------------------------------------------------
<i class=i>
<a href="http://xiii.us/ms/center-friends-and-comments"</a>scroll center friends and comments</a></i>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="myDClassFC">
<table><tr><td>
<table class="off"><tr><td>
<table><tr><td>
<style>
.i {display:none;}
div.myDClassFC {height:400px; overflow:scroll; overflow-x:hidden}
</style>
<i class="i">!-END Block to put Friends and Comments in a Scroll Box-! </i>
-----------------------------------------------------------------------------------------------------


Well I appreciate everyones thought.

Hi there, I want my images to have specific positions within my website but so far I seem to get it wrong.

this is the html:
<body>
<div class="top">
</div>
<div class="logo"><img src="img/logo.jpg" /></div>
<div class="wrapper">
<div class="1"><img src="img/1.jpg" width="450" height="450" /></div>
<div class="2"><img src="img/2.jpg" width="215" height="220" /></div>
<div class="3"><img src="img/3.jpg" width="215" height="220" /></div>
<div class="4"><img src="img/4.jpg" width="215" height="450" /></div>
</div>
</body>

this is the css

body {
background-color:#FFFFFF;
color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

.top {
width:100%;
height: 33px;
background-color:#0D0D0D;
}

.logo {
position:relative;
margin: 0 auto;
border: none;
padding:0;
width: 400px;
height: 130px;
margin-top:25px;
}

.wrapper {
position:relative;
margin: 0 auto;
border: none;
padding:0;
width: 900px;
height: 700px;
margin-top: 25px;
}

.1 {
position:absolute;
width: 450px;
height: 450px;
left: 0;
top: 0;
}

.2 {
position:absolute;
left:460px;
width: 215px;
height: 220px;
top: 0;
}

.3 {
position:absolute;
left:460px;
top:230px;
width: 215px;
height: 220px;
}
.4 {
position:absolute;
left: 685px;
width: 215px;
height: 450px;
}

Basically I want something like this site http://www.aardvarkbrigade.com/ where the images seem to be placed in specific positions.

Would be great and I would be thankful if someone could help me

What is the best method to center a single (hover over) image link in the absolute center of a browser page? I know there must be something very easy that's going over my head.

Is it easiest via CSS, or html? or neither, or both???

here's my code so far

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>keep your eyes open</title>
<style type="text/css">

<!--

#centerDIV {
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}


body {
	background-color: #333333;
}

-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>



<body onload="MM_preloadImages('Images/eyesopen.png')">

<div id="centerDIV">

<a href="mailto:info@kyeonyc.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('eyes_closed','','Images/eyesopen.png',1)"><img src="Images/eyesclosed.png" alt="eyes open" name="eyes_closed" width="249" height="247" border="0" class="imageCenter" id="eyes_closed" /></a></div>


</body>
</html>

I have some expanding sections (spans) in my page that expand when clicked with a little javascript changing display to block form hidden. However one section when expanded doesn't move the next section down at all. The next section is not set to absolute or anything so I cannot think why that section isn't moving down when the previous section is expanded.

Have tried everything and previous sections seem to have exact same code and they push down the next section when expanded. Confused.

It's the section

HTML Code:

<h3>Silver Jews Band Website</h3>
				<p class="cntr"><a href="images/sampleWebsite1.png" title="website example"><img src="images/website_thumnail.gif"  alt="Example Website Design"/></a></p>
				<p class="fl">
					<span class="plusArrowPF" onclick ="moreInfo('webSite1') ">click here to expand this section...</span>
					<span id="webSite1">
					text text
					 </span>
				</p>
							
						
				 
				<h3> <br /><br /> Rocky Horror Festival Website</h3>
				 <p class="cntr"><a href="images/sampleWebsite3.png" title="website example"><img src="images/website3Thumbnail.JPG"  alt="Example Website Design"/></a></p>
				 <p class="fl">
					<span class="plusArrowPF" onclick ="moreInfo('webSite2')">click here to expand this section...</span>
					<span id="webSite2">
				text text				</span>
					
				 </p><br /><br />

<h2 class="pfH2" id="programs"><br/><br/>Programs</h2> 
				<hr />
				 etc etc

if you want to view the page to see what I mean it's www.absolute-websites\portfolio.html and it's the section at Rocky Horror Festival.

Thank you.

Hi ! I was wondering if anybody know how i make a table at the absolute top of a site. In dreamweaver it creates a space between the browser and table. A example is the top menu of this page http://www.nettkatalogen.no
I need to create something similar to the top menu in yellow at this page.
thx

hi, my site logodepot.co.uk has a javascript slideshow at the top right of the page, this does not show in google chrome however? any ideas? thanks

My website used to work properly but now, the portion that lets people travel into the different portion of the site does not appear anymore on Internet Explorer 8.0.7600?

When editing with my PHP tool, it works. When using Google Chrome it works also.

Therefore, I would say it is a technicality between the version of Explorer.

Where or how can I check this.

www.automatisationajp.com

Thank you in advance for your help.

stay1001

Hello everyone,

I need some knowledge, and if possible some code(!) which will enable my website to function correctly in Google Chrome.

I already have code in place for IE browsers but upon inspection of our customers most used browsers Chrome has come up in second place (35%) and I need to make sure it works as it should!

The problem, and its just a little one, is that ONE of my pictures floats over my search bar (floats left when it should be middle)

If you have google chrome, take a look: http://www.alternativeroutefinance.co.uk/vehicles - naturally you can view the source and see if you can come up with something to help me out!

Does anyone have any advice to offer?

many thanks