vinpkl Posted September 16, 2009 Share Posted September 16, 2009 hi all i m vertically aligning the content of div in the middle. The content has yellow background. IE7 shows background according to height defined but firefox expands background yellow colour.If i reduce the paragraph height then content doesnt gets verticaly center.How can yellow bg become of same height in IE7 and FF3.5Vineet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#cent { width:500px; margin:0 auto; height:300px; background-color:#FF0000; overflow:auto; text-align:left; clear:both;}#cent p { display:table; height:300px; width:500px; margin:0; text-align:center;}#cent p span { display:table-cell; vertical-align:middle; background-color:#ffff00;}</style><!--[if lte ie 7]><style type="text/css">#cent p span { display:inline-block; height:150px; background-color:#ffff00;}#cent p b { display:inline-block; height:100%; vertical-align:middle;}</style><![endif]--></head><body><div id="cent"><p><span>This is sample text This is sample text This is sample text This is sample Text</span><!--[if lte ie 7]><b></b><![endif]--></p></div></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted September 16, 2009 Share Posted September 16, 2009 so are you saying you don't want to be able to see red? it seems like this is a bit more complicated coding then you might need.Are you just looking for a centered content div with a yellow background? I'm not sure why you need spans and table stuff for this, unless there's some sort of functionality you're aiming for that I don't see... Link to comment Share on other sites More sharing options...
vinpkl Posted September 16, 2009 Author Share Posted September 16, 2009 hi thescientistI am looking for a solution in which i can have red outer background div. Then this red background div will have yellow background div inside it which will be vertically centered to red div and contains text lines as seen in IE7.BUT red div is not visible in FF3.5vineet so are you saying you don't want to be able to see red? it seems like this is a bit more complicated coding then you might need.Are you just looking for a centered content div with a yellow background? I'm not sure why you need spans and table stuff for this, unless there's some sort of functionality you're aiming for that I don't see... Link to comment Share on other sites More sharing options...
jeffman Posted September 16, 2009 Share Posted September 16, 2009 Vertical centering remains a challenge to modern CSS. I usually address it with padding-top. It's never perfect, and will vary from platform to platform, but you can get pretty close.The easiest solution to the double-background thing you describe is to have a div with a yellow background and a very wide border in red. We tend to think of borders as being just a few pixels, but there is no reason a border cannot be 100 px wide, if that's the look you're after.Using non-semantic divs with artificial display properties (table, table-cell) just creates a square-peg-in-round-hole kind of a mess. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 16, 2009 Share Posted September 16, 2009 try this: i changed the <b> to <em> as <b> is deprecated.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#cent { width:500px; height:300px; margin:0 auto; overflow:hidden; }#cent p { display:table; height:300px; width:500px; margin:0 auto; text-align:center; background-color:#FF0000;}#cent p span, #cent p em { vertical-align:middle; } #cent span{ display:block; background-color:#fffee0;} #cent p em, #cent p em em {font-style:normal;} #cent p em {background-color:#FF0000; text-align:center;display:table-cell;} </style><!--[if lte ie 7]><style type="text/css">#cent p span { display:inline-block; height:auto; }#cent p em {background-color:#fffee0;}#cent p em em { display:inline-block; height:100%; vertical-align:middle;}</style><![endif]--></head><body><div id="cent"><p><em><span>This is sample text This is sample text This is sample text This is sample Text This is sample text This is sample Text This is sample text This is sample Text This is sample text This is sample Text</span><!--[if lte ie 7]><em></em><![endif]--></em></p></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted September 16, 2009 Share Posted September 16, 2009 Neither <b> nor <i> are deprecated. Only <u> is deprecated, this was mostly because users often confuse underlined text with links. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 16, 2009 Share Posted September 16, 2009 OK! <b> <i> have been replaced with <strong> and <em> for accessibility reading purposes, so.... good idea not to use these anyone more in favour of <strong> for <b>(bold) and <em> for <i> italics, there are a few more...but i really can't be bothered supply the rest, but if good igolme want to do this, well you just go ahead. Link to comment Share on other sites More sharing options...
vinpkl Posted September 16, 2009 Author Share Posted September 16, 2009 hi dsonesukthanks for the solutions. This works fine for me.Also as said by Deirdre's Dad i will play with border styles also. thanks to Deirdre's Dad.vineet try this: i changed the <b> to <em> as <b> is deprecated.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#cent { width:500px; height:300px; margin:0 auto; overflow:hidden; }#cent p { display:table; height:300px; width:500px; margin:0 auto; text-align:center; background-color:#FF0000;}#cent p span, #cent p em { vertical-align:middle; } #cent span{ display:block; background-color:#fffee0;} #cent p em, #cent p em em {font-style:normal;} #cent p em {background-color:#FF0000; text-align:center;display:table-cell;} </style><!--[if lte ie 7]><style type="text/css">#cent p span { display:inline-block; height:auto; }#cent p em {background-color:#fffee0;}#cent p em em { display:inline-block; height:100%; vertical-align:middle;}</style><![endif]--></head><body><div id="cent"><p><em><span>This is sample text This is sample text This is sample text This is sample Text This is sample text This is sample Text This is sample text This is sample Text This is sample text This is sample Text</span><!--[if lte ie 7]><em></em><![endif]--></em></p></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.