[css-d] IE margin issues
URL: http://www.studentremix.org/parents/media.htm CSS: http://www.studentremix.org/parents/parents.css When you hover over the photo thumbnails, there should be 15px of margin space below the highlighted blue background behind the photo captions. FF3, Opera, and Safari do this correctly. IE does not display any margin space there. The blue background color touches the top of the image below it. Any ideas as to why this is happening? Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.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] IE margin issues
Daniel Hammond wrote:
http://www.studentremix.org/parents/media.htm
When you hover over the photo thumbnails, there should be 15px of
margin space below the highlighted blue background behind the photo
captions.
Delete the 'hasLayout' trigger and make it...
!--[if lte IE 7]
style
#photoContainer {width:410px;}
#photoContainer ul li {display:inline;}
/style
![endif]--
...and both IE7 and 6 will render as intended.
regards
Georg
--
http://www.gunlaug.no
__
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] IE Margin Issues
Wouldn't it be best to assign an ID (or class) to each page's html body
tag? eg: body id =home, body id =faq, body id =whatever, etc.
The css would be, for example:
#home #hdr {
background: url(i/bg-hdr1.png)
}
#faq #hdr {
background: url(i/bg-hdr2.png)
}
#whatever #hdr {
background: url(i/bg-hdr3.png)
}
__
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] IE Margin Issues
On Jun 5, 2008, at 8:58 PM, David Terrell wrote: --- Arlen Walker [EMAIL PROTECTED] wrote: Wouldn't it have been simpler all around to just use the header image as a background, and put the menu inside the header div? Use of negative margins has a spotty record. As you noticed, it doesn't always deliver the goods. The header image has to change for every page so it would be impractical to create a different style sheet for each page so that the header image could be the background of the header div. Fair enough. Georg, I see, has chimed in with his usual brand of good advice; my next bit of advice would have been to absolutely position the menu, if the various page headers were all going to be the same size, or position it relatively if they weren't. Have Fun, Arlen -- In God we trust, all others must supply data __ 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] IE Margin Issues
On Jun 4, 2008, at 10:33 PM, David Terrell wrote: Hello All, I have an issue with a negative margin in IE. I have this site set up so that the navigation falls back on top of the header as seen in this capture: Wouldn't it have been simpler all around to just use the header image as a background, and put the menu inside the header div? Use of negative margins has a spotty record. As you noticed, it doesn't always deliver the goods. Have Fun, Arlen -- In God we trust, all others must supply data __ 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] IE Margin Issues
Don't put the header image CSS in the style sheet, but on the code for the page... From: David Terrell [EMAIL PROTECTED] Subject: Re: [css-d] IE Margin Issues The header image has to change for every page so it would be impractical to create a different style sheet for each page so that the header image could be the background of the header div. __ 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] IE Margin Issues
David Terrell wrote:
I have an issue with a negative margin in IE. I have this site set up
so that the navigation falls back on top of the header [...]
http://www.lyramid.com/test
The following additions/corrections should bring IE in line with the
others, or the other way round...
#menu {
background: transparent;
float: left;
margin-top: -17px;
margin-left: 0;
}
#nav {
margin: 0 0 0 26px;
padding: 0;
height: 40px;
overflow: hidden;
}
That'll take care of IE's need for Layout, and level out the various
margin and padding defaults on lists. It will also control IE6'
auto-expansion bug.
If you also want the page/layout as a whole to behave properly - not
having parts displaced if window-width is changed in IE, you should make
the following corrections...
body {
/* width: 800px;
margin: 0 auto; delete these */
}
#container {
/* left:50%; delete this */
margin: 0 auto; /* add this */
}
It would also be a good idea to put comments in those empty divs...
div id=sidebar!-- --/div
div id=main!-- --/div
...to prevent auto-expansion in IE6.
Once you put some real content in there the comments can be deleted.
regards
Georg
--
http://www.gunlaug.no
__
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] IE Margin Issues
Hello All, I have an issue with a negative margin in IE. I have this site set up so that the navigation falls back on top of the header as seen in this capture: http://www.lyramid.com/test/Assets/Images/navigationcapture.png This displays fine in all browsers but IE. Here's what it looks like: http://www.lyramid.com/test/Assets/Images/navigationcapture_gap.png I've searched through the archive and google extensively and I can't find an answer. Any help would be appreciated. The site: http://www.lyramid.com/test The css: http://www.lyramid.com/test/gelrilla_styles.css Thank you for your time. __ 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/
