Re: [css-d] Firefox CSS/table weirdness

[Gunlaug Sørtun]

Guy K. Haas wrote:

D'oh.  OK.  How about http://covinahigh68.com/navtest.html



In IE and Opera, it works as advertised, tabs with text and no bullets.
In Firefox 1.0.6, the bullets appear.

What am I overlooking?


_Where_ you put that style.

#navigation ul {list-style: none;}
...is no good since there's no bullets on ul.

#navigation li {list-style: none;}
...will work just fine.

It's the 'float:left;' style that makes most browsers hide the bullet, 
but that's not good enough for Firefox.


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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Firefox CSS/table weirdness

[L. David Baron]

On Sunday 2005-09-18 14:47 -0700, Guy K. Haas wrote:
> It uses an in-line  with list-style: none, and end-of-box 
> backgrounds to make the tab edges.
> 
> In IE and Opera, it works as advertised, tabs with text and no bullets.
> In Firefox 1.0.6, the bullets appear.
> 
> What am I overlooking?

On Sunday 2005-09-18 15:44 -0700, Guy K. Haas wrote:
> D'oh.  OK.  How about http://covinahigh68.com/navtest.html

Your stylesheet says:

#navigation ul
{
list-style: none;
padding: 0;
margin: 0
}

That selector matches any ul element inside an element with
id="navigation".  But in your document the id="navigation" is on the ul
element itself, so this selector doesn't match anything in the document.

-David

-- 
L. David Baronhttp://dbaron.org/ >
  Technical Lead, Layout & CSS, The Mozilla Foundation


pgpGOh6GJOKJc.pgp
Description: PGP signature
__
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 hover panel and IE

[Richard Grevers]

I have a list of form inputs which, when you hover the labels need to
show the relevant address data.  While Eric Meyer's example uses links
and inline elements, the address display function I'm calling outputs
block elements, and there's not much I can do about that.

 The following works in Opera and Firefox just with hover on div, but
we have a few recalcitrant IE users, so I have added a link and
attempted to add a "do something" on the a:hover as various answers to
similar questions have suggested, but still no dice.
I've tried forcing quirks mode for IE, but the result is the same.

Can anyone spot the problem?
Also, a secondary effect seems to be that the   element doesn't
function in IE

Its an intranet site, so no live example, sorry.
Styles

#labelcontainer {width: 45%; position:relative; border: 1px solid #ccc;}
#labelcontainer a {display:block; width: 100%}
#labelcontainer a:hover  {background-position: 0 0; }
#labelcontainer div.addresspanel {display:none;}
#labelcontainer div:hover div.addresspanel {display: block; position:
absolute; left:105%; top: 0; width: 100%; padding: 5px; border: 1px
solid red;}
* html #labelcontainer a:hover div.addresspanel {display: block;
position: absolute; left:105%; top: 0; width: 100%; padding: 5px;
border: 1px solid red;}
.rc {background-color: #EFC953; margin:3px 0;}
.ac {background-color: #F2B966; margin:3px 0;}  
.bc {background-color: #F5AA78; margin:3px 0;}
.ru {background-color: #EFC953; margin:3px 0;}
.au {background-color: #F2B966; margin:3px 0;}  
.bu {background-color: #F5AA78; margin:3px 0;}


HTML fragment


Load With
 Domain
Registrant Domain
Registrant
(Individual)

Name
John Doe
Address
15 Somewhere St
Sometown 
     
New Zealand
Email
[EMAIL PROTECTED]
Telephone
+64-6-5551234
Fax
+64-6-5551235 



-- 
Richard Grevers
New Plymouth, New Zealand
Orphan Gmail invites free to good homes.
__
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] Firefox CSS/table weirdness

[Guy K. Haas]

D'oh.  OK.  How about http://covinahigh68.com/navtest.html

--g

Christian Heilmann wrote:

Following the paradigm in Webcredible:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml
  (http://tinyurl.com/4f5c3)

I created this tab set:

file:///C:/Websites/Covina68/navtest.html

It uses an in-line  with list-style: none, and end-of-box
backgrounds to make the tab edges.

In IE and Opera, it works as advertised, tabs with text and no bullets.
In Firefox 1.0.6, the bullets appear.

What am I overlooking?



Basically that we cannot access your hard drive. :-) 



__
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[2]: [css-d] variable width left column, left+right column tops line up

[Steve Clay]

> CJ Larson wrote:
>> The bullet lists line up with each image, so they also need to line *up*
>> with the images. 
>> +-+
>> |=== :  - bullet  |
>> |Graphic :  - bullet  |
>> |=== :  - long long bullet|
>> +-+

Is the graphic associated with the list or is it just random decoration?
If it /is/ associated, a table would be an OK (if not ideal) element to
semantically link these elements together.

Steve
-- 
http://mrclay.org/ : http://frenchhorns.mrclay.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] Firefox CSS/table weirdness

[Guy K. Haas]

Following the paradigm in Webcredible:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml
  (http://tinyurl.com/4f5c3)

I created this tab set:

file:///C:/Websites/Covina68/navtest.html

It uses an in-line  with list-style: none, and end-of-box 
backgrounds to make the tab edges.


In IE and Opera, it works as advertised, tabs with text and no bullets.
In Firefox 1.0.6, the bullets appear.

What am I overlooking?

--Thanks,
   Guy K. Haas
   Software Exegete in Silicon Valley

__
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] variable width left column, left+right column tops line up

[Bob Easton]

CJ Larson wrote:

I know this is possible with tables pretty easily, but I'm clueless as
where to start with CSS.  I have some variable-width and -height images
that need to go in a left hand column, and a set of bullets to go in a
right column.  The bullet lists line up with each image, so they also
need to line *up* with the images.  I would know how to get either the
tops or widths lined up but I don't know enough to do both.

I'm sorry I don't have a live site to post a graphic or sample page on,
but I hope this ascii will give you the general idea:

+-+
| =  :|
| =  :  - bullet  |
| ===Graphic===  :  - bullet  |
| =  :  - long bullet |
| =  :|
+-+

+-+
|:|
|=== :  - bullet  |
|Graphic :  - bullet  |
|=== :  - long long bullet|
|:|
+-+

The graphic is centered both horizontally and vertically, and the
bulleted list is centered vertically as well.  The dotted vertical line
(:) needs to be the same distance from the left on all graphic/list
combos to line the page up.

Is this possible with CSS?



I see no answer on the list.  Maybe someone responded off list?  If not, 
the reason is that it's impossible to solve a problem or offer a 
solution without seeing working code, and without knowing exactly what 
you want to see.


Some part of this is possible with CSS, but probably not to the extent 
you might want.  Vertical centering is not one of the easy things to do 
with CSS, but it can be done. If the images and the lists are about the 
same vertical height, they could be put side by side in a container and 
that container then be given top and bottom margins to produce the 
centering.  However, the first time someone increases text size, 
kabloooey!  Of course, you'd have that in a table based design too.


See our WIKI for more information on centering:
http://css-discuss.incutio.com/?page=CenteringBlockElement

--
Bob Easton
Accessibility Matters: http://access-matters.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] IE table weirdness

[Bruno Fassino]

Adrian Yee wrote:

> http://devrandom.com/test/tablefun.html
>
> If you view the example in IE, you'll notice that even though
> the first rows use the same styles (with widths set on rows
> bar and baz), the 2nd and 5th table are incorrectly rendered.

I don't know why this happens, but adding the property "table-layout: fixed"
to your tables, the results seem what you expect.
I think that 'width' on table cells is always interpreted rather liberally
(at least in some browsers), so if you change the contents of your cells you
may still have varying results...

hth,
Bruno

__
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] RE: javascript & form position

[Johan]

Hi,

A testpage does help to understand better your problem.
But there is a way to scroll back in your form in a animated way:


I requires only 'named' anchors and the script.

Cheers,

Johan


__
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] Table Column Background Problem in Mac/Safari

[Edith Karnitsch @ Terranetwork]

Hi everybody!

 

Newbie to the list (so any errors in my submission please let me know!)

 

The site I'm working on contains a table - I've tested on the following:

WindowsXP --> IE6, Opera, Firefox 1.0.6

Mac --> Safari

and I've noticed that Safari does not display the column background. Being a
bit of a perfectionist, I wanted to ask if this is a known issue (and
whether there's a work-around) or if I made an error. 

 

URL is: http://www.terranetwork.net/terra05/web_hosting_overview.php

 

CSS is: http://www.terranetwork.net/terra05/stylesheet.css

(table formatting starts at line 194)

 

Relevant CSS is:

 

col.column901 {

  width: 90px; 

  background: rgb(241,242,244);

}

 

col.column902 {

  width: 90px; 

  background: rgb(234,236,238);

}

 

The design is two alternating column colours to make it easier to read data.
I've searched the web / list and my books but couldn't find a relevant entry
- Safari's support for columns seems to be patchy, but that's pretty much
all I found. Any links to relevant sites which document Safari bugs would be
welcome as I'm keen to get the site working on most platforms.  

 

PS: site still in development, dummy content only, only a few links working
(non-working links will lead to homepage), but any observations always
welcome. Site will be CSS-based but tables used where appropriate, i.e. in
product overviews. 

 

Many thanks!

Edith Karnitsch 

 

__
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, javascript & form position

[ross]

Hi,

I have a long form inside a DIV (form_holder). When the form is submitted I 
jump to the 
current position by using

form name="form" method="post" action="menu.php#ReturnToHere">

The problem is  this is quite jumpy. Is there a way to make a smooth scroll 
with javascript or css or both to my form position?? 

I am not really very good at javascript and do not know how to use the 
scrollTo(x, Y) along with a named div.

Something like
this.form_holder.scrollT0(400, 200)




R. 


__
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] Dropdown menu not working properly in IE

[curson]

Hello list,
I've been working on modifying the CSS-Dropdown/Floating Menu template from:
http://www.positioniseverything.net/css-dropdowns.html for quite a while, and
once getting rid of all the "floating" part (I don't need it) and once
modified all the rest, I came out with 5 perfectly working dropdown menu for
my page. Of course, I used the needed ".htc" file workaround to make dropdown
working in IE. 

Now, the problem.

In Opera 8.02/Linux, Firefox 1.06/Linux+Win, Mozilla/Linux the dropdown work
perfectly as needed. Of course, not in IE x.x/Win. I know this code is not
going to work when jscripts are disable, but the fact is that IE displays
correctly the dropdown, but when scrolling down with the mouse, it's
impossible to reach the last "voice" in the list (the last one down), because
when the mouse is over there, the dropdown menu disappear. I thought could be
a problem of margins, but I really couldn't find out where is the real
difference between my code and the "positioniseverythin.net" code. The only
big differences are about the missing floating-menu and dimensions.

page: http://www.ussleonardo.net
CSS: http://www.ussleonardo.net/styles.css

I'm a novice with CSS, but the more I work with them, the more I hate IE :p

Bye.

-- 
curson
"Fear is the mind killer, fear is the little death that brings total
obliteration."
 
 
 --
 Email.it, the professional e-mail, gratis per te: http://www.email.it/f
 
 Sponsor:
 Con Blu American Express hai la massima flessibilità di pagamento, richiedila 
ora è gratis!
 Clicca qui: http://adv.email.it/cgi-bin/foclick.cgi?mid=3815&d=18-9
__
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] Unrelated divs seem to be interlinked on the bottom border.

[Alan Chandler]

On Saturday 17 Sep 2005 17:16, Gunlaug Sørtun wrote:

One way to "isolate" the problem:

Add the following styles, with underscores and all, at the bottom of
your stylesheet:

@media all {
#pagebody { 
margin: 0 5px 0 5px;
overflow: hidden;
_height: 0;
_overflow: visible;
}
#menuapps {
margin-right: 5px;
_margin-right: 2px;
}
}


On Sunday 18 Sep 2005 09:29, Alan Chandler wrote:
> On Sunday 18 Sep 2005 08:58, Alan Chandler wrote:
> > Actually, I just discovered a really strange side effect, which does not
> > show up on the static pages I put up before as an example


OK - I cracked it.

The code above has a few strange characters which are not visible in the text 
but are there anyway to the right of the { in the #pagebody spec.

Remove them, and it all works fine.


-- 
Alan Chandler
http://www.chandlerfamily.org.uk
__
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] Unrelated divs seem to be interlinked on the bottom border.

[Alan Chandler]

On Sunday 18 Sep 2005 08:58, Alan Chandler wrote:

>
> Actually, I just discovered a really strange side effect, which does not
> show up on the static pages I put up before as an example
...
>
> http://www.chandlerfamily.org.uk/famtree/test3
>
> uses chandler1.css - which has the changes suggested earlier in the thread
>
> http://www.chandlerfamily.org.uk/famtree/test4

Actually - this is browser dependant.  IE (win) seems to work fine.  
Konqueror, which is my main browser, gives the effects I describe, whilst 
Mozilla Firefox (both windows and linux) gives an additional left margin.


-- 
Alan Chandler
http://www.chandlerfamily.org.uk
__
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] Unrelated divs seem to be interlinked on the bottom border.

[Alan Chandler]

On Saturday 17 Sep 2005 17:16, Gunlaug Sørtun wrote:
> Alan Chandler wrote:
> > Thank you, it works
>
> Good ;-)

Actually, I just discovered a really strange side effect, which does not show 
up on the static pages I put up before as an example

On my real application (which has headers and a second menu across the top) 
the #pagebody div now seems to be centred within the browser window, with a 
margin on the right hand side equal to the margin on the left hand side 
created by the #menuapps div.

I have created a static copy (the links don't work, and the css called images 
are not available) but it shows the effects

http://www.chandlerfamily.org.uk/famtree/test3  

uses chandler1.css - which has the changes suggested earlier in the thread

http://www.chandlerfamily.org.uk/famtree/test4

uses the same raw code but uses chandler2.css instead.  This does not have the 
fix (although everything else is identical)

Note how the right margin is in a different place.

Any ideas why?



-- 
Alan Chandler
http://www.chandlerfamily.org.uk
__
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/