Divs shifting down a line, can someone help me?

[Billy Joe Bob Jr]

Hi,
I'm in the process of building this site, duanewooters.com using div tags. I
have previewed the site in the latest versions of IE, Netscape, Firefox, and
Opera while building it. I?m having problems in Opera and Firefox (And
Netscape set to render like Firefox) most of the div?s shift down about a line
or so but some don?t.
When you roll over the little nav boxes in the header I have div?s that
show/hide text titles for each ?button? and these have stayed in line and don?t
shift.
Can someone take a look at this and tell me how to fix this?
Any help would be appreciated.
Thank you,
Duane

[rilkesf]

Duane,

It works fine for me on Firefox, Netscape, and Safari. If a CSS design is
displaying differently on IE and Netscape/Firefox, chances are Netscape/Firefox
is rendering it correctly as they are far more standards-compliant.

Also, I see that you've disabled right-clicking on your site. You might want
to look at this article.

[url]http://www.sitepoint.com/article/dont-disable-right-click[/url]

[Billy Joe Bob Jr]

Thank you rilkesf for the reply.

I changed many things in my site before you looked at it.

The problem I was experiencing was with H1-H3 tags so, consequently,
everything was dropping farther down the page. Whether they are in a table
inside a div tag or just in a div alone Opera and Firefox puts more space
around the H tags than does IE. I use Dreamweaver MX 2004 and it is suppose to
be a wysiwyg and it is with IE but its not with Opera and Firefox.

I?m still having a problem with Opera not lining up the Paypal checkout
button. Can any one tell me why?

Thank you,
Duane

[rilkesf]

One option would be to try setting the margin for your h2 tags to 0px in your
CSS file. But I think the real culprits might be all the floats and absolutely
positioned elements.

After looking at your CSS file, it seems to me that a far better solution
would be to modify the structure of the site a bit by placing your header into
tables. You currently have 24!! absolutely positioned elements defined in your
CSS file. While abs. pos. elements are very handy, they should be used
sparingly and with great attention to what their parent element is.

With the way your current page is designed, the only thing that needs to be
absolutely positioned is the header image (i.e. not the header links, text etc)
because of the way it is overlapping the content area. And even that can be
accomplished without abs. pos. given a little photoshop work.

The reason I say all this is that while pure CSS layouts are possible, they
take some practice due to the fact that not all browsers (read IE) are up to
speed with rendering CSS. This is especially true in the case of rendering
absolutely positioned elements and elements that have been floated (both of
which appear frequently in your CSS file). Tables are rendered much more
consistently across different browsers and don't have the amount of quirks that
CSS layouts do.

If you want some more info, Google "CSS vs Tables"

Hope that helps

[Billy Joe Bob Jr]

Thank you again rilkesf for your help.

See, when I started this site I wanted it to center on the viewers browser so
I have one relative div and the rest are absolute within the ?wrapper.? Is
there a better way to center divs? You mentioned the header is the only thing
that needs to be absolute. I have tried the other divs without the absolute
and they don?t float when a browser window is resized.

I?m very new to this so I have to ask. What does this problem, the differences
in the way Firefox, Opera, and IE display h tags, have to do with how a div is
positioned? Relative, absolute, or otherwise.

Check this out: [url]http://duanewooters.com/Divdilemma.html[/url] No graphics just two
div tags. The right one using H tags, the left using styles only. Opera and
Firefox shift the right div down. So am I doing something wrong in the way I
coded this?

I also added a table. Left is styles, right is H2. IE displays the right
table different from Opera and Firefox. None display like left table, they all
add extra area that?s unwanted but in different directions. I?m I coding this
wrong?


Here is the CSS:
body {
margin: 0px;
padding: 0px;
}
#divleft {
height: 100px;
width: 200px;
top: 25px;
left: 24px;
position: relative;
}
#divright{
height: 100px;
width: 200px;
top: -75px;
left: 250px;
position: relative;
}

Thank you,
Duane

[rilkesf]

Duane,

You're not coding it wrong .. it's behaving exactly as it should. In this
case, what makes the difference between browsers is that every browser uses its
own 'built-in' (so to speak) style sheet to determine how certain html tags
will be displayed. The most noticeable of these is the way that different
browsers display lists. Headers (h1, h2, etc) are just another example of
this. All header items have default settings for padding and margin. This is
what's making them appear in slightly different positions from one another.
Unless these defaults are overridden, they decide how the element appears. As
an example of default padding, check this:

[url]http://www.phpfreaks.com/css_manual/page/sample.html[/url]

In terms of what difference positioning makes .. that's kind of a huge can of
worms that I don't think there's enough room to go into here. The main thing
to remember is that 'relative' positioning changes the position of the element
based on where it would appear if no style were applied to it. For example
your #divright class is moved 250px FROM the left and -75px FROM the top. To
see how it moves, change <div id="divright"> to <div> and see where it would be
without styles. Unlike relative positioning, 'absolute' positioning takes the
element out of the normal flow of the document and positions it from the top
left corner of its containing parent element. Also, because absolute
positioned elements are removed from the normal flow of the document, it allows
them to sit 'above' other elements, leading to the type of overlapping you have
in your header. If you really want to learn about positioning with CSS just
Google for CSS positioning. There's lots of good tutorials and resources out
there.

CSS layouts have a lot of upsides and some nagging downsides. For your
purposes, I would recommend trying to do the site without CSS positioning until
you are more familiar with it. Like I said, you can accomplish what you want
with just tables if you slice your images right in Photoshop, and utilize
background images in your table cells. If you decide you do want to go with
CSS positioning, find some tutorials and familiarize yourself with how it all
works and try to keep your absolutely positioned elements to a minimum.

Oh by the way, centering your site is also a snap with tables. Nest
everything in a table cell with align="center".

Hope that helps.

[Billy Joe Bob Jr]

Once again thanks so much for the help rilkesf.

You are right, I probably should have built this site with tables (centering
is a snap) and sliced the backgrounds different with Photoshop.

I?m very familiar with Photoshop (I teach Photoshop) and I?m not that familiar
with Dreamweaver. I have a hard time with tables in Dreamweaver. Not building
tables, but after putting in a few nested tables I find it difficult to pick
out the table you want to do something to. I thought it was a dream come true
with divs. Imagine being able to place items on your page anywhere you want, in
?layers,? just like Photoshop. It was like I was home again.

I have already started on a new site, this time the graphics WILL BE sliced
differently and the backgrounds will move with the text.

Thanks again,
Duane

[rilkesf]

No problem. Good luck with the new site.