XHTML ignoring height and width

RyanGannon · 5th September 06, 11:52 AM

Hi I'm Ryan, I'm new to the board. I love using CSS but I've come across a problem when I do it with XHTML.

Ok I have a splash page here http://seibhtionary.freehostia.com/index.html

It contains a div with a background image. When you hover over it the background image changes (here to look like a book opening).

Code:

	#enter a {
		background-image: url('defaultImages/seibhtionary.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		width: 346px;
		height: 500px;
		text-align: center;
		padding-top: 400px;
	}
	
	#enter a:hover {
		background-image: url('defaultImages/seibhtionary2.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		width: 346px;
		height: 500px;
		text-align: center;
		padding-top: 400px;
	}

Also inside this div I have an image (a graphic of the word "Enter"). This image is hyperlinked.

Code:

<a href="http://seibhtionary.freehostia.com/index.php?a=index&d=1"><img border="0" src="seibhtionaryImages/enter.gif" alt="Enter" /></a>

Now on the link I gave at the beginning this should work fine. But as soon as I add the doctype

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

the div holding the "Enter" image shrinks down around the image as if the height and width hadn't even been set.

Thanks for any help.

RyanGannon · 5th September 06, 01:29 PM

EDIT: To be more specific, the background acts as though the height and width haven't been set.

Nemus · 5th September 06, 01:41 PM

I'm not really sure what your problem is but try to set display:block to your element.

RyanGannon · 5th September 06, 01:46 PM

Thank you, thank you, thank you! It works perfectly now. Would never have thought of that! Should have really, but oh well.

5th September 06, 11:52 AM	#1
RyanGannon WLC Member Join Date: Sep 2006 Posts: 5	XHTML ignoring height and width Hi I'm Ryan, I'm new to the board. I love using CSS but I've come across a problem when I do it with XHTML. Ok I have a splash page here http://seibhtionary.freehostia.com/index.html It contains a div with a background image. When you hover over it the background image changes (here to look like a book opening). Code: #enter a { background-image: url('defaultImages/seibhtionary.jpg'); background-repeat: no-repeat; background-position: center center; width: 346px; height: 500px; text-align: center; padding-top: 400px; } #enter a:hover { background-image: url('defaultImages/seibhtionary2.jpg'); background-repeat: no-repeat; background-position: center center; width: 346px; height: 500px; text-align: center; padding-top: 400px; } Also inside this div I have an image (a graphic of the word "Enter"). This image is hyperlinked. Code: <a href="http://seibhtionary.freehostia.com/index.php?a=index&d=1"><img border="0" src="seibhtionaryImages/enter.gif" alt="Enter" /></a> Now on the link I gave at the beginning this should work fine. But as soon as I add the doctype Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> the div holding the "Enter" image shrinks down around the image as if the height and width hadn't even been set. Thanks for any help.

5th September 06, 01:29 PM	#2
RyanGannon WLC Member Join Date: Sep 2006 Posts: 5	Re: XHTML ignoring height and width EDIT: To be more specific, the background acts as though the height and width haven't been set.

5th September 06, 01:41 PM	#3
Nemus WLC Lover Join Date: Apr 2006 Location: Falköping, Sweden Posts: 106	Re: XHTML ignoring height and width I'm not really sure what your problem is but try to set display:block to your element. __________________ To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.

5th September 06, 01:46 PM	#4
RyanGannon WLC Member Join Date: Sep 2006 Posts: 5	Re: XHTML ignoring height and width Thank you, thank you, thank you! It works perfectly now. Would never have thought of that! Should have really, but oh well.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Headings moving in content DIVS as it scrolls	vsworks	CSS	1	17th April 07 05:39 PM
Background height problem in FireFox but work in IE	EthanCote	Browser Compatibility	3	16th March 07 06:34 AM
[SOLVED] Help with Sticky Footer	wyclef	CSS	2	18th December 06 09:29 PM
Could someone explain why the middle column drops in IE	Richardf	Browser Compatibility	0	4th October 06 10:34 PM
List problem...	willsmith727	CSS	1	1st September 06 01:54 PM