|
|
Posted by Gιrard Talbot on 10/31/06 05:22
David wrote :
> I have a web page that I initially designed using IE to view it. It
> validates as XHTML Strict with the HTML validator. It looks fine in
> IE, but dosn't look so great in Firefox,
Can you specify what you mean with "dosn't look so great"? In the
absolute and even in the relativity, this refers to nothing concrete in
a post in a discussion forum.
I was wondering if you had any
> tips on making it Firefox friendly.
Can you please upload your code in a webpage and then just post the url?
The http headers may reveal that the content-type of the css is not
type/css.
Here is the HTML:
>
>
> <!DOCTYPE html
> PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
>
> <html>
> <head>
> <link rel="stylesheet" type="text/css" href="styles/main.css"/>
> <title>Liferipple</title>
> </head>
> <body>
> <div id="header">
> <div class="left"><h1 id="heading">Liferipple</h1></div>
It is a bad idea to define classes as presentation; classes should
define a function, a role.
Would it be possible for you to simply merge both block-level elements
into a single one?
What's wrong with
<h1 id="heading">Liferipple</h1>
and then defining
#heading
{
margin: 15px 0px 0px 5px;
color:#ffffff;
float: left;
}
> <div class="right"><div id="headernav"><a href="./forum">Discussion
> Board</a> | <a href="./contact.php">Contact</a></div></div>
Can you merge these 2 nested divs above into a single one?
> </div>
> <div class="miscbar"> </div>
> <div id="navbody">
> <div class="left">
> <div id="navbar">
> <div class="buttonscontainer">
> <div class="buttons">
> <a href="./index.php">Home</a>
> <a href="./forum">Discussion Board</a>
> <a href="./contact.php">Contact</a>
So far, you have a deep DOM tree; one way to avoid differential layout
is to reduce DOM tree, reduce complexity. You should look to take out
some of these div.
You have a 5 level deep nested divs and every div is styled: so, it
become extremely difficult to figure out exactly what you are actually
coding for.
> </div>
> </div>
> </div>
> </div>
> <div class="right">
> <div id="body"> <dl class="bodytxt">
> <dt>liferipple [lahyfrip-uhl]</dt>
> <dd>A cumulative effect produced when one good act by a person
> sets off a chain reaction of similar good acts.</dd>
> </dl>
> <p class="bodytxt">Welcome to liferipple.com, my name is David
> Lewis. I believe we are all here to serve a purpose and do some good
> in the world. If we all work as a group together I believe that we
> <strong>can</strong> make a difference.</p>
> <p class="bodytxt">I feel that if we are all focused on some
> similar goals we can accomplish a lot more than if we were less
> organized. Please join the Discussion Board so that we can communicate
> our common goals to each other so that we can put our focus in the same
> areas in order to accomplish much more.</p>
> <p class="bodytxt">Keep in mind that this is a brand new website,
> so it might take some time to get moving, so please tell everyone that
> would be interested to join the Discussion Board. If you have any
> questions please contact me via the Contact page.</p>
> <br />
> <span class="right" style="padding-right:50px;">Sincerely,<br
> />David Lewis, Founder</span>
> </div>
> </div>
> </div>
> <div class="miscbar">Copyright (C) 2006 Liferipple</div>
> </body>
> </html>
>
> Here is the CSS:
>
> body
> {
> font-family:verdana;
> margin:0px;
> }
> #header
> {
> background-color:#8968CD;
> height:75px;
> }
> #heading
> {
> margin: 15px 0px 0px 5px;
> color:#ffffff;
> }
> #headernav
> {
> padding:50px 5px 3px 0px;
> color:#ffffff;
> font-weight:bold;
> }
> #headernav a
> {
> color:#ffffff;
> font-weight:bold;
> }
> #navbody
> {
> width:100%;
> }
width:100% is a sign of over-constrained layout. If you can avoid
defining rigid, unflexible width. width: auto is the default value and
is usually good, excellent as is.
> #navbar
> {
> width:165px;
> background-color:#cccccc;
> border-right:1px dashed #535353;
> height:5.0in;
> }
I'd say either you px everywhere or in everywhere: mixing different
units just makes maintenance, debugging, etc.. harder
> #body
> {
> width:100%;
1- Right here: over-constraining, rigid. What was wrong with width: auto
or no width at all?
> background-color:#fcfcfc;
> height:5.0in;
> }
>
> .subheader
> {
> padding:3px 10px 3px 10px;
> }
>
> .miscbar
> {
> text-align:center;
> background-color:#3B6AA0;
> color:#ffffff;
> font-weight:bold;
> padding:3px;
> font-size:10px;
font-size:10px is often too small for people over 40 years old and
font-size:10px can not be increased easily in many user agents, like
MSIE 6 (and MSIE 7 as well).
W3C Quality Assurance tip for webmaster:
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#css
> }
>
> .bodytxt
> {
> padding:3px 10px 3px 10px;
> }
>
> .formtxt
> {
> padding:0px;
> margin:0px;
> }
>
> .formspacer
> {
> width:150px;
> }
>
> .left
> {
> float:left;
> }
> .right
> {
> float:right;
> }
> dt
> {
> font-weight:bold;
> }
> .buttonscontainer
> {
> width: 165px;
> }
>
> .buttons a
> {
> color: white;
> background-color:#45297e;
> padding: 2px;
> padding-left: 3px;
> display: block;
> border-left: 10px solid #3B6AA0;
> font: 13px Verdana, sans-serif;
Same here: absolute unit.
> font-weight: bold;
> text-decoration: none;
> text-align: left;
> margin-top: 1px;
Can you explain that margin-top: 1px.
> }
>
> .buttons a:hover
> {
> border-left: 10px solid #8968CD;
> text-decoration: none;
> color: white;
> }
>
> You will see what I mean that it doesn't look right if you look at it
> in IE and then Firefox.
I am 99% sure you have an over-constrained, over-coded,
over-constraining, rigid layout here. There is just too many constraints
in your css code.
I tried some stuff with the position
> attribute, but I can't get it right.
Often, beginners over-try to control the positioning to achieve a
pixel-perfect layout: so they over-define, over-declare, over-code more
and more when the real solution is to simplify, to reduce, to take out.
Any help would be much
> appreciated. Let me know if you need any other information. Thanks.
>
> David
>
"Classitis and Divitis
A common error of beginning CSS coders is to use far too many <div> tags
and class attributes (...)"
Webpage development: best practices
http://developer.apple.com/internet/webcontent/bestwebdev.html
"When starting out with CSS, it's common to make the mistake of using
unnecessary XHTML elements, superfluous classes, and extra <div>
elements. This doesn't necessarily mean that the code will be invalid,
but it counteracts one of the reasons of separating structure from
presentation; to get simpler, cleaner markup."
Developing With Web Standards
Recommendations and best practices
Superfluous elements and classes
http://www.456bereastreet.com/lab/developing_with_web_standards/css/#css
GΓ©rard
--
remove blah to email me
[Back to original message]
|