Re: [css-d] was look with a PC now: HELP

[Terri Chicko]

WOW David.. that is very helpful.
I'm still very new at CSS. Could someone please look at it and tell  
me where I've gone wrong. The Mac stuff is OK... the space between  
the content div & footer is too long. Suppose to butt up. But the Win  
IE, Opera, and seamonkey?? never heard of that one, are really bad.

Pulling hair out now.
Thank
Terri


> On Apr 16, 2006, at 6:19 PM, ~davidLaakso wrote:
>
>> Terri Chicko wrote:
>>> I just need a quick look to see if this site is blown out of the
>>> water on a PC.
>>> http://www.jungle-tamer.com/
>>> Terri
>>>
>> Some PC captures.
>> 
>> Linux SeaMonkey-- 24px min-font size.
>> 
>> Linux Opera
>> 
>> Regards,
>> ~davidLaakso
>>
>> -- 
>>
>> Typography exists to honor content.
>> --Robert Bringhurst
>> 
>>
>> _ 
>> _
>> css-discuss [EMAIL PROTECTED]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> Terri Chicko
> [EMAIL PROTECTED]
> Illustration, Graphics and Web Design
> www.chickoart.com
> www.salishwinds.com
> www.the-point-casino.com
>
>
>

Terri Chicko
[EMAIL PROTECTED]
Illustration, Graphics and Web Design
www.chickoart.com
www.salishwinds.com
www.the-point-casino.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[~davidLaakso]

Terri Chicko wrote:
> I'm still very new at CSS. Could someone please look at it and tell  
> me where I've gone wrong]
> Terri
>   
Re:http://www.jungle-tamer.com/
Terri, I can't even fix my own stuff. But, there are people on this list 
who can fix anything. I hope one will come along and help out. In the 
meantime, I can, if nothing else, offer some simple advice from my 
personal experience.

Start with a layout that is known to work cross-browser, and plug your 
content into it. Avoid absolute positioning, and setting heights on any 
container. Going off into strange and weird tangents that are known to 
be problematic is always just that. Code to Opera, FF, and Safari. Check 
in on Win/IE from time to time. When you view your work, do so at 800, 
1024, and 1280. Set the fonts using percent so they'll scale in IE. A 
decent layout, and its contents will hold, without breaking or 
overlapping, at 200% zoom with the content p at default(100%).

Simple things that work are far better than complex concepts that fail.

These are some layouts you might consider. There are zillions more.



Regards,
~davidLaakso
Tidy Online and the Wiki are your friends. Use them often.


>
>   
>
>   


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[Terri Chicko]

Wow David that was the best, easiest explanation I've ever heard for  
css! So basic, yet s valuable. I've spent the entire day revising  
this page. Using % for everything.

It looks OK in Mac browsers, except the footer. That just won't move  
up. I fix that then everything else brakes.

Would you or someone else please look in Windows for me to see if  
it's still a disaster.
Fingers crossed.
Thanks
Terri


On Apr 17, 2006, at 6:28 PM, ~davidLaakso wrote:

> Terri Chicko wrote:
>> I'm still very new at CSS. Could someone please look at it and tell
>> me where I've gone wrong]
>> Terri
>>
> Re:http://www.jungle-tamer.com/
> Terri, I can't even fix my own stuff. But, there are people on this  
> list
> who can fix anything. I hope one will come along and help out. In the
> meantime, I can, if nothing else, offer some simple advice from my
> personal experience.
>
> Start with a layout that is known to work cross-browser, and plug your
> content into it. Avoid absolute positioning, and setting heights on  
> any
> container. Going off into strange and weird tangents that are known to
> be problematic is always just that. Code to Opera, FF, and Safari.  
> Check
> in on Win/IE from time to time. When you view your work, do so at 800,
> 1024, and 1280. Set the fonts using percent so they'll scale in IE. A
> decent layout, and its contents will hold, without breaking or
> overlapping, at 200% zoom with the content p at default(100%).
>
> Simple things that work are far better than complex concepts that  
> fail.
>
> These are some layouts you might consider. There are zillions more.
> 
> 
>
> Regards,
> ~davidLaakso
> Tidy Online and the Wiki are your friends. Use them often.
>
>
>>
>>
>>
>>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Terri Chicko
[EMAIL PROTECTED]
Illustration, Graphics and Web Design
www.chickoart.com
www.salishwinds.com
www.the-point-casino.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[~davidLaakso]

Terri Chicko wrote:
> Would you or someone else please look in Windows for me to see if it's still 
> a disaster.
>   
re:
IE does not support min/max width or positon: fixed.
> Fingers crossed.
>   
Do a /simple/ page and you will not have to cross your fingers.
> Thanks
> Terri
>   
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[Terri Chicko]

Your funny. I've done a few simple sites. I would really like to get  
this to work.
SO.. If the contact isn't appearing Fixed in Win IE, than what is it  
doing?
I don't think I use min/max width anywhere. I will double check though.

Thanks
Terri

On Apr 18, 2006, at 6:19 PM, ~davidLaakso wrote:

> Terri Chicko wrote:
>> Would you or someone else please look in Windows for me to see if  
>> it's still a disaster.
>>
> re:
> IE does not support min/max width or positon: fixed.
>> Fingers crossed.
>>
> Do a /simple/ page and you will not have to cross your fingers.
>> Thanks
>> Terri
>>
> Regards,
> ~davidLaakso

Terri Chicko
[EMAIL PROTECTED]
Illustration, Graphics and Web Design
www.chickoart.com
www.salishwinds.com
www.the-point-casino.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[~davidLaakso]

Terri Chicko wrote:
> Your funny. I've done a few simple sites. I would really like to get  
> this to work.
>   
So would I. But I'm still trying to get simple stuff to work. And I'm 
not having much luck at that, either. Maybe you could help me?
> SO.. If the contact isn't appearing Fixed in Win IE, than what is it  
> doing?
>   
Your uri is: re:8 captures:

>
> Terri

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[Gunlaug Sørtun]

> 

>> SO.. If the contact isn't appearing Fixed in Win IE, than what is 
>> it doing?

It is scrolling with the page. Since IE/win (prior to IE7) doesn't
understand 'position: fixed' for elements, it's the 'float: left' that's
working in that browser. That's also part of the other
positioning-problems in IE/win, since a float occupy space.


1: the big gap above the footer in all browsers is caused by...

#content {position: relative; top: -230px;}

Since relative positioned elements that are offset leaves the space the
element occupied open, that rule leaves 230p space below #content, above
footer.

Solution: don't offset using position: relative, but use margin-top instead.

2: IE6 will see #contact's dimensions, since it isn't removed from the
flow by 'position: fixed' like in other browsers. IE6 will also react on
it while re-rendering when any link is hovered, which causes #content to
jump its margin-left width to the right.

Solution: use negative margin-bottom to remove #contact's height, and
set margin-left on #content to zero for IE/win only.

3: margin-doubling bug in IE/win on #pacific-nw.

Solution, add 'display: inline:' to #pacific-nw.

---

I don't care much for having to explain every little detail, so here's
the test-page I've used.

Doctype corrected, source-code cleaned up and validation checked.
I have left the CSS pretty much as it were but for the necessary
changes/additions.
Tested in Opera 9tp2, Firefox 1.5.0.2 and IE6.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[Terri Chicko]

Wow, Thank you Georg,

I applied everything that I understood. Which was most of it. I  
really appreciate the how to, with the why. I'm trying to get the big  
picture.

However I still have 2 issues that I can tell. I removed the html  
background color, and don't know how to replace it with css. So there  
is a big with strip across the top.

Then I have the same issue in Win that the  now unfixed #contact is  
pushing over the #content div to far to the right. I didn't really  
understand your instructions about this. Could you use small words in  
BIG type : )

Thank you so much
Terri


On Apr 18, 2006, at 8:47 PM, Gunlaug Sørtun wrote:

>> 
>
>>> SO.. If the contact isn't appearing Fixed in Win IE, than what is  
>>> it doing?
>
> It is scrolling with the page. Since IE/win (prior to IE7) doesn't
> understand 'position: fixed' for elements, it's the 'float: left'  
> that's
> working in that browser. That's also part of the other
> positioning-problems in IE/win, since a float occupy space.
>
>
> 1: the big gap above the footer in all browsers is caused by...
>
> #content {position: relative; top: -230px;}
>
> Since relative positioned elements that are offset leaves the space  
> the
> element occupied open, that rule leaves 230p space below #content,  
> above
> footer.
>
> Solution: don't offset using position: relative, but use margin-top  
> instead.
>
> 2: IE6 will see #contact's dimensions, since it isn't removed from the
> flow by 'position: fixed' like in other browsers. IE6 will also  
> react on
> it while re-rendering when any link is hovered, which causes  
> #content to
> jump its margin-left width to the right.
>
> Solution: use negative margin-bottom to remove #contact's height, and
> set margin-left on #content to zero for IE/win only.
>
> 3: margin-doubling bug in IE/win on #pacific-nw.
>
> Solution, add 'display: inline:' to #pacific-nw.
>
> ---
>
> I don't care much for having to explain every little detail, so here's
> the test-page I've used.
> 
> Doctype corrected, source-code cleaned up and validation checked.
> I have left the CSS pretty much as it were but for the necessary
> changes/additions.
> Tested in Opera 9tp2, Firefox 1.5.0.2 and IE6.
>
> regards
>   Georg
> -- 
> http://www.gunlaug.no

Terri Chicko
[EMAIL PROTECTED]
Illustration, Graphics and Web Design
www.chickoart.com
www.salishwinds.com
www.the-point-casino.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[Gunlaug Sørtun]

Terri Chicko wrote:
> I applied everything that I understood. Which was most of it. I 
> really appreciate the how to, with the why. I'm trying to get the big
>  picture.

Getting closer :-)

> However I still have 2 issues that I can tell. I removed the html 
> background color, and don't know how to replace it with css. So there
>  is a big with strip across the top.

1: remove margins/paddings from body...

body {margin: 0; padding: 0;}

...and I think it'll be ok.

2: you may also add styles to the html element. For instance...

html { background-color: #482c00;}

> Then I have the same issue in Win that the  now unfixed #contact is 
> pushing over the #content div to far to the right. I didn't really 
> understand your instructions about this. Could you use small words in
> BIG type : )

Hmmm... ok.

Look at my styles again. When this...

* html #content {margin-left: 0/* new */;}

...is placed in your styles after/below the ordinary #content styles, it
will tell IE only to zero out that margin. IE will then adjust to the
actual width of #content, and stop fooling around with two sets of
distances/margins to the left which it seems unable to make up its mind
about.

---

Generally:

There are a lot of unnecessary styles still in there. It is not
necessary to write 'visibility: visible;' unless you have hidden
something with another set of styles earlier. 'visibility: visible;' is
the default for all elements in all browsers.

It is also not necessary to define the same font-family declaration over
and over again for each text-carrying element. If the same is used in
the entire page, then set it once, on body, and you're done.

If you need font variations; set those on the chosen element(s) only.
You can also set such styles on a container, and they will affect all
elements in that container - unless an element in there is given its
own, specific, style.

---

Validator warnings and other issues:

Warnings from the validator are just warnings. The validator can't check
everything, so it is telling you to do so yourself. Make sure such
things as "no background-color..." are not creating problems - for
instance if some visitor turns 'images off' in their browser, and forget
the warning.

BTW: it looks like something _is_ missing if I turn 'images off', as I
can no longer see what the header says. In fact, I can't see a header at
all :-)
You should rethink that point, and provide some kind of headline-text
for such unlikely visitors. That will of course also help a bit if I
should visit that site with Lynx.

The same goes for the empty alt-attribute on images. If those images are
informative, then it would be nice if text-only surfers also could get a
few, informative, words. As short as possible, and as informative as
possible.

You can test your page/site in text-only browsers by visiting...


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[Terri Chicko]

Thank you Georg very much,

Though every time I change something, something else breaks, now the  
footer is floating up in Win IE.

On Apr 19, 2006, at 2:15 PM, Gunlaug Sørtun wrote:
> 1: remove margins/paddings from body...
>
> body {margin: 0; padding: 0;}
That worked!

> 2: you may also add styles to the html element. For instance...

> html { background-color: #482c00;}
Thanks!

>
> * html #content {margin-left: 0/* new */;}
Because I removed the contact div, The content div moves all the way  
left in PC IE with this code.
I used * html #content {margin-left: 20%/* new */;} it seems to work,  
though not that stable.

> It is not necessary to write 'visibility: visible
Gone

> It is also not necessary to define the same font-family declaration  
> over
> and over again for each text-carrying element.

reduced.

Ok all that done, I can't cope with adding in the headline text right  
now. I haven't worked on the text, SEO or any of that, just need to  
get the design to hold still for a minute : )


> regards
>   Georg
> -- 
> http://www.gunlaug.no

Terri Chicko
[EMAIL PROTECTED]
Illustration, Graphics and Web Design
www.chickoart.com
www.salishwinds.com
www.the-point-casino.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] was look with a PC now: HELP

[Gunlaug Sørtun]

Terri Chicko wrote:
> Thank you Georg very much,
> 
> Though every time I change something, something else breaks, now the 
> footer is floating up in Win IE.

See below.

> On Apr 19, 2006, at 2:15 PM, Gunlaug Sørtun wrote:
> 
>> 1: remove margins/paddings from body...

>> 2: you may also add styles to the html element. For instance...

Note that you don't _have_ to put any styles on the html element.

body {margin: 0; padding: 0; background-color: #482c00;}

...is what you need, and...

body { margin: 0; padding: 0; background-color: #482c00; font-family:
georgia, serif; }

...is what I would use.

>> * html #content {margin-left: 0/* new */;}
> 
> Because I removed the contact div, The content div moves all the way 
> left in PC IE with this code.

Removing something as essential as that is bound to create problems in
IE/win.
Once again; look at the example I created. I made changes to solve
problems - I didn't remove anything essential.

> I used * html #content {margin-left: 20%/* new */;} it seems to work,
>  though not that stable.

No surprise... :-)

Looking at what you've got up now, and there are clear signs that you
are using the 'trial and error' method based on what you see on screen
in single browsers. That's what I regard as 'the quick route to complete
disaster', and not one that I will help you - or anyone else, to follow.

You should go back quite a few steps, and try to make sense of what you
had. The closest thing is still the example I created...

...which is now updated with cross-browser fine-tuning and a more or
less complete CSS clean-up. Lost quite a bit of weight :-)
The source-code line-up is HTMLTidy's doing - on my ordinary settings.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/