MikeTheVike Posted March 30, 2007 Share Posted March 30, 2007 I cut the html and the css from the site I'm building and put it below. Basically its a testimonials page, I put the quotes in separate paragraph tags with class name of "quotes". Then I put the next line with the type of patient and location below in separate paragraph tags and gave it a class name of "names".I'm trying to get the "names" to be directly below the "quotes" so I can add whatever margin between them I want. In Firefox and Safari it looks fine. In IE the first one is correct, but in the other two there is a large space between the "quotes" and "names" that I can't get rid of. I changed all margins and paddings to zero and it IE still puts a space. Thanks for any help! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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><link href="quotetest.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <p class="quotes">“Absolutely wonderful! Products have changed my life! Has saved lots of time when doing my colistin and premade solution simplifies by daily regimen. The staff has been very kind and helpful. I am so thankful for Foundation Care’s services.”</p> <p class="names">-Cystic Fibrosis Patient, Florida-</p> <p class="quotes">“They were very prompt in getting me my prescription. They even rushed it because I had just got out of the hospital and needed it. A few days ago they called me to see if I needed more. That was very nice. Thank you!”</p> <p class="names">-Hypertonic Saline Patient, Michigan-</p> <p class="quotes">“Foundation Care has been very helpful and kind with my transition to their pharmacy. I appreciate all they have done for me throughout this confusing time.”</p> <p class="names">-Diabetic Patient, Minnesota-</p> </div></body></html> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-top: 0px;}#container { width: 496px; height: auto; }.quotes { padding-top: 15px; margin-bottom: 0px; padding-bottom: 0px; border-top-width: 1px; border-top-style: dotted; border-top-color: #CCCCCC; width: 496px; float: left; height: 100%;}.names { color: #666666; margin-top: 0px; padding-top: 0px; margin-bottom: 15px; } Link to comment Share on other sites More sharing options...
jlhaslip Posted March 30, 2007 Share Posted March 30, 2007 Set all the margins and paddings to '0' and the elements should close up. Now add something back in until they look good. About 5 px seems right to my eye, but it is your page to decide about.Margins will (should) collapse and are sometimes mis-handled in browsers, so I would specify a padding on them by the classes. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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><link href="quotetest.css" rel="stylesheet" type="text/css" /><style type="text/css" >* html, body, p { margin: 0; padding: 0; }body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-top: 0px;}#container { width: 496px; height: auto; }.quotes { padding-top: 5px; padding-bottom: 5px; border-top-width: 1px; border-top-style: dotted; border-top-color: #CCCCCC; width: 496px; float: left; height: 100%;}.names { color: #666666; padding-bottom: 5px;}</style></head><body><div id="container"> <p class="quotes">“Absolutely wonderful! Products have changed my life! Has saved lots of time when doing my colistin and premade solution simplifies by daily regimen. The staff has been very kind and helpful. I am so thankful for Foundation Care’s services.”</p> <p class="names">-Cystic Fibrosis Patient, Florida-</p> <p class="quotes">“They were very prompt in getting me my prescription. They even rushed it because I had just got out of the hospital and needed it. A few days ago they called me to see if I needed more. That was very nice. Thank you!”</p> <p class="names">-Hypertonic Saline Patient, Michigan-</p> <p class="quotes">“Foundation Care has been very helpful and kind with my transition to their pharmacy. I appreciate all they have done for me throughout this confusing time.”</p> <p class="names">-Diabetic Patient, Minnesota-</p> </div></body></html> Link to comment Share on other sites More sharing options...
MikeTheVike Posted April 2, 2007 Author Share Posted April 2, 2007 Set all the margins and paddings to '0' and the elements should close up. Now add something back in until they look good. About 5 px seems right to my eye, but it is your page to decide about.Margins will (should) collapse and are sometimes mis-handled in browsers, so I would specify a padding on them by the classes.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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><link href="quotetest.css" rel="stylesheet" type="text/css" /><style type="text/css" >* html, body, p { margin: 0; padding: 0; }body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-top: 0px;}#container { width: 496px; height: auto; }.quotes { padding-top: 5px; padding-bottom: 5px; border-top-width: 1px; border-top-style: dotted; border-top-color: #CCCCCC; width: 496px; float: left; height: 100%;}.names { color: #666666; padding-bottom: 5px;}</style></head><body><div id="container"> <p class="quotes">“Absolutely wonderful! Products have changed my life! Has saved lots of time when doing my colistin and premade solution simplifies by daily regimen. The staff has been very kind and helpful. I am so thankful for Foundation Care’s services.”</p> <p class="names">-Cystic Fibrosis Patient, Florida-</p> <p class="quotes">“They were very prompt in getting me my prescription. They even rushed it because I had just got out of the hospital and needed it. A few days ago they called me to see if I needed more. That was very nice. Thank you!”</p> <p class="names">-Hypertonic Saline Patient, Michigan-</p> <p class="quotes">“Foundation Care has been very helpful and kind with my transition to their pharmacy. I appreciate all they have done for me throughout this confusing time.”</p> <p class="names">-Diabetic Patient, Minnesota-</p> </div></body></html> thanks, Ill give it a try!Can you see why it won't work the way I have it? I must be missing a margin or padding setting somewhere. Link to comment Share on other sites More sharing options...
jlhaslip Posted April 2, 2007 Share Posted April 2, 2007 Change the padding on the quotes class works for me. .quotes {padding-top: [color="#FF0000"]10px;[/color]padding-bottom: 5px;border-top-width: 1px;border-top-style: dotted;border-top-color: #CCCCCC;width: 496px;float: left;height: 100%;} Link to comment Share on other sites More sharing options...
jlhaslip Posted April 3, 2007 Share Posted April 3, 2007 Can you see why it won't work the way I have it? I must be missing a margin or padding setting somewhere.There was probably (i am sure) some margins and default padding hanging around. by using the zero values on html and body, it resets everything to zero. Default values are not set to zero. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now