IE h1 bottom-border won't appear
awec
however no matter what I do it won't appear. I have tried setting the
width of the h1, the height etc but I just cannot get it to appear.
It works perfectly fine in firefox.
Heres my code:
h1{
font-size: 40px;
color: #FFFFFF;
border-bottom: 1px solid #ffffff;
width: 100%;
}
Any ideas?
Many thanks.
Jukka K. Korpela
> I'm trying to get a 1px solid #fff border-bottom on my h1 elements,
It's somewhat questionable as a goal, since underlining generally means link
on the Web and bottom border looks much like underline (though it's somewhat
different). This might not be serious if the border extends over the entire
width of the document's body element, as it does by default when set on a
block element.
> however no matter what I do it won't appear.
URL? IE version?
> h1{
> font-size: 40px;
> color: #FFFFFF;
> border-bottom: 1px solid #ffffff;
> width: 100%;
> }
The entire heading is invisible if the background is white, as it usually is
by default. Didn't your mom... I mean the CSS tutorial you read teach you to
set background whenever you set color and vice versa?
With background set to something dark, I have no problems in seeing the
border on my IE 8.
There's something you're not telling us. And the URL is one of those things.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
awec
IE7.
1. Url: http://threepints.co.uk/web/1/#
2. The reason I want it is not questionable at all. I want the
border-bottom to be the entire width, not just under the text.
3. Your attempted humour at bringing my "mom" into this is actually not
funny at all.
4. Background color is set in body{}. I am not an idiot, so your sarcasm
is wasted on me.
Thanks.
Pil (Trustworthy from Experience)
> all. I want the
> border-bottom to be the entire width, not just under the text.
Your h1 is nested in two other block level elements namely wrapper and
title.
wrapper has a defined width of 70% and title has a defined padding of
10px on every side. And thats the reason why the bottom border of h1
doesn't use the entire width of wrapper - neither in Firefox nor in
IE.
Jukka K. Korpela
(fullquote, always a useful cluelessness indicator)
> 1. Url: http://threepints.co.uk/web/1/#
Didn't your mom... I mean HTML primer tell you to validate your markup at
least before posting a question about your page in a public forum?
> 4. Background color is set in body{}.
Maybe, maybe not. It wasn't in the code you originally posted.
> I am not an idiot,
Then stop behaving like one.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Adrienne Boswell
news:h0g8sj$jo1$1...@news.eternal-september.org:
>> The entire heading is invisible if the background is white, as it
>> usually is by default. Didn't your mom... I mean the CSS tutorial you
>> read teach you to set background whenever you set color and vice
versa?
> 3. Your attempted humour at bringing my "mom" into this is actually not
> funny at all.
I think Jukka may have meant to say Google and other SEs. If the text is
the same color as the body, a site is penalized and removed from the
index.
> 4. Background color is set in body{}. I am not an idiot, so your
sarcasm
> is wasted on me.
Although the background color is set in the body, I always include either
the background color itself, or set the background color to transparent
when ever I set a color on an element.
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jukka K. Korpela
> I think Jukka may have meant to say Google and other SEs.
No, I didn't. I simply referred to the risk that text color and background
color might coincide or bee too close to each other or an otherwise
unsuitable combination.
> If the
> text is the same color as the body, a site is penalized and removed
> from the index.
Maybe in some cases, but I don't think search engines process CSS. They have
been claimed to pay attention to coloring with HTML markup, in order to
detect tricks like "invisible" text used to fool search engines. It would be
essentially more complicated to detect such things in CSS. Not impossible,
tough.
>> 4. Background color is set in body{}. I am not an idiot, so your
>> sarcasm is wasted on me.
>
> Although the background color is set in the body, I always include
> either the background color itself, or set the background color to
> transparent when ever I set a color on an element.
The background of the body element is the background of that element only.
Inner elements have backgrounds of their own, and if they are transparent,
the body background shines through. This creates the impression of
inheritance, even though background properties do not inherit.
Setting background for every element if you set color for it is a simple and
useful precaution. Making it transparent is risky, though perhaps a risk
worth taking if the safer way would be too cumbersome.
Consider this:
body { background: #fff; color: #000; }
h1 { background: transparent; color: #600; }
Now consider the following user stylesheet (say, for a person suffering from
a rare eyesight problem where white on black actually helps):
body { background: #200 !important; color: #fff !important; }
This user stylesheet is not optimal, since it does not set colors for any
inner elements, but it makes sense and you cannot say that it is wrong.
(Everyone surely figured out what happens?)
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Adrienne Boswell
<jkor...@cs.tut.fi> writing in
news:byTWl.10807$vi5....@uutiset.elisa.fi:
> Adrienne Boswell wrote:
>
>> I think Jukka may have meant to say Google and other SEs.
>
> No, I didn't. I simply referred to the risk that text color and
> background color might coincide or bee too close to each other or an
> otherwise unsuitable combination.
I understand that - I was also doing that, in a different way.
>
>> If the
>> text is the same color as the body, a site is penalized and removed
>> from the index.
>
> Maybe in some cases, but I don't think search engines process CSS.
> They have been claimed to pay attention to coloring with HTML markup,
> in order to detect tricks like "invisible" text used to fool search
> engines. It would be essentially more complicated to detect such
> things in CSS. Not impossible, tough.
I'm pretty sure that they do. IIRC, there was a discussion a long time
ago in alt.internet.search-engines when just this very thing occurred. I
don't think they penalize for a slightly different color, but, they do if
they are the same, CSS or not.
>
>>> 4. Background color is set in body{}. I am not an idiot, so your
>>> sarcasm is wasted on me.
>>
>> Although the background color is set in the body, I always include
>> either the background color itself, or set the background color to
>> transparent when ever I set a color on an element.
>
> The background of the body element is the background of that element
> only. Inner elements have backgrounds of their own, and if they are
> transparent, the body background shines through. This creates the
> impression of inheritance, even though background properties do not
> inherit.
>
> Setting background for every element if you set color for it is a
> simple and useful precaution. Making it transparent is risky, though
> perhaps a risk worth taking if the safer way would be too cumbersome.
I should have said that I do that only for links, other elements that
have inheritance I leave alone - if I bother coloring them at all.
>
> Consider this:
>
> body { background: #fff; color: #000; }
> h1 { background: transparent; color: #600; }
>
> Now consider the following user stylesheet (say, for a person
> suffering from a rare eyesight problem where white on black actually
> helps):
>
> body { background: #200 !important; color: #fff !important; }
>
> This user stylesheet is not optimal, since it does not set colors for
> any inner elements, but it makes sense and you cannot say that it is
> wrong.
>
> (Everyone surely figured out what happens?)
>
I happened to have a stylesheet editor open when you posted this, and of
course, I had to try it out for myself. What fun! Can I please do this
to someone I don't like, maybe a harassing telemarketer, please, pretty
please?
awec
would it.
Don't worry, the "your mom" statements give me an indication of your
mental age so I'll say no more for fear of upsetting you.
As for everyone else, thanks for the help, got it sorted. Appreciated. :)
dorayme
awec <aw...@noreply.com> wrote:
> Don't worry, the "your mom" statements give me an indication of your
> mental age so I'll say no more for fear of upsetting you.
JK using "didn't your mom.. teach you..." is not really about your mom.
It's a sort of idiomatic expression, a figure of speech, a bit American
I think, but having equivalents elsewhere. If you had your sense of
humour in good order and were in a calm mood, I am sure you would be
able to see this. In fact, if you were to take it seriously, it is
flattering to the average mom. I sure like the thought that my mom could
have helped me with all this stuff back in the olden days - when where
these, the 1930s, 1830's, I forget...
--
dorayme
Swifty
> JK using "didn't your mom.. teach you..." is not really about your mom.
> It's a sort of idiomatic expression, a figure of speech, a bit American
> I think, but having equivalents elsewhere. If you had your sense of
> humour in good order and were in a calm mood, I am sure you would be
> able to see this. In fact, if you were to take it seriously, it is
> flattering to the average mom. I sure like the thought that my mom could
> have helped me with all this stuff back in the olden days - when where
> these, the 1930s, 1830's, I forget...
As in the Hitchhiker's Guide to the Galaxy:
Arthur Dent: It's at times like these that I really wish that I'd
listened to my mother.
Ford Prefect: Why, what did she say?
Arthur Dent: I don't *know* - I didn't listen!
--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
dorayme
Swifty <steve....@gmail.com> wrote:
> dorayme wrote:
> > JK using "didn't your mom.. teach you..." is not really about your mom.
> > It's a sort of idiomatic expression, a figure of speech, a bit American
> > I think, but having equivalents elsewhere. If you had your sense of
> > humour in good order and were in a calm mood, I am sure you would be
> > able to see this. In fact, if you were to take it seriously, it is
> > flattering to the average mom. I sure like the thought that my mom could
> > have helped me with all this stuff back in the olden days - when were
> > these, the 1930s, 1830's, I forget...
>
> As in the Hitchhiker's Guide to the Galaxy:
>
> Arthur Dent: It's at times like these that I really wish that I'd
> listened to my mother.
> Ford Prefect: Why, what did she say?
> Arthur Dent: I don't *know* - I didn't listen!
Exactly!
--
dorayme
Ben C
[...]
> The background of the body element is the background of that element only.
Although it's not quite that simple with body, because in most
circumstances (e.g. HTML document, you didn't set a background on the
root element) the body's background is applied to the canvas instead.
This is why if you do a page like this:
<body style="background-color: blue; color: white">
<div style="width: 2000px; border: 5px solid red">
</div>
</body>
and scroll a long way to the right, you will see the blue background
continues all the way out there, far outside the border box of the body
element.
GTalbot
> h1{
> font-size: 40px;
> color: #FFFFFF;
> border-bottom: 1px solid #ffffff;
> width: 100%;
>
> }
First, the CSS validator itself will always warn you that setting
color or background-color without setting the other is not
recommendable and deserves a warning:
"
You have no background-color set (or background-color is set to
transparent) but you have set a color. Make sure that cascading of
colors keeps the text reasonably legible.
"
CSS validator
W3C Quality Assurance tips: Quality Tips for Webmasters
If You Pick One Color, Pick Them All
"The rule of thumb to avoid these problems is: If you specify one
color, you must specify them all."
http://www.w3.org/QA/Tips/color
I think Jukka was correct in trying to warn you about possible
inconvenients, disadavantages of underlining and your choice of
colors. You did not provide an URL in your initial post...
Second,
width: 100% is not necessary in your rule. h1 is a block-level element
and it will occupy/take as much horizontal space/width as it can
within its nearest block containing element within the containment
hierarchy.
Third,
you still have a validation markup error which you can fix:
Just replace
<h5>Navigation</h5>
<p class="menutext">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</p>
with
<h5>Navigation</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
One last thing. I believe you should be told that defining font-size
with px units is discouraged and not recommendable, at least for
screen media. Best is to use and to rely on browser defaults otherwise
to use only relative units (like %tage or em). px defined font-size
makes elements not text-resizable in all IE browsers and in some
mobile devices.
W3C Quality Assurance: tips for webmasters
Care with font-size
"# Do not specify the font-size in pt, or other absolute length units
for screen stylesheets. They render inconsistently across platforms
and can't be resized by the User Agent (e.g browser). Keep the usage
of such units for styling on media with fixed and known physical
properties (e.g print).
# Use relative length units such as percent or (better) em"
http://www.w3.org/QA/Tips/font-size
"If you do not specify any font size at all (as on the pages you are
reading), text will appear in the default size that was selected by
the user. (...) If you specify a font size using units of px, some
browsers will not resize the text, even if the user changes the
default size."
Font size
Truth and consequences in web design by Chris Beal
http://pages.prodigy.net/chris_beall/TC/Font%20size.html
"For this year's list of worst design mistakes, (...) I asked readers
of my newsletter to nominate the usability problems they found the
most irritating. (...)
About two-thirds of the voters complained about small font sizes or
frozen font sizes;
"
Top Ten Web Design Mistakes of 2005
http://www.useit.com/alertbox/designmistakes.html
regards, Gérard
--
Internet Explorer 7 bugs: 175 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 49 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
GTalbot
You declare/have/use in your stylesheet
http://threepints.co.uk/web/1/style.css
:
h5{
font-size: 16px;
color: #fff;
border-bottom: 1px solid #fff;
}
I recommend you remove h5 selector and use instead instead:
h4
{
background-color: #739492;
color: white;
border-bottom: 1px solid;
}
You see, h4 element uses 1em by default which is the default font-size
(16px) by all modern browsers (Firefox 2+, IE 7+, Opera 8+, Safari 3+,
Konqueror 4.x). So, no need to redefine and redeclare h5 element.
CSS validator FAQ:
"
Why does the validator complain You have no background-color with your
color?
If you don't specify color and background-color at the same level of
specificity, your style sheet might clash with user style sheets. To
avoid this, specify always both of them, (...)
"
http://www.websitedev.de/css/validator-faq#color
John Hosking
>
> You declare/have/use in your stylesheet
> http://threepints.co.uk/web/1/style.css
>:
>
> h5{
> font-size: 16px;
> color: #fff;
> border-bottom: 1px solid #fff;
> }
>
> I recommend you remove h5 selector and use instead instead:
>
> h4
> {
> background-color: #739492;
> color: white;
> border-bottom: 1px solid;
> }
Well, I wouldn't say it's the *selector* that needs to be replaced; rather,
the markup of the headers should be reviewed and appropriate choices made
for them. I see the OP (who is probably long gone by now, having last
posted more than two weeks ago) uses markup and rules for h1, h3, and h5.
Clearly* the OP is using this markup purely for presentation (aiming for
some *size*) and not on a semantic basis.
>
> You see, h4 element uses 1em by default which is the default font-size
> (16px) by all modern browsers (Firefox 2+, IE 7+, Opera 8+, Safari 3+,
> Konqueror 4.x). So, no need to redefine and redeclare h5 element.
>
It doesn't help much to support the OP's approach by advising the use of h4
instead of h5 because of h4's default size in certain browsers. The OP can
size the headers any way s/he sees fit; the first step is to mark up the
content appropriately.
Of course, it'd be easy to get into another discussion about what hn markup
is appropriate for a sidebar "Navigation" heading as in the OP's example.
* Clearly, that is, assuming there's no other code trimmed out of the
posted example, or other pages that actually use h2 and h4.
--
John