Re: [css-d] IE issue

[Andy Harrison]

Weird - also, now in IE the large images stay shown even when you're no
longer hovering.  Sorry to say I've no idea why... :-/

Good luck,
Andy

On 1/7/07, Jehangir Larry <[EMAIL PROTECTED]> wrote:
>
>  THANKS Andy.
> I did as you said, and mostly it works fine.
> The z-index although doesn't seem to respond. So I reduced the size of the
> large pic and gave it a -ve top margin, to avoid overlaps between small and
> large (on hover) images. Otherwise the small one keeps peeking through the
> hovered one.
> Why is this despite .pic having a z-index = 100 and .pic a .large having =
> 1000! (The 1000 is in frustration!)
> We live and we learn.
> Thanks again.
> Larry
>
> - Original Message -
> *From:* Andy Harrison <[EMAIL PROTECTED]>
> *To:* Jehangir Larry <[EMAIL PROTECTED]>
> *Cc:* css-d@lists.css-discuss.org
> *Sent:* Sunday, January 07, 2007 6:57 AM
> *Subject:* Re: [css-d] IE issue
>
> Sorry Larry, I don't see what's causing that.  I did notice that the image
> popups don't work correctly in IE 6 though (they aren't absolutely
> positioned); who knows, it may have something to do with that.  I have a few
> suggestions for your CSS:
>
> .pic a .large {
>  /*...*/
>  display:none;   /*instead of block; so it's hidden until you hover -
> and so you don't have to make it a single pixel to hide it*/
>  z-index:1;   /*or greater; so the large image shows above all the
> smaller ones*/
> }
>
> .pic a.p1:hover .large {
>  /*get rid of position:fixed - this is probably causing the problem
> with the popups in IE; leave it as absolute*/
> }
>
> Hope that helps in some way :-)
>
> Andy
>
>
__
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] template has strange whitespace in IE6

[Thijs Hakkenberg]

Yes, but the problem still exists without the 'silly frame'

Matt Ryan schreef:

Maybe it does not have a doctype and is not valid html?



It looks like it's the silly frame around the template that is invalid.

The template itself ( at
http://www.openwebdesign.org/design/3487/corporatelike/ ) looks to be
ok:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.openwebdesign.org%2Fdesign%2F3487%2Fcorporatelike%2F

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



--

Thijs Hakkenberg,


Voorzitter Stichting Ebriositas [kvk: 34210081]
www.ebriositas.nl 
Student Natuurkunde UvA
www.uva.nl 
Systeembeheerder Stichting Varkens in Nood
www.varkensinnood.nl 

Contact:
Tel: 06-48761131
www.hakkenberg.com 
[EMAIL PROTECTED] 

__
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] Using em's for unit measures

[Martyn Clark]

Hi
I have a div element with just a few words of text directly in the div, I
have applied padding using em's but when I view this in IE and Firefox IE
seems to make the element larger than it appears in Firefox.

If I put an equal amount of padding all round the div element in Firefox
this places the text to be aligned in the centre of the div, while in IE the
text seems lower down and the div appears a lot larger. Can anybody shed
some light on this?

Kind regards Martyn


__
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] Problem in Firefox/Mac

[Gunlaug Sørtun]

Linda Quinn wrote:
> I have a CSS based site that is working in IE7 & FIrefox on the PC, 
> and Safari/Mac, but it does not render correctly in Firefox/Mac.

Version-numbers would be fine :-)

> www.lifeonwheels.com

> Initially I had a problem with some of columns displaying correctly 
> in FF/PC, but it corrected when I changed a column width from 
> percents to pixels.

Looks like a similar cure will work here, as adding...

#leftcolumn {width: 712px; }

...makes my FF 1.5.0.8 Mac happy. Even IE6 does a decent job at it with
that addition.

Any width on that float seems to be fine with FF/Mac and most other
browsers, but IE6 needs an exact value.

Browsers still calculates floats without width a little erratic, so it's
a good idea to provide one when possible.

regards
Georg
-- 
http://www.gunlaug.no
__
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] Feedback on rounded corners for a menu

[MATTHEW BERNHARDT]

Hello all,
  I've been trying to apply the various techniques listed on the Wiki for 
rounded corners, especially the one listed on Albin.net[1] - and I've got a few 
questions for the collective wisdom.
  What I'm aiming for is to have rounded corners on all 4 corners of each of 
the items in a menu. This leads me to several apparent constraints:

1 - Because all 4 corners will need to be rounded, the sliding 
doors[2]technique doesn't seem like it will work as that technique only 
provides for 2 sides, not 4 corners.

2 - As a menu, the markup I'm working with should ideally be a list. This 
complicates many of the techniques I've seen (including Albin.net) which rely 
on nested 's because 's (inline) can't contain 's (block). I've 
tried to convert this technique to using 's, but have been running into 
problems with IE adding space to the menu items.

3 - Another aspect of menus is that the typically don't have a lot of text to 
use for hooks for CSS. A lot of very clean techniques [3] rely on many elements 
in the rounded element to achieve their effects - something I don't have 
available. I'm currently trying to use 's.

4 - This one has me pulling out what little hair remains - I'm up against a 
self-imposed limit for the number of images on these pages, so I'm trying to 
combine rounded corner images into 1 and then use clipping to select only the 
corner I'm interested in. This (IIRC) introduces the necessity for absolute 
positioning.

Am I correct in these constraints, or have I missed something along the way?

Assuming that the above constraints are valid, here is a page which 
demonstrates the code I've been working on:

http://morphosis7.byethost12.com/sandbox/clip5.php

CSS and HTML are visible in the source, but the gist of the HTML is (for one 
menu option) :

Knowlton School

And, the CSS:

* {
padding: 0px;
margin: 0px;
}
body {
background-color: #CC;
}
li {
position: relative;
margin: .5em;
padding: 0 4px;
color: black;
font-weight: bold;
}
li img {
position: absolute;
overflow: hidden;
height: 6px;
width: 6px;
}
.item1 {
background-color: #ff0099;
}
.testul {
left: 0px;
top: 0px;
clip: rect(0px 3px 3px 0px);
}
.testur {
right: 0px;
top: 0px;
clip: rect(0px 6px 3px 3px);
}
.testll {
left: 0px;
bottom: 0px;
clip: rect(3px 3px 6px 0px);
}
.testlr {
right: 0px;
bottom: 0px;
clip: rect(3px 6px 6px 3px);
}

My questions right now are first - am I needlessly limiting myself in the 4 
constraints above, and second - is there a technique out there already that 
satisfies them - particularly the ability to use 's instead of 's, 
and also take advantage of the clip property? Or should I continue to try and 
develop down the road I've started (which at this point means getting IE 6 and 
earlier to function - IE 7, Firefox, Opera and Safari all seem to display 
what's there now correctly)

Thanks for any feedback,
Matt

[1]http://www.albin.net/CSS/roundedCorners/
[2]http://www.alistapart.com/articles/slidingdoors/
[3]http://tutorials.alsacreations.com/cadre/

__
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 in Firefox/Mac

[Linda Quinn]

I have a CSS based site that is working in IE7 & FIrefox on the PC,  
and Safari/Mac, but it does not render correctly in Firefox/Mac.
All of the XHTML validates, as do all the CSS files.

The URL is www.lifeonwheels.com (the Links & Sponsors pages have not  
been updated from the old site, so they are not relevant)
The two primary css files can be viewed at www.lifeonwheels.com/pages/ 
all_pages.css.pdf and  www.lifeonwheels.com/pages/conf.css.pdf .
As its name states, the all_pages.css file, is used by all pages. The  
conf.css file is used by the Conference page and the Arizona,  
Kentucky, Idaho, Pennsylvania, Iowa information pages.

Initially I had a problem with some of columns displaying correctly  
in FF/PC, but it corrected when I changed a column width from  
percents to pixels.

I would appreciate any ideas I why the site does not render correct  
in FF/Mac. Thanks.


__
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] IE6 kills Swedish Chef! (overflow problem with float:right and negative margin-right)

[Gunlaug Sørtun]

Tim Bailen wrote:

> IE6 sadly clips the image to the div's fixed width.

> http://www.talk-to-strangers.com/staging/jobs.htm

IE6 gets the stacking wrong beyond the container-edge.

Add...

#imgChef { position: relative;}

...to make IE6 stack the whole image visibly on top.

regards
Georg
-- 
http://www.gunlaug.no
__
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 kills Swedish Chef! (overflow problem with float:right and negative margin-right)

[Tim Bailen]

Hi!

I'm new to CSS and have been having pretty good luck. This one is
frustrating me however...

I have a fixed width div with a bunch of text in it. I added an image
of the Swedish Chef which I want to float right. No problem.

Ok, now, I want the Swedish Chef to partially hang outside of the
fixed width div. I decided to use a negative margin-right combined
with overflow:visible.

Firefox renders this just how I want.
IE6 sadly clips the image to the div's fixed width.

I have experimented with adding overflow:visible to all of the
ancestor containers as well as increasing the image's z-order. No
luck. Can you help?

HTML + embedded CSS:
http://www.talk-to-strangers.com/staging/jobs.htm


__
Tim Bailen, Founder, Talk To Strangers
__
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 background above and below sub UL automatically

[Tony Lush]

Thank you, David. That did the trick. I posted a view of what you suggested 
at: http://advancewm.com/test_menu.htm

The essential parts were:

#leftnav3 ul ul {
margin: 1px 0;
background: url(/s5/left-nav-bar.gif) repeat-y top left;
padding: 1px 0;
list-style: none;
}

#leftnav3 ul ul li {
margin: 0;
padding: 0;
background-color: #fff;
display: block;
}

The display:block allowed the white background of the LI to cover the UL's 
background image.

Best regards -- Tony


> On Thu, 04 Jan 2007 09:31:13 -0500, Tony Lush wrote:
> >
> > We have a left menu composed of two levels of unordered lists, and the art 
> > director
> > would like a fine gradient line above and below the subsidiary UL.
> >
> > If it were just a fine grey line I could use:
> >
> > #leftnav ul ul {
> > border-top: 1px solid #eee;
> > border-bottom: 1px sold #eee;
> > }
>   [...]
> Hi Tony,
> 
> You could try adding padding-top and -bottom instead of a border, 
> and apply the gradient to this same UL as a repeated background image.
> 
> 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 - clear help. Navigation bar goes to down :(

[Serkan Kibritoglu]

Thank you s much. :=)

On 1/7/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Serkan Kibritoglu wrote:
> > I'm working on this issue about 2 days. Actaually result view i
> > wanted to get, looks very easy:
> > http://www.craftedwear.com/temp/content.gif
>
> It should be easy, but I know it isn't.
>
> > But when it comes to css design our navigation bar (page 1 2...)
> > sticks extremly down of it's parent div (#content). I've tried all
> > possible clear, float, display combinations on nav bar but didn't get
> >  any clear and expected result.
>
> A clear will clear everything within sight - unless we isolate it within
> a container.
>
> > http://www.craftedwear.com/temp/content.html
>
> Look at the following...
>
> 
>
> ...where I've used the establishment of a new 'block formatting
> context'[1] to isolate the #content container from the rest of the page.
> IE6 needs its 'hasLayout'[2] trigger, of course.
> This will prevent the navigation bar from clearing the #leftcol.
>
> This will of course _also_ prevent the #content from stretching to
> become as tall as #leftcol, but you can can't have it both ways without
> adding a few extra elements to the source-code - and fake the appearance...
>
> 
>
> IE6 adds a few bugs, but otherwise it should give you a few ideas.
>
> regards
> Georg
>
> [1]http://www.w3.org/TR/CSS21/visuren.html#q15
> [2]http://www.satzansatz.de/cssd/onhavinglayout.html
> --
> http://www.gunlaug.no
>
__
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] IE issue

[Jehangir Larry]

THANKS Andy.
I did as you said, and mostly it works fine. 
The z-index although doesn't seem to respond. So I reduced the size of the 
large pic and gave it a -ve top margin, to avoid overlaps between small and 
large (on hover) images. Otherwise the small one keeps peeking through the 
hovered one.
Why is this despite .pic having a z-index = 100 and .pic a .large having = 
1000! (The 1000 is in frustration!)
We live and we learn.
Thanks again.
Larry
  - Original Message - 
  From: Andy Harrison 
  To: Jehangir Larry 
  Cc: css-d@lists.css-discuss.org 
  Sent: Sunday, January 07, 2007 6:57 AM
  Subject: Re: [css-d] IE issue


  Sorry Larry, I don't see what's causing that.  I did notice that the image 
popups don't work correctly in IE 6 though (they aren't absolutely positioned); 
who knows, it may have something to do with that.  I have a few suggestions for 
your CSS: 

  .pic a .large {
   /*...*/
   display:none;   /*instead of block; so it's hidden until you hover - and 
so you don't have to make it a single pixel to hide it*/
   z-index:1;   /*or greater; so the large image shows above all the 
smaller ones*/ 
  }

  .pic a.p1:hover .large {
   /*get rid of position:fixed - this is probably causing the problem with 
the popups in IE; leave it as absolute*/
  }

  Hope that helps in some way :-)

  Andy
__
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 - clear help. Navigation bar goes to down :(

[Gunlaug Sørtun]

Serkan Kibritoglu wrote:
> I'm working on this issue about 2 days. Actaually result view i
> wanted to get, looks very easy: 
> http://www.craftedwear.com/temp/content.gif

It should be easy, but I know it isn't.

> But when it comes to css design our navigation bar (page 1 2...) 
> sticks extremly down of it's parent div (#content). I've tried all 
> possible clear, float, display combinations on nav bar but didn't get
>  any clear and expected result.

A clear will clear everything within sight - unless we isolate it within
a container.

> http://www.craftedwear.com/temp/content.html

Look at the following...



...where I've used the establishment of a new 'block formatting
context'[1] to isolate the #content container from the rest of the page.
IE6 needs its 'hasLayout'[2] trigger, of course.
This will prevent the navigation bar from clearing the #leftcol.

This will of course _also_ prevent the #content from stretching to
become as tall as #leftcol, but you can can't have it both ways without
adding a few extra elements to the source-code - and fake the appearance...



IE6 adds a few bugs, but otherwise it should give you a few ideas.

regards
Georg

[1]http://www.w3.org/TR/CSS21/visuren.html#q15
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
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] Browser testing - Opera problems and other slight variations.

[Andrew Gregory]

On Sun, 07 Jan 2007 14:13:22 +0900, Christopher Blake  
<[EMAIL PROTECTED]> wrote:

> Is the enter email bit in the right place on your version of FF?

No, it looks a bit high to me. However, I noticed that the form element is  
closed before your code gets to the inputs that I'm guessing should be  
part of it. When I moved the closing form tag to after the divs/inputs,  
the elements bumped up in Opera to look just like Firefox. I then changed  
the #newfish bottom offset from 35px to 15px and IMO it looked better.

> Do you see the same problem with right float on opera when browser 
> expands?

I did earlier on today, but I'm guessing you've fixed that?

-- 
Andrew Gregory, mailto:[EMAIL PROTECTED] >
http://www.scss.com.au/family/andrew/ >
__
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 - clear help. Navigation bar goes to down :(

[Serkan Kibritoglu]

Hi all;

I'm working on this issue about 2 days. Actaually result view i wanted
to get, looks very easy:
http://www.craftedwear.com/temp/content.gif

But when it comes to css design our navigation bar (page 1 2...)
sticks extremly down of it's parent div (#content). I've tried all
possible clear, float, display combinations on nav bar but didn't get
any clear and expected result. By the way, i don't think that i should
mention window quantity is variable. Somehow it must be simple.

And here comes html-css codes :
http://www.craftedwear.com/temp/content.html

Thanks.
__
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 - clear help. Navigation bar goes to down :(

[Serkan Kibritoglu]

Hi all;

I'm working on this issue about 2 days. Actaually result view i wanted to
get, looks very easy:
http://www.craftedwear.com/temp/content.gif

But when it comes to css design our navigation bar (page 1 2...) sticks
extremly down of it's parent div (#content). I've tried all possible clear,
float, display combinations on nav bar but didn't get any clear and expected
result. By the way, i don't think that i should mention window quantity is
variable. Somehow it must be simple.

And here comes html-css codes :
http://www.craftedwear.com/temp/content.html

Thanks.
__
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] Absolute Positioning and Fixed Footer Woes in IE

[Mark Henderson]

Mark Henderson wrote:
>> [...] So, to reiterate, does anyone know of a way to have a fixed 
>> width box horizontally centered but always a fixed distance from the 
>> bottom of the viewport, whilst allowing the content to scroll using 
>> overflow. I hope that all made sense. Any ideas?

then Gunlaug Sørtun wrote:
> Yes...
> 
> 
> ...but I don't know if any of the above can be adapted to your case
> without seeing the case.
> 
> regards
> Georg

Thanks Georg.

My apologies for the delay, but after some time away from this project 
(and a holiday!) I have finally returned to it and settled on a 
compromise across browser land, managing to convince the client of this 
also. I'm still pretty much where I was beforehand, in that IE can't 
quite do what I want (compare Firefox or Opera to IE on PC to see the 
difference), but now I'm using your position fixed implementation, as 
opposed to the tagsoup [1] approach. It just seems cleaner and easier. 
I'm still not happy with the actual design, but have little choice as 
this is what I was given and this is what the client wants - period. It 
handles font-resizing *ok* in good browsers, but at text size 
larger/largest in IE on PC the footer goes a little haywire in its 
alignment. This seems due to the #hnav expanding the #footer-inner 
beyond its specified width, and I can fix this if I float the #hnav list 
items (they then wrap), but that has another trade-off in that I can no 
longer horizontally center the navigation. Go figure. However, its not 
critical and I can live with it, but if there is a fix for this I'd love 
to know it.

Example URI: http://www.hokonuimoonshinefest.co.nz/food.html

[1] http://tagsoup.com/cookbook/css/fixed/

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