Jump to content

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]
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.
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.
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]
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.