I have cross posted this at CSS Creator (<!-- m --><a class="postlink" href="http://www.csscreator.com">http://www.csscreator.com</a><!-- m -->)
I am working on building a template based on Brill's negative margin 3 column layout. I have modified the code enough that I have left myself lost in a world of Explorer margin and padding hell.
The page validates XHTML 1.0 Strict and CSS, works fine in FF1.0, but of course has problems in IE (Mac&Win).
I am sure that the main problem (the layout) is to due with the margins and padding set up in the nested divs, but have been unable to correctly apply filters to get things set right.
Have a Look (<!-- m --><a class="postlink" href="http://www.blick.com/dev/alfia/">http://www.blick.com/dev/alfia/</a><!-- m -->)
The CSS is still in the HEAD of the doc.
Any help would be greatly appreciated, I'd like to keep what thinning hair I have left.
MIn a few places in the style section I see #nav li ul. Shouldn't the order of "il" and "ul" be reversed, since the "li" is a descendant of "ul"? (I don't know why/if that would make IE misbehave and FF not, but it looks wrong to me.)Originally posted by NogDog
In a few places in the style section I see #nav li ul. Shouldn't the order of "il" and "ul" be reversed, since the "li" is a descendant of "ul"? (I don't know why/if that would make IE misbehave and FF not, but it looks wrong to me.)
Those refer to ul elements that are children of li elements used in the navigation.
ie:
<ul>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>Ah, OK, well hopefully better minds than mine will find a fix for you.
Solution:
.contentHead {
position: relative;
top: 0;
left: 0;
/* width: 100%; delete*/
height: 55px;
margin: 0;
padding: 0;
background: #fff;
text-align: right;
}
#leftNav, #leftNav ul {
margin: 0; /* add */
list-style: none;
line-height: 2;
padding: 0;
}
#sidebar ul{ /* add*/
margin:0;
}
#meatWrapper {
border-top: 3px solid #000;
margin-top: 42px !important;margin-top: -2px; /* changed (moz;ie) */
padding: 0;
}Fantastic! Thanks, Fang. I'm stumped on one thing though.
#meatWrapper {
border-top: 3px solid #000;
margin-top: 42px !important;margin-top: -2px; /* changed (moz;ie) */
padding: 0;
}
I realize bumping my margin down to use the top border as a design element is bad form. (Open to suggestions as to how to better create that appearance {background image on the div?})
Should your example (above) be written as is (without the comment)? It doesn't seem to have the desired effect. This moves the border behind the div above it in moz and hides the left side nav in ie (I think it's having some unwanted effect on the z-index?).
Updated Version Here (<!-- m --><a class="postlink" href="http://www.blick.com/dev/alfia/index3.html">http://www.blick.com/dev/alfia/index3.html</a><!-- m -->)
Everything else is perfect though. Thanks again.I didn't Download the background images when looking at the problem (should have).
The menu images could have been done with css; see thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=55330">http://www.webdeveloper.com/forum/showt ... adid=55330</a><!-- m -->) (same Ryan Brill layout).
As for using background images, how does your site look without css? Important when designing professional sites.
The /* */ is just comments and does not affect the css.
Personally I would have changed the layout to:
header + horz. menu
---
(3 columns)
quick links | content | latest news
---
footer
see thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=55330">http://www.webdeveloper.com/forum/showt ... adid=55330</a><!-- m -->)Originally posted by Fang
As for using background images, how does your site look without css? Important when designing professional sites.
It is still navigable and readable without the CSS.
Personally I would have changed the layout to:
header + horz. menu
---
(3 columns)
quick links | content | latest news
---
footer
see thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=55330">http://www.webdeveloper.com/forum/showt ... adid=55330</a><!-- m -->)
I started out with that layout but ran into problems with positioning the top nav. I agree that it made more sense to do it that way, I probably should have just spent more time figuring out my positioning issues.
Thanks again for all your help.
I am working on building a template based on Brill's negative margin 3 column layout. I have modified the code enough that I have left myself lost in a world of Explorer margin and padding hell.
The page validates XHTML 1.0 Strict and CSS, works fine in FF1.0, but of course has problems in IE (Mac&Win).
I am sure that the main problem (the layout) is to due with the margins and padding set up in the nested divs, but have been unable to correctly apply filters to get things set right.
Have a Look (<!-- m --><a class="postlink" href="http://www.blick.com/dev/alfia/">http://www.blick.com/dev/alfia/</a><!-- m -->)
The CSS is still in the HEAD of the doc.
Any help would be greatly appreciated, I'd like to keep what thinning hair I have left.
MIn a few places in the style section I see #nav li ul. Shouldn't the order of "il" and "ul" be reversed, since the "li" is a descendant of "ul"? (I don't know why/if that would make IE misbehave and FF not, but it looks wrong to me.)Originally posted by NogDog
In a few places in the style section I see #nav li ul. Shouldn't the order of "il" and "ul" be reversed, since the "li" is a descendant of "ul"? (I don't know why/if that would make IE misbehave and FF not, but it looks wrong to me.)
Those refer to ul elements that are children of li elements used in the navigation.
ie:
<ul>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>Ah, OK, well hopefully better minds than mine will find a fix for you.
Solution:.contentHead {
position: relative;
top: 0;
left: 0;
/* width: 100%; delete*/
height: 55px;
margin: 0;
padding: 0;
background: #fff;
text-align: right;
}
#leftNav, #leftNav ul {
margin: 0; /* add */
list-style: none;
line-height: 2;
padding: 0;
}
#sidebar ul{ /* add*/
margin:0;
}
#meatWrapper {
border-top: 3px solid #000;
margin-top: 42px !important;margin-top: -2px; /* changed (moz;ie) */
padding: 0;
}Fantastic! Thanks, Fang. I'm stumped on one thing though.
#meatWrapper {
border-top: 3px solid #000;
margin-top: 42px !important;margin-top: -2px; /* changed (moz;ie) */
padding: 0;
}
I realize bumping my margin down to use the top border as a design element is bad form. (Open to suggestions as to how to better create that appearance {background image on the div?})
Should your example (above) be written as is (without the comment)? It doesn't seem to have the desired effect. This moves the border behind the div above it in moz and hides the left side nav in ie (I think it's having some unwanted effect on the z-index?).
Updated Version Here (<!-- m --><a class="postlink" href="http://www.blick.com/dev/alfia/index3.html">http://www.blick.com/dev/alfia/index3.html</a><!-- m -->)
Everything else is perfect though. Thanks again.I didn't Download the background images when looking at the problem (should have).
The menu images could have been done with css; see thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=55330">http://www.webdeveloper.com/forum/showt ... adid=55330</a><!-- m -->) (same Ryan Brill layout).
As for using background images, how does your site look without css? Important when designing professional sites.
The /* */ is just comments and does not affect the css.
Personally I would have changed the layout to:
header + horz. menu
---
(3 columns)
quick links | content | latest news
---
footer
see thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=55330">http://www.webdeveloper.com/forum/showt ... adid=55330</a><!-- m -->)Originally posted by Fang
As for using background images, how does your site look without css? Important when designing professional sites.
It is still navigable and readable without the CSS.
Personally I would have changed the layout to:
header + horz. menu
---
(3 columns)
quick links | content | latest news
---
footer
see thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=55330">http://www.webdeveloper.com/forum/showt ... adid=55330</a><!-- m -->)
I started out with that layout but ran into problems with positioning the top nav. I agree that it made more sense to do it that way, I probably should have just spent more time figuring out my positioning issues.
Thanks again for all your help.