[adamdillon]

I have this website that i made for someone.

http://www.coxsgifts.com

I did it entirely in valid xhtml 1.0 and css. I used all div tags and now tables what so ever. Well in IE the site looks fine but when i open it in opera or firefox there is a gap below the left nav bar. I tried putting a wrapper around the whole box but that only solved the problem in IE. Any one know what i can use to solve this??? I have more sites that are like this and it would be a great help if someone knew. Thanks ahead.

Adam

Edited by adamdillon, 12 May 2006 - 11:32 AM.

[Advertisements]

Well if you over write #leftnav and #maincontent in you css the with what I have below it works ok. You have not got valid xhtml, you are serving it up as text/html which means it still is html with end tags added, even your doctype says it is html! And you would would break you site if your changed it!

#leftnav {
	display:table-cell; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 1em; PADDING-BOTTOM: 10px; WIDTH: 150px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #00cc99
}
* html #leftnav {
FLOAT: left;
}
#maincontent {
	display:table-cell; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: #000000 thin solid; WIDTH: 608px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: auto; BACKGROUND-COLOR: #00cc99
}
* html #maincontent {
FLOAT: left;
}

Edited by Michael, 13 May 2006 - 05:51 AM.

[Michael]

Well if you over write #leftnav and #maincontent in you css the with what I have below it works ok. You have not got valid xhtml, you are serving it up as text/html which means it still is html with end tags added, even your doctype says it is html! And you would would break you site if your changed it!

#leftnav {
	display:table-cell; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 1em; PADDING-BOTTOM: 10px; WIDTH: 150px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #00cc99
}
* html #leftnav {
FLOAT: left;
}
#maincontent {
	display:table-cell; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 1em; PADDING-BOTTOM: 10px; BORDER-LEFT: #000000 thin solid; WIDTH: 608px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: auto; BACKGROUND-COLOR: #00cc99
}
* html #maincontent {
FLOAT: left;
}

Edited by Michael, 13 May 2006 - 05:51 AM.

[adamdillon]

Ok well i will try this. but i ran my site through http://validator.w3.org/ and it said it is valid xhtml 1.0 transitional, but i will try it and get back to you to see if it works.

[adamdillon]

Ok thanks it work. I had to change the footer to display: table cell as well. Could you explain why this worked and what the * html is for. thanks.

[Michael]

Display display: table cell makes the two div to display as table cell, which means they will both expand to the same height and shair the width between them. But IE dose not understand that (it is the only one that dose not) so we want to give it something that it understands and no other browser dose. * html is just that.

I join #web on irc.freenode.org all the time up that top there is

Don't use XHTML unless you understand it: http://hixie.ch/advocacy/xhtml

I think you sould read that.