Topic: ok css gurus... (background colors) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28042" title="Pages that link to Topic: ok css gurus... (background colors)" rel="nofollow" >Topic: ok css gurus... (background colors)\

 
Author Thread
Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-06-2006 20:20 Edit Quote

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

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-06-2006 20:44 Edit Quote

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

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-06-2006 20:50 Edit Quote

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-06-2006 21:06 Edit Quote

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.

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-06-2006 21:26 Edit Quote

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

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 06-06-2006 23:19 Edit Quote

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

parent child is heirarchical:

code:
parent_open
    child_open
    child_close
parent_close



any tag encased inside another is a child of it

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-07-2006 00:03 Edit Quote

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-07-2006 05:40 Edit Quote

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.

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-07-2006 06:05 Edit Quote

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

divinechaos
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 06-07-2006 09:43 Edit Quote

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

Cheers,
DC

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 06-07-2006 10:47 Edit Quote

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

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 06-07-2006 11:27 Edit Quote

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)

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 06-07-2006 13:12 Edit Quote

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

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-07-2006 17:41 Edit Quote

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)

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-07-2006 18:48 Edit Quote

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)

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-07-2006 20:59 Edit Quote

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 -

code:
<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:

code:
<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:

code:
#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.

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-07-2006 23:22 Edit Quote

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)

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 06-08-2006 00:50 Edit Quote
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.

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 06-08-2006 09:55 Edit Quote
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

Fig
Paranoid (IV) Mad Scientist

From: Houston, TX, USA
Insane since: Apr 2000

IP logged posted posted 06-08-2006 16:20 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu