I've been working on my first CSS layout, it's coming along rather well. On one of the headers that I've defined, IE6 seems to be ignoring the bottom-border property I'm setting.
I thought I'd mention it is working in Firefox
The CSS code snippet:
h1.content-title{
font-family: "Georgia", serif;
font-size: 15pt;
font-weight: bold;
color: black;
border-bottom: 1px dashed grey;
margin: 0;
}
The XHTML code:
<h1 class="content-title">Title of Headline</h1>
For reference, here is the URL and CSS File
<!-- m --><a class="postlink" href="http://www.dreesemonkey.com/css_tests/1/">http://www.dreesemonkey.com/css_tests/1/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.dreesemonkey.com/css_tests/1/style.css">http://www.dreesemonkey.com/css_tests/1/style.css</a><!-- m -->
Any hints? Take it easy on me, I'm a n00b!
Internet Explorer isn't positioning the tag properly. This happens frequently and is easily overcome with one of two fixes. Either position the element relative (position: relative or use the Holly Hack to set the element's height to 1 pixel. The nice thing (and one bad thing) about IE is that it will stretch an element's dimensions if the contents are too wide or tall.
h1.content-title{
font-family: "Georgia", serif;
font-size: 15pt;
font-weight: bold;
color: black;
position: relative;
border-bottom: 1px dashed grey;
margin: 0;
}
--- Or ---
h1.content-title {
font-family: "Georgia", serif;
font-size: 15pt;
font-weight: bold;
color: black;
border-bottom: 1px dashed grey;
margin: 0;
}
/* Holly Hack to set height to zero in IE-Win so border will show up.
Hide from IE5-Mac \\*/
* html h1.content-title { height: 1px; }
/* End IE5-Mac Hiding */
Use whichever method works the best.Thanks for the reply. I've tried both things and they still don't seem to want to pop up with IE. Right now I have them both in the CSS file and it doesn't seem to have changed anything.gray
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4Originally">http://www.w3.org/TR/2003/CR-css3-color ... Originally</a><!-- m --> posted by Fang
gray
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4">http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4</a><!-- m -->
Owned. Thanks
Quirks like that are the reason it's best to specify your colors numerically like
border-bottom: 1px dashed #888;Originally posted by ray326
Quirks like that are the reason it's best to specify your colors numerically like
border-bottom: 1px dashed #888; I agree. Specifying colors with such notation generally does ensure a more globally working page.Thanks guys, I'll try and remember to do that instead from now on
I thought I'd mention it is working in Firefox
The CSS code snippet:
h1.content-title{
font-family: "Georgia", serif;
font-size: 15pt;
font-weight: bold;
color: black;
border-bottom: 1px dashed grey;
margin: 0;
}
The XHTML code:
<h1 class="content-title">Title of Headline</h1>
For reference, here is the URL and CSS File
<!-- m --><a class="postlink" href="http://www.dreesemonkey.com/css_tests/1/">http://www.dreesemonkey.com/css_tests/1/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.dreesemonkey.com/css_tests/1/style.css">http://www.dreesemonkey.com/css_tests/1/style.css</a><!-- m -->
Any hints? Take it easy on me, I'm a n00b!
Internet Explorer isn't positioning the tag properly. This happens frequently and is easily overcome with one of two fixes. Either position the element relative (position: relative or use the Holly Hack to set the element's height to 1 pixel. The nice thing (and one bad thing) about IE is that it will stretch an element's dimensions if the contents are too wide or tall.h1.content-title{
font-family: "Georgia", serif;
font-size: 15pt;
font-weight: bold;
color: black;
position: relative;
border-bottom: 1px dashed grey;
margin: 0;
}
--- Or ---
h1.content-title {
font-family: "Georgia", serif;
font-size: 15pt;
font-weight: bold;
color: black;
border-bottom: 1px dashed grey;
margin: 0;
}
/* Holly Hack to set height to zero in IE-Win so border will show up.
Hide from IE5-Mac \\*/
* html h1.content-title { height: 1px; }
/* End IE5-Mac Hiding */
Use whichever method works the best.Thanks for the reply. I've tried both things and they still don't seem to want to pop up with IE. Right now I have them both in the CSS file and it doesn't seem to have changed anything.gray
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4Originally">http://www.w3.org/TR/2003/CR-css3-color ... Originally</a><!-- m --> posted by Fang
gray
<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4">http://www.w3.org/TR/2003/CR-css3-color-20030514/#html4</a><!-- m -->
Owned. Thanks
Quirks like that are the reason it's best to specify your colors numerically likeborder-bottom: 1px dashed #888;Originally posted by ray326
Quirks like that are the reason it's best to specify your colors numerically like
border-bottom: 1px dashed #888; I agree. Specifying colors with such notation generally does ensure a more globally working page.Thanks guys, I'll try and remember to do that instead from now on