 | |
IE h1 bottom-border won't appear
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#11
 
| |||
| |||
|
Re: IE h1 bottom-border won't appear -
06-07-2009
, 11:18 PM
|
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... |
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
#12
| |||
| |||
|
|
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! |
--
dorayme
#13
| |||
| |||
|
|
The background of the body element is the background of that element only. |
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.
#14
| |||
| |||
|
|
h1{ * * * * font-size: 40px; * * * * color: #FFFFFF; * * * * border-bottom: 1px solid #ffffff; * * * * width: 100%; } |
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/
#15
| |||
| |||
|
#16
| |||
| |||
|
|
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; } |
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.
Quote:
|
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. |
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
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.