Jump to content

Archived

This topic is now archived and is closed to further replies.

bobleny

HTML image is cut in half? This shouldnt be...

Recommended Posts

After having little luck at the CSS portion of the forums([url=http://www.phpfreaks.com/forums/index.php?showtopic=96350]Here[/url]), I have decided to restate my question here as it could very well be an HTML problem and hopefully I will have a little better luck.

O.K. After experimenting with some CSS I decided that it hade to be possible to create an image rollover. So, then I made it, now, I have a little problem.

In Internet Explorer everything works great! However, In Fire Fox, Half of the rollover is missing. It’s like it is down to low or something. I find id odd.

Working example: http://www.firemelt.net/CSS%20Test/

So, how do I overcome my oh so annoying problem?

Here is the code with the CSS included. You can also view source via the link as there is no server side scripts or anything.

[code]
<html>
<head>
<title>CSS Rollover Test</title>
<style type="text/css">
BODY
{
  BACKGROUND-IMAGE:URL('P90.jpg');
  BACKGROUND-REPEAT:NO-REPEAT;
  BACKGROUND-POSITION:CENTER CENTER;
  BACKGROUND-ATTACHMENT:FIXED;
}


img
{
border-style:none
}


a.guide
{
background-image:url('guide1.0.png');
}


a.joke
{
background-image:url('joke1.0.png');
}


a.guide:hover
{
background-image:url('guide1.2.png');
}


a.joke:hover
{
background-image:url('joke1.2.png');
}
</style>
</head>
<body>

<table align="center">
<tr>
<td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td>
<td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td>
</tr>
</table>

<table align="left">

<tr><td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td></tr>
<tr><td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td></tr>
</table>
</body>
</html>
[/code]

Share this post


Link to post
Share on other sites
try to set the height and width of the image inside the link
[code]
<img src="t.gif" alt="" width="##" height="##" />
[/code]

Share this post


Link to post
Share on other sites
Try uploading the image to a hosting website. like imagehack.
I used to have a problem with FF to, it has a difrent image uploader than IE.
because Ie can hold up to somthing like 100mb worth of images.
And ff can only hold a little. So youll have to upload it, then copy and paste the URL into your Html.

Share this post


Link to post
Share on other sites
I have no clue what your talking about because I use an ftp server to conect to my webhosts server, where I then upload the images...

If you click on the image you'll note that the dotted outline will apeare correctlly. It's like the image is sitting in a pocket.

Share this post


Link to post
Share on other sites
O.K. Never mind! I asked the smartest guy I ever met to help me and he figuered it out. And im not just saying he's smart because he helped me! He knows so much about so many diffrent programeing languages its nuts!

[code]<html>
<head>
<title>CSS Rollover Test</title>
<style type="text/css">
BODY
{
  BACKGROUND-IMAGE:URL('P90.jpg');
  BACKGROUND-REPEAT:NO-REPEAT;
  BACKGROUND-POSITION:CENTER RIGHT;
  BACKGROUND-ATTACHMENT:FIXED;
}


img
{
border-style:none
}


a.guide
{
background-image:url('guide1.0.png');
line-height: 22px;
padding: 0;
margin: 0;
display: block;
}


a.joke
{
background-image:url('joke1.0.png');
line-height: 22px;
padding: 0;
margin: 0;
display: block;
}


a.guide:hover
{
background-image:url('guide1.2.png');
}


a.joke:hover
{
background-image:url('joke1.2.png');
}
</style>
</head>
<body>

<table align="center">
<tr>
<td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td>
<td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td>
</tr>
</table>

<table align="left">
<tr><td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td></tr>
<tr><td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td></tr>
</table>
</body>
</html>[/code]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.