CSS: Comments Please…

[Joe]

Hi,

I have redesigned one html page by removing all the tables. You can see
this test page at http://www.ngrain.com/css/home1.htm. Only home1.htm has
been redesigned without tables. Rest of the site uses tables for layout.

I would appreciate if you can take a look at this page and CSS and comment
on the coding.

The page looks fine in IE but when I open up the page in Dreamweaver or
FrontPage, I see that all the div’s are everywhere. Is it common or something
is wrong?

This page looks fine in IE 6 but for some reason some parts of the page are
messed up in NN, Opera, Mozilla and FireFox. Do I need to create a separate
style sheet for NN, Opera, Mozilla and FireFox browsers?

Thanks in advance and I look forward to your comments.

Joe

 

[Murray]

I would appreciate if you can take a look at this page and CSS and comment

on the coding.

I would encourage you to use more descendent selectors and fewer custom
classes. It will clean up your CSS considerably, and be easier to pick up
after months away from the scene.

Also, I would encourage you to try to consolidate and optimize your styles.
For example, instead of this -

..topNav {
FONT-SIZE: 7pt;
COLOR: #131313;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-ALIGN: left
}
A.topNav:link {
COLOR: #465465;
TEXT-DECORATION: none
}
A.topNav:visited {
COLOR: #131313;
TEXT-DECORATION: none
}
A.topNav:hover {
COLOR: #131313;
TEXT-DECORATION: underline
}

Try this -

..topNav {
FONT-SIZE: 7pt;
COLOR: #131313;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-ALIGN: left
}

..topnav a, .topnav a:visited, .topnav a:hover {
COLOR: #465465;
TEXT-DECORATION: none;
}

..topnav a:visited {
color:#131313;
}

..topnav a:hover {
text-decoration:none;
}

and make your links in the .topnav container have no class assignment.
Taking advantage of the container's class will save you alot of work and
code.

Other than that, this looks like a nicely planned page. It's a pity it
doesn't have a background color specified, so that browsers that don't
default to white will see #whatever! 8)

The page looks fine in IE but when I open up the page in Dreamweaver

Which DW? The only one that really groks pages like this is DMX2004.

There does seem to be a small positioning problem in FF0.8 (the Microsoft
logo and the alignment of the left and right content areas). I didn't
really take a hard look why, but I think you could solve that at the worst
with a conditional IE block, and at the best by a ruler and calculator on
the content area.

 

[Ronx]

The page looked OK in Firefox 0.9, until I increased the text size to make
it readable. In IE the text remains too small for comfort, and I would be
tempted to turn off CSS or go elsewhere.

The links are confusing - what I thought were links turned out to be
headings, and what looks like body text are actually links...

Ron

 

[Murray]

Relative position takes some study.

A page element that is relatively positioned differs from one that is
absolutely positioned in three very important ways -

1. It is NOT removed from the flow of the code on the page, which means
that a relatively positioned element *CAN* and *DOES* affect the placement
of things for which the code occurs closer to the </body> tag than the
element itself. I believe that this is what is responsible for your
symptoms.

2. The space occupied by a relatively positioned element is still PRESENT
on the page, as if it were in its code-flow location (whether it is actually
there or not by virtue of its positional offsets).

3. The positional location of a relatively positioned element is calculated
from the location it would have been in, had there been no positioning -
think of it as an offset.

This means that merely changing an element from position:absolute to
position:relative can mean that your page layout may change significantly.

Just to mention the converse - an absolutely positioned element a) is
removed from the flow of the page's code, hence it cannot affect the
position of other elements, and b) by virtue of being removed from the flow,
the space it would have occupied is also removed, c) and also by virtue of
being removed from the flow of the code on the page, its position is
calculated from the zero position of its nearest POSITIONED parent container
(often, but not necessarily, the body tag).

I hope that doesn't confuse you.

 

[Murray]

Furthermore, looking at your page in DMX2004, I can see that you are seeing
things everywhere because of a faulty calculation of widths of adjacent
elements, which is pushing things around on the screen. I'm not sure why
this is not also being seen in the browser, but there you go.

As you can see, once you create a page like this where nearly *everything*
on the page is positioned, it's a bear to troubleshoot. My approach would
be to substantially simplify and try to position the smallest number of
things possible.