Jump to content


Photo

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


  • Please log in to reply
5 replies to this topic

#1 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 23 June 2006 - 12:54 PM

After having little luck at the CSS portion of the forums(Here), 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.

<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>

-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#2 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 23 June 2006 - 04:11 PM

try to set the height and width of the image inside the link
<img src="t.gif" alt="" width="##" height="##" />

NoGray.com


#3 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 23 June 2006 - 08:25 PM

Hmm.... That didnt work.
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#4 Squirrlman

Squirrlman
  • New Members
  • Pip
  • Newbie
  • 3 posts

Posted 29 June 2006 - 04:38 PM

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.

#5 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 02 July 2006 - 10:50 PM

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.
-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#6 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 03 July 2006 - 12:08 AM

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!

<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>

-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users