CSS2 question

[Becky Lash]

Hi, all,

I am trying to transition an existing site to css2 and xhtml. I'm in the
early stages of learning this technology too.

Firefox is stumping me on div behavior and absolute positioning. I've seen a
lot of discussion about this , but haven't quite found the answer to my
problem (or recognized it, if it is staring me in the face).

My menu graphics look fine in IE, but in Firefox, they are not lining up
correctly on the vertical axis. Do you know of any fixes?

www.smallbusinessproofreading.com/woodstone

Here's my .css, in case that helps:


ul, li {font-size: 12px; font-family: Verdana,Arial,sans-serif }
#QUOTE { font-style: italic; color: #0000A0 }
#new { color: #FF0000; text-decoration: none; font-family: Verdana, Arial,
sans-serif; font-weight: bold}

H1 { font-weight: bold; font-size: 14px; font-family: Verdana, Arial,
sans-serif; color: #74C3FC; text-decoration: none}
H2 { font-weight: bold; font-size: 14px; font-family: Verdana, Arial,
sans-serif; color: #74C3FC; text-decoration: none}
H3 {font-weight: bold; color: #21962E;font-family: Verdana, Arial,
sans-serif; text-decoration: none ; padding-left: 5em}
H4 {font-weight: bold; color: #74C3FC; font-family: Verdana, Arial,
sans-serif; text-decoration: none }

a {text-decoration: underline; font-family: Verdana, Arial, sans-serif;
font-weight: bold ; color: #FF0000}
..buynow {text-decoration: none; font-weight: bold; color: #FF0000}
a:visited { color: #996666; }
..praise {color: #0000A0; font-style:italic}
..default { background-color: #ffffff}
..menuitem { color: #157A85; text-decoration: underline; font-family:
Verdana,Arial,sans-serif; font-size: 14px; font-weight: bold }
..title { font-size: 11px; font-family: Verdana, Arial, sans-serif; color:
#880606}
..saheading { font-weight: bold; font-size: 14px; font-family: Verdana,
Arial, sans-serif; color: #74C3FC}
..smallbody { font-size: 14px; font-family: Verdana, Arial, sans-serif;
color: #000000; margin-top: auto; margin-right: auto; margin-bottom: auto;
margin-left: auto}
..quotation { color: #003366; font-size: 12px; font-family:
Verdana,Arial,sans-serif ;font-style:italic}
h5 { font-weight: bold; color: #74C3FC; font-family: Verdana, Arial,
sans-serif; text-decoration: none ; font-size: 16px}
h6 { color: #74C3FC; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; font-weight: bold; text-align: center}
p.awards { text-align: center; padding: 2em 2em }


div.imgholder {
float:left;
background: url(dropshadow.png) no-repeat bottom
right;
background: url(dropshadow.gif) no-repeat bottom right;
margin: 10px 7px 0 10px;

}
div.imgholder img {
display:block;
position:relative;
background-color: #fff;
border: 1px solid #666;
margin: -3px 5px 5px -3px;
padding: 2px;
}
hr {
color: #DB581F;
background-color: #DB581F;
width: 80%;
height: 3px;
margin-left: auto;
margin-right: auto;
; text-align: left
}
div.body { font-size: 12px; font-family: Verdana, Arial, sans-serif;
padding-right: 10px; padding-bottom: 10px; padding-left: 20px; padding-top:
0px; height: auto; width: auto; border-left-width: medium; margin-right:
0px; margin-bottom: 0px; margin-left: 0px; float: right; margin-top: 0px;
clear: right}
p { font-size: 12px; font-family: Verdana, Arial, sans-serif; height: auto;
width: auto; border-left-width: medium;margin-top:0;}
p.body { font-size: 12px; font-family: Verdana, Arial, sans-serif;
padding-right: 10px; padding-bottom: 10px; padding-left: 20px; padding-top:
0px; border-left-width: medium}

..features { text-decoration: none; font-weight: bold; color: #21962E}

thanks for any advice! I am new at this.

Becky

 

[Lauri Raittila]

Hi, all,

I am trying to transition an existing site to css2 and xhtml.

I'll recommend you to start from scratch, and not use XHTML, but HTML.
Especially as you don't seem to have any clue about XHTML (there is very
little people around that has clue about XHTML. For example, W3 doesn't
have, and they invented t:
http://validator.w3.org//check?uri=http://www.w3.org/2004/11/
orf2004%2F&ss=&outline=).

Usually, it is much more easy to build site again from scratch than
change it bit by bit. Or maybe always.

Make HTML that is correct, do not think about layout at all while doing
that. Then start aplying CSS. Then ask again when you have problem.

It makes no sence to try debug page that uses 5 levels of nested tables,
is incorrect or invalid by almost any aspect etc. It would take me ages
to find out where you are trying to do something.

I'm in the early stages of learning this technology too.

Even more important to start again. In fact, you might need to do it
twice. But it is still faster than converting existing site...

Firefox is stumping me on div behavior and absolute positioning. I've seen a
lot of discussion about this , but haven't quite found the answer to my
problem (or recognized it, if it is staring me in the face).

Most likely, FF is doing things right, and IE wrong. If you mean :hover
images, I can see bad results in Opera too.

My menu graphics look fine in IE, but in Firefox, they are not lining up
correctly on the vertical axis. Do you know of any fixes?

www.smallbusinessproofreading.com/woodstone

Here's my .css, in case that helps:

<snip>

No, it is too long, would take ages to find right spot.

 

[Becky Lash]

Disclaimer: The light blue headings, flashing GIFs, and other strange
devices on this web site are at the <insistance> of the customer, after I
let him know the disadvantages of this kind of design (or lack of, rather).

 

[Becky Lash]

OK. I can agree with that, although I hate to take the time to rip out all
those tables and start from scratch, as the customer is not willing to pay
for the time. I inherited this site and am trying to clean up stuff as I go.

I hate those tables too, but will bite the bullet and rip them out of all
those pages. Thanks for the advice.

 

[Lauri Raittila]

OK. I can agree with that, although I hate to take the time to rip out all
those tables and start from scratch, as the customer is not willing to pay
for the time. I inherited this site and am trying to clean up stuff as I go.

No need to do that. Just copy/paste the content somewhere and mark it up.
Much faster, in my experience...

I hate those tables too, but will bite the bullet and rip them out of all
those pages. Thanks for the advice.

Please don't top-post in future.

 

[Becky Lash]

oops. sorry about the top posting. thanks for the pointers.

 

[Jeffrey Silverman]

OK. I can agree with that, although I hate to take the time to rip out all
those tables and start from scratch, as the customer is not willing to pay
for the time. I inherited this site and am trying to clean up stuff as I go.

I hate those tables too, but will bite the bullet and rip them out of all
those pages. Thanks for the advice.

All you need is the content. Provided that the site uses some sort of
templating to get the layout the same on all pages. Any kind of
templating system will do, be it server side includes or client side site
management tool.

Take content (JUST the content) and mark up from scratch. Propagate new
HTML template across site. presto! New site!

 

[Becky Lash]

sure thing. I am using server-side includes.

 

[C A Upsdell]

I'll recommend you to start from scratch, and not use XHTML, but HTML.

Going back to HTML will likely have no effect on her problem. You're just
throwing in a red herring.

Especially as you don't seem to have any clue about XHTML (there is very
little people around that has clue about XHTML. For example, W3 doesn't
have, and they invented t:
http://validator.w3.org//check?uri=http://www.w3.org/2004/11/
orf2004%2F&ss=&outline=).

? 401 error. Do you expect the validator to validate a page that can't be
accessed?

Usually, it is much more easy to build site again from scratch than
change it bit by bit. Or maybe always.
Yes.

Make HTML that is correct, do not think about layout at all while doing
that. Then start aplying CSS. Then ask again when you have problem.

Yes. And validate both HTML and CSS before testing.

Most likely, FF is doing things right, and IE wrong. If you mean :hover
images, I can see bad results in Opera too.

Yes. Usually (not always) if IE does what you expect, and Firefox does not,
Firefox is right.

 

[Barbara de Zoete]

sure thing. I am using server-side includes.

Can you please include the part of the previous post to which you are
responding. It gets hard to follow if this is all I see.

 

[Lauri Raittila]

Going back to HTML will likely have no effect on her problem. You're just
throwing in a red herring.

No, OP obviously has no idea of what XHTML is, so OP shouldn't try to use
it. I looked at source code, and only thing about XHTML was incorrect
doctype in wrong place...

For example, W3 doesn't have [clue about xhtml], and they invented it:

<URL:http://validator.w3.org//check?uri=http://www.w3.org/2004/
11%2Forf2004%2F>

? 401 error. Do you expect the validator to validate a page that can't be
accessed?

Well, it was not 401 when I used it, and it is not that now either.

Maybe you didn't notice that URL wrapped?

This is what validator says:

This page is not Valid XHTML 1.0 Strict!

Below are the results of attempting to parse this document with an SGML
parser.

Line 38, column 0: document type does not allow element "div" here;
missing one of "object", "ins", "del", "map", "button" start-tag

<a title="PDF ?????????? (?????)" href="Program.p

....

 

[Becky Lash]

OK, Barbara. I was responding to the following comment:

++++snip++++comment from Jeffrey+++

All you need is the content. Provided that the site uses some sort of
templating to get the layout the same on all pages. Any kind of
templating system will do, be it server side includes or client side site
management tool.

Take content (JUST the content) and mark up from scratch. Propagate new
HTML template across site. presto! New site!

++++end of snip+++++

 

[C A Upsdell]

No, OP obviously has no idea of what XHTML is, so OP shouldn't try to use
it. I looked at source code, and only thing about XHTML was incorrect
doctype in wrong place...

But there were also a lot of HTML issues. The 'x' in xHTML is not the root
of the OP's problems.

 

[Becky Lash]

+++snip++++++

But there were also a lot of HTML issues. The 'x' in xHTML is not the
root of the OP's problems.

+++++end of snip++++

Every aspect of this web site needs cleaning up, including the .html code.
That is why I am trying to transition it to css. Starting from scratch with
the content is good advice and is consistent with advice from several books
by Meyers and Zeldman.

 

[Lauri Raittila]

But there were also a lot of HTML issues. The 'x' in xHTML is not the root
of the OP's problems.

Right but using XHTML correctly is much harder than HTML, and much easier
to make mistakes. There is no point moving to XHTML. There is enaugh
trouble to move to HTML + CSS for layout.

 

[C A Upsdell]

Right but using XHTML correctly is much harder than HTML, and much easier
to make mistakes. There is no point moving to XHTML. There is enaugh
trouble to move to HTML + CSS for layout.

I find it easier to use xHTML, since it is stricter, e.g. requires closing
tags and is case-sensitive.

 

[Starshine Moonbeam]

+++snip++++++

+++++end of snip++++

Every aspect of this web site needs cleaning up, including the .html code.
That is why I am trying to transition it to css. Starting from scratch with
the content is good advice and is consistent with advice from several books
by Meyers and Zeldman.

open outlook express

tools --> options

send tab

check indent the orginal text with > when replying and quoting.

And it'll format the post for you, so you don't have to keep doing it
yourself.

 

[Genomega]

Hi, all,

I am trying to transition an existing site to css2 and xhtml. I'm in the
early stages of learning this technology too.

Firefox is stumping me on div behavior and absolute positioning. I've seen a
lot of discussion about this , but haven't quite found the answer to my
problem (or recognized it, if it is staring me in the face).

My menu graphics look fine in IE, but in Firefox, they are not lining up
correctly on the vertical axis. Do you know of any fixes?

www.smallbusinessproofreading.com/woodstone

Here's my .css, in case that helps:


ul, li {font-size: 12px; font-family: Verdana,Arial,sans-serif }
#QUOTE { font-style: italic; color: #0000A0 }
#new { color: #FF0000; text-decoration: none; font-family: Verdana, Arial,
sans-serif; font-weight: bold}

H1 { font-weight: bold; font-size: 14px; font-family: Verdana, Arial,
sans-serif; color: #74C3FC; text-decoration: none}
H2 { font-weight: bold; font-size: 14px; font-family: Verdana, Arial,
sans-serif; color: #74C3FC; text-decoration: none}
H3 {font-weight: bold; color: #21962E;font-family: Verdana, Arial,
sans-serif; text-decoration: none ; padding-left: 5em}
H4 {font-weight: bold; color: #74C3FC; font-family: Verdana, Arial,
sans-serif; text-decoration: none }

a {text-decoration: underline; font-family: Verdana, Arial, sans-serif;
font-weight: bold ; color: #FF0000}
.buynow {text-decoration: none; font-weight: bold; color: #FF0000}
a:visited { color: #996666; }
.praise {color: #0000A0; font-style:italic}
.default { background-color: #ffffff}
.menuitem { color: #157A85; text-decoration: underline; font-family:
Verdana,Arial,sans-serif; font-size: 14px; font-weight: bold }
.title { font-size: 11px; font-family: Verdana, Arial, sans-serif; color:
#880606}
.saheading { font-weight: bold; font-size: 14px; font-family: Verdana,
Arial, sans-serif; color: #74C3FC}
.smallbody { font-size: 14px; font-family: Verdana, Arial, sans-serif;
color: #000000; margin-top: auto; margin-right: auto; margin-bottom: auto;
margin-left: auto}
.quotation { color: #003366; font-size: 12px; font-family:
Verdana,Arial,sans-serif ;font-style:italic}
h5 { font-weight: bold; color: #74C3FC; font-family: Verdana, Arial,
sans-serif; text-decoration: none ; font-size: 16px}
h6 { color: #74C3FC; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; font-weight: bold; text-align: center}
p.awards { text-align: center; padding: 2em 2em }


div.imgholder {
float:left;
background: url(dropshadow.png) no-repeat bottom
right;
background: url(dropshadow.gif) no-repeat bottom right;
margin: 10px 7px 0 10px;

}
div.imgholder img {
display:block;
position:relative;
background-color: #fff;
border: 1px solid #666;
margin: -3px 5px 5px -3px;
padding: 2px;
}
hr {
color: #DB581F;
background-color: #DB581F;
width: 80%;
height: 3px;
margin-left: auto;
margin-right: auto;
; text-align: left
}
div.body { font-size: 12px; font-family: Verdana, Arial, sans-serif;
padding-right: 10px; padding-bottom: 10px; padding-left: 20px; padding-top:
0px; height: auto; width: auto; border-left-width: medium; margin-right:
0px; margin-bottom: 0px; margin-left: 0px; float: right; margin-top: 0px;
clear: right}
p { font-size: 12px; font-family: Verdana, Arial, sans-serif; height: auto;
width: auto; border-left-width: medium;margin-top:0;}
p.body { font-size: 12px; font-family: Verdana, Arial, sans-serif;
padding-right: 10px; padding-bottom: 10px; padding-left: 20px; padding-top:
0px; border-left-width: medium}

.features { text-decoration: none; font-weight: bold; color: #21962E}

thanks for any advice! I am new at this.

Becky

Your css looks fine however there are many html errors.

 

[kchayka]

I find it easier to use xHTML, since it is stricter, e.g. requires closing
tags and is case-sensitive.

Hmmm... <img.../> is easier than <img...>? Easier to forget, maybe.

In HTML 4, there is nothing preventing you from including optional end
tags like </p>, or using all lowercase for tags and attributes, or mixed
case IDs and classes, or using a strict DOCTYPE.

So what's that benefit again?

 

[C A Upsdell]

Hmmm... <img.../> is easier than <img...>? Easier to forget, maybe.

Not when you use it every day.

In HTML 4, there is nothing preventing you from including optional end
tags like </p>, or using all lowercase for tags and attributes, or mixed
case IDs and classes, or using a strict DOCTYPE.

Neither is there anything obliging you to do so. Oh yes, one can configure
tools to check for such things, but it's a lot easier to just use a
validator, which one should use anyway.