alignment probs

[calebm12]

Hi Folks{

Am working on a webpage and have a layer that i have positioned on the page with css using margins...the idea being that it would expand based on the content inside of it. I can get it to expand fine with a {height: auto}....however i have noticed that when i switched from placement using an absolute method (didnt work at all cause it made the height set), my alignement of the layer differs in firefox and IE. In IE it is perfect. However in firefox it is moved up and to the right a little bit so that things do align. THis is my first experimenting with this method and i wonder what i am doing wrong. The whole page has two layers..a heading layer and a body layer...my body layer has a table inside of it. the body layer CSS looks like this:

.mainlayer {
z-index: 2;
border: 2px solid #333333;
background-color: #FFFFFF;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
margin-top: 193px;
margin-left: 40px;
width: 698px;
height: 100%;
float: left;

the header layer like
.headerlayer {
position: absolute;
left: 50px;
top: 19px;

and so it aligns perfect in IE but not it firefox.

[shalom_m]

It would help if you let us have a link.

[calebm12]

sorry. www.meshowventures.com/draft.html (http://www.meshowventures.com/draft.html)

[katgal]

First problem is your unnecessary use of tables. There is absolutely no need for tables in this layout.

It's actually a very simple css layout.

I was torn between giving you a few pointers, trying to let you work it out yourself...and giving you a full demonstration of really how simple it can/should be.

Call me bored, but I decided to go with the latter and I cleaned up your code for you and removed those darn tables.

View the final result here: http://clients.bkbdesigngroup.com/forum/

[shalom_m]

katgal,

You beat me to it by 5 minutes

[calebm12]

wow..wasnt expecting that level of help. thanks. i just want to make sure i understand what you have done...how can i get a view of your changes? did you change the overall css page???
or can i just view the source from the page.
This is actually my first css layout, so i am a late bloomer. i thought i had the placement figured out when i went ahead at placed both layers with absolute placing and specifed height at auto.

in general, woudl it have been wiser for me to make a container layer for the whole thing?

also, i really want to make sure i learned from what you did so can you give me some direction on the easiest ways to notice the changes...

[calebm12]

a follow on to my last post. i take it one of my probelms was i didnt have div id's?

[katgal]

Yes, you should in most circumstances have a "container" div... I always call mine "wrapper." That is used to position the layout on the page. Then the sub-divs are positioned within the wrapper div. That way, you don't have to absolutely position everything.

As for id vs. class. IDs are used to identify specific elements in your layout, ie header, left, right, etc. Elements that are unique and only appear once on the page. Classes are used to style items that might appear multiple times on the page (paragraphs, headings, etc.).

Use a class tag if:

The style is used in various places throughout the document.
The style is very general. Use an id tag if:

The style is only used once ever in the document.
The style is specific to a certain area of the document.Hope that makes sense!

[katgal]

Oh, and just view the html source code to see what I've done. The direct link to the css is http://clients.bkbdesigngroup.com/forum/css.css (http://clients.bkbdesigngroup.com/forum/css.css)(but if you view the source code, you should be able to determine that!)

[calebm12]

thanks for the css code. that helps a lot.

so i am guessing you use # for div and . for classes?

what i dont get is i dont see in the css where you specify the height of the main layer. will it just continue to grow based on content?

i think this is making better sense. i have one container layer, that i can place on the page through margins (in the case so that everything lines up with the background). I then form layers (or i guess they are called div) within these main. It is similar to tables in that you are implanting layers into layers...kinda like people use to implant tables into tables.

the padding and margins and floats i am gonna have to learn more about. for instance you set a margin top to -3 on one of the rules. ??

i guess then for the content i can use p class and span class to change font that might be in same paragraph.

learned more in the last 15 minutes than 1 hour reading a book. thanks a bunch.

[INDY GS]

Looks like your issue has been resolved, but look at the tab, Asentee voters, should that be Absentee?

[calebm12]

haha. yep. opps. still in draft mode.

[shalom_m]

The only thing I would have done different than katgal would be to center the notice by substituting the following code as #wrapper.

#wrapper {
width:702px;
margin-left: auto;
margin-right: auto;
One of the best ways of learning CSS is to see what other people have done, to change some items and to see how this affects the display.

This is best achieved with the Web Developers Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60) for Firefox.
It allows you to view the complete CSS files,
View Style Information (the parts of CSS affecting a specific part)
Edit the viewed CSS online
and
Add User Stylesheet (substitute your own stylesheet - now that can be funny!!)It has other goodies too - download, install and see....

[shalom_m]

Looks like your issue has been resolved, but look at the tab, Asentee voters, should that be Absentee?

OK so the "b" is absent.

[nicholaspaul]

Hint: When I'm debugging CSS I will try two things. Firstly, put a border:1px solid pink; or some other colour that will stick out, to see exactly where the div tag is. Secondly , I will remove all content to make sure the positioning is working before I put it back in (after duplicating the file and working on the copy, of course).
Hope this helps.