HTML - Hover Enlarge With Absolute Positioning Firefox Problem

Good afternoon,

I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code:

<div style="position:absolute; left:2px; top:2px; width:797px; height:151px;">


Can you please help solve my hair pulling issues with the absolute postioning.

Good afternoon,

I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code:

<div style="position:absolute; left:2px; top:2px; width:797px; height:151px;">


Can you please help solve my hair pulling issues with the absolute postioning.

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.

Hi all,

First post here hope someone can help.

I'm creating a portfolio web page for my 3D work and using this to learn a bit of web design. My current problem comes from using absolute positioning to get text to float over a background image in a precise location. I have this as I want it in Fiirefox 2.0.0.6 but the text all appears a fair bit higher in IE (I have looked using IE 6 on its own and by changing the render mode to IE in Firefox).

I realise I need to do a fair bit of validation and refinement to the site but at the moment I want to get this alignment issue sorted so the site is at least visible while I work on other elements.

Page url: www.iamjames.co.uk

The text in question is on the used on all pages!

Thanks in advance

James

Hello, I am developing a website and am not very experienced. I am trying to figure out how to enlarge an image over the background. Like make the image bigger in the same window and the background gray.
Can anyone help me?

Hi there,

for my website I would like to have small images, but when clicked on, enlarge in the current window, not another window, and does not link to a blank page with the picture.

I don't know if HTML can do this or not, what would be my best option?

I don't think wordpress supports javascript either?

Thanks, ps2cho

hello,
i am just learning html and creating my own website right now. i ran into a problem and would like some help.

what i want to do is this. i created a page with pictures about 200x200 in size. now what i want to do is when you "click" onto the picture have it open up in a new window and a Larger size. But there is more. I would like to have the new window have my page Banner on top and my background Color around the image.

I already know how to use a code that Will enlarge the image in a New window but that is all it is is just the image and plain white background. and not what i want to do.

So what are my options for the easiest method to do what i am thinking of above.
Any help is appreciated.

Never mind you guys were wrong as usual. Thanks.

Hi all i need some help. I have created a simple gallery with a large image and smaller images to the left of it, when the small images are clicked they change to the large image, see an example here http://vfashion.co.uk/help/example.html

but i want to be able to add a link below the main image so when its clicked the current image that is displaying large will open up in a new window.

how would i do this???

the code for the page is below please can someone help me

Code:

<head>
<meta content="en-gb" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
	margin-bottom: 0px;
}
</style>
</head>

<TABLE id=table1 height=164 cellSpacing=0 cellPadding=0 width=605 border=0 class="auto-style1">
<TR>
<TD vAlign=top width=603 colSpan=2 height=20><B><FONT face=Arial color=#333333></FONT></B></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
<DIV align=center>
<TABLE id=table2 cellSpacing=0 cellPadding=0 width=147 border=0>
<TBODY>
<TR>
<TD height=10></TD></TR>






<TR>



</TR>








<TR>
<TD height=5><div align="center">
	<table border="0" width="147" cellspacing="0" cellpadding="0" id="table23">
		<tr>
			<td align="center" colspan="2" height="10"></td>
		</tr>
		<tr>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="1.jpg" width=70 border=1 onclick=document.url.src="1.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="2.jpg" width=70 border=1 onclick=document.url.src="2.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
		</tr>
		<tr>
			<td align="center"></td>
			<td align="center"></td>
		</tr>
		<tr>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="3.jpg" width=70 border=1 onclick=document.url.src="3.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="4.jpg" width=70 border=1 onclick=document.url.src="4.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
		</tr>
		<tr>
			<td align="center"></td>
			<td align="center"></td>
		</tr>
		<tr>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="5.jpg" width=70 border=1 onclick=document.url.src="5.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
			<td align="center">
			<img style="border-color: cccccc" alt="" src="6.jpg" width=70 border=1 onclick=document.url.src="6.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
		</tr>
	</table></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top width=405 height=40 rowSpan=3>
<P align=center>
<img src="1.jpg" alt="" name="url" width="380" border="0" id="url"></P>
<P align=center>
Click to enlarge</P></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
&nbsp;</TD>
	</TR>

Hi everyone. I need some help with one thing. However as it is for an ebay page, I cannot use the head tag.
I have seen it on ebay before so I know it can be done just not sure how.
Basically I need a table with a row of thumbnail images at the bottom and in the top of the table, there will be an enlarged image. When an thumbnail is either clicked on, or the mouse is placed over he image, a bigger image will be displayed in the top cell.
I cannot use anything in the head tag though as its ebay, like css or javascript
Thanks for any help received

Hi,

I'm hoping someone can help me. I bought a website template and I thought I would be able to figure it out. I'm having a lot of difficulty in a lot of areas. But this particular issue is driving me crazy. I only have some basic HTML knowledge.

I'm basically trying to make images on my site so when you click on them they enlarge. When you click on them again and they shrink back down.

First of all, this is the template I used:
http://www.templatemonster.com/flash...tes/24691.html

And this is what I'm specifically trying to add to it:
http://www.cabel.name/2008/02/fancyzoom-10.html
Scroll down and click on the sample images.

I followed the simple instructions on that page above but where it says Body ID=, I'm not sure what I'm supposed to put there.
Also the image source code in the instructions is different then the code in my .xml file. My code looks like <image imageUrl="_home_images-1.jpg"/>


I've literally spent the whole day on this trying to figure it out and searching online. If anyone can show me how this can be done I would REALLY appreciate it.
I'm not sure what other info you need, but I could zip up the template and provide it if needed. (its only 5mb)


Thanks in advance
Sarah

Hello, I have this simple slideshow as can be seen here.
It currently contains 2 images.

Works good in all browsers except IE9.. as soon as I move my mouse-cursor near it, it freezes!

Hope someone can locate the conflicting issue(s), thanks.

ps - tested in IE 7, IE 8 and IE 9.. only 9 fails.

Hey guys, I'm having crap luck with something I'm trying. A little experiment if you will. So heres the deal, basically I took some footer links on a site that I'm redesigning for a lady. (Also with that said ignore all the other code that you see on the page its work in progress, I'm basically taking old html/tables redoing it into xhtml/divs).

So my problem is if you see the footer links at the bottom of the page first look at them in FF, basically what I did was removed the line under the anchor and I added a nifty little border-bottom instead.

Code:

#footer-links a:link {

        color:            #808080;
        text-decoration:  none;
        border-bottom:    thin dotted #808080;
        
}

#footer-links a:visited {

        color:            #808080;
        text-decoration:  none;
        border-bottom:    thin dotted #808080;
        
}

#footer-links a:hover {

        color:            #808080;
        text-decoration:  none;
        border-bottom:    thin dotted #f1037f;
        
}

Problem is IE will not show this correctly. So I assume it doesn't like the way I did the border-bottom. So I figured ok thats fine in IE I'll just show it normally. So back in my markup I added this to fix it.

Code:

	<link type="text/css" rel="stylesheet" href="style.css" />

	<style>

		<!--[if IE ]>
		#footer-links a:link {

		        color:            #808080;
		        text-decoration:  underline;

		}

		<![endif ]-->

		<!--[if IE]>
		#footer-links a:visited {

		        color:            #808080;
		        text-decoration:  underline;

		}
		<![endif]-->

		<!--[if IE] >
		#footer-links a:hover {

		        color:            #f1037f;
		        text-decoration:  underline;

		}
		<![endif]-->

	</style>

I even put this under the link to the style sheet so it would override. Its not working though. Please look and help if you all can.

http://www.atlanta-web.com/acm/index.html

Thanks,

Eric