Topic: ok css gurus... (background colors)

So I'm FINALLY really learning CSS and trying to redesign my day job's homepage and my background color isn't showing up in IE but looks perfect in firefox:
http://www.notdecaf.com/css/test.html

i've done some looking but haven't found anything referencing this, any ideas? thanks.


KAIROSinteractive | tangent oriented

The quick fix is to add a height: 100% to your body attribute.

Using values like that for height can cause some wierd behavior. You might want to rethink how you have laid out the page, using absolute positioning like that wouldn't be my first choice for a way to layout the page. You might want to look at some CSS layout repositories for different ideas on how to achomplish the same thing using relative positioning.

Dan @ Code Town

I forgot to tell you the cause.

In IE if all of the child elements are absolute the parent attribute (in this case the body tag) will have a height of 0 because it does not actually contain anything since all its children are floating. The next problem is that you display div#main to be 100% height, which is 100% of the height of the parent element. Since the body has a height of 0, div#main will have a height of 0 (100% of 0 is 0).

So that is the reason for the IE error. The better question would be why does firefox work in this situation. I am not that hardcore into the browser differences to know the answer to that one.

Dan @ Code Town

I would just like to very heartily agree with Warmage that you really want to get the absolute positioning out of there.

Absolute positioning, IMO, should almost never be used, and should never be used for 'general layout'.

It breaks the flow of the document, and on average causes far more problems than it solves.

Get used to using the FLOAT attribute, and specifying as little as possible to define where your elements lay - you'll be surprised how easily they usually fall into place without fuss.

thanks for the info guys. I'm not opposed to using floats but i don't "get" them yet, my attempts haven't worked well so far. any good reference for how floats and relative positioning actually function?

also, something i haven't found specifically defined, how are parent/child relationships defined in CSS?


KAIROSinteractive | tangent oriented

maxdesign is full of good CSS techique tutorials
http://css.maxdesign.com.au/floatutorial/

parent child is heirarchical:

parent_open
    child_open
    child_close
parent_close

any tag encased inside another is a child of it

got it, thanks Jason. and i've been playing, don't know how correct this is but it seems to be working...

http://www.notdecaf.com/css/test02.html


KAIROSinteractive | tangent oriented

I don't have time for anything indepth at the moment, but need to add:

when I say to forget about absolute positioning, what I mean in addition is forget about 'position' altogether.
Forget about 'top:' and 'left:'

Let the document flow. Using height, width, margin, padding, and float will take care of your positioning.

Float, overall, is rather simple. Want 2 elements side by side? give them both a 'float:left;' and set their width attributes..
Reading through the links JK provided will take care of some of the problems you may run into, and then some by the looks of it.

Once you start specifying 'position', you restrict yourself a great deal and the problems start piling up.

thanks DL, i'll give that a look and see what i can do about positioning...or not positioning from the sounds of it, thanks.

btw, anyone have a favorite mac css/text editor? i've found a handful and am trying a few demos.


KAIROSinteractive | tangent oriented

TextMate. You will never look back; the best $30 you might ever spend.

Cheers,
DC

If you can, get Dreamweaver 8, it's code view is great, it's basically taken from Homesite with extra additons, and of course great CSS support. Naturally it is expensive.

Although these days I use Eclipse with the Web Tools plugin, which is also excellent

If you're looking for a freeware text editor, check out Notepad++.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

(Edited by Suho1004 on 06-07-2006 11:28)

That Notepad++ looks pretty good, it even has CSS Auto-Completion, have you tried this out, is it any good?

thanks guys. divinechaos, textmate looks nice and i will definitely check it out. i've been playing with TextWrangler and will probably check out the demo of BBEdit (as i can do their crossgrade deal for like 99 bucks).

blaise, i've got 8 here at work and an older version of DW at home, will be upgrading at some point though. I haven't tried editing CSS in there too much though (other than simple style sheets to control text formatting), i'll give it a look.

Master Suho, I'll give Notepad++ a download here at work but i've gone to a PC-free environment at home

anyone used StyleMaster on either platform?


KAIROSinteractive | tangent oriented

(Edited by Fig on 06-07-2006 17:41)

ok, progressing with the non-pixel positioning, not bad so far but one piece is being a pain:
http://www.notdecaf.com/css/test03.html

(please ignore the oddly positioned "marketing commercial real estate" graphic as it's in the middle of the page in firefox, haven't gotten to it yet)

I've got the logo and top address bar positioned, and the big 3/4 width building graphic is also sitting right where it should. my problem is on the video player graphic (vidplayer.jpg) to the right of the big graphic. it's perfect in firefox but in IE it seems to be positioning itself relative to the bottom of the small top right address graphic rather than the logo at top left. is there a reason its doing this and a way to fix it?

thanks guys, learning a bunch here (and as a designer i won't admit coding is fun but i might not be hating it ).


KAIROSinteractive | tangent oriented

(Edited by Fig on 06-07-2006 19:04)

Ok, before going any further into the CSS side of this, lets get that mark-up cleaned up!

You have a lot of headers and paragraphs that are just wrapped in <span> tags with <br>'s in between. This is BAD!

Your markup is going to be an integral part of getting your layouts to work properly, and you need to make sure that you are using the right tag for the job. Have a list? Code it as a list! A header? Code it as a header! (and remember to use the right header tag. there are 6, they go in order - they should go in order of heirarchy on your page as well) A paragraph? Code it as a paragraph!
See a pattern here?

CSS effects all of the HTML elements - so get your markup done right, and use your CSS to style appropriately.

Keep in mind the cascading part of CSS. You have a lot of classes specified in your mark-up that are not needed, and add a lot of clutter. For instance -

<div id="news">
<span class="news_date"> June 2005 </span>

    <br>

	
<span class="news_info"> Informetrics completes Marketing Focus magazine, due out August 2005. Watch for it and more information. </span>

    <br>
    <br>


	
<span class="news_date"> July 2005 </span>

    <br>

	
<span class="news_info"> Informetrics completes Four Oaks Place Marketing Center for TIAA-CREF and Transwestern Commercial Services. </span>

    <br>
    <br>


	
<span class="news_date"> July 2005 </span>

    <br>

	
<span class="news_info"> Informetrics completes Marketing Focus magazine, due out August 2005. Watch for it and more information. </span>

</div>

Can be narrowed down to:

<div id="news">
<h3> June 2005 </h3>

<p>
Informetrics completes Marketing Focus magazine, due out August 2005. Watch for it and more information.
</p>

<h3> July 2005 </h3>

<p>
Informetrics completes Four Oaks Place Marketing Center for TIAA-CREF and Transwestern Commercial Services. 
</p>

<h3> July 2005 </h3>
	
<p>
Informetrics completes Marketing Focus magazine, due out August 2005. Watch for it and more information. 
</p>

</div>

Then you access these elements in your CSS like this:

#news h3 {
styles....
}

#news p {
styles...
}

rather than using a class for each element. This saves a lot of time and effort in the long run. It keeps your CSS a little cleaner and your markup a LOT cleaner.

are you kidding me? i've been ignoring those H3 and P tags for years and you want me to start using them again now?! geez...

very helpful on the markup, i do see a bit of a pattern I'll get into cleaning that up, it does make sense the way you've laid it out, thanks. I've always created a lot of individual pseudoclasses for text control, but it seems like using one class(?) for each main section is a lot cleaner.

I've been working on the relative positioning and have gotten things reasonably well laid out:
http://www.notdecaf.com/css/test05.html

what surprised me is that when i put a float: right on my nav_image class it actually reversed the order of the images...that was weird


KAIROSinteractive | tangent oriented

(Edited by Fig on 06-07-2006 23:46)

quote:

---

Fig said:

are you kidding me? i've been ignoring those H3 and P tags for years and you want me to start using them again now?! geez...

---

Don't make us take you out back...

quote:

---

Fig said:

I've been working on the relative positioning

---

Hate to sound like a borken record, but - forget about positioning period! Get every line that says "position:" or "top:" or "left:" out of there. ALL of them!
It's tough at first...I know. I remember. But it will be ok, trust me

quote:

---

Fig said:

what surprised me is that when i put a float: right on my nav_image class it actually reversed the order of the images...that was weird

---

When you float something right, the floated element must preceed the content that it will float on. For the most part, I avoid float:right; except in cases of floating an image to the right of text. For column layout, a series of left floated boxes works best in most cases.

quote:

---

Blaise said:

That Notepad++ looks pretty good, it even has CSS Auto-Completion, have you tried this out, is it any good?

---

I use it as my main code editor these days, and I'm quite pleased with it.

Fig: Really now, if you can't wean yourself off the positioning drug, we may have to resort to shock therapy...


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

I really totally missed the "no" part of no positioning last time around...i saw no top and no left but the no positioning at all part just didn't register I'm sure my boss is thrilled me spending a few days doing this but it looks like it's time to experiment sans positioning...

*heads off into wild blue yonder, avoiding car battery inmates are anxiously holding*


KAIROSinteractive | tangent oriented