[css-d] CSS2: IE overflow problem

[Matthijs van de Water]

Hi all,

I've been struggling with a XHTML/CSS2 design that should work in both
IE and FF (recent versions) and have come accros a problem, best
explained by this example:
http://www.matthijs.net/overflow_problem.html
(Short description: two-column menu/contents layout with a large table
the contents-div. In FF table overflows screen width as desired, in IE
the table is moved below the menu-div.)

I've tried all sorts of overflow settings, but I just don't get IE to
display the page the same way as FF. Is this impossible?

Thanks for your time,

Matthijs
__
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] CSS 3 - Multiple Backgrounds ?

[Christian Heilmann]

> Is there something like multiple backgrounds in css 3 ?

Yes
http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering

So far only Safari supports it (AFAIR)
http://webkit.opendarwin.org/blog/?p=15


--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
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] CSS 3 - Multiple Backgrounds ?

[Martin Petrov]

Is there something like multiple backgrounds in css 3 ?
__
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] Suckerfish blues (again)

[Chris Akers]

> The original problem is the fact that I had to reduce the size of the
> text via "font-size: 1px" to get it to render properly on IE6.  To me
> that seems rather hacky and I was wondering if there was any more
> elegant way of achieving this.

Try
#nav li {
float: left;
overflow: hidden;
}
That should be less "hacky." (If it works at all.)

Also, I noticed that #nav-rankings-option2a and
#nav-rankings-option3a's background image jump up a pixel or two on
hover.

> [OT]: Are there any lists similar to this that deal with JavaScript?

comp.lang.javascript[1] is a fairly good usenet group. There are a few
characters there that would rather critique your post format than
actually help or get into javascript holy wars with each other. But if
you can ignore them then it is a knowledgeable resource.


[1] http://groups.google.com/group/comp.lang.javascript
__
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] question

[Christian Heilmann]

> I have created 'custom' graphics for my bullet points
> at the following website:

This is one of the most common CSS problems. and can be solved by
using a background image on the LI instead of list-style-image:

http://css.maxdesign.com.au/listutorial/index.htm
http://www.google.com/search?q=using+image+for+list+css

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
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] question

[Patrick Roane]

Hey folks,

I have created 'custom' graphics for my bullet points
at the following website:

www.cpcconstruction.net/1/homes.html

*** HOVER YOUR MOUSE OVER THE 1ST COLUMN/2ND ROW HOUSE
PIC.

The trouble is:

1. the graphics are not showing up at all in IE, but
they are in the right position and the picture above
shows up

2. the list graphics do show up in Mozzila, but the
position is way off and the picture does not render
properly.

Here is just a snap-shot of the css:

#container ul.picdesc {
position: absolute;
left: 50px;
top: 300px;
font-size : 76%;
font-family : "Trebuchet MS", arial, helvetica,
sans-serif;
color : #003366;
list-style-image: url(images/hsbullet.png);
}

li.new{
list-style-image:url(images/bluarrow.png);
list-style-position:inside
}

Any suggestions as to what I can do to solve these
problems?

Thanks a million.

Patrick







__
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] Tables and Vertical Alignment

[Roger Roelofs]

Richard,

On Nov 1, 2005, at 10:27 AM, Richard Brown wrote:

> Hi Guys
>
> I have been styling a site at:
>  catparid=347&merchant=Wilsons>
>
> The css is embeded. I have used tables but cannot get to grips with
> vertical-alignment. I have styled the tables using css and used
> vertical-alignment: top; to get the text and price box to sit at the
> top of the tabel. However, it doesn't work. It seems that this might
> not be browser friendly. Could you please tell me how I might get the
> text and price box to site at the top of the column please?

move the vertical-align: top; to tbody td

Also, I recommend validating your page.  If the html is valid, the css  
will be more likely to work.


Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
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] Suckerfish blues (again)

[Graham Reeds]

css.student wrote:

>what are the problems? All that I can see is that the link text is not
>being hidden...anything else?
>
>to hide the text, you'll need to edit the markup:
>link
>
>and the css, accordingly:
>
>li a b {visibility:hidden;}
>
>- CSS Student
>
>
>On 10/31/05, Vicki Stebbins <[EMAIL PROTECTED]> wrote:
>  
>
>>At 11:26 AM 31/10/2005, Graham Reeds wrote:
>>
>>
>>>I have implemented a suckerfish menu for a redesign of a game site.
>>>
>>>However every implementation I come up with works fine in FF and Opera8,
>>>but fails in IE6 (only tested on Windows).
>>>
>>>I also used the block image code which I was having trouble with last
>>>week (thanks for the help).
>>>
>>>The test site is here: http://homepage.ntlworld.com/graham.reeds/space
>>>and the css is here
>>>http://homepage.ntlworld.com/graham.reeds/space/styles/space_styles.css
>>>
>>>...
>>>
>>>Thanks, Graham Reeds.
>>>  
>>>
>>Hi Graham,
>>
>>I have to say I got so frustrated with the suckerfish menu I bought
>>Eric Meyer's Book 'More Eric Meyers on CSS' and implemented his menu (easy
>>and worked well), it also had how to do an image gallery which was perfect
>>for the job I was working on.
>>
>>I was pointed to the book by Kev Adamson http://www.kevadamson.com, he had
>>used it in the sites he designed.
>>
>>Regards
>>
>>Vicki
>>
>>
>>__
>>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/
>>
>>
>>
>
>
>  
>
The original problem is the fact that I had to reduce the size of the 
text via "font-size: 1px" to get it to render properly on IE6.  To me 
that seems rather hacky and I was wondering if there was any more 
elegant way of achieving this.  If you look at the test page now it is 
coming to life a lot more, and the menus work (or they should).

Also I have a problem in that when I upload the page to an actual site 
and not the IIS that is on my local box the page is excrutiatingly slow 
in IE6 yet smooth as silk in Opera and FF.  Pop into the room next to 
mine and it runs fine in his IE6.  I think this is a IIS local-external 
thing going on.

Also I have had another one of my friends test it on his Mac and it 
works fine apparently.

[OT]: Are there any lists similar to this that deal with JavaScript?  I 
now have a couple of JS problems and my knowledge of JS is more limited 
than my knowledge of CSS...

G.

__
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] Problem setting width on an a link

[Christian Montoya]

Float things left:

li { float:left; }

They'll line up. You would probably need to have a clearing element
afterward, just in case.

br { clear:left; }

--
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
__
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] Odd border + padding behavior: cross-browser

[Daniel LeVangie-Stricklen]

Hi all,

I've trolled through the list archives, a little of
evolt, and, of course, Google, to no avail.  I
consulted positioniseverything.net and quirksmode.org.
 The issue I have seems simple enough that I'd have
turned it up on any of those sources, but, alas,
that's not the case.

So, please refer to http://www.erectlocution.com for
the page in question.  Here are the issues:

(a)  IE 6 has some issues rendering the page.  The
borders of the div with ID #contentWrapper render fine
on initial loading, but there is a portion which
aren't rendered "below the fold", i.e. below the
bottom of the rendered page, which is evident on
vertical scrolling.  This behavior also occurs when
scrolling back up--the previously rendered border at
the top of the page is poorly rendered.

Additionally, when mousing over a link, the border
rendering becomes differently, if predictably, broken:
some part of the left and right borders of
#contentWrapper disappear, starting around 100px below
it's top edge and 50px or so above its bottom edge.

Lastly--and this is probably somewhere on
quirksmode.org or positioniseverything.org, but of
lower priority for me--there is a gap of something
like 5px between the #header div and the
#contentWrapper div.  This happens whether or not I
feed IE special rendering instructions via conditional
comments.

(b)  There is a gap of about 15px between the #header
and #contentWrapper divs on Firefox 1.0.7 / WinXP.  I
have scoured through the fairly anemic CSS and not
found any reason for this in the code itself.  Both
the XHTML and CSS validate, for what it's worth.  I
had applied a negative margin, which, for FF, worked
perfectly; but...

(c)  ...on Safari (OS X 10.3.9, not sure what version
of Safari, though), the right border of the
#contentWrapper div renders just to the right of the
#header div, IF that negative margin is applied to
#contentWrapper.  I removed that from work today
(WinXP), and haven't tested it at home, so I'm not
sure if that fixed it.  My guess is that the 15px gap
will appear when using Safari as well.

Overall, it's not critical faultiness; but I'd really
like such a simple site to render nicely.  I
appreciate any tips and pointers along the way.

Thanks,

Daniel




__ 
Yahoo! Mail - PC Magazine Editors' Choice 2005 
http://mail.yahoo.com



__ 
Yahoo! FareChase: Search multiple travel sites in one click.
http://farechase.yahoo.com
__
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] Server issues

[Tom Livingston]

I'm sending this blind. . .

Can a list mom contact me off list please. Since the server switching that  
I heard about from a WSG lister, I am not receiving any messages from the  
CSS-D list.

Thanks!

-- 
Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com

Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
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] Site Page Check please.

[tedd]

David:

I'll try to answer your questions as I can -- for now:

>Why is each top level item in a list with just one item in it?

To mimic the typical menu layout you find in applications.

You see, in any application you may have, the top menu item is 
usually a category and, as such, seldom takes you anywhere. That's 
the reason I separated them out as a single item and the only item 
that uses a down-arrow.

tedd
-- 

http://sperling.com/
__
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] Missing border in FireFox

[Ingo Chao]

Tom Dell'Aringa wrote:
> ...  I have the typical UL vertical left
> navigation on one of my sites. In FireFox/Mozilla only, the separating bottom 
> border lines tend to
> disappear at certain rates. I read somewhere this was an issue with relative 
> font sizing, but I
> tried changing the font size to a fixed size and that did not help. You can 
> see it here:
> 
> http://www.innovativeconcretesolutions.net/
> http://www.innovativeconcretesolutions.net/ics.css
> 
> How can I fix it so all the lines show?

You are defining a font-size of 100.01% and a line-height of 1.3em in body.

If for example 100% means 16px on your system, 1.3em means 20.8px offset 
for each li ( ... boring winding calculation snipped ...) so the bottom 
border of the 3rd li would be drawn at 62px integer offset and the 4th 
li would start at rounded 62px offset and overpaint the border in effect.

(A fixed font size you may have tried without changing the line-height 
to a fixed size suffers from this rounding problem too. But with these 
fixed settings IE cannot text-zoom anymore.)

When the problem is a result of the li/a overpainting the preceding 
border-bottom, you could try to set a border-top instead, so that the 
rounding problem is still there but invisible (the 4th list entry with a 
white top border would overpaint a line of your red background in the 
3rd entry).

The gaps that may occur at certain text-zoom level and add 1px of white 
to the border can be "closed" by applying a red background-color to the ul.

They have already fixed this problem in newer Fx versions.

Ingo

-- 
http://www.satzansatz.de/css.html
__
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] Newbie in CSS Questions

[Anthony Ettinger]

left column


right colum



#leftcolumn {
  float: left;
}

#rightcolumn {
  float: right;
}


if you need to clear the parent (ie -  with background-color ), then google
"site:positioniseverything.com clearfix"

Here's an example 3-column layout I did:
http://chovy.dyndns.org/layout/three-column-layout.html

--- Reynier Perez Mira <[EMAIL PROTECTED]>
wrote:

> Well as you can see in the subject of the email, I'm
> newbie in use CSS.
> Investigating and do some search on Internet I found
> that page contains
> DIV are more practically than pages contains only
> tables and other HTML
> elements. Now I pass all the code of my site to DIV
> because all of them
> are build using tables. I have some questions about
> DIV and CSS. 
> 1) How I can put a DIV and in the side another DIV
> and in the side
> another DIV? Something like 3 columns in HTML table.
> 2) When I put this code into my CSS file:
>  .classcss.right {
>float: right; 
>  }
>  .classcss.left {
>float: left; 
>  }
> And then I apply to a DIV such as class.
>  Element
> The elements are organized side by side but not in
> the way that I want.
> I want that all are in the same line, mean aligned
> bottom
> 
> How I do this stuff ?
> 
> Regards
>
__
> 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/
> 


Anthony Ettinger
ph: (408) 656-2473
web: http://www.apwebdesign.com
__
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] Newbie in CSS Questions

[Reynier Perez Mira]

Well as you can see in the subject of the email, I'm newbie in use CSS.
Investigating and do some search on Internet I found that page contains
DIV are more practically than pages contains only tables and other HTML
elements. Now I pass all the code of my site to DIV because all of them
are build using tables. I have some questions about DIV and CSS. 
1) How I can put a DIV and in the side another DIV and in the side
another DIV? Something like 3 columns in HTML table.
2) When I put this code into my CSS file:
 .classcss.right {
   float: right; 
 }
 .classcss.left {
   float: left; 
 }
And then I apply to a DIV such as class.
 Element
The elements are organized side by side but not in the way that I want.
I want that all are in the same line, mean aligned bottom

How I do this stuff ?

Regards
__
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] Page not printing properly in IE

[Fred Boulton]

The following page prints fine in FireFox but in IE6 the first printed page
is o.k. but the 2nd is not. If I remove the 3 lower right-hand pictures the
printout is fine. I've spent too many hours trying to fix the prob and I'm
hoping someone on the list can see what's happening.

Thanx

Fred Boulton

Boultons Web Dev & IT
http://www.boultonsweb.com



--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.12.6/152 - Release Date: 31/10/2005

__
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] Site Page Check please.

[Christian Heilmann]

> > Good job! One comment/question: have you
> > tried/considered keyboard navigation? Would it be
> > possible to update the code to accommodate tabbing and
> > selection of child sub menus in the drop downs using
> > the keyboard?
>
> I wrote a script to take care of this. It goes only one level deep but could
> be modified to accomodate the extra level.
> http://www.tjkdesign.com/articles/dropdown/demo.asp

Nice but please not again this discussion...

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
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] Site Page Check please.

[Thierry Koblentz]

Krassy wrote:
> Good job! One comment/question: have you
> tried/considered keyboard navigation? Would it be
> possible to update the code to accommodate tabbing and
> selection of child sub menus in the drop downs using
> the keyboard?

I wrote a script to take care of this. It goes only one level deep but could
be modified to accomodate the extra level.
http://www.tjkdesign.com/articles/dropdown/demo.asp

Thierry | www.TJKDesign.com

__
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] Suckerfish blues (again)

[css.student]

what are the problems? All that I can see is that the link text is not
being hidden...anything else?

to hide the text, you'll need to edit the markup:
link

and the css, accordingly:

li a b {visibility:hidden;}

- CSS Student


On 10/31/05, Vicki Stebbins <[EMAIL PROTECTED]> wrote:
> At 11:26 AM 31/10/2005, Graham Reeds wrote:
> >I have implemented a suckerfish menu for a redesign of a game site.
> >
> >However every implementation I come up with works fine in FF and Opera8,
> >but fails in IE6 (only tested on Windows).
> >
> >I also used the block image code which I was having trouble with last
> >week (thanks for the help).
> >
> >The test site is here: http://homepage.ntlworld.com/graham.reeds/space
> >and the css is here
> >http://homepage.ntlworld.com/graham.reeds/space/styles/space_styles.css
> >
> >...
> >
> >Thanks, Graham Reeds.
>
> Hi Graham,
>
> I have to say I got so frustrated with the suckerfish menu I bought
> Eric Meyer's Book 'More Eric Meyers on CSS' and implemented his menu (easy
> and worked well), it also had how to do an image gallery which was perfect
> for the job I was working on.
>
> I was pointed to the book by Kev Adamson http://www.kevadamson.com, he had
> used it in the sites he designed.
>
> Regards
>
> Vicki
>
>
> __
> 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-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] Problem setting width on an a link

[Ryan Tyer]

Hello all.

My basic problem is this:

I need to get an input on the same line as an .  The  needs to
have a width set and right padding (trying to get the inputs to line
up, ala a table.  I don't want to use a table in this case, because
we're going to have a nested tree of information).  Is there anyway to
do this?

Below is an example that illustrates the problem.  This is the closest
I've come to solving it.

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
http://www.w3.org/1999/xhtml"; xml:lang="en" >

Test Page

li{
width:250px;
border:1px solid red;
}
li a{
display:block;
border:1px solid orange;
}





Test Parent

Oreo Cookies that are 
tasty
tots



10/5 patties






__
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] Site Page Check please.

[Krassy]

--- tedd <[EMAIL PROTECTED]> wrote:
> http://www.sperling.com/examples/menuh/
> --- for how it works, looks, and if it is
> technically correct.

Hi Tedd,

Good job! One comment/question: have you
tried/considered keyboard navigation? Would it be
possible to update the code to accommodate tabbing and
selection of child sub menus in the drop downs using
the keyboard?

Cheers,
Krassy



--
http://www.krassy.com - http://www.krassycandoit.com/blah/



__ 
Yahoo! FareChase: Search multiple travel sites in one click.
http://farechase.yahoo.com
__
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] Site Page Check please.

[David Dorward]

On 01/11/05, tedd <[EMAIL PROTECTED]> wrote:
> Please review this page --
> http://www.sperling.com/examples/menuh/

In Opera, the drop down menu appears over the preceeding paragraph and
not in the gap.

It suffers the usual problem of requiring users to have the motor
skills to track the menu exactly (e.g. no diagonal mouse movement to
get from 2:5 to 2:5:5

Lynx has the word "stop" splattered all over the place. It looks like
you need to seriously rethink you alt text.

Why is each top level item in a list with just one item in it?

Keyboard navigation to subitems appears to be impossible

--
David Dorward 
__
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] Site Page Check please.

[tedd]

Hi gang:

Please review this page --

http://www.sperling.com/examples/menuh/

--- for how it works, looks, and if it is technically correct.

Thanks in advance for your review, suggestions, or corrections.

tedd

-- 

http://sperling.com/
__
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] Space after List Items

[jordan WOLLMAN]

Cancel that order! I Found an old post on here about it. Seemed I had failed
to specify a width. :D

Thanks.

Jordan WOLLMAN // Ariamedia Corporation

> I¹ve come across this problem repeatedly... I cannot find a way to fix it. I
> thought I had found one, but it doesn¹t seem to make a difference.
> 
> url: http://www.fringeimage.com/
> css: http://www.fringeimage.com/assets/styles/global.css
> 
> The li¹s in the nav at the top (two rows of links) has space below the first
> row in IE. In FF or Safari it looks fine.
> 
> Anyone?!


__
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] nested ul question

[Schalk]

Greetings All

I am currently developing a menu that uses a nested  within an , 
nothing new here. However, what I want to do is that when the  is 
clicked the nested  should show and push down the rest of the 
'top-level'  elements not, display over them. Anyone knows of a 
tutorial etc. on this using CSS?

What I have so far is:

#navigation {
background-color:#84adc6;
position:relative;
float:left;
margin:0;   
padding:0;   
width:150px;   
}
#navigation ul {
margin:0;
padding:0;
list-style:none;
}
#navigation li {
padding-top:5px;
padding-right:5px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
height:20px;
text-align:right;   
}
#navigation li a:link, #navigation li a:visited {
padding-top:5px;
padding-right:5px;   
height:20px;
text-align:right;   
}
#navigation li ul {
position:relative;   
top:0;
display:none;
}
#navigation li:hover ul {
display:block;
}

Thanks in advance.

-- 
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers


__
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] Tables and Vertical Alignment

[Richard Brown]

Hi Guys

I have been styling a site at:


The css is embeded. I have used tables but cannot get to grips with  
vertical-alignment. I have styled the tables using css and used  
vertical-alignment: top; to get the text and price box to sit at the  
top of the tabel. However, it doesn't work. It seems that this might  
not be browser friendly. Could you please tell me how I might get the  
text and price box to site at the top of the column please?

Thanks for all the help.

Rich
http://www.cregy.co.uk
So here's what I want you to do, God helping you: Take your everyday,  
ordinary life--your sleeping, eating, going-to-work, and walking-around  
life--and place it before God as an offering. Embracing what God does  
for you is the best thing you can do for him. Romans 12 v 1
__
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] Space after List Items

[jordan WOLLMAN]

All,

I¹ve come across this problem repeatedly... I cannot find a way to fix it. I
thought I had found one, but it doesn¹t seem to make a difference.

url: http://www.fringeimage.com/
css: http://www.fringeimage.com/assets/styles/global.css

The li¹s in the nav at the top (two rows of links) has space below the first
row in IE. In FF or Safari it looks fine.

Anyone?!

Jordan WOLLMAN // Ariamedia Corporation
__
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] 100% Height Issues

[jordan WOLLMAN]

Hello all,

I recently launched my site: http://www.blueplasmarecordings.com/
Relevant CSS: http://www.blueplasmarecordings.com/assets/styles/global.css

The height thing again. Seems like this is a problem I can¹t seem to get
right! Any 404 page is a good example.

Works fine on the Mac FF and Safari. IE is a no go.

Anyone?

Thanks,

Jordan WOLLMAN // Ariamedia Corporation
__
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] background-position problem in Safari

[Roger Roelofs]

Beth,

On Oct 31, 2005, at 11:03 AM, Creighton, Beth wrote:

> Hi, I'm redoing my personal blog: http://astarwithin.com and I can't 
> seem to
> get my background to work correctly in Safari. It completely ignores 
> the
> background positioning and moves it to the default position (0px 0px).

What version of Safari are you using?  Versions up to 1.0x had bugs in 
this area.  I'm using 1.3x and the only difference I see is that the 
background color of the div classed 'begin-entry' is not transparent.  
Try setting it explicitly.

hth
Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
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] Missing border in FireFox | Mozilla in vertical menu using UL

[Tom Dell'Aringa]

This was part of another question I asked. I was able to solve the content box 
issue, so this is
more specific to my other problem which remains unsolved. I have the typical UL 
vertical left
navigation on one of my sites. In FireFox/Mozilla only, the separating bottom 
border lines tend to
disappear at certain rates. I read somewhere this was an issue with relative 
font sizing, but I
tried changing the font size to a fixed size and that did not help. You can see 
it here:

http://www.innovativeconcretesolutions.net/
http://www.innovativeconcretesolutions.net/ics.css

How can I fix it so all the lines show? Is it possibly an issue with the LI?

Thanks

Tom





http://www.pixelmech.com/

A man spoke frantically into the phone: "My wife is pregnant and her 
contractions are only two minutes apart"! "Is this her first child?" the doctor 
asked. "No, you idiot!" the man shouted. "This is her husband!"

Q: What do you call a muddy chicken who crossed the road two times?
A: A dirty double crosser...

__
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] IE and the horse it rode in on...

[Ingo Chao]

Rob Day wrote:
> ... As I understand
> it, when a PNG is specified as a background in CSS with
> AlphaImageLoader filter applied AND that element is absolutely
> positioned, links in that element (or its children) will be messed up
> in IE 6 (and 5.5, I believe).
> 
> Here's my example: http://groucho.tsl.state.tx.us/test/ 
> 
> ... The part of the masthead that is supposed to be a link is on the top
> right--the part that says "Texas State Library and Archives
> Commission". In Firefox, Safari and Opera you'll see a black box
> around this area. In IE you won't.  ...

The idea is to move the filter from the absolute positioned ancestor of
the link to a non-positioned child with the same dimensions that
contains the link (an inner wrapper) [1]

#masthead #iepng {
   /* bg png moved from masthead */
   background: transparent url('masthead.png') no-repeat right center;
   /* dimensions equal to a.p. #masthead */
   width: 100%;
   height: 100%;
   }


   
 
   



Ingo

[1] http://www.satzansatz.de/cssd/tmp/alphatransparency.html

__
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] IE6 border color change on refresh

[Ingo Chao]

Big John wrote:
> Ingo Chao wrote:
> 
>> Looks like as if the bug is triggered by a li with a background-image, 
>> "layout", and dotted or dashed border. Depending on the vertical 
>> starting point of the ul, different parts of the page content is 
>> mirrored into the space between the dots of the border.
> 
> Again and again and again, I am amazed at the depth of
> IE's bug suite. Holly and I have seen image repeats connected 
> to border issues before, but not like this. We discovered that
> when such border bugs are occuring, there are sometimes 150px tall
> "zones" that stack down the page, and these zones partially affect 
> the border bugs. I would not be suprised to see this 150px height 
> show up somewhere in the current bug as well.
> 
> Big John

Thanks John :)

I noticed that 150px value accidentally by searching for a better 
vertical offset for the first bordered li and used margin-top: 150px; in 
my test case. With this offset, the "mirrored image" between the dots 
starts with the first line of the photo. (And a border-bottom-width of 
150px for the li would show the entire "zone" and more fun while 
scrolling.) This value seems to be resolution-independent.

Maybe that could be a hint why different parts of Kara's images showed 
up in the first test case and why removing some li with borders in 
Kara's original page did trigger the bug to appear.

Ingo

-- 
http://www.satzansatz.de/css.html
__
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] Hover Persistence in CSS

[Roger Roelofs]

Jared,

On Oct 31, 2005, at 1:19 PM, Jared Nielsen wrote:

> I'm rebelling against javascript (for the hover states) in my tabular 
> menus
> so I'm seeking some guidance
> 
> It all works swimmingly, but the "active" state is what I want to 
> persist
> once they have clicked on it.

Having a 'live' page to see this on would help in getting cogent 
answers.  Having said that, the css active pseudo-class is only 
available (as you have discovered) while it is the 'active' link.  
Usually, clicking on a link forces a page reload, so it's not something 
people think about a lot.  If clicking the link doesn't change pages, 
you will have to use classes and a small snippet of javascript to set 
the className as appropriate.  If you need to go down this road, 
contact me off-list and I'll be glad to help.


Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
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] white gaps between divs inIE6

[William Gates]

Many thanks Georg - problem fixed.
William

__
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] white gap between two divs in IE6 Win

[webmaster]

Hi there,

You posted 10 hrs ago so maybe you've fixed this? I don't see any gap on IE6
win xp.

Cheers,
Bill

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of William Gates
Sent: Monday, October 31, 2005 2:25 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] white gap between two divs in IE6 Win

Hi,
On IE6 Win, there is a white gap between my header div, and the nav div 
below it.
There seems to be no problem on IE Mac, Safari, or Firefox. Any help 
much appreciated.
William
http://www.viadesign.co.uk/index.htm
http://www.viadesign.co.uk/styles/master.css (css)

__
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-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] white space in listitem menu

[Roger Roelofs]

Maarten,

On Oct 31, 2005, at 7:27 AM, Maarten Reynders wrote:

> I'm building my first "table-less" site with s and css. But now 
> I've got a problem which is driving me nuts for over 3 hours. You can 
> check the site at http://www.inventis02.be/. In firefox everything is 
> fine, but when you check it in internet explorer, you can see every 
> button in the navigation has white space between the button and de 
> bottom-border. It would be super if anyone could help me out with this 
> problem.

This problem only appears in ie/win.  It is known as the 'whitespace' 
bug.  To get around this, I usually change the list markup to remove 
the linebreaks _between_ tags.  like so

homepraktijkverwijderen van 
tekensteriliseren 
van 
hondenachter de schermeninformatielinkscontact


You can also solve the problem by adding ie-only css to close up the 
gap.  Neither solution is optimal, but when dealing with ie6 that's 
often the way it goes.

Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
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] IE6 border color change on refresh

[Big John]

Ingo Chao wrote:

> Looks like as if the bug is triggered by a li with a background-image, 
> "layout", and dotted or dashed border. Depending on the vertical 
> starting point of the ul, different parts of the page content is 
> mirrored into the space between the dots of the border.

Again and again and again, I am amazed at the depth of
IE's bug suite. Holly and I have seen image repeats connected 
to border issues before, but not like this. We discovered that
when such border bugs are occuring, there are sometimes 150px tall
"zones" that stack down the page, and these zones partially affect 
the border bugs. I would not be suprised to see this 150px height 
show up somewhere in the current bug as well.

Big John



-- 
Perennial student + Impractical joker + CSS junkie = Big John





__ 
Yahoo! Mail - PC Magazine Editors' Choice 2005 
http://mail.yahoo.com
__
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] site check - Omega-Tek.com

[Ingo Chao]

Philippe Wittenbergh wrote:
> Bug 286368
> 
> I think.
> The outline-offset is as good a workaround as possible.

Thanks, Philippe :)
Interesting discussion, I hope they don't ship 1.5 with the need for 
that workaround.

Ingo
-- 
http://www.satzansatz.de/css.html
__
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] Vertical Scroll not working in Mozilla

[Roger Roelofs]

Tim,

On Oct 31, 2005, at 5:44 PM, Tim Robertson wrote:

> Hi,
> I'm VERY new to CSS and am attempting a page with three vertical div
> areas.
> -First area - menu  - static - no scroll
> -Second area - content - scroll as needed
> -Third area - static - no scroll
>
> My page works fine in Internet Explorer and Safari (I'm on Mac OS X
> 10.4.2), but with Mozilla/Firefox the page looks correct and the
> scrollbar appears on the far right as I want it to but it seems to be
> frozen.  It indicates that there is a part to scroll down to, but the
> scrollbar does not work.
>
> My CSS is here:
> http://www.m-2-design.com/IF/CSS/IF-All.css
>
> The page displaying the CSS is here:
> http://www.m-2-design.com/IF/index.php

This may be a mac specific browser bug.  I'm seeing the behavior you  
describe in firefox 1.5b2 on MacOS X 10.3.9.  Funny thing is, if I make  
my window narrow enough to get a horizontal scroll bar also, then it  
scrolls properly.

Having said that, the page isn't valid markup which tends to confuse  
browsers.  Fix these errors  
 and see if the problem goes away.  If not, let  
me know and I'll see what I can dig up.


Roger,

Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
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] background

[Chris Akers]

> Can you stretch a background image like a windows desktop?
> i wish to have a gradient background and i wish to stretch it based on the
> resolution

On background images, no. On regular images, yes. But that is bad,
bad, bad. Definitely don't do this:

http://www.w3.org/TR/html4/strict.dtd";>


Stretchy Gradient

*{
margin:0px;
padding:0px;
}
#hdr{
position:relative;
height:100px;
overflow:hidden;
}
.fauxbg{
position:absolute;
top:0px;left:0px;
width:100%;
height:100px;
}
#hdr H1{
position:absolute;
top:0px;left:0px;
padding:15px;
color:#072B8A;
}



http://usera.imagecave.com/chakers/css/gradient.jpg";
CLASS="fauxbg" ALT="Sorry, this image has no semantic value. Please
forgive me."/>My Stretchy Gradient


__
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] site check - Omega-Tek.com

[Philippe Wittenbergh]

On 1 Nov 2005, at 12:37 am, Ingo Chao wrote:

> I mentioned in another thread [1] on that URL Christian provided that
>#rightnav a:active,
>#rightnav a:focus {outline-offset: -1px;}
>
> seemed to fix it at that specific moment in Fx1.5beta2 (Mozilla/5.0
> Windows; U; Windows NT 5.1; en-US; rv:1.8b5) Gecko/20051006). Didn't
> test it again now.
>
> I couldn't reproduce the problem with the focus outline in Fx1.0.5
> (Mozilla/5.0 Windows; U; Windows NT 5.1; en-US; rv:1.7.9)
> Gecko/20050711) either, so I think its dependent on the version of
> Firefox again.
>
> Anyway, would be convenient if someone could check this workaround and
> would report any bugzilla findings he made of this bug.

Bug 286368

I think.
The outline-offset is as good a workaround as possible.

Philippe
---
Philippe Wittenbergh


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