IE/Firefox XHTML Strict

D

David

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, I was wondering if you had any
tips on making it Firefox friendly. 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>
<div class="right"><div id="headernav"><a href="./forum">Discussion
Board</a> | <a href="./contact.php">Contact</a></div></div>
</div>
<div class="miscbar">&nbsp;</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>
</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%;
}
#navbar
{
width:165px;
background-color:#cccccc;
border-right:1px dashed #535353;
height:5.0in;
}
#body
{
width:100%;
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;
}

..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;
font-weight: bold;
text-decoration: none;
text-align: left;
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 tried some stuff with the position
attribute, but I can't get it right. Any help would be much
appreciated. Let me know if you need any other information. Thanks.

David
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

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,
Click to expand...

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.
Click to expand...

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>
Click to expand...

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>
Click to expand...

Can you merge these 2 nested divs above into a single one?
</div>
<div class="miscbar">&nbsp;</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>
Click to expand...


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%;
}
Click to expand...

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;
}
Click to expand...

I'd say either you px everywhere or in everywhere: mixing different
units just makes maintenance, debugging, etc.. harder
#body
{
width:100%;
Click to expand...

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;
Click to expand...

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;
Click to expand...

Same here: absolute unit.
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;
Click to expand...

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.
Click to expand...

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.
Click to expand...

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
Click to expand...


"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
 
B

Ben C

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, I was wondering if you had any
tips on making it Firefox friendly. Here is the HTML: [snip]
You will see what I mean that it doesn't look right if you look at it
in IE and then Firefox.
Click to expand...

I don't have IE.
I tried some stuff with the position attribute, but I can't get it
right. Any help would be much appreciated. Let me know if you need
any other information. Thanks.
Click to expand...

Explain what's wrong (without reference to IE).
 
B

Ben C

David wrote : [snip]
#navbody
{
width:100%;
}
Click to expand...

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. [snip]
#body
{
width:100%;
Click to expand...

1- Right here: over-constraining, rigid. What was wrong with width: auto
or no width at all?
Click to expand...

I've noticed a few people doing width: 100% in places where the computed
value for auto width is 100% of the container anyway, and started
lecturing them about it. But I wonder if this is some IE workaround, it
seems to be such a common thing?
 
G

Guest

Ben C wrote :
David wrote : [snip]
#navbody
{
width:100%;
}
Click to expand...
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. [snip]
#body
{
width:100%;
Click to expand...
1- Right here: over-constraining, rigid. What was wrong with width: auto
or no width at all?
Click to expand...

I've noticed a few people doing width: 100% in places where the computed
value for auto width is 100% of the container anyway,
Click to expand...

Yes, it could end up to be 100% of the available width of the container
anyway... but it might not. Often, people do not know or are unaware of
what width: auto means to begin with.
and started
lecturing them about it. But I wonder if this is some IE workaround, it
seems to be such a common thing?
Click to expand...

If the element has a border and padding (or just padding), then width:
100% of the available width of its container will create an overflow and
an horizontal scrollbar: then many people won't understand where/why/how
a scrollbar appeared.

Gérard
 
D

David

I have fixed up some of my web page with some of the tips I was given.
I am still having a few problems. In firefox, my footer, that says
"copyright..." has an extra line break above it, and there is no
padding in firefox on the left of the text in the body. To make it
easier to view, you can see my page at liferipple.com. You can see the
CSS file at liferipple.com/styles/main.css. Thanks for all of the
replies, you have been really helpfull.

David

Gérard Talbot said:
Ben C wrote :
David wrote : [snip]
#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. [snip]
#body
{
width:100%;
1- Right here: over-constraining, rigid. What was wrong with width: auto
or no width at all?
Click to expand...

I've noticed a few people doing width: 100% in places where the computed
value for auto width is 100% of the container anyway,
Click to expand...

Yes, it could end up to be 100% of the available width of the container
anyway... but it might not. Often, people do not know or are unaware of
what width: auto means to begin with.
and started
lecturing them about it. But I wonder if this is some IE workaround, it
seems to be such a common thing?
Click to expand...

If the element has a border and padding (or just padding), then width:
100% of the available width of its container will create an overflow and
an horizontal scrollbar: then many people won't understand where/why/how
a scrollbar appeared.

Gérard
Click to expand...
 
B

Ben C

I have fixed up some of my web page with some of the tips I was given.
I am still having a few problems. In firefox, my footer, that says
"copyright..." has an extra line break above it
Click to expand...

This is caused by dodgy margin collapsing in IE we were just discussing
in another thread.

The first thing in #body is dl, which is getting a top margin from the
default stylesheet.

That margin collapses with the top margin of #body, moving #body down by
the gap you're seeing.

Since #body and #navbar have the same heights specified (5.0in), but
body starts a bit lower down, you get the gap at the bottom.

Easiest fix is to add to the selector for #body

padding-top: 1px;

dl now gets 1px more than its default margin, but who cares. If it's a
problem, alter the top margin on dl in your styles. Now the top margin
for the dl is enclosed within #body, so it ends at the same point
vertically as the navbar, and the annoying gap goes away.
, and there is no padding in firefox on the left of the text in the
body.
Click to expand...

That is also correct behaviour. dl and all the things with class bodytxt
are block-level elements, with their left margin edge aligned with the
edge of their container. #navbar is a float originating in a preceding
anonymous block box. According to the rules, the inline boxes in dl and
..bodytxt flow around the float, but the positions of those block boxes
themselves should be unchanged. The float should be rendered above the
padding and border areas, which it is. This is all in section 9.5 of the
spec.

So the padding is there, but behind #navbar. If you increase the left
padding of .bodytxt to 176px (165 for the width of navbar, 1 for its
right border, and 10 for the padding you want) you will get the desired
effect.

But then IE will probably give you far too much padding-- 176px between
the text and the right edge of #navbar.

So perhaps a better solution is to put the 10px as a right margin on
#navbar instead. So change padding in .bodytxt to

padding: 3px 10px 3px 0px;

and add to #navbar

margin-right: 10px;

And just hope it works in IE.
 
D

David

All my problems are fixed now. Thanks a lot Ben. I can see now how
Firefox is actually acting the correct way, and IE is not. Adding a
margin-right to #navbar fixed the padding problem. The footer problem
is fixed also. I appreciate all of the help.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Closing an overlay outside the overlay as well 1
Interfering CSS 1
Help with my responsive home page 2
How can I add arrows to my FAQ 0
How to position the *tooltip* comment on these buttons? 9
Survey details won't go through using php, ajax, Mysql 0
I need help fixing my website 2
Align img inside nav tabs section 5

Members online

No members online now.
Total: 57 (members: 0, guests: 57)
Robots: 437

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,736
Latest member
zacharyharris

Latest Threads

Top