Forum Moderators: not2easy
I have used the css code from this page:
[dynamicdrive.com ]
for my site:
[chantik.in ]
css file: [chantik.in ]
Viewing this page with IE is fine, no problems at all.......
However, there is a problem when viewing it with firefox. in my site there are 2 parts where i have incorporated this css script. at the top of the page, the script works fine, but at the bottom of the page (where it says please move your mouse over the image for the full size)the light yellow colored background thing doesn't stretch all the way.
Basically i want users to click on the image on the left side, and for the full-sized image to pop up on the white part (to its right)
And how come they don't pop up in line with each other?
Any help is greatly appreciated. Thanks.
Kind Regards,
Akshay
Second of all, links are TOS violations - a mod will probably come by soon and remove the ones you've posted.
Thirdly, the stuff you have there is actually a javascript issue - not a CSS one. (I've used DHTMLCentral's stuff for a looong time!) The reason they don't line up is because you're popups are aligned with the link in question, not with the div the pop up in. It's in the javascript (I haven't looked at it, but I've seen it before) not the CSS.
Lastly, you can do this with no scripts at all, and have everything in line where you want it - using pure CSS. I actually have a tutorial for this on my website - BUT since I can't post the link....!
...well, I'll have to post later - apparently, my host is doing some MySQL maintenance, and my server is down for the moment. When it comes back, though - I'll post how to do it via CSS...
Edit the below as needed:
HTML<style type="text/css" media="screen">
/*\*//*/
@import "ie5mac.css";
/**/* {
border:0;
margin:0;
padding:0;
z-index:0;
}body {
text-align:center;
background:#CCC;
}#content {
position:relative;
margin:10px auto;
text-align:left;
background:#FFF;
border:solid 1px #000;
width:550px;
padding:20px;
}img {
border:solid 2px #CCC;
}span {
display:none;
}span img {
border:none;
}a:hover {
border:none;
text-decoration:none;
background-color:#FFF;
}a:hover span {
position:absolute;
left:100px;
top:100px;
width:130px;
height:122px;
display:block;
}</style>
</head>
<body>
<div id="content">
<div id="nav">
<a href="#"><img src="link1a.jpg" width="52" height="49" alt="" />
<span><img src="link1.jpg" width="130" height="122" alt="" /></span></a><br /><a href="#"><img src="link2a.jpg" width="52" height="49" alt="" />
<span><img src="link2.jpg" width="130" height="122" alt="" /></span></a><br /><a href="#"><img src="link3a.jpg" width="52" height="49" alt="" />
<span><img src="link3.jpg" width="130" height="122" alt="" /></span></a><br /><a href="#"><img src="link4a.jpg" width="52" height="49" alt="" />
<span><img src="link4.jpg" width="130" height="122" alt="" /></span></a>
</div></div>
ie5mac.css#nav a span, #nav a:link span {
display:block;
visibility:hidden;
width:auto;
position:absolute!important;
top:100px;
left:100px;
}#nav a:hover span {
visibility:visible!important;
}
That should get you started :)
