Re: [css-d] Help resolving spacing in IE6
Thanks to David and Ingo for their help! I'm amazed at the knowledge held by the members of the list. The only remaining problem I have with IE6 is the ~20px gap between the head and the main content block. I cannot determine which DIV is the culprit and is causing the space problem. I have played around with the sizes, but I fear the problem goes deeper than that. I simply don't know enough about IE6 to know how to fix the problem. I would be very grateful for any help. Thanks. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Webmaster Sent: Thursday, June 26, 2008 5:33 PM To: css-d@lists.css-discuss.org Subject: [css-d] Help resolving spacing in IE6 URL: http://www.tusculum.edu/giving/nd.html CSS: http://www.tusculum.edu/css/ndbrown.css I'm on a deadline, and I need help. I've got some problems I can't resolve with the above page in IE6. The page displays fine for me in IE7 and FF. But in IE6, you'll notice that the orange tab which should be at the top of the page is pushed down the page. That's the first problem. Another problem is the photo. In IE6, the photo is pushed way down the page. You'll also notice that the some of the images on the drop-down menu are clipped. I think that's just a spacing problem and a little trial-and-error will solve that. The drop-down menu is mandatory for the site. I'm not seeking help for the drop-down menu images; however, there is one more problem I do need help with. There's about a 20px gap between the top of the page and the main content block, and I don't know how to get rid of it, so there is no gap. Both the CSS and the HTML files are large, and I apologize for that. Once I get the page displaying properly, I plan to break out the javascript and the drop-down lists. I greatly appreciate any help you can provide. Thank you. -- Travis Crabtree Webmaster Tusculum College phone: 423.636.7300 ext. 5132 fax: 423.636.7492 email: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help resolving spacing in IE6
Webmaster wrote:
The only remaining problem I have with IE6 is the ~20px gap between the head
and the main content block.
URL: http://www.tusculum.edu/giving/nd.html
CSS: http://www.tusculum.edu/css/ndbrown.css
Below code is in the IE/6 cc's in the head of the document.
Please see:
http://www.chelseacreekstudio.com/ca/cssd/nd.htm
This closes the top gap.
* html #header-links {background:url(filler.gif); margin-top: -1em;}
The filler.gif is a slice to fill the horizontal gaps (I know from
nothing about photoshop, so you'll want to make your own).
The below, is an attempt to close the first horizontal gap with CSS. The
slice fills the remaining gaps.
* html #admissionButton,
* html #admissionButton:focus,
* html #admissionButton:visited:hover,
* html #admissionButton.udmR,
* html #admissionButton.udmR:visited,
* html #admissionButton:active {
width:70px;
margin-right:-10px;
}
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help resolving spacing in IE6
On Fri, 27 Jun 2008 09:04:10 -0400, Webmaster wrote: [...] The only remaining problem I have with IE6 is the ~20px gap between the head and the main content block. I cannot determine which DIV is the culprit and is causing the space problem. From a local copy of your page, there seems to be two items causing the gap: First, IE6 is doing its usual auto-expansion number on #before-top. Putting an overflow: hidden; on that DIV seems to fix it my end. There is also a 1px padding-top you have added to #before-top-logo in your IE6 style sheet. I don't think you need that. A couple of other issues I found: The width on the #admissionButton seems too small for IE6 (only?). The final n is getting cut off. Maybe taking out the padding will help. Finally, using IE 7 zoom to enlarge the page causes the backgrounds to get out of line. This is due to a bug in IE 7 that stops background images on body from enlarging on zoom. You may need another DIV around everything to which you apply the background image. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help resolving spacing in IE6
David Hucklesby wrote: First, IE6 is doing its usual auto-expansion number on #before-top. Putting an overflow: hidden; on that DIV seems to fix it my end. There is also a 1px padding-top you have added to #before-top-logo in your IE6 style sheet. I don't think you need that. Follow Davids lead. This works. I tried it by changing the CSS with the Web Developer Toolbar for IE6 and then it looks just fine. Some cleaning up of the structure would help too. I see some spans and divs are there, that might not be necessary. Cleaning up your structure will help reducing some of the CSS and make it easier to get all the CSS right. For the Web Developer Toolbar, which is a real handy CSS Debugger, look here. http://tinyurl.com/dkmm9 regards, Jens __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help resolving spacing in IE6
URL: http://www.tusculum.edu/giving/nd.html CSS: http://www.tusculum.edu/css/ndbrown.css I'm on a deadline, and I need help. I've got some problems I can't resolve with the above page in IE6. The page displays fine for me in IE7 and FF. But in IE6, you'll notice that the orange tab which should be at the top of the page is pushed down the page. That's the first problem. Another problem is the photo. In IE6, the photo is pushed way down the page. You'll also notice that the some of the images on the drop-down menu are clipped. I think that's just a spacing problem and a little trial-and-error will solve that. The drop-down menu is mandatory for the site. I'm not seeking help for the drop-down menu images; however, there is one more problem I do need help with. There's about a 20px gap between the top of the page and the main content block, and I don't know how to get rid of it, so there is no gap. Both the CSS and the HTML files are large, and I apologize for that. Once I get the page displaying properly, I plan to break out the javascript and the drop-down lists. I greatly appreciate any help you can provide. Thank you. -- Travis Crabtree Webmaster Tusculum College phone: 423.636.7300 ext. 5132 fax: 423.636.7492 email: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] CONFIDENTIALITY NOTICE: The information contained in this email, including any attachment(s), is intended solely for use by the named addressee(s). If you are not the intended recipient, or a person designated as responsible for delivering such message to the intended recipient, you are not authorized to disclose, copy, distribute or retain this message, in whole or in part, without written authorization from the Department of Institutional Advancement at Tusculum College. This email may contain proprietary, confidential or privileged information. If you have received this message in error, please reply immediately by informing the sender that the message was misdirected. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help resolving spacing in IE6
Webmaster wrote:
URL: http://www.tusculum.edu/giving/nd.html CSS:
http://www.tusculum.edu/css/ndbrown.css
...in IE6, you'll notice that the orange tab which
should be at the top of the page is pushed down the page. That's the
first problem. Another problem is the photo. In IE6, the photo is
pushed way down the page.
Both problems can be solved by a negative backside margin for the right
float.
* html #before-top-links { margin-left: -3px}
* html #right { margin-left: -10px}
good luck with your deadline.
--
http://www.satzansatz.de/css.html
http://www.dolphinsback.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help resolving spacing in IE6
Webmaster wrote:
URL: http://www.tusculum.edu/giving/nd.html
CSS: http://www.tusculum.edu/css/ndbrown.css
in IE7 and FF. But in IE6, you'll notice that the orange tab which should be
at the top of the page is pushed down the page. That's the first problem.
Another problem is the photo. In IE6, the photo is pushed way down the page.
Travis Crabtree
I see Ingo has already answered tour question.
FWIW, just another way of doing it:
* html #right{
width:716px;
}
* html #before-top-logo{
padding-top: 1px;
margin-left:-1px;
}
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
