[css-d] Man vs. Suckerfish

[Michael Venables]

The jury's still out on which one of us is winning.

I've been playing with the original listapart Suckerfish menu for 
awhile, and recently became aware of the existence of the vastly 
improved Son of Suckerfish. Liking the styling of the original, I've 
been trying to adapt it to the new markup (by tracing through both 
sets of CSS and trying to figure out how to seam them together). 
Mostly, I think I've gotten it, but there are a couple of things that 
I just can't seem to get.

1) The offset of the drop down menu in contrast to the element above 
it. It shouldn't be there (and it's markedly worse in IE6), but 
nothing I try seems to have any effect on adjusting it.

2) In the original Suckerfish, there are embedded decorative images 
that do not get highlighted when they're moused over. It's totally 
cool, but I can't figure out how it's done.

3) The multi-level drop downs just don't work. (I plan on using this 
mostly as a single level menu, but since it's supposed to actually BE 
multi-level it would be nice if it worked. I haven't had time to see 
if I've done something stupid in the code.)

If anybody has a couple minutes to give it a look, I'd sure appreciate it.

Test file and graphics at:
http://www.ronin-group.org/v2/bd/menu/menutest.html

  michael

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

Re: [css-d] Does Safari ignore negative margins?

[Seona Bellamy]

On 19/06/07, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:
>
>
> Note that Safari -version 2- has a truckload or more bugs with
> the :last-child pseudo-class. So much that  it is disabled in current
> WebKit nightly builds and in Safari 3.0beta.
>
> And yes, Safari handles negative margins on floats quite well.
> And I've no idea about that hack of yours; I wouldn't trust it too much.


That might be it then. Anyway, I found another way of solving the problem -
applied the background image to a different element. Now they still probably
don't meet up, but it looks like they do and that's the important thing. :)

Thanks,

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

Re: [css-d] Does Safari ignore negative margins?

[Philippe Wittenbergh]

On Jun 19, 2007, at 9:58 AM, Seona Bellamy wrote:

> Trying to fix a Safari issue where a couple of divs are not sitting  
> hard up
> against each other as they should. I found the following tip for  
> directing a
> rule only at Safari:
> html[xmlns*=""] body:last-child
>
> So I applied it as follows:
>
> html[xmlns*=""] body:last-child #cul-tip {
> margin-top: -30px;
> }
>
> where cul-tip is the div that I want to shift.
>
> Sadly, Safari seems to have ignored this completely. This leads me to
> believe that either a) I've applied the filter incorrectly, or b)  
> Safari is
> ignoring the negative margin.
>
> Can anyone shed some light on this for me please?

Test case ?

Note that Safari -version 2- has a truckload or more bugs with  
the :last-child pseudo-class. So much that  it is disabled in current  
WebKit nightly builds and in Safari 3.0beta.

And yes, Safari handles negative margins on floats quite well.
And I've no idea about that hack of yours; I wouldn't trust it too much.

Philippe
---
Philippe Wittenbergh





__
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] Does Safari ignore negative margins?

[Seona Bellamy]

Hi guys,

Trying to fix a Safari issue where a couple of divs are not sitting hard up
against each other as they should. I found the following tip for directing a
rule only at Safari:
html[xmlns*=""] body:last-child

So I applied it as follows:

html[xmlns*=""] body:last-child #cul-tip {
margin-top: -30px;
}

where cul-tip is the div that I want to shift.

Sadly, Safari seems to have ignored this completely. This leads me to
believe that either a) I've applied the filter incorrectly, or b) Safari is
ignoring the negative margin.

Can anyone shed some light on this for me please?

Cheers,

Seona.
__
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] Blank Wiki?

[Robert Ginn]

A recent posting contained several links, one of which was:

There is helpful info on avoiding hacks for IE6 on the wiki


This link appeared to load in Firefox, but the page was blank.  Choosing 
"View page source" yielded nothing.  I loaded the URL into IE7 and got 
"Internet Explorer cannot display the webpage."

This same scenario has happened before when I tried to view a wiki 
link.  Is there a secret formula for viewing this web page?

Thanks,

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

Re: [css-d] hover causing content to shift in IE

[David Laakso]

Ryan Ray wrote:
> I have a navigation menu that when hovered, causes the content below it to
> shift in IE.
>
> http://www.omart.org/working/index1.html
>   
IE6 doesn't respect dimensions, so you'll have to use "brute force" :-)

Add...

* html #navigation {overflow-y: hidden;}

...and IE6 will behave itself.

regards
Georg

-- 
http://chelseacreekstudio.com/

__
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] [SOLVED] Re: IE7 (6?): AP UL LI A atop IMG -- How?

[Micky Hulse]

Micky Hulse wrote:
> Any suggestions for making things work in IE? :)

Thanks anyway. :)

-- 
Wishlists: 
Switch: 
  BCC?: 
My: 
__
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/

Re: [css-d] text box expanding to full td width inappropriatley

[Jonathan]

Hey great
I was not sure that is what that tag was designed to do and may cause  
other problems that I was or am not aware of
thank you
Jonathan
On Jun 18, 2007, at 12:46 PM, Audra Coldiron wrote:

> Jonathan wrote:
>> I am not sure that I am worried about Explorer (5.2) for the Mac,
>> There is so much new technology that no longer works on that browser.
>> Very interesting regarding the Win-Safari.
>> So I guess the bottom line is that I stick with the "float" ??
>
> If that gets the results you're looking for then go with that.
>
> AC
>
>
> -- 
> Audra Coldiron
>
> Rock-n-Roll Design & Hosting
> http://rock-n-roll-design.com
>
> KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS.  
> Pre-made designs, designer tools, and reseller program available!

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

Re: [css-d] text box expanding to full td width inappropriatley

[Audra Coldiron]

Jonathan wrote:
> I am not sure that I am worried about Explorer (5.2) for the Mac,
> There is so much new technology that no longer works on that browser.
> Very interesting regarding the Win-Safari.
> 
> So I guess the bottom line is that I stick with the "float" ??

If that gets the results you're looking for then go with that.

AC


-- 
Audra Coldiron

Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com

KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS. 
Pre-made designs, designer tools, and reseller program available!
__
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/

Re: [css-d] IE7 - centering page

[David Hucklesby]

On Mon, 18 Jun 2007 18:48:53 +0200, Josef Biechele wrote:
> Hello,
>
> I try to center a page with the following styles:
>
> html, body {
> width: 1000px;
> padding: 0;
> margin: 0 auto;
> }
>
> Works fine in IE6 and FireFox, but IE7 doesn't like it. Confused! What am I 
> doing wrong?
>
> Just in case, her's a link to the mentioned page:
> http://dev.jugendnetz.de:8080/jn3/
>

Hi Josef,

It's working for me here on Win xp Pro SP2, IE 7.0.5730.11.

Cordially,
David
--


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

Re: [css-d] Float problem

[David Hucklesby]

On Mon, 18 Jun 2007 11:38:58 -0500, Amy Drayer wrote:
> Dear CSSers:
>
> This floating problem is driving me crazy.  The layout works fine in IE (so 
> of course
> there's a problem...), and for some odd reason the left content box gets 
> pushed below
> the floated right element in all the other browsers. I know some of my code 
> doesn't
> validate (it happens with content management systems, I have no control over 
> it), but I
> don't see anything that would cause it to not let the left box float next to 
> the box on
> the right (although when I hide the #xmlfeed1, there's no problem, so I think 
> that's
> the problem).  Grrr...
>
> Can anyone see something that I am not seeing?  It's at:
> http://new.jocolibrary.org/default.aspx?id=2173
>

Hi Amy,
I think you are on the right track. #xmlfeed1 is before #contentbox1
in the source code. Modern browsers are obeying rules for floats, and
not displaying the second floated element higher than the first:

"The outer top of a floating box may not be higher than the outer top
 of any block or floated box generated by an element earlier in the
 source document." (W3.org)

I can think of no solution that does not involve changing the source.
Sorry.

Cordially,
David
--


__
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] IE6 misbehaving

[Gunnar Grímsson]

Hi

I have a strange (to me!) problem in which all browsers except IE6 display
my page the way I want. I have no idea why that is and would be very
grateful if someone could shed a light on why it's happening. This is
probably a no-brainer for most of the regulars here :)

The url is http://menntanet.is/nytt/ and a screenshot of IE6 is at
http://www.menntanet.is/nytt/IE6-menntanet.is-bug.gif It's black and white
but that should not matter :)

As you can see the items "Vinstri Hægri right Column" are not in the correct
position in IE6, instead of being below the advertisement they are to the
left, above the menu. The HTML and the CSS validate.

Any ideas?

Thanks in advance
Gunnar

-- 
Gunnar Grímsson -> [EMAIL PROTECTED] -> http://where.is/gunnar/ -> 897-8229

Vefsmíðar -> http://where.is/webdesign/ -> http://where.is/handbok

Skoðanir -> http://truth.is/ -> http://kjosa.is
__
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/

Re: [css-d] son of suckerfish -IE6 problem

[grovesdavid]

Ross Wrote:
This works fine in FF but when I look at it in the IE 6  the sub lists have 
no background colour and are mis-aligned. Any ideas

Hi

Try this and see if it helps with the alignment :


* html #nav4 li:hover ul, #nav4 li.sfhover ul {
display:inline-block;
position: static;
}

David G)
 

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

Re: [css-d] text box expanding to full td width inappropriatley

[Jonathan]

I am not sure that I am worried about Explorer (5.2) for the Mac,
There is so much new technology that no longer works on that browser.
Very interesting regarding the Win-Safari.

So I guess the bottom line is that I stick with the "float" ??
Jonathan
On Jun 18, 2007, at 11:21 AM, David Hucklesby wrote:

> On Mon, 18 Jun 2007 10:28:51 -0700, Jonathan wrote:
> [...]
>>
>> I reposted the page with the "span" tag as "example 4":
>> http://overheadgaragedoorstore.com/text-box-example.html
>>
>
> Interesting. I had never tried top or bottom padding for an inline
> element, so was unaware of the issue. I did know about the margins
> not applying, though. To get text to move up or down, I apply the
> vertical-align property to it instead of a margin.
>
> Example 3 looks identical here in Opera 9, Firefox 2, Mozilla 1.7,
> Netscape 7.2, and IE 5.01, 5.5, 6, and 7. Borders are missing from
> examples 1 and 4 in IE 5.01.
>
> Also interesting is the fact that Safari for Windows has the same
> behavior as shown on your Mac screen shot. (Safari for Windows
> is a beta of Safari 3.)
>
> Thanks for the follow-up.
>
> Cordially,
> David
> --
>
>

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

Re: [css-d] csshover.htc not working in IE6

[Ian Young]

Sent: 18 June 2007 19:44
> To: css-d
> Subject: [css-d] csshover.htc not working in IE6
>
>
> I have a dropdown menu that is functioning fine now in IE7 but
> not at all in
> IE6.  Can someone assist me in getting this fixed?  (It is for an intranet
> site, so I don't need to worry about other browsers like Safari or Opera,
> etc.)
>
> Page can be viewed at: http://www.unicornhosting.com/ncc/index.php
>

For IE6 you need csshover.htc but is not present in the styles folder. So
your ie style should read url (../../csshover.htc)

Ian
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.472 / Virus Database: 269.9.0/852 - Release Date: 17/06/2007
08:23

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

Re: [css-d] IE7 - centering page

[L Lay]

Josef Biechele wrote:
>> It seems to be centered fine for me.  FF 2, IE 6 & IE 7.  My IE 6 & 7 
>> are running on separate machines, so they are running stand-alone.
>> 
>
> Thank you Lori for the feed back, good to know it works.
> I could solve it thanks to the following hints from Sophie:
>
> body {
> margin: 0;
> padding: 0;
> text-align: center; /* for pre IE6 browsers */
> }
>
>   
IE 6 too actually.  Quite frankly, I was surprised it was working in IE 
6 without the text-align.  I thought that perhaps you had it tucked in 
there somewhere or it was the absolute positioning that was lining 
everything up.
> #content {
> width: 1000px; /* it won't center if you don't give a width */
> margin: 0 auto;
> text-align: left; /* to realign your text */
> }
>
> You put the content div around your site, and done.
>   
Anyway it looks like you got it.

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

Re: [css-d] IE7 - centering page

[Josef Biechele]

> It seems to be centered fine for me.  FF 2, IE 6 & IE 7.  My IE 6 & 7 
> are running on separate machines, so they are running stand-alone.

Thank you Lori for the feed back, good to know it works.
I could solve it thanks to the following hints from Sophie:

body {
margin: 0;
padding: 0;
text-align: center; /* for pre IE6 browsers */
}

#content {
width: 1000px; /* it won't center if you don't give a width */
margin: 0 auto;
text-align: left; /* to realign your text */
}

You put the content div around your site, and done.



__
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] csshover.htc not working in IE6

[Denise]

I have a dropdown menu that is functioning fine now in IE7 but not at all in
IE6.  Can someone assist me in getting this fixed?  (It is for an intranet
site, so I don't need to worry about other browsers like Safari or Opera,
etc.)

Page can be viewed at: http://www.unicornhosting.com/ncc/index.php

Relevant CSS:
#menu {
margin:10px auto;
padding-left:20px;
}
#menu ul {list-style-type:none; margin:0; padding:0;}
#menu li {
display:block;
padding:0px 13px;
}
#menu li a:hover {text-decoration:none;}
#menu ul.outer li {
background:url(../images/menu_mid.gif) repeat-x;
height:50px;
float:left;
}
#menu ul.outer li a {color:#fff; display:block; margin-top:15px;
text-transform:lowercase; font-size:16px;}
#menu ul.outer li a:hover {color:#363636;}

#menu ul.inner {
position: absolute;
margin-top:10px;
display:none;
}
#menu ul li:hover ul {display:block;}
#menu ul.inner li {
position:relative;
background:#3E6A93;
height:20px;
width:140px;
border-bottom:1px solid #529AA7;
float:none;
text-align:left;
padding-left:5px;
}
#menu ul.inner li a {margin-top:0; text-transform:none; font-size:14px;
font-weight:normal;}
#menu ul.inner li:hover {background-color:#529AA7;}
#menu ul.outer li.left {background:url(../images/menu_lt.gif) no-repeat top
left; width:20px; padding:0;}
#menu ul.outer li.right{background:url(../images/menu_rt.gif) no-repeat top
right; width:20px; padding:0;}

Thanks,
Denise

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

Re: [css-d] text box expanding to full td width inappropriatley

[David Hucklesby]

On Mon, 18 Jun 2007 10:28:51 -0700, Jonathan wrote:
[...]
>
> I reposted the page with the "span" tag as "example 4":
> http://overheadgaragedoorstore.com/text-box-example.html
>

Interesting. I had never tried top or bottom padding for an inline
element, so was unaware of the issue. I did know about the margins
not applying, though. To get text to move up or down, I apply the
vertical-align property to it instead of a margin.

Example 3 looks identical here in Opera 9, Firefox 2, Mozilla 1.7,
Netscape 7.2, and IE 5.01, 5.5, 6, and 7. Borders are missing from 
examples 1 and 4 in IE 5.01.

Also interesting is the fact that Safari for Windows has the same
behavior as shown on your Mac screen shot. (Safari for Windows
is a beta of Safari 3.)

Thanks for the follow-up.

Cordially,
David
--


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

Re: [css-d] Weird footer issue in Firefox, Opera, IE6, IE7

[Audra Coldiron]

> At the top, in Firefox, IE6 & 7, and Opera everything meets and looks as if
> it is one piece.  At the bottom, in each of those same browsers, the footer
> image looks as if it is a pixel or two narrower on the right side than it
> should be.  But it isn't.  All four of the images used in the site design
> are 760px wide.  I am just at a loss here.

Hi Suzanne.  It's not a CSS problem - it's your images.  They are both 
760px wide, yes, but if you put one on top of each other in Photoshop 
you'll see the lines on the right side don't line up. :-)

AC
-- 
Audra Coldiron

Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com

KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS. 
Pre-made designs, designer tools, and reseller program available!
__
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] hover causing content to shift in IE

[Ryan Ray]

I have a navigation menu that when hovered, causes the content below it to
shift in IE. I'm not very versed in CSS, so I'm at a loss for how to fix it.

Here are the html and css files. Any help would be greatly appreciated!

http://www.omart.org/working/index1.html
http://www.omart.org/working/horizontalnav.css

Ryan 



__
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] Adapt CSS for a site from Snap.com

[Marcel Stör]

Hi all,

I've reading along this list for some time now. This is my first post and I
hope I'll fit in...

The site http://www.s-tisch.ch has some serious issues with scaling (font
size!) in the left-hand navigation and - more importantly - with frames. The
frameset is even nested in an iframe. I like the overall design and layout
though. I've long wanted to get rid of frames and do something useful with
CSS instead.
Last night I came across Snap's "About" pages at
http://www.snap.com/about/about.php and was stunned. The layout they
achieved with CSS is pretty much what I had in mind. Do you think their CSS
could serve as a good basis for me? I'm not a real a CSS pro...

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
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] Problem with anchors

[Ben --]

Hello, my file is hosted at 
http://cassiuscult.com/saltur/ebay_template13.htm and as you may have 
guessed, its supposed to be a template for an ebay auction.


I'm trying to really acquaint myself with CSS; that's the reason its coded 
the way it is.  I know its probably convoluted and unnecessary, and I really 
apologize.


As you may notice, it (should) looks fine and normalso long as you don't 
do anything.  If you click the links at the top right, it winds up cutting 
some of the stuff off the top if you scroll back up.  More so in IE than FF.


Now, I'm thinking this might be because the image map and anchor points are 
all within that wrapper div, so in essence its trying to scroll it within 
the div itself.


Is that correct?  And if so, is the only way to fix it to basically 
"overlay" an image map and anchor points, in a layer on top of what is 
already there?  This should make it scroll the page itself, rather than the 
contents within the div.


I think that might solve it, I'm just looking for a more elegant solution.  
This seems like its forced, and I've done too much of that already.  Its 
important to me to learn CSS and how to use it effectively, rather than just 
figure out a way to rig something to work. Thanks.


_
Make every IM count. Download Messenger and join the i’m Initiative now. 
It’s free. http://im.live.com/messenger/im/home/?source=TAGHM_June07


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

Re: [css-d] IE7 - centering page

[L Lay]

Josef Biechele wrote:
> Hello,
>
> I try to center a page with the following styles:
>
> html, body {
>   width: 1000px;
>   padding: 0;
>   margin: 0 auto;
> }
>
> Works fine in IE6 and FireFox, but IE7 doesn't like it.
> Confused! What am I doing wrong?
>
> Just in case, her's a link to the mentioned page:
> http://dev.jugendnetz.de:8080/jn3/
>
> Thanks for any hint.
> Josef
>
>
>   
It seems to be centered fine for me.  FF 2, IE 6 & IE 7.  My IE 6 & 7 
are running on separate machines, so they are running stand-alone.

Lori
__
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] Weird footer issue in Firefox, Opera, IE6, IE7

[Suzanne . Vening]

Hi all,

Although I have been reading this list for a long time, this is my first
post to ask for CSS help to the list.I have only been coding CSS for a
couple of years and find that the more I do, the less I know!!  ;-)  And
this is only my second table-less site, so please forgive any big mistakes!
But please do feel free to let me know if there is something that could be
handled in a better manner.

The latest site I am working on is having a weird issue..the link is:
http://www.mrec.ms.gov/testphase/

At the top, in Firefox, IE6 & 7, and Opera everything meets and looks as if
it is one piece.  At the bottom, in each of those same browsers, the footer
image looks as if it is a pixel or two narrower on the right side than it
should be.  But it isn't.  All four of the images used in the site design
are 760px wide.  I am just at a loss here.

Please excuse the style sheetI am in the process of cleaning it up and
haven't organized it as yet.  There are still a few things I am working on
here and there, primarily placement, but I wanted to tackle the footer
issue first.  None of the links really go anywhere...this is the only
page in the site so far.

I was finally able to try designing a site where I used mockup images to
build a website.  I cut the header and footer out of the image, as well as
a 7px high image for the background using faux columns.  I used two "faux
columns" (one in the search and top nav area as I didn't want the light
blue under the top nav and search piece, and one in the actual body of the
site (nav, content, and right box).  Much of what I have learned is from
people who are members of this list, via their blogs, etc.  THANKS to you,
I am much further along than I ever thought I would be!  ;-)

Hope this makes sense!!  If anyone has any tutorials on this method, please
send them on!!  I just took a few sites apart and decided to try it on my
own.

Thanks,

Suzanne

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

Re: [css-d] Windows Mobile 5.0 (SQVGA) shows an empty screen

[Jim Nannery]

Morning Sandy

You wrote


> Anybody out there have some good references for writing styles that will 
> work with mobile devices?
> 
> I have tested a page on various cell phones and PDAs
> http://www.browsercam.com/public.aspx?proj_id=355775
> 
> and it seems to be usable, except on Explorer 5.0 (SQGVA) Windows Mobile 
> 5.0 (SQVGA), where it shows an empty screen.
> 
> Any thoughts? Any good links?
> 
> Sandy

The list wiki [1] has some links that may provide answers to your question.

hth

[1] http://css-discuss.incutio.com/?action=find&find=mobile

Jim Nannery
www.beebar.net

__
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] Windows Mobile 5.0 (SQVGA) shows an empty screen

[Sandy]

Anybody out there have some good references for writing styles that will 
work with mobile devices?

I have tested a page on various cell phones and PDAs
http://www.browsercam.com/public.aspx?proj_id=355775

and it seems to be usable, except on Explorer 5.0 (SQGVA) Windows Mobile 
5.0 (SQVGA), where it shows an empty screen.

Any thoughts? Any good links?

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

Re: [css-d] Mac FF 2.5 Div Operlap

[L Lay]

Dagmar Noll wrote:
> Hello, folks.
>
> I'm working on a framework for a web site, and it seems to have an 
> overlap in Firefox 2.5 on my intel mac. The navigation (div#navigation) 
> is running over the bottom border of the box above it (div#profiles). 
> Any ideas as to what is going on here? My CSS is pretty simple. I just 
> can't figure it out.
>
> Sample page: http://www.wincog.org/test/index2.html
> CSS:http://www.wincog.org/test/css/WINCOGstyle-basic.css
>
> Thanks!
> Dagmar
>
>   
It seems to be the border width you have specified for the profiles 
division: 0.05em.  That seems to be resulting in such a small number, or 
an odd number, that FF is unsure of the positioning of the navigation 
division.  If you change it to 1px, everything is fine.  Even .5px seems 
to work, which is odd because that's actually less than .05em at my 
default font size which is 16px.  However, it you change it to .8px, 
which is what .05em comes out to, it overlaps again.  Go figure...


Lori
__
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] IE7 - centering page

[Josef Biechele]

Hello,

I try to center a page with the following styles:

html, body {
width: 1000px;
padding: 0;
margin: 0 auto;
}

Works fine in IE6 and FireFox, but IE7 doesn't like it.
Confused! What am I doing wrong?

Just in case, her's a link to the mentioned page:
http://dev.jugendnetz.de:8080/jn3/

Thanks for any hint.
Josef



__
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] Float problem

[Amy Drayer]

Dear CSSers:

This floating problem is driving me crazy.  The layout works fine in IE (so
of course there's a problem...), and for some odd reason the left content
box gets pushed below the floated right element in all the other browsers.
I know some of my code doesn't validate (it happens with content management
systems, I have no control over it), but I don't see anything that would
cause it to not let the left box float next to the box on the right
(although when I hide the #xmlfeed1, there's no problem, so I think that's
the problem).  Grrr...

Can anyone see something that I am not seeing?  It's at:
http://new.jocolibrary.org/default.aspx?id=2173

The code in question is:

.article, #xmlfeed1, #contentbox2 {
  clear:right;
  float:right;
  width:45%;
  margin-bottom:2%;
}

#contentbox1 {
  float:left;
  width:52%;
}

Thank you so much in advance!!


-- 
In peace,

Amy M. Drayer
Web Interface Designer
[EMAIL PROTECTED]
http://www.puzumaki.com
__
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/

Re: [css-d] Selectors Confusion

[grovesdavid]

Hello,

Firstly:

 I would wish to thank all who replied to my question.

I'm sure to some it was a basic question, but to me it was becoming ever 
more confusing, and I couldn't understand how sometime what I did worked and 
others it went all wrong.

So once again thank you all for your help and guidance in this matter. It 
was needed and very much appreciated.

Now Secondly,  Please lets have no disputes about anything relating to this 
post. As that would only tarnish the great assistance offered by all who 
replied, so please lets not pursue the debate any further...

Kind Regards to all

David G)
- 

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

Re: [css-d] relative or absolute urls?

[Melianor]

- Relative URLs with absolute document paths are the best common practice.
- Absolute URLs can get tricky and tedious to exchange, especially
when you develop the site on a different domain.
- Relative URLs with relative document path are actually quite a bad
way, since in some cases you might need to change the location of a
file.

regards, Jens
__
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/

Re: [css-d] Selectors Confusion

[Ben Darlow]

Jukka K. Korpela wrote:
> On Mon, 18 Jun 2007, Ben Darlow wrote:
> 
>> The first important distinction is between a selector and a
>> pseudo-selector.
> 
> There is no such distinction.

I think there is an important distinction, actually (regardless of my 
own nomenclature mistakes) in this case, in that one applies to elements 
which the content creator can directly affect, whereas the other arises 
from interaction from the end user. Given the original poster's 
question, semantic pedantry really is slightly less important than 
helping him understand the basic difference between what he was using. 
Just saying they're both selectors is, frankly, unhelpful.

>> When you write a: you are using what is
>> called a pseudo-selector,
> 
> No, it is a selector, which contains the pseudo-class selector 
> :. This is more or less just a terminology issue, but the CSS 
> terminology is confusing enough without added confusion.

Substitute my original paragraph for "you are using what is called a 
pseudo-class", then. I was referring to the contents of the angle 
brackets, whatever name you want to give it (although I reckon 
'pseudo-class' is a very ambiguous term given that it can be applied in 
addition to normal classes).

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

Re: [css-d] Selectors Confusion

[Jukka K. Korpela]

On Mon, 18 Jun 2007, Ben Darlow wrote:

> The first important distinction is between a selector and a
> pseudo-selector.

There is no such distinction.

> When you write a: you are using what is
> called a pseudo-selector,

No, it is a selector, which contains the pseudo-class selector 
:. This is more or less just a terminology issue, but the CSS 
terminology is confusing enough without added confusion.

> which applies to elements of that type only in
> specific circumstances (for instance, when a link is being hovered).

Yes, the point in pseudo-classes is that they reflect the states of an 
element during browsing, via events external to CSS

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

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

Re: [css-d] Selectors Confusion

[Christian Kirchhoff]

Hallo,

a.link would be a class selector, selecting any  element that has a class
attribute of value "link". 

As well a.hover would constantly style .

I guess what you want is to change the appearance of a link when the user
places the mouse pointer over it (or when the link is active or visited). To
achieve that you have to use the pseudo classes :link, :hover, :active and
:visited etc. They are not specified within the tag.

Take a look at this page for further explanation:
http://www.w3schools.com/css/css_pseudo_classes.asp

Best regards,

Christian Kirchhoff
Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza

-Ursprüngliche Nachricht-
Von: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Im Auftrag von
[EMAIL PROTECTED]
Gesendet: Montag, 18. Juni 2007 16:40
An: css-d@lists.css-discuss.org
Betreff: [css-d] Selectors Confusion

Hello,

Can someone please explain how to tell when the following should be used:

a:link or a.link
a:hover or a.hover
a:visited or a.visited
a:active or a.active

I seem to be getting them wrong, either the order or the selectors seem
incorrect, and I'm wasting time with trial and error.


TIA

David G)
--

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

Re: [css-d] Selectors Confusion

[Ben Darlow]

[EMAIL PROTECTED] wrote:
> Hello,
> 
> Can someone please explain how to tell when the following should be used:
> 
> a:link or a.link
> a:hover or a.hover
> a:visited or a.visited
> a:active or a.active
> 
> I seem to be getting them wrong, either the order or the selectors seem 
> incorrect, and I'm wasting time with trial and error.

The first important distinction is between a selector and a 
pseudo-selector. When you write a: you are using what is 
called a pseudo-selector, which applies to elements of that type only in 
specific circumstances (for instance, when a link is being hovered). The 
   second type you are using (e.g. a.link) is actually an element class 
selector, which matches elements of the type A which also have a class 
of link.

So,

a:link { color:red; }

...will make all your links red, whereas

a.link { color:red; }

...will only make links which have a class of 'link', red (e.g. foo).

The different states of the pseudo-selectors refer to the different 
states a link can be in (or more accurately, the states an anchor 
element can be in). These are (in turn): anchors that are link somewhere 
(so it ignores all cases where you might have bad markup such as ), when the element is being hovered by the mouse, when 
the element has been visited (i.e. the user has already visited that 
link before loading the page) and when the element is active (in most 
cases this means when the link has been clicked, but this can be invoked 
via the keyboard as well in some browsers).

Hope this helps!

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

Re: [css-d] Selectors Confusion

[James Leslie]

Can someone please explain how to tell when the following should be
used:

a:link or a.link
a:hover or a.hover
a:visited or a.visited
a:active or a.active

---

You should be using the first option in each of those choices as they
use the link related pseudo-classes, the second option in each of your
examples would refer to an anchor tag with a class of link, hover, etc
(as in )


These articles by Eric Meyer should help explain a whole lot more about
the correct order:

http://meyerweb.com/eric/css/link-specificity.html
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
/

Hope that helps,

James
__
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] Selectors Confusion

[grovesdavid]

Hello,

Can someone please explain how to tell when the following should be used:

a:link or a.link
a:hover or a.hover
a:visited or a.visited
a:active or a.active

I seem to be getting them wrong, either the order or the selectors seem 
incorrect, and I'm wasting time with trial and error.


TIA

David G)
--

__
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] Mac FF 2.5 Div Operlap

[Dagmar Noll]

Hello, folks.

I'm working on a framework for a web site, and it seems to have an 
overlap in Firefox 2.5 on my intel mac. The navigation (div#navigation) 
is running over the bottom border of the box above it (div#profiles). 
Any ideas as to what is going on here? My CSS is pretty simple. I just 
can't figure it out.

Sample page: http://www.wincog.org/test/index2.html
CSS:http://www.wincog.org/test/css/WINCOGstyle-basic.css

Thanks!
Dagmar

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

Re: [css-d] relative or absolute urls?

[Anna Vester]

On 6/17/07, David Hucklesby <[EMAIL PROTECTED]> wrote:
> Micky Hulse wrote:
> > Ross wrote:
> >> When linking to images do you use relative or absolute urls? background-
> >> image:url(../images/myimage.jpg); background-
> >> image:url(http://.mysite.php/images/myimage.jpg);
> >>
> Micky Hulse replied:
> >
> > I prefer root relative urls:
> >
> > background-image: url(/images/myimage.jpg);
> >
> ~
>
> Me too. When a folder starts getting too full, I may well copy some
> pages to a new folder. This way the links from the copied pages do not
> need changing.
>
> Using absolute URLs may give problems should you decide to redirect
> URLs. To eliminate the "www" for example, which would assist people
> who type addresses manually and add an extra "w".  ;)
>

I also prefer relative URLs. It saves you a lot of time and headache
in the long run, and files are a tad smaller (not significantly in
most cases).

hth,

-- 
Anna Vester
Web Designer
http://www.veanndesign.com
__
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] son of suckerfish -IE6 problem

[Ross]

http://vps.aztechost.co.uk/~wallace/long.php
http://vps.aztechost.co.uk/~wallace/css/


This works fine in FF but when I look at it in the IE 6  the sub lists have no 
background colour and are mis-aligned. Any ideas?


Ta,


R.


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

Re: [css-d] image border hover states

[Joe Schmitt]

IE6 only understands "hover" for the anchor (link) tag .

You might try assigning an ID to the anchor tag ("

CSS
#image-01:hover {
border: 2px solid #777;
}

It's possible to to expand the hover functionality in IE to other tags, you
can use "behaviors" or ".htc" files.
Peter Nederlof has created an .htc file which allows "hover" functionality
to be applied to any tag viewed in the IE browser.

Here's the link to his site. He begins by explaining the need for the file
and how it works. Near the bottom of the page is a link to the file.
http://www.xs4all.nl/~peterned/csshover.html

Give it a try, it works,
Joe

- Original Message - 
From: "Jason Chan" <[EMAIL PROTECTED]>
To: 
Sent: Sunday, June 17, 2007 6:32 PM
Subject: [css-d] image border hover states


> thanks all for answering my first question regarding the image border. i
> have take your advice and used the display: block property for the image.
>
> however, i ran into another problem regarding the hover state.
> basically i want the border of the image to change colors when hovered
over
> and so far this is what i got. It works in FF but not in IE6.
>
> XHTML:
>
> 
>
> Design
>
>  />
>
>
> 
> View Portfolio
> Hire Me
> 
> 
>
>
>
>
> CSS:
>
> #design img {
> display: block;
> width: 264px;
> height: 67px;
> margin: 0 0 10px 0;
> padding: 0;
> border: 2px solid #ff;
>
> }
>
> #design img:hover {
> border: 2px solid #777;
> }
>
> _
> Make every IM count. Download Messenger and join the i'm Initiative now.
> It's free. http://im.live.com/messenger/im/home/?source=TAGHM_June07
>
>






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