Re: [css-d] desktop/mobile

[Chris Akins]

On Mon, Dec 27, 2010 at 9:00 AM, David Laakso
wrote:

> 
> Comments and suggestions appreciated.
>
>
>
>From a user experience standpoint, once I click to show/hide details, I'd
prefer it remember that setting for next/previous images.  It doesn't seem
as user friendly to me to have to keep clicking to advance images then
clicking again on every one in order to see the info.

Probably personal preference, but . . .

Christopher A.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating images - understanding the details

[Chris Akins]

On Wed, Aug 18, 2010 at 8:26 AM, Keith Purtell <
keithpurt...@keithpurtell.com> wrote:

>
>
> Finally, I need the images to indent 140 pixels like the text. Easy?
>

Not trying to assume, but based on your link, it looks like you may be
wanting ALL content in the cream colored area to be 140px from the left,
thus reserving the brown column for other stuff.  In this case, rather than
putting margins or padding on each and every element type that might show up
in that content area (paragraphs, images, lists, etc. ) I think a more
streamlined approach would be to put a wrapper div around all that content
and use a margin-left: 140px; to shift that whole div over.  Then everything
inside that div comes along for the ride.




paragraph of interesting stuff
paragraph of interesting stuff
paragraph of interesting stuff
more content of various types


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Controlling image placement with CSS

[Chris Akins]

On Sun, Aug 15, 2010 at 10:35 PM, Keith Purtell <
keithpurt...@keithpurtell.com> wrote:

> I want to diagnose problems on this page. One at a time; I don't want
> all the answers to every flaw you see ... I want to work and try to
> figure out most of this myself. Please ignore the attempted fly-out
> navigation links at top left for now (I'm looking at this in FireFox by
> the way).
>
> What about my images? You can see how I handled them years ago; putting
> them in boxes so text would flow around them. I turned on the borders so
> you could see that. Obviously they are not indenting 140 pixels like the
> text. I tried placed the first image/table inline the paragraph, but
> that obviously failed. Comments? I'm still reading Eric Meyer's book
> ("Cascading Style Sheets/The Definitive Guide"): Maybe I just need a
> pointer to the right chapter?
>
> http://www.keithpurtell.com/kthings/a_body_vance_divs.htm
>
> - Keith Purtell
>
>
Well - in general, you can take the images within the content area out of
the table and use floats instead. An example with the first image would be
to put this code just before the first  tag:



I wrote it with the inline style just so you could see what it does.
Normally, you'd take that out and put in your stylesheet and probably
call that rule by applying
a class to the image. Something like:



Then in the stylesheet you'd have an entry such as:

.floatL {float:left;}

You could do the same for float:right.


And, you can wrap your image with the  tag too.  But it's always
easier to practice with as little extra stuff as possible.

By the way - I noticed you had the same "pindent" class on every
paragraph.  If you are, in fact, going to use that on every single
paragraph, then you can just
write a rule in your external stylesheet and apply to every  using
either margins or padding.  Maybe something like: p
{margin-left:20px;}

That's just an example.

Chris A.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Mobile Stylesheets vs. Mobile Optimized Sites

[Chris Akins]

Our organization is wanting to start down the road of making some of our
applications and content more mobile device friendly.  I've spent the
morning Googling the subject of mobile or handheld stylesheets and mobile
optimized content by serving up a separate site for handheld devices.  Most
of the articles I'm finding, though, are 2-3 years old.

My question is this: As of 2010, should I be more focused on serving up
handheld stylesheets or approaching the mobile devices in another manner?
Any current best practice articles regarding styling for mobile devices that
someone can point me to?

Thanks for any advice.

Chris Akins
Web Coordinator
City of Springfield, MO
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] navigation link a different colour when page is active

[Chris Akins]

On Mon, Aug 2, 2010 at 7:28 AM, Beth Lee  wrote:

> On Mon, Aug 2, 2010 at 6:01 AM, Shortie Designs
>  wrote:
> > Sorry - my original email was unclear - I"m trying to make the current
> page
> > in the navigation bar appear active - so when you are on the page - the
> name
> > of it will appear in different colour font in the navigation bar - this
> way
> > the user knows they they are on the 'home' or 'about us' page.
>
> Add to the css:
>.current {rules differentiating the current-page link}
>
> On each page, add class="current" to the navigation link for that page.
>
> Regards,
>
> Beth Lee
> www.bethleedesign.com
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


Here's a few examples of what Beth is talking about.  We used just this
approach in our City website:

http://www.springfieldmo.gov/brownfields/index.html
http://www.springfieldmo.gov/planning/minority.html
http://www.springfieldmo.gov/planning/homeama.html

If you study the markup of the left navigation list (and the CSS), you'll
discover the use of classes such as ".currentPage", ".afterCurrent", etc.
that add indicators to the list of what page you're on.  Multiple classes
are used on some items to style various elements of the background image,
text, etc.

Hope this helps.  Looking "under the hood" of other sites is one of the best
ways to learn various techniques, I think.

Chris Akins
Web Coordinator
City of Springfield, MO
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I need a good scripted font

[Chris Akins]

On Wed, Jul 14, 2010 at 1:52 PM, Andy B.  wrote:

> www.eternityrecords.org/private/
>
> In the top left corner of the page are the words "Eternity Records" set in
> 1.5em font size. 2 questions:
>
> 1. Does it appear to fit well in any of your browsers for the size it has
> to
> fit in (298px wide and 75px high)?
> 2. I need a scripted font (some sort of nice professional and easily
> readable font for it). Any ideas on what to use? I would also need a
> generic
> font family to use in case the browser doesn't have that particular font.
> Something in scripted font if possible.
>

I'm not an admin, nor do I play one on TV . . . but just a friendly
suggestion that this list is about CSS.  Seems this question is a question
of design.  Perhaps a more general graphic or web design forum would be the
appropriate place for it?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Print Stylesheet Disaster in IE (what else)

[Chris Akins]

I'm at my wits end over a print stylesheeet that works fine with Firefox and
Safari (Mac), but isn't giving what IE wants.  This is my first
print-specific stylesheet, and the over site structure happens to have a
bunch of complex CSS.  I think that's the core of the issue.  But I must get
the site printing correctly for our large gov't organization.  I had no idea
a "simple" print stylesheet would be this much headache!  Arrgghh!

In IE 6/7 the first page will print, then an almost blank second page, save
for a footer.  I came across a web page talking about this very thing,
suggesting making parent elements of nested block elements into inline
elements.  <
http://www.bennadel.com/blog/851-Fixing-DIVs-That-Cause-Content-Truncation-When-Printing.htm
>

I've tried this and much more.  But still no luck.  In fact, you can see all
my experiments here:
www.springfieldmo.gov/calendar/
www.springfieldmo.gov/css/print.css
www.springfieldmo.gov/css/reset.css
www.springfieldmo.gov/css/3col.css

I'd hate to be forced to jump out my 4th floor window over Internet
Exploder. :-)

Thanks for any help.

Christopher Akins
Web Coordinator
City of Springfield, MO
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS Sprites, Image Replacement, or Just Images?

[Chris Akins]

Hello all -

Just looking for some expert advice for how to approach one part of a new
project.  The following jpg comp is all that exists yet, as I'm just now
building out the site and would like to know how to proceed on the 3 main
headings/choice options on the page.

http://www.springfieldmo.gov/strategicplan/images/concept.jpg

The 3 headings that are "listen" "create" and "embark" are image based.  I
had originally thought of using one image and a CSS sprite approach to show
the part for each heading that is needed. But then I got to thinking that
each of these really should be treated as an h2 header.  I've never done any
CSS image replacement, but wondered what the prevailing ideas on here would
be as to how to treat this issue?

- simple, stand alone images
- h2 tags with image replacement, and if so, what's considered the current,
best method
- CSS sprite
- h2 tags w/ images as backgrounds (this would negate the use of the font,
which I do like)
- something else I haven't thought of

Thanks for some advice in advance.

Christopher Akins
Web Coordinator
City of Springfield, MO
www.springfieldmo.gov
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE Having Trouble With Print Stylesheet

[Chris Akins]

So, I’m well behind the times, but adding a print stylesheet to our
website for the first time.

My test page is:

www.springfieldmo.gov/charter/article10b.html

The print stylesheet is:

www.springfieldmo.gov/css/print.css

You can see the last couple lines commented out where I tried the
"fix" that I found at the link below.

Layout stylesheet is:

www.springfieldmo.gov/css/3col.css

It was really quite painless to do . . . until I checked it in
Internet Exploder, that is.  For some reason, IE (6,7) is only
printing the first page, and truncating that one.  Not to mention the
margins are getting cut off in IE too.  The margins I can probably
fix.  But the lack of printing beyond the first page is turning out to
be something I can’t seem to fix.

I have been told that IE 8 does fine with it.  I don't have IE8 to
check. I also have found that IE7 will print it all if the print
setting is on "shrink to fit", but text is tiny then.  So that's not
really acceptable.

I came across the following page which sounded like just what I
needed, but to no avail.

http://www.bennadel.com/blog/851-Fixing-DIVs-That-Cause-Content-Truncation-When-Printing.htm

Anyone had this issue and know of a fix?

Any help is much appreciated.

Christopher Akins
Web Coordinator, City of Springfield, MO
www.springfieldmo.gov
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Repost of impossible question

[Chris Akins]

On Tue, Sep 29, 2009 at 1:58 PM, Theresa Mesa
 wrote:
> I'm going to try this again. I saw some replies this morning but
> hadn't read them yet, and was trying to delete only the emails I'd
> read in the Gmail interface. I was mistaken. I deleted the unread
> replies too. I'm so sorry!
>
> http://mdh-test.com/PV_web/index.shtml
> http://mdh-test.com/PV_web/pvg.css
>
> Sample image:
> http://mdh-test.com/compTextWrap.png
>
> I want it to look like the sample image above, so yes, I want that
> white space on the right. I want half the image to be in the text with
> the text wrapping around it, and the other half of the image hanging
> on the outside into the white space.
>
> I know there's a bunch of white space on top of the text, but I still
> have to put in navigation and the header, and I'll likely be changing
> the amount of margin on the top.
>
> I've played with margins, positioning, padding. I am clearly doing
> either something wrong or something that is not possible in CSS in
> conjunction with all the other parts of this site. I'm shooting for
> cross-browser compatibility, but if IE6 won't play, that's okay too.
> An inline image within the text is just fine. IE6 is already not going
> to play with my position:fixed element at the bottom.

I got something to work with just a  and .  It's shown at:

www.springfieldmo.gov/impossible.html

All styles are intentionally inline so you can see immediately what
they're attached to.

I will say, I've only tested this in Firefox IE, so I can't say if
Internet Exploder does right with it.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nav improvements?

[Chris Akins]

> I implemented your suggestions above (except for enclosing the UL element)
> and I am not seeing any difference with IE8 or FF3 on a PC.
>
> The main thing I'd really like to do is have the text "centered" vertically
> in the nav bar.
>
> - Greg

The page looks different than it did the other day.  I don't believe
your original post specified centering VERTICALLY.  The modifications
I made centered the unordered list horizontally.  Vertical centering
is more complex with CSS, and I'm not sure I have a solution for that
other than to play around with equal padding on the links.

But, like I said, the navigation on the page now looks completely
different than what I remember two days ago.  Looks fine in my Firefox
on the Mac.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nav improvements?

[Chris Akins]

On Mon, Jul 6, 2009 at 2:22 PM, Greg Wilker wrote:
> Hello Everyone,
>
> I would like to improve the current top navigation with the following:
>
> 1. center text/links in middle of bar
>
> 2. narrow bar height
>
>
> However, I currently have been unable to do the first and when attempting
> the 2nd, it breaks the background image(s).
>
> any thoughts/help?
>
> http://www.achildsdream.com/htn/
>


With the current HTML and CSS, I made these modifications to the CSS
and got what you wanted (I think) in Firefox, Mac.  That's all I've
tested it in, but it might be a start:

#navMid {
background: url(/htn/graphics/nav_mid.gif) repeat-y;
padding: 0px 0px 0px 9px;
vertical-align: text-bottom;
}

#navMid ul {width:98%; margin:0 auto;}

Along with the above, I added a  just after
the closing  for the #navMid ul

Having said that, I think  you could get around having to add that
clearing element if you let the  ENCLOSE the ul
rather than be a separate element.  I haven't tested that, but I
believe it would work.  Then, just set the background image on #navTop
to be at the top with no-repeat.   I believe that should work.

The centering method is to specify a width less than 100% for the UL,
then to use the margin:0 auto; as in the modified CSS above.

Hope this helps some.

Chris
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Magical Disappearing Tabs - How to Get Them Back?

[Chris Akins]

> I would urge you to rethink how this page is being put together. The
> whole 'slices' approach to background images is very 'old skool'. You
> should look at getting your markup valid and semantic, then isolating
> the background images, borders required to achieve your design.

Can you clarify the above? In my mind, old school is table-based
design with sliced images.  CSS-based layouts with background images
for non-content visuals is the new way, right?  Is there a newer way
yet that's now the current standard? Many standards-based sites that I
visit use a variety of images, "slices" if you wish, as background
images on various elements.  CSS Zen Garden comes to mind as one such
site. I'm definitely open to knowing more about a better approach than
images attached as backgrounds if design is heading another direction.
 Do you have example sites of the newer methods?

I agree that this particular framework is a bit heavy on div's, and I
wish there was a way to do everything I want with a simpler structure.
 The interior pages that have rounded corners and have min/max width
are what's especially driving this structure which I found and
modified with much help from this list.  I truly wish for a simpler
page code, but I cut it every which way that I knew and didn't come up
with anything.

As mentioned, I'll look at the validation again. Many of these errors
come from the tabbed white box in the middle.  Removing that from the
page fixes many errors, but not the invisible main navigation tabs.

What's very odd to me is why they work on the interior pages, though,
and not on the homepage built from the same basic framework.  One
definite difference is that #wrapper1 does NOT have a negative margin
on the interior pages.  I'll have to re-think the way I'm applying the
shadow to the white tab space.  Looks like I'll have to find another
way.

Thanks for the tips on the places to check out in my coding.  My goal
is definitely to use strict for the doctype, so I'd rather fix
problems than change that part.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Magical Disappearing Tabs - How to Get Them Back?

[Chris Akins]

I'll look into the errors.  I try to always validate my code, and the
basic page we're using on this site has been validating.  I ran this
page through the validator the other day and saw many of the same
errors.  Several - probably most - are from a couple jsp include files
- files which I have no control over as far as the information that's
coming in from the respective databases.  I'll look again at the
coding that I do have control over and make sure to clean up all that
I can on my end.

On Fri, Jul 3, 2009 at 9:17 AM, David
Laakso wrote:
> Chris Akins wrote:
>>
>> The page with the tabs showing:
>>
>> http://www.springfieldmo.gov/newsite/traffic/
>>
>> The page with the tabs NOT showing - gone AWOL:
>>
>> http://www.springfieldmo.gov/newsite/tabs/home.jsp
>>
>>
>
>
> While unlikely to help finding the missing tabs,  validating the markup
> might be worthwhile...
> <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.springfieldmo.gov%2Fnewsite%2Ftabs%2Fhome.jsp%23page%3Dpage-1>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Magical Disappearing Tabs - How to Get Them Back?

[Chris Akins]

The page with the tabs showing:

http://www.springfieldmo.gov/newsite/traffic/

CSS:

http://www.springfieldmo.gov/newsite/css/reset.css
http://www.springfieldmo.gov/newsite/css/3col.css

The page with the tabs NOT showing - gone AWOL:

http://www.springfieldmo.gov/newsite/tabs/home.jsp

CSS:

http://www.springfieldmo.gov/newsite/css/reset.css
http://www.springfieldmo.gov/newsite/css/home.css
http://www.springfieldmo.gov/newsite/tabs/tabs.css (not really part of
the issue I don't think)

The issue - the main navigation tabs that show just fine in the first
page link above, don't show in the problem page.  The code is very
similar for the page overall, and the sprite-based tab code is nearly
identical. Yet the tabs don't appear.

However - the hover state of the tabs DO show in Firefox and Safari
when mousing over that area.  But even this doesn't happen in IE 6 or
7.  Don't have IE 8 yet to try that one.

The only real change I made to the home.css file regarding the #tabs
styling is the addition of the z-index in this line:

#tabs li {margin: 0; padding: 0; list-style: none; position: absolute;
top: -34px; z-index:5;}

This z-index was not in the #tabs li rule that drives the page(s) that
work.  But even the hover state wouldn't show without that addition.
So, it seems something is covering the tabs up, but I can't put my
finger on what it is.

Structurally, the things that are different between the homepage and
the interior pages don't seem that significant:

1) div id="crumbs"  removed from homepage
2) img class="deptBadge" moved up the page a bit (it's the random
photo in the upper right)
3) rounded corners and color taken off of the center content region,
that region moved up, and background image applied at the top of it
which is the shadow line just under the white strip where the tabs are
supposed to live

Another head scratcher for me, and probably an easy fix for those who
truly understand this stuff.  :-)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird "Jumping" Links

[Chris Akins]

>
> Glad it worked, as to the 'list of links' I would try removing your comment
> before the Doctype, I think it's throwing the IE 6 into the quirks mode
> which is causing the jump.


I removed the comment from before the doctype, and the IE jumping
links in the list now behave, though they have a slightly different
appearance on hover.  But I can live with that for sure.

Thanks for the tips from everyone.  It's now working as planned.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird "Jumping" Links

[Chris Akins]

On Fri, Jun 26, 2009 at 1:03 PM, Peter Abramowicz wrote:
> Chris Akins wrote:
>

>
> You could try this:
> ol#toc li a {padding-bottom:2px;}
> ol#toc li a:hover {padding-bottom:0;}


Hey - that worked for the top horizontal links!  With slight
modification, that is.  The ol#toc a already had a bottom padding of
3px declared here:

ol#toc a {padding: 0 0 3px 10px;}

So I just added the ol#toc a:hover {padding-bottom:0;}

I also had to add a padding-bottom: 3px; to the ol#toc li
a.active:hover rule so that one stays put.

Thanks for the tip.  So - now, how 'bout the list of links?  Anyone
got any ideas on why they jump around?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fwd: Weird "Jumping" Links

[Chris Akins]

-- Forwarded message --
From: Chris Akins 
Date: Fri, Jun 26, 2009 at 2:09 PM
Subject: Re: [css-d] Weird "Jumping" Links
To: David Laakso 


> The desired dotted line has not been deleted. Change it from white to a
> light gray it it will show.


True - but again the dotted line is now 3x larger than desired.  We
designer types sure are picky ain't we?  :-)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird "Jumping" Links

[Chris Akins]

> The correction for the horizontal nav bounce in IE/6/7/8 and Opera is:
> ol#toc a {    /*border-bottom: 1px dotted rgb(120,120,120);*/
> border-bottom: 3px dotted rgb(255,255,255);
> }
>


While it's true the jumping issue is fixed, it's also at the expense
of the desired dotted line which is now commented out.  I hope to find
a solution which doesn't delete that line.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Weird "Jumping" Links

[Chris Akins]

Ok - I've sifted my CSS and HTML with as fine a toothed comb as I
have, and still can't figure this one out.

Page with problem (IE only of course):

www.springfieldmo.gov/newsite/tabs/home.jsp

Page for comparison:
www.springfieldmo.gov/newsite/tabs/page.jsp


Associated CSS:

www.springfieldmo.gov/newsite/tabs/tabs.css
www.springfieldmo.gov/newsite/css/3col.css
www.springfieldmo.gov/newsite/css/reset.css

The issue is the jumping behaviour of the links in the white content
box in the middle of the page and the 5 main "page" links at the top
of the white box.  In IE, when mousing over those links, either the
links and background images move around or the content below the tab
links moves.

On the comparison page listed above, the movement doesn't occur in the
list of links, but only when mousing over the tab links.  This appears
to be an issue with the border width change on hover.  That much I
know.  What I don't know is how to fix it, short of using an image
instead of the border element.  This page doesn't use the '3col' CSS
file.

For the list of text links below the main choices I think I have it
narrowed down to some issue with the "3col.css" file interacting with
the "tabs.css" file.  This appears to be the case, because the
comparison page doesn't use the "3col" file and doesn't have the
issue.  With some judicious deleting sections of
code/uploading/testing of various parts of the "3col" CSS, it looks
like the offending portion is within the "special fixes" section of
the '3col' CSS.

But I don't know what to do with that knowledge.  Do I add something
to the 'tabs.css' file to match one of these fixes? I have no idea.

There are other pages, not using the white 'page within a page' box
that have no issues with links in lists.  An example is:

www.springfieldmo.gov/newsite/stormwater/developer.html
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] External Links

[Chris Akins]

I'm wanting to add indicators for links that leave our site.  A little
Googling included this info from MaxDesign:


I noticed the 2005 date of the article and just wondered if the info
presented is still considered a good method or is there something
better now?

I'd be open to any good examples you folks have of nice external link
style treatments.

Chris A.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Basic Float Issue with Surrounding Elements

[Chris Akins]

Ah!  After using floats all this time, I didn't realize that the
surrounding elements containing blocks were really living "under" the
float block, with just the visible content pushed out of the way.  The
"overflow" method works for the lists in my example, but not the
headline, as the headline is set out by a neg. margin.  Even applying
"overflow:hidden" to that element, it's still just lined up with the
paragraph below where they flow around the floated element.

Perhaps I need to rethink my overall margins and padding on the
various elements in my pages so I don't have to use the negative
margin on the headers.

Chris

On Fri, Feb 6, 2009 at 10:58 AM, Gunlaug Sørtun  wrote:
> Chris Akins wrote:
>
>> http://www.extraordinaryimage.com/marginTest.html
>
>> Is there not a way to retain the formatting of the elements that flow
>>  around the float?
>
> Sure. Establish a new 'block formatting context'[1], for example by
> applying...
>
> ul {margin:0 25px; overflow: hidden;}
>
> IE7 and older won't cooperate with lists, but IE8 and all others will do
> fine.
>
> regards
>Georg
>
> [1]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
> --
> http://www.gunlaug.no
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Basic Float Issue with Surrounding Elements

[Chris Akins]

And I thought I had come along way past this basic question.  :-(

My test page:

http://www.extraordinaryimage.com/marginTest.html

Why is it that the margins on my heading, paragraphs, and list
essentially disappear when next to the float, but are fine at the top
of the page?  Is there not a way to retain the formatting of the
elements that flow around the float?

Chris
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] How to Apply CSS to Title Tag

[Chris Akins]

Is the HTML title tag not capable of receiving CSS styles?  I'm
manipulating upper/lower case of some database data to make it more
readable.  The trick works everywhere but in the title tag.
Unfortunately, I can't include a link on this one because the page
isn't yet on a public server.

Thanks,

C. Akins
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Separate an underline from the text underlined

[Chris Akins]

On Thu, Nov 6, 2008 at 11:20 AM, Jukka K. Korpela <[EMAIL PROTECTED]> wrote:
> MEM wrote:

>
> You can however circumvent this by using a bottom border instead of an
> underline. This also lets you use different line styles, colors, and widths.
>
> On the downside, it might then be too far from the text. And although it is
> easy to make the distance larger, using padding-bottom, there's no direct
> way to make it smaller, unless I'm missing something. You would need
> auxiliary markup for reducing the distance.
>

I've used bottom borders AND underline on the "hover" state on this
test page.  Look at the center body content in the blue box. It might
be what you're looking for.

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE7 Ignoring Hover State

[Chris Akins]

Example page:

http://www.springfieldmo.gov/newsite/manager.html
http://www.springfieldmo.gov/newsite/reset.css
http://www.springfieldmo.gov/newsite/3col.css

The left hand navigation list should show a white background on hover
for all link items.  It does just that except for the last item
(class="last") in IE7 only.  In that browser, the hover state is
ignored.

I have traced the issue to this line in the reset.css:

.last a, .related .last a, .subNav {background-image:none;}

By saying I've traced it I simply mean that if I comment out that
line, the hover state re-appears.  Why would this be since that line
of code is only specifying background image?

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images on List Items

[Chris Akins]

> The page in question
> http://www.college-algebra.com/essays/toc_essays.html
> In FF the background images on the gray menu items appear exactly where I
> want them between the left border and the text.
> In IE7 they are almost completely hidden "under" the left border.
> How do I correct this?
>

I haven't looked at your code, but can probably help.  If you haven't
started by zeroing out your margins AND padding on your list elements
(ul, li, a tags) then explicitly setting them in your stylesheet
rules, you'll often run into what you're seeing.  It's the differences
between browser defaults in how they treat list items.  Some browsers
use padding, some margins for their default settings.  To counter
this, you must make it look at the settings you want your list
elements to have.

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: Background Image Problem ::

[Chris Akins]

I'm not sure I have the fix, but thought I'd point out a couple things
that might help:

HTML and CSS have validation errors.  There is a closing  tag in
the "billboard" div that doesn't appear to be opened anywhere.  That
might be the cause of some errors.

Also - in my IE6, the three promo images are on two lines, but in
Firefox they are all on the same line.  Would that have anything to do
with the form issue?

Chris A.

On Tue, Oct 21, 2008 at 11:08 AM, Amrinder <[EMAIL PROTECTED]> wrote:
> Hi!
>
> I am encountering strange bg image problem in IE6.
> Here at www.rgroup.in the text box saying 'Your name' (query form) is 
> overlapped by something which restricts to select it and all the four headers.
>
> Please help!
>
> Thx in advance
> Regards,
> Amrinder
> www.awayback.com
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Odd Jumping Behavior on Hover - IE Only of Course

[Chris Akins]

On Mon, Oct 20, 2008 at 5:06 PM, Alex Cole <[EMAIL PROTECTED]> wrote:
> Hi Chris,
>
> Could you possibly be more accurate under what conditions this happens?  I 
> just checked with IE6 and IE8 (as well as FF and Opera) and none of them seem 
> to display anything like the behaviour you are describing.
>
> Alex Cole

I'm not sure I can explain it any better than I already did.
Basically anything in the blueish purple content area shifts to the
left when the mouse goes over it.  Resizing the browser window resets
it, but it shifts again as soon as the cursor goes over the content
again.

I just tried it in a completely different location from work, thus a
different computer, with IE6 and it's the same thing here.

I fixed the validation errors in the thumbnail page, too, FWIW.  I'm
customizing a Photoshop, automated web gallery so it has our branding.
 It's the Photoshop templates that had the non-valid HTML in them.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text-Align:Center Not Completely Centered

[Chris Akins]

> On 10/18/08 at 2:10pThierry suggested this--
>
> Try this:
>
> .trC {position:absolute;right:0;}
>
>
> Did you try his suggestion?
> Either way, please bottom post. Thanks.
>
>

Yes I had tried it.  Position:absolute works everywhere except IE 6.
So, perhaps my best bet is to go with it and add another conditional
for IE6 in my page.  I already have one anyway.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Odd Jumping Behavior on Hover - IE Only of Course

[Chris Akins]

On these pages:

www.springfieldmo.gov/newSite/sfd/galleries/photo1/index.html
http://www.springfieldmo.gov/newSite/sfd/galleries/photo1/pages/BobCumley-1.html

In IE as soon as I over over any of the links (photo thumbnails or
text) in the content area, the content all shifts left several pixels,
but doesn't shift back when the cursor leaves the link.
There isn't a hover action that should be triggering this.

On the individual photo pages (second link above) it's even worse.
The mouseover a link makes the photo shift a bit, but even more
radically, the "next" arrow button jumps to the left toward the
"previous" button.  Just resizing the page will make it go back right,
but hovering again brings about the jumping action.

Anyone seen this kind of thing before?

Chris A.
City of Springfield, MO
Web Coordinator
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text-Align:Center Not Completely Centered

[Chris Akins]

Well - the clear:both mentioned above worked fairly well on everything
except IE 6 or 7.  What else should I have expected?  :-)  It blew the
rest of the page to smithereens in those browsers.

So I'm at a loss to know how to really get the content centered and
still not have a bunch of dead space at the top.

On Sat, Oct 18, 2008 at 11:22 AM, David Laakso
<[EMAIL PROTECTED]> wrote:
> Chris Akins wrote:
>>
>> While I did say "all I want" is the content to be centered.  I should
>> have added that I'd also like to NOT have the extra dead space above
>> the h1 tag that shows up with the "clear:both" on it
>>
>
>> But the amount of blank space above the heading now just doesn't look
>> right either.
>>
>> Hmm. . .
>>
>>
>>>
>>> Try:
>>> .textpadderC h1 {clear:both;margin: 0 0 20px 0;padding: 0;}
>>>
>>>
>
> Add lead beneath "Back to gallery thumbnails" until the block looks
> vertically and visually balanced? Or wait for someone else to provide a
> means to bring h1 tighter to the top of the block.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text-Align:Center Not Completely Centered

[Chris Akins]

While I did say "all I want" is the content to be centered.  I should
have added that I'd also like to NOT have the extra dead space above
the h1 tag that shows up with the "clear:both" on it.  I had looked at
putting a clearing statement on it earlier plus a negative top margin
thinking that would do it.  But to no avail.  I guess it can't clear
those elements AND be pulled back  up there.

But the amount of blank space above the heading now just doesn't look
right either.

Hmm. . .

> Try:
> .textpadderC h1 {clear:both;margin: 0 0 20px 0;padding: 0;}
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Text-Align:Center Not Completely Centered

[Chris Akins]

Page and CSS:

http://www.springfieldmo.gov/newSite/sfd/galleries/photo1/pages/BobCumley-1.html
http://www.springfieldmo.gov/newSite/css/gallery.css

There's also a reset.css file, but it doesn't have any positioning
info in it that should be pertinent.

On this page all I want is the content  in 
to be centered.  For some reason anything at the top of the page is
pushed to the left by 61px - the width of the following class:

.trC {
background-image: url(../images/midRndCrnr2.jpg);
background-position: 60px 0px;
width: 61px;
height: 60px;
float: right;
font-size: 0;
position:relative;
z-index:5;
}


If I remove this tag in the HTML -  - the
content centers like it should.  But with this span, no dice.  I can't
figure out why.

Thanks ahead for any input and/or solution.

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Website Browser issues and Coder??

[Chris Akins]

How does any of this have anything to do with this list's reason for existence?

On Tue, Oct 7, 2008 at 5:24 PM, Alexandru Dinulescu
<[EMAIL PROTECTED]> wrote:
> Hello.
>
> There are many people who are scammers and poor coders on RentACoder and
> people may be difficult with you HOWEVER
>
> Lets take it point it by point.
> 1) Yes your site may look different on your friends computer, also it may be
> because of her settings/ Operating System/Browser. Normally this should not
> have happened BUT those coders may have done a poor job on your project.
> 2) Since you are the client, every issue you say can be an issue, thats why
> it's RentAcoder, and for those are the messages. IF you do not agree on
> something you can just enter in an arbistration procedure and everything
> will be set by the Arbitrators (RAC employees)
> 3) It's your problem for paying them IN FRONT, RENT A CODER SPECIFICIALLY
> SAYS THAT YOU MUST NOT PAY ANYONE PRIOR TO WORK COMPLETION OR MILESTONE
> COMPLETION. If you did that then it's your fault and your fault only. And
> since they got yoru money they have no interest in doing it.
> 4) You had the power to stop all the things they did to you via the RAC
> arbitration process, which you should have done. Also it SAYS EXPLICITLY on
> RENT A CODER NEVER TO SEND MONEY THROUGH PAYPAL. thats why there are safe
> escroew systems in place. because things like this wont happen. This was
> YOUR fault for not reading all the rules, and frankly because you sent money
> through other means rather then a RAC escrow your account can be banned from
> Rent a Coder. As for calling the americans stupid, most americans are not
> fine attentive to detail and some are not very computer literate (especially
> those in their 30s-40s) which is normal however.
> 5) Asking for help without PAYING for your help is bullshit, why people
> should help you out when they have nothing to gain. just for helping sake.
> Time is Money.
>
> Proud Member and user of RentAcoder.com
> RAC 
> Profile
>
>
> --
> ---
> Alexandru Dinulescu
> Web Developer
> (X)HTML/CSS Specialist
>
>
> On Wed, Oct 8, 2008 at 12:37 AM, EDWARD F KELLEY
> <[EMAIL PROTECTED]>wrote:
>
>> Hello, I am new to this ground and fully understanding the coding world. I
>> hired coders through rentacoder.com, and they have been very difficult
>> with me.
>>
>> Several months ago I mentioned that my site looked different on my friends
>> computer. They told me that it was her computer settings and this was the
>> reason why and not to be concerned. Well time has gone on and come to find
>> out about 1/2 of all my friend can not view my site right. I mentioned this
>> concern again to the coders and they told me, that it was not an issue.
>>
>> I then found this response strange so I went online and found a site that
>> my site showed that my site was distorted on other browsers about 1/2 of the
>> time. So I then asked them to fix and they told me that they would not do
>> it.
>>
>> They have done many unethical things from holding me up for money (via
>> paypal) , they also asked for payment in full prior to the completion of the
>> site (by 1 month), missed deadline, forgot to mention holidays, office
>> closings, power outages, etc... something always is coming up so that they
>> can not work. And if I want them to I work had send more money through
>> paypal. Not to mention that they did not like that I was a women and always
>> called Americans stupid, meaning me I am sure??
>>
>> So what I am saying is that I have moved on from them, yet I still have
>> this browser issue and I need someone to help me.
>>
>> Please help I must have this work so that I can stay home with my disables
>> son. They knew this and this is why I think that I would do anything that
>> they would say; I know that it was not smart.
>>
>> Please email me at: kelleyfam3 at sbcglobal do net , if you can help.
>>
>> Thanks for any help! P.L.E.A.S.E.!!
>> __
>> css-discuss [EMAIL PROTECTED]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Support

Re: [css-d] Print version CSS questions... print hidden content?

[Chris Akins]

I've not used print style sheets before, but I believe you can just
set certain elements to display:none in  your screen stylesheet but
set those same elements to display:anotherValue for whatever the
element is.  So, if you were to put the content you want displayed on
screen in one div that always shows and put the other content in a div
with display:none for the screen stylesheet but display:block for the
print stylesheet, it ought to work.

If the articles are being pulled from a database, you can query for
1-n items which will go in the first, visible box, then the remaining
items (n+1 to the end) would go in the hidden box.

Hope this helps,

Chris A.

On Mon, Sep 29, 2008 at 3:10 PM, Karl Jacobs <[EMAIL PROTECTED]> wrote:
> Howdy,
>
> Had a hot project dump in my lap.
>
> We are going to eliminate the print version of an in-house newsletter,
> and taking it online. So I'll have a site for it, with a front page
> for it, that would hold the first paragraph or so of each article, and
> then click for more.  No problem there.
>
> The problem, I ALSO need a one-button print, that would print out the
> top 5-6 stories, plus some sidebar content.
>
> What I was considering doing was having the text of each article on
> the frontpage, but the containing div would only show the first
> paragraph or so.  The print CSS, however, would allow the full text to
> be seen and printed.
>
> Possible?..   Any ideas?..
>
> Been doing the google-search, but haven't found anything like this yet.
>
> Thanks...
>
> -- Karl
>
> __
> Karl W. Jacobs
> Supervisor - Web Communications
> The Aerospace Corporation
> 310.336.7345
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] and xhtml strict

[Chris Akins]

As luck would have it, I just researched this issue yesterday.  Not so
much the way your current code reads, but just how to style an 
with CSS in general.  The one I found which seems to work well on my
tests across Firefox, Safari, and Internet Exploder 6 and 7 is
something like:

hr
{border:1px solid rgb(203,204,220);
  border-width: 1px 0 0;
  clear: both;
  margin: 15px 15%;
  height: 0;
}

I've pretty much only copied and pasted this from a web tutuorial,
changed the specific colors to my own, and modified the margin values.
 I can't tell you why the clear:both and height:0 needs to be in
there.  I haven't tested it without those things.  Perhaps someone
here can shed some light on those details.

Hope this helps,

Chris A

On Fri, Sep 26, 2008 at 11:46 AM, Nancy Johnson <[EMAIL PROTECTED]> wrote:
> I am converting a site with an older doctype to xhtml strict, not live.
>
> Throughout the older site I have always used for a rule: 
> Although  seems to view  correctly in all browsers
> that we support using xhtml strict doesn't validate.
>
> I also tried this version and which also seems to view correctly, but
> doesn't validate
> 
>
> Adding height: 1px to css; seems to view correctly in IE browsers, but
> not correctly in mozilla or chrome.
> and you lose the noshade
>
> Borders instead of hr would only work in a few cases.
>
> Are there any other suggestions for alternatives?
>
> Thank you in advance
>
> Nancy
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS image question

[Chris Akins]

This is what I'm doing for my rounded corners on this page:

http://www.springfieldmo.gov/newsite/3col.html

One image of a full circle is needed for the four different quadrants
shown in the 4 corners.  One http request this way.
My main navigation tabs are similar in that they are CSS sprites. One
larger image holds all three states of the tabs: off, rollover, and
highlighted.  One image means fewer http requests and only one
instance of the image overhead for file structure.  Overall image size
for one large gif image like this is smaller than the 15 individual
images I would need for small sliced images.

Chris A.

On Mon, Sep 8, 2008 at 10:54 AM, Lou Hernsen <[EMAIL PROTECTED]> wrote:
> Thank you SOOO much!
> NOw I can put hurricanes & weather in my pirate game!
> Lou
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Best Practices for Targeted CSS via IE Conditional Comments

[Chris Akins]

Regarding CSS targeted to IE via conditional comments what is the
current consensus or is there one?

I would guess it's best to use the conditional just to link to an
external, IE-only stylesheet rather that including the IE styles in
the conditional comment itself for the same reason we do that with
better browsers.  Is this proper thinking?

Also - am I better served to round up any and all "* html" rules in my
CSS and throw them all in a separate IE-only stylesheet w/out the
hack, then call it in via the conditional comments?  What advantages
are there to this method other than the main stylesheet being cleaner?
 Any downsides?

Just trying to get all my ducks in a row, make things nice an tidy,
before soon rolling out new templates to other departmental web folks.

Lastly, can someone point me to a resource that will help me tear
apart and understand this type of construct:

#wrapper {width: 780px /* fallback value */;
width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
> 1260 ? "1200px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 820 ? "780px" : "95%"));

I understand parts of it but things like "document.compatMode &&
document.compatMode=='CSS1Compat'", etc. are not clicking that well
yet.  :-)  I'd like to eventually understand these types of things
enough to be able to write my own and not always have to copy and
paste something someone has sent me.

Thanks for all the great tips on here!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 Stacking Issue or Something Else?

[Chris Akins]

Well - drat.  :-(  I thought I had finally gotten a handle on the
nitpicky things.  Guess not.  :-)

I added the rules below to try and get maroon breadcrumbs bar to scale
with large text.  After upscaling the text about 3 sizes, the crumbs
start to disappear into the tan content area.  I was so focused on the
maroon bar sizing itself and extending to the right and left viewport
edge I didn't even notice the horizontal scrollbars.

I've taken those rules back out, but left the bottom padding in -
needed for IE to show the border on the hover state.

Thanks for the heads-up.


>> http://www.springfieldmo.gov/newSite/negMargin.html
>> http://www.springfieldmo.gov/newSite/negMargin.css
>>

>
> FWIW, this may eliminate the horizontal scroll bar you are drawing in all
> browsers:
>
> #crumbs {
> padding:0 20em .2em; <--- :: delete?
> margin:0 -20em; <--- :: delete?
> }
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 Stacking Issue or Something Else?

[Chris Akins]

Oops - sorry.  I took for granted that the whole thread would be
showing up, so I trimmed.  Over-trimmed I guess.  :-)

http://www.springfieldmo.gov/newSite/negMargin.html
http://www.springfieldmo.gov/newSite/negMargin.css

On Fri, Aug 29, 2008 at 2:16 PM, David Laakso
<[EMAIL PROTECTED]> wrote:
> Chris Akins wrote:
>>
>> The only thing that's not to my liking is the bottom shadow of the
>> bluish content box in IE6.  It gaps as some wide widths and sticks out
>> on the right on narrow widths.  I've tried everything I know, but to
>> no avail. I have half a mind to just leave it  IE7 does better with
>> it.
>>
>> Chris
>>
>>
>
>
> URL?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 Stacking Issue or Something Else?

[Chris Akins]

Ok - I put the IE-expressions in conditional comments in the HTML.
Everything validates on this file!  Thanks for the help once again,
list and Georg.

The only thing that's not to my liking is the bottom shadow of the
bluish content box in IE6.  It gaps as some wide widths and sticks out
on the right on narrow widths.  I've tried everything I know, but to
no avail. I have half a mind to just leave it  IE7 does better with
it.

Chris


> Maybe not such a bad idea to have an IE-expression in there in the mean
> time...
>
> 
>
> regards
>Georg
> --
> http://www.gunlaug.no
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 Stacking Issue or Something Else?

[Chris Akins]

Apologies if I was playing around with the stylesheet when you looked
at it, but "margin-left:200px" is already in the #content rules.  I
don't think I had modified that rule, but I've been trying quite a few
things in my efforts to understand what the issue is.

Adding the IE6-only specification below doesn't seem to add anything.
Am I missing something?  I did try it, though, and no dice.

Regards,

Chris

On Fri, Aug 22, 2008 at 3:53 PM, Thierry Koblentz <[EMAIL PROTECTED]> wrote:

>
> Try this:
>
> * html #content {margin-left:200px;}
>
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Trouble with line-height and overflow:hidden

[Chris Akins]

The issue (my opinion), isn't really one of CSS but of concept.

The short answer to what CSS can achieve is "yes" it can do its part
to get to a Photoshop design PROVIDED that design is really one for
the web and not for print or some other fixed medium.

Sounds like what you're up against is a design that isn't considering
what the web really is - a flexible medium that has elements you'll
never be able to control - user's resolution, preferred text size,
etc.  These variables pretty much dictate that if your content is
important at all, then your containers for that content should grow
and shrink with said content.

Setting up a container that's fixed in BOTH height and width is
failing to design for the web, in my opinion.  It's design for print.

So, to answer your question about approach:  "yes" my opinion is it's
the wrong approach since it's not taking into account the flexible
nature of the web."  Think as a web page first, then let your design
beautify what the web is.

As an example of my own struggles with a Photoshop design that I
thought would be impossible see what I'm finishing right now:

http://www.springfieldmo.gov/newSite/negMargin.html

It has been difficult, but this is a CSS-only design - no tables for
layout. It's probably not award winning, but it's reasonably complex
for a CSS-only site.  But it's nearly identical to the original
Photoshop design.

I, too, love exactness in my design, but I have learned that some
things MUST allow for the variables inherent in what the web is.

Good luck in the pursuit.  :-)

Christopher
Web Coordinator
City of Springfield, MO

On Fri, Aug 22, 2008 at 3:41 PM, Marcel Stör <[EMAIL PROTECTED]> wrote:
> What I need to achieve:
> A CMS template provides a fix-sized  (height and width are px-
> based) in which I need to display arbitrary text entered by the user.
> Hence, if the full text doesn't fit into the  it needs to be cut
> off i.e. invisible. So, the  style will contain overflow:hidden.
> However, since the last line of visible text in the  must not be
> cut off horizontally I need to tinker with the line-attribute, right?
>
> The inherited font-size for the  is 1em. I played around with
> the line-height value in 'em' until I could make sure that no pixel
> of the last visible line of text in the  is cut off. Then I
> switched browser/OS and got totally different results - line-heigths
> are always different.
>
> Am I using the wrong approach here? Is it even possible to achieve in
> CSS what the design folks require in their Photoshop layouts?
>
> Regards,
> Marcel
>
> --
> Marcel Stör, http://www.frightanic.com
> Blog: http://frightanic.wordpress.com
> Skype: marcelstoer
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE6 Stacking Issue or Something Else?

[Chris Akins]

Using a basic negative margins framework, I've modified to get almost
everything to work across browser/platform land except for our ol'
friend IE6.

http://www.springfieldmo.gov/newSite/negMargin.html
http://www.springfieldmo.gov/newSite/negMargin.css

In IE6 only, the Contact Us area in the left column won't snug right
up to the right-hand content column. Thus, the background border
shadow effect breaks.  View in a standards-compliant browser to see
what it should look like.

Is this one of the known IE6 issues?  If so, I can Google the issue if
someone just points me in the right direction.

Also, on the light purplish blue content area, the bottom shadow
border won't show in IE6 only.  Again, after trying to target various
things with CSS changes, I am left without answers.

All in all, I do prefer this negative margin layout over the one I was
using earlier. The file sizes are smaller on both the HTML and CSS,
and I can now put the source in any order. I had been using an
expression to do the min/max width for IE6, but I think at this point
I'll just forget that "feature" for IE6 and let it be.  With IE6
numbers starting to fall, it's only a matter of time.

Thanks in advance for more tips.

Chris A.
Web Coordinator
City of Springfield, MO
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] One Rounded Corner is Problematic

[Chris Akins]

Thanks to Gunlaug's suggestion to try this approach for my 2-column design:



I've ported my earlier attempt over to this - and quite easily (though
IE6 is totally messed up yet, and IE 7 has a couple quirks).

http://www.springfieldmo.gov/newSite/negMargin.html
http://www.springfieldmo.gov/newSite/negMargin.css

But focusing on one issue at a time, the one that is across all
browsers is the upper left rounded corner in the content area.  I'm
using only one image for all 4 corners to minimize server calls, but
it's making it difficult to get the text to be on top of that one
image.  I thought about applying a z-index through a class to the h1
tag (or to whatever else might be in that position), but this isn't a
great option when text is resized smaller.  The corner then ends up on
top of the text below the top heading.

Any ideas for getting the upper left rounded corner (.tlC) to live
below any content?

Now to try and figure out why in the world IE6 blows this apart ...

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 Problem Trying to Target a Specific Div

[Chris Akins]

I believe you must be some kind of genius!  :-)  Your "rough"
corrections always bring things right into line.  Not sure how you do
it so quickly.  But thanks.

In your opinion is there another solution to this design that would
work better? Not asking for you to do the development, but rather to
point me in a better direction if it exists.

What I liked about this framework that I found online was:

fixed width left column - though I'd prefer the source order to be
AFTER the main content
elastic main content area
min and max width for overall dimensions

Things really started getting messy, though, when I started applying
the rounded corners, shadow borders, etc. to the basic page.  Messy
enough that I don't really understand what some of the CSS code does.
Actually that was somewhat true of even the basic framework page.

This is going to be one of probably 3 template files which will drive
our new site, so I do want it to be as easy to work with and flexible
as possible. Thus, if a better method is possible I'd love to pursue
that.

Thanks again for your help with this.

Chris

On Wed, Aug 20, 2008 at 1:41 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Chris Akins wrote:
>
>> http://www.springfieldmo.gov/newSite/perfectFluid2col.html
>
> IE6 has severe stacking and 'hasLayout'-related problems with that
> design. See if this rough CSS correction fits the bill...
>
> <http://www.gunlaug.no/tos/alien/ca/test_08_0820.html>
> <http://www.gunlaug.no/tos/alien/ca/test_08_0820_files/perfectS.css>
>
> ...and extract the parts you need.
>
> regards
>Georg
> --
> http://www.gunlaug.no
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] positioning recommendations to duplicate mock-up?

[Chris Akins]

Didn't get this sent to the entire list the first time ...

Look at this modification of your mock-up that I've annotated and see
that this is a pretty simple layout, really.

http://www.springfieldmo.gov/images/cssExamples/mockup.gif

Three gif images that shouldn't be that large in file size should do
it.  If the horizontal dimensions are fixed, those would be very easy.
 For the vertical or horizontal images to accommodate varying
dimensions then you'd just create the background images to repeat at
some interval and use a css rule to apply repeat-x or repeat-y on
those backgrounds.

No actual borders were harmed in the creation of this web mock-up.

Hope that helps.  It's a rare day when I feel I can actually offer
something back to this list instead of always taking.  :-)

Chris A.

On Wed, Aug 20, 2008 at 9:21 AM, David Berg <[EMAIL PROTECTED]> wrote:

>
> Can anyone offer advice on how to get started with this?  What would
> the best way to create the roads be either straight or with the
> curves?  Can I create them without using graphics?
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE6 Problem Trying to Target a Specific Div

[Chris Akins]

Links to page and CSS in question:

http://www.springfieldmo.gov/newSite/perfectFluid2col.html
http://www.springfieldmo.gov/newSite/perfectStyle.css

The #round div has a couple margin issues in IE6 that I'm trying to
improve, but can't seem to get it to move at all.
The right hand margin should have a bit more space between it and the
edge of the tan background (view in a better browser to see), and the
left edge needs to move left a few pixels to line up the shadow (view
in better browser).

I can't seem to get #round to move at all in IE6. I'm attempting a " *
html" method, but #round refuses to move.  I've tried applying rules
to other divs without success, but can't see what I'm missing.

The page's HTML has one missing alt tag at the moment which causes
validation error and the CSS doesn't validate due to the expression on
#page-wrap. I'd actually love to know if there is a way to do this
page WITH valid CSS.  So I'm all ears on that one too.

Thanks to any and all who can help open my eyes.

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Trying to compact styling as much as possible

[Chris Akins]

With the code below, you've set the color of link text ONLY in
#seitenende and also ALL text in #footer and #pieddepage.

#footer, #pieddepage, #seitenende a:link{
  color: #999369;

}

To set links only in these three divs you'd need this as a first line:

#footer a:link, #pieddepage a:link, #seitenende a:link

I've often wished there was a way to compact that type of code more,
as maybe you were trying to do. But I don't believe there is.

Hope that helps.

Christopher


On Fri, Aug 15, 2008 at 9:19 AM, Rachel Mawhood <[EMAIL PROTECTED]> wrote:
> Hi List,
>
> I have been staring at this so long without solving it.  I'd be
> grateful for your help.  Why, with this styling, only the links on
> the seitendende div are styled correctly (on the others, footer and
> pieddepage, the adjacent ordinary text also goes the wrong colour -
> ie not black - and the link colours are wrong, blue and red, instead
> of yellow/browny shades).
>
> Thank you v. much in advance
> Rachel
>
> --
> #footer, #pieddepage, #seitenende  {
>   clear: both;
>   margin: 0;
>   padding: 0 0 3em 20em;
>   font-size: 70%;
>   height: 1%;
>   text-align: left;
> }
>
> #footer, #pieddepage, #seitenende a:link{
>   color: #999369;
>   font-weight: bold;
>   background-color: transparent;
>   text-decoration: none;
> }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Same Code Renders Differently

[Chris Akins]

Ok - I can't figure this one out.  Which isn't anything new, actually.  :-)

The top left rounded corner image on the light purple content area on
these two pages is coded the same, but on the first page below it
lives behind the  tag as it should.  On the second page, it's on
top.  I've looked at everything I can think of and tried many "fixes"
but to no avail.  Can anyone see what I'm missing?

http://www.springfieldmo.gov/newsite/jello.html
http://www.springfieldmo.gov/newsite/jello.css

AND

http://www.springfieldmo.gov/newsite/perfectfluid2col.html
http://www.springfieldmo.gov/newsite/perfectStyle.css

Both pages have more divs than I care for, but I'm not sure how to
reduce.  I'd also be open to any advice along those lines too.

Thanks for any input as always.

Christopher Akins
Web Coordinator
City of Springfield, MO
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Peer Review: Mockup/Template

[Chris Akins]

In FF 2.0 on my Mac the links at the very top of the page (upper
right) - login, register, etc. - are missing on their top edge.  I
didn't review the CSS at all, but it appears maybe they have a
negative top margin?  Whatever it is is taking their top edge right
out of the viewport.

Hope that helps.

Chris

On Mon, Aug 4, 2008 at 10:45 AM, Bill Brown <[EMAIL PROTECTED]> wrote:
> Hey folks,
>
> For a while now, most of my projects have been authentication-required
> deals, making it difficult to have anyone view/review them. I'm now
> working on the final stages of a website which isn't protected from
> public view and thought I'd check to see if anybody sees any problems.
>
> It's only the template as I'll be layering in the various modules over
> the next few days, but here's the basic template:
>
> http://www.researchstevemccurry.com/
>
> The links won't take you anywhere, but the tabs in the upper right will
> slide panels into view.
>
> If anybody has a second to take a look, I'm particularly interested in
> Mac rendering, since it's one of the systems I don't have here in my office.
>
> Thanks! ALL feedback is welcome.
> Bill
>
>
> --
> /**
>  * Bill Brown
>  * TheHolierGrail.com & MacNimble.com
>  * From dot concept...to dot com...since 1999.
>  ***/
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Big Blue Bar

[Chris Akins]

 On Thu, Jul 24, 2008 at 8:13 AM, Christopher <[EMAIL PROTECTED]> wrote:
>
> To everyone: It is #topbar that if you resize your browser it won't
> "hug" the right hand side of the browser.
>

As an FYI, #topbar DOES remain at the right edge of the viewport in
FF2 and Safari on Mac.

I've been hesitant to offer anything to this thread due to the extreme
vagueness of it most of the time. However, I will add a couple things
that will help any who are trying to read and analyze your CSS.  If
you are determined to write out rules longhand that have a shorthand
equivalent, then it's very nice to keep like items together.  I offer
this from your CSS as an example:

#gallerybox {
background-color: #FF;
border-right-width: 200px;
height: 300px;
margin-left: 135px;
margin-top: -35px;
border-left-width: 0px;
padding-left: 35px;
padding-right: 150px;
left: 40px;
border-top-width: 0px;

The rule above includes several border property:value pairs that are
sprinkled throughout the rule rather than being together. To me, this
is harder to wade through than putting the like properties together.
Even better, just use border-width: 0 200px 0 0 to accomplish the same
thing.  Or, yet another option is to just declare the one side that
has a border width unless the element you're applying the rule to has
a default border.  If not, there's no need for the '0' values.

As a side note, '0' values on anything don't require a unit (px, em,
%, etc).  0 is just 0.

Another small thing that can shrink your CSS.  Any hexadecimal numbers
(#ffccff or #003311) that have three pairs of identical numbers (ff cc
ff or 00 33 11 from the examples just given) can be reduced to a 3
digit version (#fcf or #031).

Shorthand notation is wonderful for shrinking CSS files!  Why use:

border-top-width: 2em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF;
border-right-color: #FF;
border-bottom-color: #FF;
border-left-color: #FF;

when you could use:

border: 2em solid #fff;

A reduced version of your current CSS for #flashbox would be:

#flashbox {
height: 410px;
width: 430px;
margin-left: 500px;
margin-top: 70px;
background: #000; /*removed the repeat property as there is no image
to repeat or not repeat */
z-index: 3;
position: relative;
padding: -12px 0 0 0;  /* note I left the -12px in, though padding
can't have negative values, only margins */
border: 2em solid #fff;
}

I think the consensus of those that have tried to help you is that
there are many basics that need to be learned first before really
proceeding very far.  So much basic CSS and HTML info is easy to find
online that will help you properly structure your documents if you
will only seclude yourself and study it some.  Only then will you be
able to really get out of a list like this what you need to without
making a thread quite laborious for the list.

That's not to say you have to be advanced to use a list like this.  By
no means!  I'm still learning a ton myself.  However, with little
basic understanding of general concepts it's hard to even formulate
the questions in such a way to get the desired answers.

One of the simplest requests throughout this thread which has yet gone
unheeded is to provide a static graphic comp of what it is you're
trying to achieve.  Do you have one?  A Photoshop file, a scanned hand
drawing, anything that shows the concept you're after?  if so, the
ones trying to help you would love to see it.

One final note - two of your images specified for that page are not
available on the server.  One is called "topbarfade4.png" and I don't
remember the other one.

Good luck with your project.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE/FF differences padding/margins etc

[Chris Akins]

First link doesn't work.

On Fri, Jul 18, 2008 at 8:30 AM, Pete Harrison <
[EMAIL PROTECTED]> wrote:

> I have taken over the development of a site
> (www.squremilenew.com/design2/n-index.asp css at
> www.squaremilenews.com/design2/sqn.css) which I need to tidy up.
>
> In FF, the DIV contentframe needs to be reduced width wise so that it lines
> up with the branding div, and in IE, branding needs to be increased to line
> up with the contentframe.
>
> Any ideas?
>
> Regards
> Pete
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] List Separator Issue on Hover

[Chris Akins]

If you look here you'll see that I have graphic separators on my left and
right navigation lists which look just like I want.

http://www.springfieldmo.gov/newsite/jello.html

Does anyone know the correct approach, or if it's possible without an
additional image, to correct for the comment below?  Essentially, I'd like
the hover color to only show up above the separator line so the graphic
separator still shows on mouse over.  If I mess with the height on the
"hover" then the menu jiggles around when moused over.

On 7/10/08 1:45 PM, "Gene"  wrote:

> It looks odd that in the left column the bottom line disappears when
> mousing over an item.



My CSS for the navigation list is:

/* local navigation column and link stylings*/

.navLocal ul, ul.related{margin:0; padding:0; list-style-type:none; }

ul.related {margin: 0 2px 0 -11px; }

.navLocal li a {background:url(images/localNavSeparator.gif) -18px 100%
no-repeat; }

.navLocal li a, ul.related li a {display:block; text-decoration:none;
color:rgb(87,49,16); padding:4px 8px 8px 10px;}

ul.related li a {padding-left: 21px;
background:url(images/localNavSeparator.gif) 50% 100% no-repeat;}

.navLocal li li a{display:block;
background:url(images/localNavSeparator.gif) 85% 100% no-repeat; padding:4px
8px 8px 20px; color:rgb(34,43,106);}

.navLocal a:hover, .related a:hover {text-decoration:underline;
background:#fff; }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] tags issue with Word Press

[Chris Akins]

Well - the div id differs on these two pages.  The  tag that looks like
you want it lives in a  with id="site_content".  The one that doesn't
look right lives in a  with id="content".

Otherwise, both are simple  tags.  The styling on those two div id's
must be the difference.

Chris A.

On Mon, Jul 14, 2008 at 7:42 AM, Jo <[EMAIL PROTECTED]> wrote:

> I have a website at www.radarresults.com.au where the h1 tags all look
> fine
> across all browsers. I just added a Word Press newsletter section to the
> site - www.radarresults.com.au/newsletters  and the h1 appears fine in IE,
> but in Firefox and Safari, it's over too far to the left and the background
> image isn't in correct position either.
>
> I'm sure I'm missing something stupid, but I've tried everything I can
> think
> of and can't seem to fix it.
>
> Anyone smarter than me? (I'm sure there's a long list!!)
>
> Joanne
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] image background question

[Chris Akins]

Two ideas:

1) a link please so we can see your page, check to see if there are other
issues not apparent in the snippet you provided, etc.  Possibly a path
problem to the image?  Any number of things could be the case when we
essentially can't see what you see.

2)  tags are inline elements. You might try "display:block;" on your
span.  Not sure.

On Wed, Jul 9, 2008 at 3:47 PM, Kelly Moore <[EMAIL PROTECTED]> wrote:

> trying to figure out how to use a small image (such as a fat arrow) as
> a background.  want to be able to re use the arrow and place different
> numbers over it. I've tried the following, but the arrow does not
> display:
>
> h3 span.arrow{
>height: 5px;
>width: 24px;
>margin: 10px;
>background-image: url(images/arrow.png);
>background-repeat: no-repeat;
> }
>
> 2. something here
>
> any ideas?
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] horizontal nav not placing correctly

[Chris Akins]

The tabs are still extending below the navigation area in Firefox 2 on the
Mac, OS X 10.4.11

Chris

On Wed, Jul 9, 2008 at 1:15 AM, Daniel Hammond <[EMAIL PROTECTED]>
wrote:

>
> Alright, I added {vertical-align:bottom}. Does this help any of you Mac
> users see it better where it was messing up before?
>
> Daniel
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering content - new user

[Chris Akins]

Good Morning,

It appears from your code that you're wanting the div26 to act as a wrapper
of sorts to hold and surround everything else.  If that's the case, then
that div really needs to surround everything in the HTML too.  The opening
div26 tag will start the page content, then all your header, navigation,
etc. goes in - probably using one of the approaches Mr. Laakso suggests,
then the closing div26 tag ends the content block.  This div26, when
centered using something like {margin:0 auto;} with a defined width will
then stay in the horizontal center of the page, taking all its interior
contents with it provided those individual content areas are not all
absolutely positioned.

One other note that you will find quite helpful I think is just a suggestion
to start a naming convention for your coding so that it's easy to edit your
pages.  I think you'll find that anyone trying to read and edit your code,
including yourself, will quickly go crazy trying to decipher div's that are
only named as arbitrary numbers, and other elements such as images that
aren't named for their function.  Before your site gets out of hand it would
be time well spent to start naming your divs for things that have meaning -
header, content, rightCol, leftCol, etc.  rather than div1, div2.  You'll
save yourself a ton of grief later by adopting best practices from the
foundation of your pages.

Good luck with the site.

Chris A.

On Sat, Jul 5, 2008 at 9:29 PM, Brian Gilbert <
[EMAIL PROTECTED]> wrote:

> Hi,
>
> I'm brand new to using CSS and could use some assistance.  What I am
> wanting
> to achieve is for the content of my webpage to stay centred with a drop
> shadow while the stretches when the browser window size is increased
> similar
> to http://www.macworld.com.au/.
>
> I'm creating a website at the moment and have put the rough pages up on
> http://www.nctd.com.au/
>
> You will see on the index page that the "apDiv26" displays about 10 pixels
> down from the top of the page even though I have set it to be 0 pixels in
> all of the settings that seem relevant.  I've tried using Absolute and
> Relative settings to "apDiv26" but it does not function in the way that I
> am
> looking for.  Any input appreciated to put me on the right track.
>
> Thanks,
> Brian Gilbert
> Perth Western Australia
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] form can't be placed where I want it

[Chris Akins]

Just as a tip - it's probably best to specify the "where you want it" part
of your question.   Since we don't know what's in your head or on your
sketch pad.  :-)

But I'm guessing you're just wanting it below the navbar.  I think you might
need to change the "register" div margin-top to just "top"  Since you've
declared that as absolutely placed, you then need to tell it where to be.
There is no placement info there except "absolute."  You need to give it a
"where."

I think that's what's going on.  Others on here can verify my thoughts or
dispel them.

Chris A.


On Mon, Jun 23, 2008 at 10:31 AM, jeroen vannevel <[EMAIL PROTECTED]>
wrote:

>
> hi,
>
> I can't find why my registering form can't be placed where I want it.
> does anyone has an idea?
>
> http://speedzor.com/register.php
>
> greetings,
> jeroen
>
> _
> Even niet achter je PC? Neem je Messenger mee op je gsm!
> http://www.windowslivemobile.msn.com/nl-be
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Bottom Padding Issue In IE6

[Chris Akins]

I'm getting so close to what I want on this redesign:

www.springfieldmo.gov/newsite/jello.html
www.springfieldmo.gov/newsite/jello.css

I can't figure out why the bottom padding on #crumbs seems to be moving
stuff around - only in IE6 that I can tell - when the text is resized.  If I
resize text up, the maroon bar starts overlapping the content area and the
round image badge in the upper right portion starts moving down then
completely falling to the page bottom if text gets large enough.

With text resize down, the round image just starts moving up into the header
further, breaking the visual lines.

Why does text resizing affect a padding that's set in pixels?

Thanks, as always, to the great minds on this list.

:-)

Chris Akins
Web Coordinator
City of Springfield, MO
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS & Tables

[Chris Akins]

I don't consider anything on that page to be tabular really. I think you
should go with CSS and no tables.

On Fri, Jun 13, 2008 at 1:59 PM, Juanita <[EMAIL PROTECTED]> wrote:

> Hi,
>
> We're redesigning our recently redesigned (1 year old) site from a 2
> column to a 3 column site.
>
> Here is the current site, www.kcsm.org in which the main content is
> database generated into tables, and then the tables are styled with CSS.
>
> My co-worker and I are trying to decide if this database content is really
> tabular data and we should continue to have it in tables, or if we should
> instead use pure CSS to style what is really only 4 elements:
>
> 1. Title
> 2. Date/Time
> 3. Image (always the same size)
> 4. text tease
>
> Your opinion's are greatly appreciated.
>
>
> Thanx,
>
> Juanita, Webmaster
> KCSM TV/FM
> 650.524.6927
> [EMAIL PROTECTED]
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Can someone take a look for me, please?

[Chris Akins]

What does your reply mean?  I see no tables in the source code.

On Fri, Jun 13, 2008 at 9:19 AM, David Laakso <[EMAIL PROTECTED]>
wrote:

> Michelle Cole wrote:
> > http://www.actingforreal.com/wordpress/
> >
> >
> > ~Shelly
> >
>
>
> I don't know how to make a table much less how to fix one. Sorry.
>
> --
> http://chelseacreekstudio.com/
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check

[Chris Akins]

Site looks nice. Did you use/modify a 3-col template or create your own from
scratch?  I'm interested in just this sort of layout with fluid middle
column, but fixed outer.

One note - my personal opinion - is that the semi-transparent dropdown menus
only serve to make it hard to read the menu options.  Solid backgrounds
behind the menu text would be much better, 'cause some of the menu items end
up over the "love your mother" text in the background image.

Regards,

Chris

On Thu, Jun 12, 2008 at 10:09 AM, Cristian Palmas <[EMAIL PROTECTED]>
wrote:

> Hi List,
>
> I recently published my personal site and developed my personal CSS
> theme for Drupal 6.2.
> May some of you check the site with IE on Mac and, in general, with
> IE5.5, IE5.0, Opera and Safari for PC and Mac?
>
> I just tested the site with FF2, Safari 3, IE7 and IE6 on PC. It
> appears to work well (hoping not to have missed out some bug or
> error).
> The link is http://www.cristianpalmas.it.
>
> Important notes:
> 1. There are more than one CSS file because most of them concern the
> Drupal modules (but they can be changed, of course). The main layout
> is driven by style.css, in which are imported general.css and
> main.css. Here are the links:
>
> style.css:
> http://www.cristianpalmas.it/sites/all/themes/custom/chrhome/style.css
> general.css:
> http://www.cristianpalmas.it/sites/all/themes/custom/chrhome/general.css
> main.css:
> http://www.cristianpalmas.it/sites/all/themes/custom/chrhome/main.css
>
> 2. The CSS does not validate because I used proprietary properties
> (like zoom and -moz-opacity) to make the dropdown transparent and work
> around the bug in IE6 which causes the doubling of the lineheight. Any
> suggestion to avoid the use of these properties but reaching the same
> effect is obviously accepted.
>
> Thanks a lot.
> --
> ~ Cristian Palmas ~
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Target IE7? Or Something Better?

[Chris Akins]

Actually, I DID add the following to target IE7 only:

*:first-child+html #navListHor img {margin-top:9px;}

But I guess I'm still wondering if I can do this more efficiently.  'Cause
now I have 3 rules for those menu images.  One for standards compliant
browsers, one for IE6, and now one for IE7.

Without the above rule, IE7 shows the menu images too high.

Regarding the NAGW conference - I'd love to go, but budgets are very tight
here.  It will be a long shot me going this year.  Thanks for the comments
on that sub-site of ours.  It was the first truly CSS site I did.  Now I'm
in the middle of redesigning our entire site with CSS layout.  Fun stuff!

Regards,

Chris

On Wed, Jun 4, 2008 at 8:51 PM, Bill Brown <[EMAIL PROTECTED]> wrote:

> > I'm late to the IE7 game, so I'm not sure if it should now be acting much
> > like FIrefox, but with this rule it definitely isn't.
> > I'm just trying to find where the ultimate fault lies and how to address
> it
> > best.
>
> Chris,
>
> Tests on IE7/Vista and Firefox/Ubuntu 8.04 side-by-side show identical
> or nearly identical presentations, and certainly no flaws. Am I missing
> something or have you already fixed this for IE7?
>
> Nice looking site, including back to the root home page. Great work.
>
> Incidentally, are you going to the National Association of Government
> Webmasters in Chicago this September (http://www.nagw.org)? Zoe
> Gillenwater is presenting a two-hour conference session on CSS and I am
> presenting a four-hour pre-conference session on Advanced CSS.
>
> Anyway, hope that helps.
> Bill Brown
> TheHolierGrail.com
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Target IE7? Or Something Better?

[Chris Akins]

Regarding this site and CSS:

www.springfieldmo.gov/founders/
www.springfieldmo.gov/css/founders.css

The issue:

In IE7 only, the menu images are 9px too high, apparently needing the same
9px margin-top as on these items as IE6 did.  But my IE6 rule below isn't
seen by IE7.  The relevant CSS from the full stylesheet is below.  Should I
add a third, IE7-only rule somehow to the #navListHor img rules below?  Or
is something in my original CSS below flawed to begin with?

I'm late to the IE7 game, so I'm not sure if it should now be acting much
like FIrefox, but with this rule it definitely isn't.
I'm just trying to find where the ultimate fault lies and how to address it
best.

ul#navListHor {padding:0px; margin:0; margin-left:170px;
list-style-type:none; margin-top:9px;}

#navListHor li {float:left; margin-right:10px;}
#navListHor img {border:none; margin-top:0;}
* html #navListHor img {border:none; margin-top:9px;}

Thanks, as always, to the great minds on this list!

Chris A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Drop down Menu not clickable.

[Chris Akins]

I tried putting a "z-index:50" on #mainnavul  and it now works.

The "50" part probably doesn't have to be that specific number, but I just
put some arbitrary thing in there that I figured would be higher than the
z-index of the content.  I only tested this in Firefox Mac.

Chris A

On Fri, May 23, 2008 at 4:04 PM, Sohail Aboobaker <[EMAIL PROTECTED]>
wrote:

> Hi,
>
> We have a CSS driven drop down menu but we have two issues with it:
>
> a. The options which are falling in the content area of the page, are not
> clickable.
> b. Some options seem to be hidden under the content.
>
> http://www.newwavecell.com/design/Index.html
>
> Is this something that can be quickly fixed?
>
> Regards,
> Sohail
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Latest Rounded Corners

[Chris Akins]

Wow - several good choices for me to mull over.  Thanks for the great tips.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Latest Rounded Corners

[Chris Akins]

I know there are many rounded corner techniques out there, and I'm not
looking to start a war.  :-)
But I was wondering if there are any especially good, newer techniques to
the game.  I need my rounded box to be resizable, and kind of like the idea
of using only one small circle image that gets offset for each corner.
Prefer no javascript for this.

I did start with Google, but quite a few of the promising link titles lead
to pages no longer there, so I hoping this list could point me to recent
improvements in this area.

Thanks as always for the expertise here.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Overflow Hidden Headache

[Chris Akins]

>From my not-so-advanced vantage point, it appears that the overflow:hidden
is not being used so much to contain floats as there isn't but float in the
#container div.

On Tue, May 6, 2008 at 4:41 PM, Ingo Chao <[EMAIL PROTECTED]> wrote:

> Chris Akins wrote:
>
> > If I take out the overflow:hidden from the #container rule, then the top
> > looks fine, but the bottom of the page goes haywire.
> >
>
>
> Did not look into it, but if overflow:hidden is meant to contain floats in
> these layouts (instead of literally cutting what is overflowing), then
> overflow:hidden could (and probably should) be replaced by an easyclearing
> method.
>
> Ingo
>
> --
> http://www.satzansatz.de/css.html
> http://www.dolphinsback.com
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Overflow Hidden Headache

[Chris Akins]

I can't for the life of me figure out how to do what I'd like.  I've tried
several 3-col layouts that get very close to what I'd like to do.  But one
issue I can't figure out is how to have my round image in the upper right of
the page IN the right hand column, but also have the top edge of it hanging
into the upper header.  All of these layouts use overflow:hidden in their
main body containers, so it cuts off that image.  I've only tested any of
this in Firefox so far.

The closest I've come to the look I'm after is here:

www.springfieldmo.gov/newSite/index7.html
www.springfieldmo.gov/newSite/mainStyles_take7.css

But the above has the round image in the header block - not really the best
for keeping it with its related content.

Keeping that image in the right hand column gives me this:

www.springfieldmo.gov/newSite/index7b.html
www.springfieldmo.gov/newSite/mainStyles_take7b.css

As you can see, the image is cut off, and I can't figure out any way around
it.

If I take out the overflow:hidden from the #container rule, then the top
looks fine, but the bottom of the page goes haywire.

Can overflow be defined for just one side similar to border, margin, or
padding?

Any help is much appreciated.  I'm beginning to wonder if I've designed
something that's impossible to implement.

Chris A.
City of Springfield, MO
Web Coordinator
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Most popular fonts for browsers

[Chris Akins]

tick-tock, wonder how long before this off-topic post is ended

This isn't really about the practical use of CSS, but more a design choice,
right?

Just a friendly reminder :-)

On Tue, Apr 8, 2008 at 8:48 AM, Martin Sammtleben <[EMAIL PROTECTED]> wrote:

> At 15:09 +0200, 8/4/08, Cristian Palmas wrote:
> >Does anybody know about a list of commonly used fonts?
>
> Look at the survey results linked at the top of this page:
> 
>
> Cheers   Martin
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] image placement help

[Chris Akins]

Using the Firefox web developer tools I added a top and bottom negative
margin on the #wrapper and it fixed it in Firefox.  I haven't tested in IE.
Don't know if this is the best or proper approach, and I don't really know
why the stated margins of 0 shouldn't have worked.  Some of the true experts
on here could probably shed some light.


#wrapper {
  background: url('texture7085227.jpg');
  padding: 20px;
  width: 720px;
  margin: 0 auto;
margin-bottom:-16px; ( wrote:

> Hello group,
>
> I am new to CSS in web design and have a pretty basic question but am
> unsure
> about the best way to solve the problem.  Here is the page I am building:
>
> http://www.arabian-horses-west.com/test.html
>
> I would like the very top and very bottom graphics to touch the middle so
> that it is all connected.  Here is a link to the CSS:
>
> http://www.arabian-horses-west.com/testcss.html
>
> Any help would be greatly appreciated.
>
> Thank You,
> Christie
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Extra border lines from ??

[Chris Akins]

I have now tested my theory above and found that by commenting out the
border on:

.boxed ul li {
padding: 10px 15px;
border-top: 1px solid #4AF4FE;
}

the lines go away.  I actually find no CSS rule that applies anything to the
li.tableheader class.   I see it in the HTML, but no reference that I can
find in the actual CSS.

Chris

The longer line comes from the border-top on li.tableheader; the shorter
> line is the border-top on the nested li.
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Extra border lines from ??

[Chris Akins]

I haven't actually saved out a copy of your page and tested CSS
modifications, but I'm fairly certain the following rule might be the issue:

.boxed ul li {border-top: 1px solid #4AF4FE}

Since you have nested lists, both of which are within the div.boxed, it
appears both lists are picking up the specified border.

Try commenting out the border rule above and see what happens.

On Fri, Feb 29, 2008 at 12:43 PM, Keith Kaiser <[EMAIL PROTECTED]>
wrote:

> On http://nearspaceventures.com/gpsl2008, in the left column under
> 'Scheduled to Present' please notice that there are two lines of
> different lengths. I'm not real sure if those are border lines on the
> top of an element or the bottom. Either way I can't figure out where
> they are coming from. Can someone please help me?
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Need Image to Overflow Bounds

[Chris Akins]

I'm working with one of Georg's flexible layouts and have modified it a bit
for my site needs.  One thing I can't get my head around is how to have one
image be able to overflow it's boundaries since the div it's in has
'overflow:hidden' declared.

working page is:  www.springfieldmo.gov/newSite/index6.html
css: www.springfieldmo.gov/newSite/mainStyles_take6.css

An example of how I'd like the round image in the upper right to look is on
this earlier test page:

www.springfieldmo.gov/newSite/index.html

How can I get the image to show outside the div that is constrained by
overflow:hidden?

As a side issue, when resizing the page smaller than max width, the
left-hand column also disappears on and off in IE6 and in FF on Mac.  What
might be causing this?

As always - thanks for great advice in advance.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Text Resizing Causes Small Movement in Images

[Chris Akins]

Hi - not sure what's causing my image based mainNav tabs to move slightly
when text is resized in this header:

www.springfieldmo.gov/newSite/index4.html
www.springfieldmo.gov/newSite/mainStyles_take4.css

The page is based on Matthew James Taylor's perfect 3-col liquid layout,
though the 3 columns aren't yet coming to bear on the above.

Basically, when sizing text up or down more than just one level, the tabs
start moving around, thus breaking the separating line between the white and
maroon.  I've tried various permutations of margins and padding on #crumbs
and #mainNav to no avail.

Thanks for any input and insight.

Christopher Akins
Web Coordinator
City of Springfield, MO
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Simple Dreamweaver/CSS question

[Chris Akins]

It sounds like an incorrect path to me, even though I know you said it seems
your CSS file is located where it should be.  Can you post a URL?

Chris

On Thu, Feb 14, 2008 at 9:55 AM, Daniel O'Brien <
[EMAIL PROTECTED]> wrote:

>
> I'm new to web design, and new to Dreamweaver CS3 (Mac) and CSS.
>
> I've learned to generate CSS files and do simple code mods, and attach
> the style sheet files to new html files.
>
> However, when I preview my newly-minted CSS-attached html files in
> Safari 3.0 (the latest, under Leopard) or in Firefox 2.0, none of the
> formatting is visible. The rendered page has the wrong background
> color, and it looks like a dumb html page with none of the CSS text
> formatting.
>
> I've verified that my CSS file is in the proper directory (same as
> html file).
>
> What could be the issue?
>
> Thanks very much,
>
> Dan O'Brien
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with clearing DIVs - I think

[Chris Akins]

This page sounds like what you're trying to do.  It's close to what David L.
suggested, but not exactly.  His methods are more tried and true than mine
I'm nearly positive.

http://www.springfieldmo.gov/egov/planning_development/econ_dev/brownfields/success.html

relevant CSS is here:

http://www.springfieldmo.gov/css/brownfields.css

On Feb 13, 2008 8:02 AM, Nicole Aebi <[EMAIL PROTECTED]> wrote:

> Hello
> I'm trying to create a CSS layout with a central body that has 4 stories
> in it. Each story will have a photo on the left with text relating to it on
> the right.
>
> At the moment, I can create one story but the moment I try to add a second
> or third it doesn't work.
>
> The site is: http://www.bond.org.uk/Newsite/
> With the CSS at: http://www.bond.org.uk/Newsite/lgso4.css
>
> I've tried several things like clearing the photo div or having four
> different divs - numbered 1 to 4, but neither worked and having different
> divs seemed not very elegant - much like this sentance!
>
> Can anyone point me in the right direction?
>
> Thanks
> Nicole
>
>
>
>
> -
>  Support the World Aids Awareness campaign this month with Yahoo! for Good
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Proof of Concept Needed

[Chris Akins]

Hello List,

I'm working on a 3-col design for our new City gov't site template.  Trying
to see if I've designed something in Photoshop that isn't doable, I thought
I'd get some input on my methodology before proceeding much further down the
present plan of attack.

Page and CSS:

www.springfieldmo.gov/newSite
www.springfieldmo.gov/newSite/mainStyles.css and
www.springfieldmo.gov/newSite/ie6fixes.css

Also a comp of what I'm going for is here:

http://www.springfieldmo.gov/newSite/images/interiorPage.jpg

What I'm basically after right now is whether my approach is valid or in
line with best practice approach for 3 column layout.  I've basically got a
left hand column that's fixed width, a middle column that I'm trying to make
fluid and a right column that I would prefer to be flexible too, simply due
the email addresses we're going to have in it that hang outside its
boundaries if I make that column fixed width then upsize the text in a
browser.

The right column is currently absolutely positioned within it's relatively
positioned parent.

I guess the reason I'd like to know if my plan of attack is the most robust
is that I'm already seeing some problems, specifically with text resizing in
IE and overall positioning not being exactly what I'm expecting.  Rather
than list the specifics at this point I'd kind of just like opinions on
whether I would have less potential headaches doing some things differently.

I much appreciate any input and insight.

Christopher Akins
Web Coordinator
City of Springfield, MO
www.springfieldmo.gov
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] What Margin Unit Does IE6 Want?

[Chris Akins]

Validated page with included styles is here:

www.springfieldmo.gov/egov/cityclerk/minutes_testHtags.html

Everything is fine except for the  items.  These are
the left hand, called out headers.  They are supposed to line up vertically
with the text to the right of them, which they do everywhere but IE6 (don't
have IE7 to test).  Firefox, Safari on Mac are great as well as Firefox on
PC.

I'm using a top margin unit of 1 em on those elements to push them into
place, but in IE6 this unit lets them move around with text re-sizing.  That
doesn't happen in the other browsers.

So what unit should I use that IE will like?  I was trying to go with em's
for the very reason of keeping things consistent even with text sizing.

Thanks for any tips.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Chris Akins]

Wow - that's perfect!  I had to put the declaration on both of the floated
divs, not just one, in order for it to be fixed in my IE6.  But that's
swell!  Thanks.  :-)

So, in order to turn this into a learning process, had these divs had
margins on more than just the one side, would they all have gotten doubled?
Does this always happen in IE6 with floated items that have margins?  Or is
it just when there are more than one floated item?



> You're experiencing the 'margin-doubling on floats' bug in IE6.
>
> Look once more at my example - in IE6...
> >> 
> ...and see that there's no spacing problem. That's because I "killed"
> the 'margin-doubling' bug by declaring 'display: inline' on #stories.
> Floats can't 'display: inline' so it is a nonsensical declaration, but
> it fixes the bug in IE6.
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Chris Akins]

Nothing, I guess. But now that I've put the floats in, I'm getting no
spacing between #stories and #nav on IE6.  Firefox and Safari show it
correctly (or as intended anyway).  This page actually started being built
over a year ago, and I had tried floats.  Now I remember why I then went to
positioned elements.  Beause of this difference in spacing.

I don't yet have IE7, so I don't know what it's doing in that browser.

Any thoughts?

On Jan 15, 2008 8:52 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:


> What's wrong with using floats in your case?
> Turns out ok, IMO...
> 
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Container Height Issue on Dynamic Page

[Chris Akins]

Thanks for the tip, but unfortunately, declaring height:100% doesn't work
for me.  I tried putting it on body, #stories, #container and nothing.
I've realized that it's my #nav that's absolutely positioned within the
#container that is the problem apparently.  But I'm not sure what to do to
fix it.  I structured the page this way in order to source order my content
first.

I have since tried taking the absolute positioning off, instead using a wide
left margin on the #nav and negative margin on the top of it to pull it up
beside the other.  That works as long as there is no text resizing.  Even
with pixel based margins, the #nav moves around greatly when text resizing.

Is there a way to keep my html ordered the way it is, and NOT use floats,
and still end up with a #container that contains BOTH of the things inside
it?

Chris


On Jan 15, 2008 11:40 AM, Big Moxy <[EMAIL PROTECTED]> wrote:

> Chris,
>
> You need a height:100% in several places.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Container Height Issue on Dynamic Page

[Chris Akins]

Hello all experts and novices.  :-)

Page with issue and CSS:

http://www.springfieldmo.gov/cityconnect/getPost.jsp?entryid=6
http://www.springfieldmo.gov/css/cityconnect.css

Having worked through many CSS issues thinking my blog-type site was ready I
just discovered today that on pages with shorter blog postings (via the
above link), the #container div on my page isn't extending around both the
major divs that are within it.

Neither the #stories div or the #nav div are floated so I was expecting the
#container to, well, contain them.  Is the problem partly due to the data
being dynamically generated?

I have the content somewhat source ordered so as to see the main content
first.  But I also tried putting the #nav first, thinking its taller height
would then force the #container to expand.  What am I missing?

One possible solution I haven't yet tried is to put a footer at the bottom
of the page.  But doing that still doesn't give me an answer as to why the
page isn't working as expected.

Any help would be much appreciated.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Very Basic Print Stylesheet Question

[Chris Akins]

Making my first ever print stylesheet (I know, I'm way behind).  Anyhoo...

Is there some specification that says the print stylesheet must be in the
same directory as the file that's calling it?  Everything in my gut says "of
course not", yet I haven't been able to get mine to work until I put it in
the same directory as the html file.

This code works for me:




This doesn't:



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Span Tag - Pushing My Boundaries - Can This Be Done

[Chris Akins]

Trying to convert our City's council meeting minutes from a horrid
workflow which starts in Word, gets exported with all of Word's mess
into HTML, table based, etc. etc.

I've got it almost right except for the placement of content within my
span tags.  I want that content to line up with the content that is in
the same  tag.  I'm sure the issue is the 'display:block' that I've
set on the , but I don't know how else to get it pushed into
place.

For the right "look" but old, table based code see:

http://www.springfieldmo.gov/egov/Minutes/2006/03-30-2006.html

For the better code, but with my issue, see:

http://www.springfieldmo.gov/egov/cityclerk/minutes_test.html

Basically the text in the left column needs to slide down so that it
sits on the same line as the corresponding text in the right column.

Can this be done with the structure I've got or will I have to resort
to divs?  I'm trying to make as clean and easy a structure for the
Clerk's workflow as possible.

thanks for any help.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Text Align Center Not Working in Float

[Chris Akins]

Wondering what I'm not getting about a floated div (#art) that I have
applied {text-align:center} to.  It's centering the image inside, but not
affecting the  content.  I've tried putting the text-align on the 
itself, still to no avail.

You can see it on this page:

http://www.springfieldmo.gov/community/artrain/

It's the right hand box currently bordered by green (just for testing).

The CSS is in the page for now.  Will pull it out, external after testing.

I've discovered I can whip the  into shape by applying {margin:0 auto;}
to it, but that doesn't tell me why the text-align:center doesn't work.

Thanks for any help.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text Indent Not Working in Firefox

[Chris Akins]

Sorry - I forgot the list the problem class.  It's the .dateline class that
should indent the posting date under each post headline.  It's working fine
in Safari and IE 6, but failing in Firefox (Mac).

On 3/1/07, Chris Akins <[EMAIL PROTECTED]> wrote:
>
> Can't figure out what is preventing the text-indent from taking effect in
> Firefox.  Something actually works in IE, but not Firefox - that's a new one
> on me. :-)
>
> Fairly simple, valid CSS here:
>
> http://www.springfieldmo.gov/webapps/news/css/citytalk.css
>
> Page URL, also validated:
>
> http://www.springfieldmo.gov/webapps/news/citytalk.jsp
>
> Thanks for any insight.
>
> Chris
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

[css-d] Text Indent Not Working in Firefox

[Chris Akins]

Can't figure out what is preventing the text-indent from taking effect in
Firefox.  Something actually works in IE, but not Firefox - that's a new one
on me. :-)

Fairly simple, valid CSS here:

http://www.springfieldmo.gov/webapps/news/css/citytalk.css

Page URL, also validated:

http://www.springfieldmo.gov/webapps/news/citytalk.jsp

Thanks for any insight.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

[css-d] Class Won't Apply Itself

[Chris Akins]

I'm confused over classes that sometimes just won't apply.

Page in question:

www.springfieldmogov.org/founders/concerts.html

CSS:
www.springfieldmogov.org/css/founders.css

The list of concerts on this page should NOT be showing any bullets,
custom or otherwise.  But in IE it does, despite the UL having been
given a class="noBull"  That class successfully negates the custom
bullets in other browsers.

But, even in other browsers, the bullets wouldn't go away by JUST
defining a class rule like:

.noBull {list-style:none;}

and then applying that class to a  in my html code.

I couldn't get the bullets to disappear until explicitly defining the rule as:

#content .noBull {list-style:none;}

Why?

How can I get IE to eliminate the bullets on this page and respect the
.class="noBull"?
__
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] Content Displaces Itself for Unknown Reason

[Chris Akins]

Not sure when you reviewed the page 'cause I've been editing it live since I
posted, but it's actually working much better now than it was.  It was
dropping the float even at much wider window sizes UNTIL I changed the h1,h2
rule by taking out width:65% and adding margin-right:325px

That's now a head scratcher.  Don't have any idea why IE doesn't like the
65% width on the h1, h2 tags.  But it didn't.

Now my issue is that the floated column isn't regarding my 190px width -
just in IE again.  Don't have a clue as to why.


On 8/7/06, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote:
>
> Chris Akins wrote:
> > Both pages validate:
> >
> > www.springfieldmogov.org/founders/newContent.html
> > www.springfieldmogov.org/css/founders2.css
> >
> > BUT . . .
> >
> > in IE (what else) the main content (This Week's Movies, etc.) fall down
> > below the right info box (Visit the Park, etc.) even though that box is
> > inside of the same  that holds the main content.  I
> can
> > get the content to move up to where it should be if I stretch the page
> out
> > horizontally quite a bit, but if the page width is resized in very much
> at
> > all, the content keeps popping down to the bottom.
> >
> > Firefox, Safari, and Netscape all show it as intended.
> >
>
> Chris,
>
> This is a float drop, and IE has to do it when there is not enough room
> for all three columns to fit across the screen side by side. For me,
> this only occurs when the middle column is so narrow that the word
> "Wednesday" can no longer fit across. In other words, the float drop
> doesn't occur until the window is narrowed to about 545 pixels, which is
> pretty small. I wouldn't worry about it. However, if you do want to
> prevent it from happening even at this small width, you'll need to
> decide what should happen instead. A horizontal scrollbar should appear?
> At what width?
>
> Zoe
>
> --
> Zoe M. Gillenwater
> Design Services Manager
> UNC Highway Safety Research Center
> http://www.hsrc.unc.edu
>
>
> __
> 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/
>
__
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/

[css-d] Content Displaces Itself for Unknown Reason

[Chris Akins]

Both pages validate:

www.springfieldmogov.org/founders/newContent.html
www.springfieldmogov.org/css/founders2.css

BUT . . .

in IE (what else) the main content (This Week's Movies, etc.) fall down
below the right info box (Visit the Park, etc.) even though that box is
inside of the same  that holds the main content.  I can
get the content to move up to where it should be if I stretch the page out
horizontally quite a bit, but if the page width is resized in very much at
all, the content keeps popping down to the bottom.

Firefox, Safari, and Netscape all show it as intended.

I've looked at all my width, margin, float declarations and can't find
what's triggering this.

Any thoughts?

Thanks -
Chris Akins
City of Springfield, MO
__
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] Background Image Position Varies in Different Browsers

[Chris Akins]

Ah, yes - thanks for pointing that out.  I've found that if I put the
montage as a background image on the body tag instead, I get the desired
result.

However - I'd still love to know why a background image doesn't work as
intended when attaching to the #content div.

I did find one coding problem, which, when fixed still didn't fix the
overall problem.  I was incorrectly trying to use a background position pair
which used one keyword and one pixel value.  Can't do that, according to W3C
specs.  So I changed to all px values.

This is a perfect example of how enough stumbling around can sometimes lead
to an answer, but it sure would help me be more efficient if I knew the
'whys' behind my original issue.  Shouldn't a background image work on
either the body or another div without being wildly different on various
browsers?

On 7/25/06, Skip Knox < [EMAIL PROTECTED]> wrote:
>
> FYI and FWIW, the gap appears in Firefox too, if you start sizing up the
> text.
>
__
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/

[css-d] Background Image Position Varies in Different Browsers

[Chris Akins]

page:  www.springfieldmogov.org/founders/new.html
CSS:  www.springfieldmogov.org/css/founders.css

Problem:  The background image on the #content div is a photo montage
running down the left side of the page.  It's position looks great in
Firefox, shows a slight gap in IE on both PC and Mac, is substantially
higher in Safari (thus not lining up properly under the logo), and Netscape
doesn't show it at all.

Other than that the page is perfect!  :-)

What am I doing wrong?  Should I be approaching the desired end from a
different angle?

In case it matters, a sample page including some of the real content is:

www.springfieldmogov.org/founders/newContent.html

Incidently, is there any trick to getting responses?  I posted a thing
several days ago but haven't gotten any.  Yet others seem to have many, many
replies.  :-(

Thanks for any help.

Chris
__
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/

[css-d] Page/Structure Check Before Proceeding

[Chris Akins]

I have a fairly basic page I'm putting together and have it behaving,
so far, in Firefox and Safari, but not in IE (wonder of wonders).

Before I try to figure out the IE issues, with a little help from this
list, hopefully, I'd like to get a more expert opinion on my page
structure and basic CSS I've written so far.

The page and CSS is:

www.springfieldmogov.org/founders/new.html
www.springfieldmogov.org/css/founders.css

Is my current structure and mode of thinking regarding the CSS pretty
correct, or is there something that's going to cause me major
headaches?  In the content area, I plan on having either a floated
feature element or maybe two columns of real content.  I'd like to get
an idea of whether my current design will allow for that well.

Would someone be so kind as to point me in the right direction as to
what the issue is in IE regarding the menu images being higher than
they should, the footer not being at the bottom, and the major gap in
the side montage.  I don't need you to do the work, but just tell me
if the IE differences are due to padding, margin problems, will I need
to use a hack to feed IE different info - that kind of thing.

Thanks for any help.

Chris Akins
City of Springfield, MO - www.springfieldmogov.org
__
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/

[css-d] Want to Clear One Float, Not All of Them

[Chris Akins]

url: www.springfieldmogov.org/elections/parks/projects.html
css: www.springfieldmogov.org/css/elections_parks1.css

Using a modified liquid 2-col layout from Floatutorial I've added some
of my own stuff which you can see at the bottom of the CSS file.

Problem:   I'd like  to clear the "Thank You"
graphic which is floated left, residing in it's own .  But if I put a 'clear:left' on the 'details' div it
then clears the  which holds the long parks image on
the far left of the page.

I've played around with putting various iterations of 'position:
absolute or relative' on various elements, but haven't come up with
anything that will allow the 'details' div to end up just below the
'thank you' graphic but NOT way down the page.

Is what I'm wanting to do realistic?  The page doesn't seem that
complex, really.  Didn't expect it to be this difficult.

Thanks in advance for any input.

Chris Akins
__
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/

[css-d] Floats Not Behaving in IE

[Chris Akins]

Page:  http://www.springfieldmogov.org/egov/planning_development/planTest2.html
CSS with the float rules in question:
http://www.springfieldmogov.org/css/plan.css
Additional CSS Page:  http://www.springfieldmogov.org/css/pw_oper.css

Problem:  Three floated divs at page bottom should be side by side,
which they are in Firefox on Mac and Safari on Mac.  But IE on PC puts
the 3rd one onto a second line.

Why?  Thoughts?  Help please :-)

The page validates as HTML 4.01 Transitional and the CSS validates via W3C

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fixed Units Version of Box is Fine - Flexible Isn't - WHY?

[Chris Akins]

The pages in question are:
http://www.springfieldmogov.org/egov/planning_development/ptest.html
http://www.springfieldmogov.org/egov/planning_development/ptest_fluid.html

All CSS is in the page for testing purposes.

Just when I think I'm getting my head around this CSS stuff, then
something seeminly this simple leaves me scratching it.  I finally got
the little two column box looking like I wanted, but only after way
more time than it should have taken I think.  If someone can help me
understand the "why's" of what I've done that would be great.

As you can see, the units in the first link are all fixed pixel widths
on the wrapper div (#features) and the two inner columns.  I'd rather
make it fluid, but the second link above shows my problem.

I tried using %'s but couldn't get it to work.  If I specified, say,
80% for the wrapper, then 60 and 20% for the two inner ones I'm left
with a large gap between.

OK, I think, so the two inner ones need to add up to 100.  But that
just ends up sending the right column (#resources) below the left
column (#news).  That's right, I must account for the 1px left border
on #resources.  So I made the #news column 79%.   #Resources still
slides down.  78% - same.  Finally at 77% the two columns are beside
each other ONLY if the browser window is fairly wide. But even then
there's a little gap between them.

How can I make it flexible or fluid and still have the two columns
butt up against each other?

Thanks in advance for any tips, including any more efficient way to do
what I've done here.  I'm going to be putting this little two-column
box into a page with additional stuff, some floated elements, perhaps,
etc.

Chris
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Aligning text in same line

[Chris Akins]

On a completely different topic, but regarding your CSS:

Anytime you have "0" as a numerical value in your rules you don't need
units of anykind.  Only when you have something other than "0" do you
need to specify px, em, %, etc.

Also, you can use the value stated once when all numbers are equal as below.

For instance: {margin: 0; padding: 0;}

Also, if top/bottom and right/left pairs are the same number you can do this:

{margin: 5px 3px; padding: 1px 4px;}

In the above case, the first number is for top/bottom, and the second
for right/left.

Overall, just a shorter, more bandwidth-friendly way of writing the
code.  I know it seems tiny, but in the course of a whole CSS document
multiplied by the pages in your site multiplied by the times each page
is served up . . .  it can mean quicker page loading and better use of
the bandwidth you pay for.

Hope that helps some.  I'm still learning the CSS stuff myself :-)

Chris

> CSS:
>
> body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/