Topic: More CSS questions you've answered 1000 times

Ok, I have 3 issues..( I sure I have more than that but these are the 3 I'm attacking right now)

Html is here
CSS is here

Issues:

1) In IE the content of div "main" is fine..... In FF it is escaping. I'm sure there is some easy fix, but honestly I don't have a clue what I should even be searching for to find my answer.

2) I nested a div ("nav1") within my "header" div and placed the image I'll be using for navigation as a BG image. Then I applied a text link. But how do I get the "nav1" div to stick to the bottom of "header" div? I would like it to be 5 px from the left and 0 from the bottom.

3) I am unsure if I used "float" correctly on "rightside" div and "main" div. It looks correct in FF and IE, but have I used it correctly?

Flashy signature here...

(Edited by loj58 on 01-28-2007 09:22)

1) you have a set height for the content:

#main {
	position: relative;
	width:500px;
	height:300px;
	background-color: #ffffff;
	float:left;
}

since the text is longer than the height, it has no where to go but out... if you want the div to scroll, add overflow: auto; to it. if you don't want it to scroll, remove the height, or replace the height: 300px; with min-height: 300px;

2) margin bottom: 0px; is not proper css. it is margin-bottom. you can also try something like this:

#nav1 {
	position: absolute;
        left: 5px;
	bottom: 0;
	width: 76px;
	height: 17px;
	background: url(button.gif) no-repeat left bottom;
	text-align: center;
}

3) looks fine. i have seen floats done different ways with the same result. as long as it works

(Edited by Ensellitis on 01-28-2007 15:00)

(Edited by Ensellitis on 01-28-2007 15:01)

1) Ok, I changed the set height of the "Main" Div and it now stretches to fit the content.... however the "content" div that it is nested in is not expanding with it. I have the "content" div set to height 100% shouldn't it expand with its child divs?

Edit: Alright adding the clear: both to the "footer" div fixed issue #1.

2) I tryed the code posted and since it is absolute positioning it indeed moved it to the coordinates but those coordinates are for the viewport so it was positioned all the way at the bottom of the page 5 px from the left.

I changed it to relative position and it simply doesn't work... what am I doing wrong?

3) Thanks, I'm really just starting to learn any of this so I'm glad I did "something" right.

Flashy signature here...

(Edited by loj58 on 01-29-2007 00:41)

my bad, first give the header position: relative; THEN use that css i gave you for the nav and it should work fine

Sweet!

Works like a charm! Thanks!

Oh! one more thing... I used a div filled with a black BG color as a horizontal rule to seperate the header and content areas. I have it sized at 700px width and 2 px height. It looks great in FF but in IE it looks like its about 20 pixels high.

What can I do to fix that?

Flashy signature here...

(Edited by loj58 on 01-29-2007 01:08)

loj58: Get rid of that extra DIV and set the border-bottom of the header DIV

Thanks you very much, I still have a little work to do but its looking pretty good.

See updated version here.

Flashy signature here...

Much better!

Now I'll be a bit picky, but:

• the DIV "nav1" hurts my feelings. It should be a UL
• the IMG "down-bullet.gif" should be in the background of the A ( to which you'll add a padding to make room for the bullet ). They do no belong in the markup
• the DIVs "listheader" are unnecessary.
• you can drop the margin and hmargin classes in the DIV "main"

Of course feel free to discard any of the things listed above if they are part of a CSS hack to get IE behave like a good boy.

poi, since I have absolutely NO idea what I'm doing I really don't feel bad in telling you...

I would love to make the changes you suggested, but I really don't understand what you were suggesting and/or I don't know how to do that.

1) "nav1" (here I'm unsure how to do what you are suggesting) Any suggested reading?

2)"bullet-down" (can you show me a code sample of how to make that change?)

3) "listheader" (I know nothing about what you can do with list properties) Reading?

4) Classes (how? what? where?)

Flashy signature here...

1) check these out for some good examples of what he is talking about.
2) he means using something like

.link {
background: url("bullet-down.gif") no-repeat right;
}

1.) the navigation is actually a list of links so what poi is saying is to convert it in to a list (ul) instead of having lots of small divs
so it would look something like:

<ul class="menu">
       <li>Home</li>
       <li>contact</li>
        .
        .
        .
  </ul>

And then use css to make the menu look like you want it to


for more info about it look up Horizontal list here http://css.maxdesign.com.au/listutorial/


(Edited by Blacknight on 01-30-2007 10:19)

Thank you all so much, I have a few print jobs pushing me now so it will be a day or 2 before I can play with the church site again. I'll post an update when I start making the suggested changes.

Flashy signature here...