Jump to content

Bgcolor Ie Half And Firefox Full


vinpkl
 Share

Recommended Posts

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

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

Edited by thescientist
Link to comment
Share on other sites

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

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...