Hi, I have a css page: http://www.monsterresource.com that displays in IE but not in Firefox. Also I would really like to make the entire background image a clickable link. Can anyone please take a look? Thanks, RonMo
Firefox wasn't the problem. Your code is invalid. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example Background</title> <style type="text/css"> body { margin : 0px; padding : 0px; border : 0px; } img.background { position : absolute; top : 0; left : 0; width : 100%; height : 600%; } </style> </head> <body> <div> <a href="http://www.google.com/"> <img class="background" src="http://www.monsterresource.com/images/grab.png" alt="monsterresource.com"> </a> Example Text </div> </body> </html>
Hiya DRHoward! In case you didn't see what he did, ronmo, you had something inline (either the <a> or the <img> as on your page I see neither the <a> NOR the background image) as a direct child of the <body> so he wrapped the whole thing in a <div> (which is a block). This is true even if you set the inline element to display: block (which you'll have to do to make a background image clickable...not that you have a background image that I see, but an HTML image). To make a backgroud image clickable... if you really meant background, you set the <a> to dispay: block so you can set a height and width (the same as the image), and set the image as a background to the <a> (url (image.gif) 0 0 no-repeat ad now you have a clickable background image (there must be at least a space or something between <a> and </a> tags). For an HTML picture to be clickable, you wrap the <a> around the image. <a href="wherever"><img src="image.gif" height="" width="" alt=""></a> (I stick my heights and widths in the HTML for the really old slow browsers who render before they look at the size of the image, but that's just me). I doctype would be a good idea. You'll find tons of stuff on teh googles with "doctype html".