Re: [css-d] IE display problems

[Craig Palenshus]

On 6/21/06 Francky <[EMAIL PROTECTED]> wrote:
>
>B) To avoid IE-issues (and who knows problems with some other browsers), 
>I should suggest to make background-images of the quotemarks,
>
>Succes,
>francky

Thanks for all the tips Francky ... much better now! Regarding the quote
mark problem, does anyone have any ideas? I'd like to be able to change the
testimonial background color without having to change the image each time. 

Would putting each quote mark in its on DIV and positioning it inline work?
Or will I still run into the same problem that the SPAN CLASS gives me?

Here's the reference to the Web page. Notice the green testimonials section
at the bottom left corner of the page: http://www.creed-homes.com.

Thanks,
Craig

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Alignment problem with Opera 9

[Bill Moseley]

I've got these floated links and search box:

http://hank.org/demos/vert/index.html

In Opera 9 that white search box is pushed up:

http://hank.org/demos/vert/register.png

Is this a problem with Opera 9?


The (reasonably hacked-up) css is in banner.css:

http://hank.org/demos/vert/banner.css
(search down for #bannerBottom)


I'd like to clean up the layout and css.  The issue, of course, is
getting things to vertically align.  And I'd like to not used fixed
heights so that font resizing also resized that orange bar.

Any suggestions how to get the text links and form to align vertically 
in that orange bar on the banner?



One attempt was to give the enclosing div display: table-cell,
but then I drop my 100% width:

http://hank.org/demos/vert/table-cell.html

I'm not clear why I can't set 100% width.


Then I tried using a table for layout:

http://hank.org/demos/vert/table.html

But, again in Opera 9 the search box is not vertically aligned:

http://hank.org/demos/vert/register-table.png


Any suggestions for how best accomplish this in a reasonably
cross-browser way?


Thanks,







-- 
Bill Moseley
[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] What happened to my floats?

[Ian Piper]

Hi all,

I would be grateful if someone could tell me what I have done here. I  
was just about to release a site I have been writing (which, after a  
lot of struggle and a fair amount of help from here, looks right in  
both compliant browsers and IE) and the site owner has sprung a last  
minute design change on me. They want to see what text running around  
an oval image looks like. Well, I have done it using the  
"curvelicious" method on Eric Meyer's site and it looks good in  
Safari and Firefox (Mac OS X and Windows). But what do you know, in  
IE something horrible has happened. Basically one of my main  
container divs has slipped down and upset the whole page. But only in  
IE (Windows).

Can anyone point me at what might be causing this?

The offending page is here:

http://www.tellura.co.uk/blueboar/oval_image_test.htm

and the rest of the site for comparison is at

http://www.tellura.co.uk/blueboar/

Thanks for looking,


Ian.
-- 
Dr Ian M Piper
[EMAIL PROTECTED]
skype: ianmpiper
-- 
Where is the wisdom we have lost in knowledge?
Where is the knowledge we have lost in information?


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fire fox word wrap

[Adam Helweh]

Hello gang,

I am having an issue with a customized WordPress template.

In the comments section I added a long string of letters to test things 
out. In IE it works just fine but in Fire Fox it will not wrap at all 
and goes out of the container. I have searched around and no one seems 
to be able to have found a solution that works around the web. Can 
anyone help me do something similar to a "word wrap" in IE, but in Fire Fox?

Thanks in advance
Adam
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problem with master/child pages in asp.net

[mike rutledge]

Hi,

My first post so here goes. I'm using vs.net 2005 to create a website that
has a master page and child page that uses css.
The problem I have is that when the width of the browser window is shrunk,
the child page content moves to the lower part of the page.

I've included the code in case someone might have time to try it. Any help
would be appreciated.

Thanks,
Rut

Css page

body 
{
height: 100%;
width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}
#header
{
background-color: #99;
height: 25%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#left
{
float: left;
width: 23%;
background: #fff999;
height: 100%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#content
{
background: #aa;
height: 100%;
width: 76.7%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#footer
{
clear: both;
background: #ff3399;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#lower-content
{
clear: both;
background: #ff;
width: 100%;
height: 20%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}




Master page:



<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>

http://www.w3.org/1999/xhtml"; >

Untitled Page







   
   
   
   
   








   Our Mission 
  Reidsville Christian Church exists to share the good news 
  of Jesus with people everywhere, to teach and strengthen 
  the believers, to minister to the needs of others, and to 
  be a Christian influence in the community.
   







Child (default page)


<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"
title="Untitled Page" %>

  This is the content


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Content box drops to bottom in IE6, goes to top in Netscape

[David Laakso]

Theresa Mesa wrote:
> This site is behaving on everything on both platforms, including Opera,
> except IE6.0 on the PC, and Netscape on both platforms. The content box (the
> yellow box) is jumping all over the place.
>
> http://www.mdh-test.com/perry_roofing
> http://www.mdh-test.com/perry_roofing/perry_roof.css
>
> Your thoughts?
>
> Thank you in advance.
>
>
>   
I guess you have fixed this, at least as far as /xp/ ie/6.0(no netscape 
here), Theresa. No yellow box and nothing is jumping around. Not 
centered but otherwise ok in ie/5.5 on xp. BTW, the menu is breaking  
early on zoom in ie and ff.
Regards,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Negative margins and IE

[Seona Bellamy]

On 20/06/06, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
> Seona Bellamy wrote:
> > That fixed it just fine, although I don't quite understand why it
> > makes such a difference. Is this a part of the whole hasLayout thing?
>
> Related, yes. I see it as a "stacking" or "layering" problem. The space
> is taken, but the overshooting (parts of the) element isn't visible.
> Adding 'position: relative' to the element changes the stacking-order,
> and makes IE come to its senses :-)


Ah, fair enough. That makes sense, or as much as these strange IE quirks
ever do. :)

This time it's the real 'Layout' effect we want, with the expansion of
> that particular element.
> Add a "harmless" (no negative effects in other browsers) 'hasLayout'
> trigger...
>
> #inner {width: 100%;}
>
> ...and see the border come back in IE/win.
>

Yay! So it did! Thank you so much for that, it was really confusing me,
since the header was technically "above" all the other divs that could have
been covering it.

Cheers,

Seona.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE<7 PNG Alpha Transparency...

[francky]

Mike Nowak wrote:

>>background: none;
>>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/
>>opacity_bkg.png",sizingMethod="scale");
>>}
>>
>>
>I'm using the same in an attempt to create transparent drop-shadows and this 
>works for the most part. 
>[...]
>
Hi Mike,
If still attempting, maybe an alternative without png's is possible.
See "Semi-transparent dropshadow for mozilla/firefox and internet 
explorer" 
.
This is using a gif and opacity for css3-browsers, plus the 
alpha-opacity filter for IE (to be zipped in a conditional comment). For 
Opera 8.01 and other non opacity supporting browsers it is degrading to 
just dropshadows without transparency.

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Columns selectable in isolation

[Frans Englich]

On Tuesday 20 June 2006 17:55, Frans Englich wrote:
> On Monday 19 June 2006 16:57, Frans Englich wrote:
> > On Sunday 18 June 2006 15:50, Jim Nannery wrote:
>
> [...]
>
> > Here it is:
> >
> > http://rafb.net/paste/results/RuCusT43.html

Not really, those posts expire after 24 hours. However, one can view anyone, 
by clicking on them:

http://rafb.net/paste/results.html

Notice how the line-column listing is separated from the code listing when 
selecting the latter. I find this very practical, but its a table solution. 
Hence, my question:

So this is not doable with CSS, one must use tables?


Cheers,

Frans
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE display problems

[francky]

Craig Palenshus wrote:

>I'm in the process of creating a new site entirely in CSS. It displays great
>in Firefox, but poorly in IE. Please see http://creed-homes.com.
>
>In Firefox, the navigation on the left displays correctly. The bullets are
>lined up right and the rule lines underneath each nav item are positioned
>correctly. In IE, it's all wacky.
>
>Also, the testimonial section on the bottom looks excellent in Firefox, but
>in IE, you can't make out what it says because the large quote marks have
>distorted everything. 
>
>At the very bottom of the page, the footer links are being overlapped by the
>left navbar. I always want them to appear underneath the other 2 content
>sections.
>
>My stylesheets are all embedded in the page.
>
>Can someone help me with:
>A) making the navbar match how Firefox looks in IE
>B) fixing the testimonial copy
>C) positioning the footer links so they are always under the content
>that comes above it
>
>Thanks!
>Craig Palenshus
>  
>
Hi Craig,
A) Styling a  is pretty difficult, if you want the same result for 
all browsers. I should think: use a border-bottom line instead.

C) You can float-left the left side as well as the content column, and 
then make a clear-left (that is: turn around the order: first left 
column, then the content). In this way the footer will always be under 
the lasrgest column.

B) To avoid IE-issues (and who knows problems with some other browsers), 
I should suggest to make background-images of the quotemarks,

See for A and C a test page over here 
.
(Some more hints inside the source code.)

Succes,
francky

btw-1: To give IE-owners the opportunity to scale the font size 
(especially when needed at big resolutions), you should always set the 
font-sizes in relative units! (in em's, after a general body 
{font-size:100%} ).

btw-2: There was 2 times an ID with the same #links name. Doesn't 
validate! ;-)

btw-3: In IE the is a 3px difference in height for the header-img 
relative to the sidebar along.

btw-4: In case of an image in the html, if possible give it the height 
and width in the html, that will render more efficient. Then before the 
img is loaded, the texts of the page are already good positioned around 
the spaces of the images (no jumps after loading the images, always some 
milliseconds later).
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] HR color

[Kieron McIntyre]

Ian wrote:

> Having put color of HR into class as follows:
> 
> .hrcolor {color:#ff;}
> 
> and html as 
> 
> renders ok in IE but not in FF.
> 
> If I use background:#ff; then FF renders darker color.
> 

Set the following ...

.hrcolor {
  color:#ff;
  border:0;
}

Kieron McIntyre
www.digbyswift.com


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE<7 PNG Alpha Transparency...

[Mike Nowak]

> background: none;
> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/
> opacity_bkg.png",sizingMethod="scale");
> }


I'm using the same in an attempt to create transparent drop-shadows and this 
works for the most part. I've seen it mentioned online that it should work in 
IE5.5 too, but I don't see that happening. Is this a result of me using the 
standalone browser (from the evolt archive) and similarly, does the standalone 
browser fail to properly obey



-mike

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE<7 PNG Alpha Transparency...

[Christy Collins]

On Jun 20, 2006, at 4:36 PM, Christian Heilmann wrote:

>> I've set a repeating png background by putting this in an ie only
>> stylesheet that's imported from a conditional comment:
>>
>> * html #text_box {
>> background: none;
>> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/
>> opacity_bkg.png",sizingMethod="scale");
>> }
>>
>> I found it with a google search - can't say I understand it
>
> If you include it via conditional comments anyway then there is no
> need for the * html (which is normally used to target MSIE 6).
>
> The rest is the MS-only filter stuff:
> http://msdn.microsoft.com/workshop/author/filter/reference/filters/ 
> alphaimageloader.asp
>

Hey thanks for that - I wonder if I'd managed to hide it from MSIE5.

-C

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Pure CSS popup

[Christine Ce]

Sorry guys, resending this, I hit the send button by accident before I had
finished.

On 6/20/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> On 5/21/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> I have this page that needs to look exactly like that:
> http://www.wuongean.com/
> I want the span in div#kanji to be displayed when hovering over  the image
> kanji_small.jpg, and I am trying to achieve this with a  pure css popup.
>
>
> On 5/23/06, Christine Ce <[EMAIL PROTECTED]> wrote:
>
> Well I have had a go at this again and got my popup to work in Firefox
> 
> But it's not working in IE!  So my next question is:  is it possible to
> make it work in IE?  If yes, how?
>
>
> Hello again list!
>
> I thought I'd let you know, in case it's useful to someone,  that I have
> managed to make my popup work in both Firefox and IE6 win without a script.,
> see here:
>
>
> http://www.wuongean.com/beta/
>
>
> It should also work in IE Mac, and I would be really grateful if someone
> could check whether that is the case.
>
> It probably does not in IE5 win, but if  someone could check anyhow that
> would be just grand.
>
> The trick to make it work in IE6 is to have either the background color or
> the font color change between the a:link and the a:hover state.  For IE Mac
> I used a hack, the inline high pass filter (
> http://www.tantek.com/CSS/Examples/inlinehpf.html).
>
> Here is the html:
>

 



some text
   more text
   yet more text
   




and here is the layout css:

#kanji a {
display: inline;
text-decoration: none;
border: none;
background-color: #fff;
}

#kanji a:hover {
display: inline;
text-decoration: none;
border: none;
background-color: transparent;
}

#kanji a span {
display: none;
visibility: hidden;
background-color: transparent;
width: 130px;

}

#kanji a:hover span {
visibility: visible !important;
}

/* for IE5Mac it is important to have position and size
declaration in #kanji a span#popup rather than in #popup
a:hover span#popup but for IE5 it's the opposite so use
hack to make sure IE5win does not see next rule */

i{content:"\"/*"}/**/

#kanji a span {
z-index: 1;
display: block;
position: absolute;
top: 0;
right: 0;
background-color: #fff;
}

All this is based on an article on http://www.tjkdesign.com/

Please let me know if there are any problems with this method.

Thanks in advance for any advice/help/comments.

Christine
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Pure CSS popup

[Christine Ce]

On 5/21/06, Christine Ce <[EMAIL PROTECTED]> wrote:

I have this page that needs to look exactly like that:
http://www.wuongean.com/
I want the span in div#kanji to be displayed when hovering over  the image
kanji_small.jpg, and I am trying to achieve this with a  pure css popup.


On 5/23/06, Christine Ce <[EMAIL PROTECTED]> wrote:

Well I have had a go at this again and got my popup to work in Firefox

But it's not working in IE!  So my next question is:  is it possible to make
it work in IE?  If yes, how?


Hello again list!

I thought I'd let you know, in case it's useful to someone,  that I have
managed to make my popup work in both Firefox and IE6 win without a script.,
see here:

http://www.wuongean.com/beta/


It should also work in IE Mac, and I would be really grateful if someone
could check whether that is the case.

It probably does not in IE5 win, but never mind...

The trick to make it work in IE6 is to have either the background color or
the font color change between the a:link and the a:hover state.  For IE Mac
I used a hack.

Here is the html:



  
  wuon gean ho
  artist-printmaker
  18 sandford avenue
  london n22 5eh
  tel +44 7711 391 544
  [EMAIL PROTECTED]

   

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE<7 PNG Alpha Transparency...

[Christian Heilmann]

> I've set a repeating png background by putting this in an ie only
> stylesheet that's imported from a conditional comment:
>
> * html #text_box {
> background: none;
> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/
> opacity_bkg.png",sizingMethod="scale");
> }
>
> I found it with a google search - can't say I understand it

If you include it via conditional comments anyway then there is no
need for the * html (which is normally used to target MSIE 6).

The rest is the MS-only filter stuff:
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp


-- 
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
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background repeat problem in IE6 works OK in Firefox

[Gunlaug Sørtun]

[EMAIL PROTECTED] wrote:

> I have an issue with the sidebar.gif that will not repeat in IE6 
> unless the DocType statement is commented out, not good for 
> validation! It is fine in Firefox.. My guess is that document 
> switching may be the issue, but I cannot work out the fix.

> http://www.agreatlife.co.uk/nodoctype.htm

> http://www.agreatlife.co.uk/doctype.htm

Add...

* html body {height: 100%;}

...so IE6 get a base to calculate from.


Note: don't use 'CSS comments' (/* */) in HTML - ever. They may ruin
more than validation.

If you ever have to keep IE6 in Quirks mode while wanting a valid HTML
DocType for standard mode in other browsers - and flawless validation,
then put a proper 'html comment' _above_ the DocType Declaration - like
this...


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

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE<7 PNG Alpha Transparency...

[Christy Collins]

On Jun 20, 2006, at 3:43 PM, Stephen Cunliffe wrote:
>
> but does anyone have a fix for this one?
>
> .foo {
>   background-image: url(test.png);
>   background-repeat: repeat-x;
>   /* ? */
> }
>
> E.g. the problem here, is that there is no width or height to "play"
> with... since a.) It repeats, and b.) there is no size supplied on the
> element, with the "foo" class.

I've set a repeating png background by putting this in an ie only  
stylesheet that's imported from a conditional comment:

* html #text_box {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i/ 
opacity_bkg.png",sizingMethod="scale");
}

I found it with a google search - can't say I understand it

-C




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE<7 PNG Alpha Transparency...

[Stephen Cunliffe]

Hi all,

I know that there are a number of hacks to make IE (<7) behave with 
regards to the alpha transparency of PNG images, however I was wondering 
if any of them have a solution for PNG images, that are applied as 
background images, on elements/selectors other than the img.

e.g. I know, that this will work...

img {
  /*MSIE Hack*/
  behavior: url('fixPNGinIE.htc');
}

As it will add logic to all the image tags, and fix them...

but does anyone have a fix for this one?

.foo {
  background-image: url(test.png);
  background-repeat: repeat-x;
  /* ? */
}

E.g. the problem here, is that there is no width or height to "play" 
with... since a.) It repeats, and b.) there is no size supplied on the 
element, with the "foo" class.

Cheers,
Steve

PS I am aware that this somewhat pushes the "CSS" relatedness of this 
post, since it brings up behaviours, JavaScript, etc. but I hope you can 
see the relivance.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Ex's and Em's and css frames

[Ed Seehouse]

On 6/20/06, [EMAIL PROTECTED]
<[EMAIL PROTECTED]> wrote:
> What the heck is the ratio of ex's and em's to font size and pixels.

There is no such ratio.  It is undefined by CSS.  Each user agent
defines the default size for a given font, but when the font size
changes the em and ex change also.

An ex, if I recall correctly, is simply the height of the "x" in
whatever font you are using at whatever size you happen to be using it
at.  An em is usually about twice that, but is defined as the width of
the capital "M" in the current font and might not be twice that of an
em, depending on the font and the browser.

In practice you can usally assume 1em to be equal to 2ex, but the ex
is intended to measure a vertical height and the em to measure a
horizontal width so each should be used for it's apropriate context.

-- 
Ed Seedhouse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background repeat problem in IE6 works OK in Firefox

[lists]

Hi folks,
I am new to CSS but am a 'believer' I am trying to construct a style sheet
to layout the graphics on my new site.

I have an issue with the sidebar.gif that will not repeat in IE6 unless the
DocType statement is commented out, not good for validation! It is fine in
Firefox..
My guess is that document switching may be the issue, but I cannot work out
the fix.

I have two test pages below to demonstrate the problem, links below and a
copy of the CSS code..

Can anybody help???

Thanks
Kevin

http://www.agreatlife.co.uk/nodoctype.htm

http://www.agreatlife.co.uk/doctype.htm

body
{color: black;
background: transparent url(./live/FBWatermark.gif) repeat;
}
#corner
{background: transparent url(./live/corner1.gif) no-repeat ;
position:absolute;
top:0;
left:0;
width: 220px;
height: 170px;
}
/* This side bar GIF does not repeat in IE when called from a page with a
"Doc Type" declaration*/
#sidebar
{background: transparent url(./live/sidebar.gif) repeat-y;
position:absolute;
top: 170px;
left:0;
width: 100%;
height: 100%;
}
#bannerbar1
{
background: transparent url(./live/Bannerbar1.gif) repeat-x ;
position:absolute;
top: 0;
right: 0;
width:100%;
height: 150px;
}
#bannerbar2
{background: transparent url(./live/bannerbar2.gif) no-repeat ;
position:absolute;
top: 0;
left: 220px;
width:792px;
height: 150px;
}
#logo
{
background: transparent url(./live/fblogo1.gif) no-repeat ;
position: absolute;
top:11px;
width: 450px;
height:140px;
left: 28px;
}

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Content box drops to bottom in IE6, goes to top in Netscape

[Theresa Mesa]

This site is behaving on everything on both platforms, including Opera,
except IE6.0 on the PC, and Netscape on both platforms. The content box (the
yellow box) is jumping all over the place.

http://www.mdh-test.com/perry_roofing
http://www.mdh-test.com/perry_roofing/perry_roof.css

Your thoughts?

Thank you in advance.


-- 
Theresa Mesa, http://mesadesignhouse.com
"CSS is a wonderful terrible thing..."




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Columns selectable in isolation

[Frans Englich]

On Monday 19 June 2006 16:57, Frans Englich wrote:
> On Sunday 18 June 2006 15:50, Jim Nannery wrote:
[...]

> Here it is:
>
> http://rafb.net/paste/results/RuCusT43.html

So this is not doable with CSS, one must use tables?


Cheers,

Frans
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Repeat problem in IE6 OK in Firefox

[Lists]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Content not showing up in IE

[Christian Heilmann]

> Hi all,
> On this page:
> http://www.uleth.ca/man/people/bio.cfm?name=kim.siever
> in IE, the content above the photo and to the right of it do not show
> up when the page first loads. If you scroll down and then back up or
> refresh the browser, then the content shows up.
> Any ideas what could be causing this?

Peekaboo bug, there are several solutions:
http://www.positioniseverything.net/explorer/peekaboo.html

-- 
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
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Content not showing up in IE

[Chris Williams]

May be a red herring, but you have a couple of empty "" tags, in the
last couple of divs.  Note they are a) both empty with no closing tag,
and b) misspelled (capital P).

Don't know if this is what is causing your issues, but it is wrong :)

-Original Message-
From: Mr. Kim Siever
Subject: [css-d] Content not showing up in IE

http://www.uleth.ca/man/people/bio.cfm?name=kim.siever
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Content not showing up in IE

[Mr. Kim Siever]

Hi all,

On this page:

http://www.uleth.ca/man/people/bio.cfm?name=kim.siever

in IE, the content above the photo and to the right of it do not show
up when the page first loads. If you scroll down and then back up or
refresh the browser, then the content shows up.

Any ideas what could be causing this?

-- 
Mr. Kim Siever
http://www.hotpepper.ca/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Ex's and Em's and css frames

[MarcLuzietti]

What the heck is the ratio of ex's and em's to font size and pixels. In 
Alex Robinson's web example for css frames, he gives a formula for turning 
ems into pixels: "parseInt(document.body.currentStyle.fontSize) * 
1.333 gives us the ems to pixels ratio." On www.macoshints.com, 
though, I find these formulas: (Xem = 0.08 * Xpx for 75%) (Xem = 
0.0715 * Xpx for 87.5%) (Xem = 0.0625 * Xpx for 100%).

And I can't even find anything on ex's.

Referenced examples
http://www.fu2k.org/alex/css/frames/
http://www.macosxhints.com/article.php?story=20051124024622502

-- 
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Netscape 7.02 and that site I sent before

[Rebecca Mazur]

Hi all... again,

I would very much like to play whack-a-mole with some Netscape developeres 
at the moment.  Is there anyone out there who would be willing to check out 
http://zeta-bulletin.kenyon.edu/index.xml in Netscape 7.02 and let me know 
if they have any idea where the scrollbars in the side navigation on the 
subpages are coming from?  I'm not sure I can get away with delivering an 
unstyled page to *this* set of visitors unfortunately.

Thanks,
~RM

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE display problems

[Craig Palenshus]

I'm in the process of creating a new site entirely in CSS. It displays great
in Firefox, but poorly in IE. Please see http://creed-homes.com.

In Firefox, the navigation on the left displays correctly. The bullets are
lined up right and the rule lines underneath each nav item are positioned
correctly. In IE, it's all wacky.

Also, the testimonial section on the bottom looks excellent in Firefox, but
in IE, you can't make out what it says because the large quote marks have
distorted everything. 

At the very bottom of the page, the footer links are being overlapped by the
left navbar. I always want them to appear underneath the other 2 content
sections.

My stylesheets are all embedded in the page.

Can someone help me with:
A)  making the navbar match how Firefox looks in IE
B)  fixing the testimonial copy
C)  positioning the footer links so they are always under the content
that comes above it

Thanks!
Craig Palenshus
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird Firefox bug in a href

[Els]

Carl Youngblood wrote:
> Doesn't work.  The moment I remove display:table, whether or
> not I have width: 100%, the border and background image
> disappear.

Ehm.. option 2 was meant to be used without option 1, not in 
addition to it.
IOW: leave display:table in place, but add width:100%.

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/ 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Weird Firefox bug in a href

[Carl Youngblood]

Doesn't work.  The moment I remove display:table, whether or not I
have width: 100%, the border and background image disappear.

On 6/19/06, Els <[EMAIL PROTECTED]> wrote:
> Yup, use option number 2: add a set width to #container:
> width:100%;
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] float problem... eh

[Nicholas Morgan]

Well I was trying to be slick using floats the way they were meant to  
be used and well of course IE doesn't cooperate.

I tried setting the heights of the containing wrappers to 1% for IE  
only and setting the line height. Any other suggestions?

Here is the url for the page:

http://rochoet.newcitymedia.com/test.html

stylesheets:

http://rochoet.newcitymedia.com/css/generic.css
http://rochoet.newcitymedia.com/css/layout.css
http://rochoet.newcitymedia.com/css/ie.css

Problem only shows up with IE.  Expected effect is in Firefox.  It is  
not polished but has the structure and most of the graphics.

Nick

 
-
Nick Morgan | Web Developer | New City Media
P: 540.552.1320 x204   F: 540.552.5493  C: 540.921.7835  W:  
www.newcitymedia.com


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Negative margins and IE

[Gunlaug Sørtun]

Seona Bellamy wrote:
> That fixed it just fine, although I don't quite understand why it 
> makes such a difference. Is this a part of the whole hasLayout thing?

Related, yes. I see it as a "stacking" or "layering" problem. The space
is taken, but the overshooting (parts of the) element isn't visible.
Adding 'position: relative' to the element changes the stacking-order,
and makes IE come to its senses :-)

> One other small problem I just noticed, though... the blue border 
> that should be appearing in the header isn't showing up in IE. So 
> it's a bucket rather than a box, which isn't the idea. Any idea why 
> IE is not showing the background on that element? I can't seem to 
> make it come back.

This time it's the real 'Layout' effect we want, with the expansion of
that particular element.
Add a "harmless" (no negative effects in other browsers) 'hasLayout'
trigger...

#inner {width: 100%;}

...and see the border come back in IE/win.

Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Negative margins and IE

[Seona Bellamy]

On 20/06/06, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
> Your solution is good enough, but IE/win tends to hide elements that are
> pulled out of their containers by negative margins.
>
> Add...
>
> .teaserPane h2 {position: relative;}
>
> ...which will make IE reveal the "swallowed" parts.


Sensational! That fixed it just fine, although I don't quite understand why
it makes such a difference. Is this a part of the whole hasLayout thing?

One other small problem I just noticed, though... the blue border that
should be appearing in the header isn't showing up in IE. So it's a bucket
rather than a box, which isn't the idea. Any idea why IE is not showing the
background on that element? I can't seem to make it come back.

Cheers,

Seona.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with Firefox 1.5.0.4 / Win and 1.0.8 Linux

[Andreas Kakanis-Silk]

Andreas Kakanis-Silk wrote:
> Dear colleages
> 
> I am very new to CSS, and am trying out some designs for a new website 
> using only CSS and HTML as much as possible, based on Eric Meyer's two 
> great books, EM on CSS and More EM on CSS. The particular problem I am 
> having with Firefox (both under Windows XP and Linux) is that it needs a 
> refresh to appear as it should. It works fine in IE7 B2, Opera 8.54 and 
> Opera 9 Beta.
> 
> Here are 2 screenshots of the page in FF:
> 
> This is on 1st load, clean cache: http://www.koperti.gr/ff-pre-refresh.png
> 
> and this is after a page reload: http://www.koperti.gr/ff-post-refresh.png
> 
> The page is at http://www.koperti.gr/koperti04.html (W3C XHTML 
> Validated, no errors)
> 
> The CSS is at http://www.koperti.gr/css/koperti04.css (W3C CSS 
> Validated, 1 error as I am using a behavior call for IE <= 6 for hover 
> and a number of warnings, e.g., no color with background-color and some 
> redefinitions (IE hacks mostly, plucked from EM's books)
> 
> Please, if you know why FF is doing this, please let me know. I am 
> tearing my hair out (and I don't have a lot to start with).

I have solved the problem...with an empty cache, FF has no knowledge of 
the widths of each image slice. So it was a simple matter of adding the 
width of each slice to the  tag. I guess I could have done it with 
css too.

I am still interested in the minor gliches, etc in the second part of 
the message.

> 
> Also, the seem to be a couple of minor glitches (that I can live with) 
> but again, if anyone knows why please let me know - I am desperate to 
> learn this stuff. In IE6, Win 2000, the 2nd and third level menus are 
> 0.5em to the left of their correct positions and in Konqueror 3.4.3, 
> Linux, the 2nd and third level menus  have lost their right borders.
> 
> And one final thing, if anyone can report how it looks in IE5/Mac and/or 
> Safari, I would be extremely grateful (I have checked the page with 
> Konqueror as I understand it uses the same rendering engine as Safari, 
> i.e., khtml.
> 
> Thanks in advance for any help
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Negative margins and IE

[Gunlaug Sørtun]

Seona Bellamy wrote:

http://www.frontandback.com.au/gc/index.html

> [...] But IE is swallowing the headings completely as far as I can tell.
> 
> Is there an easy fix for this? Or am I back to the drawing board and needing
> to figure out another solution entirely?

Your solution is good enough, but IE/win tends to hide elements that are 
pulled out of their containers by negative margins.

Add...

.teaserPane h2 {position: relative;}

...which will make IE reveal the "swallowed" parts.

Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Containing floats in 100% high container

[Gunlaug Sørtun]

Andreas Håkansson wrote:

> Any good workarounds for this which till still enable me to use a
> 100% high div (thus making the background strech the entire hight)
> while containing the floats correctly?
> 
> 
> [1] http://www.selfinflicted.org/css/float_problems.html

Add table-expansion...

#container {display: table;}

...and it'll work as you want across browser-land.

Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Negative margins and IE

[Seona Bellamy]

Hi all,

I'm having a problem getting some negative margins to work in IE, and I
can't seem to find anything about possible workarounds - in fact, everything
I've found seems to suggest that the negative margins should be working just
fine! So hopefully someone can enlighten me on how it's supposed to work.

The page is at http://www.frontandback.com.au/gc/index.html (for now) and
the stylesheet can be found at http://www.frontandback.com.au/gc/main.css

The problem is with the headings on the little boxes. Originally it was fine
- I just made the background of the headings white, and it hid the bit of
the box's border where they overlapped. Now I've been asked to put a
background into the main panel, so I needed to make the cutaway corner on
the heading transparent. This naturally means that the border underneath
showed through. I was able to fix that nicely for Firefox by applying
negative margins to the headings and adjusting the margins between the
boxes. But IE is swallowing the headings completely as far as I can tell.

Is there an easy fix for this? Or am I back to the drawing board and needing
to figure out another solution entirely?

Cheers,

Seona.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problem with Safari Mac

[Pedro Iturriaga]

Hi All,
This page,

http://comarcajoven.com/02_serviciosprogramas/creacion/creacion_animacion_bases.htm

only had problems with Mac: div "creacion_dcha" with text no float to 
the left of list, "Bases concurso", Inscripción", etc.

Somebody has a solution.

Thanks in advance


-- 
Pedro Iturriaga Santolaya

Construcción de web basada en estándares (W3C).
Diseño centrado en el usuario.
Accesibilidad.

[EMAIL PROTECTED]www.ipit.biz

Tel: +34 985 116990


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] 100% width horizontal nav

[William Gates]

Hi Derick,
I think you will have to count the rows in the MySQL result set, and 
use that figure to work out (with the help of PHP) the width of the 
list items you use to construct the menu.
William

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] 100% width horizontal nav bar

[Derick]

Hi all

I am new to the list and also relatively new to CSS design.

What I am trying to achieve is very simple with tables but extremely 
infuriating with CSS.

Here is an example http://196.44.4.250/css/

I need to replicate this layout but part of the problem is that the 
elements will be generated from mysql and the amount of elements will 
change.

Using a table is simple as the width for the entire table is set to 100% 
and the elements () will resize automatically.

I can not use tables thou as I want to use CSS dropdowns.

Any help will be greatly appreciated.

Regards
Derick Jansen
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Full surface clickable dt/dd pairs

[G]

> From: francky <[EMAIL PROTECTED]>
> Reply-To: <[EMAIL PROTECTED]>
> Date: Tue, 20 Jun 2006 04:52:38 +0200
> To: G <[EMAIL PROTECTED]>
> Cc: 
> Subject: Re: [css-d] Full surface clickable dt/dd pairs
> 
> G wrote:
> 
>> 1st time poster
>> 
>> In a search for a semantic navigation of chapters I came up with a dl; with
>> a short description of the link (dt) in dd, and a bg picture for dt.
>> I floated and stretched the dta over the the dd, and it works in FF; the
>> full surface is clickable.
>> In IE however the dta float is pushed under the dd.
>> How can this be changed?
>> Is my method any good? Alternatives for same effect?
>> 
>> Here is a test setup:
>> http://home.versateladsl.be/vt683770/dl.html
>>  
>> 
> Hi G,
> There are two  tags in the code, maybe IE is falling over that?
> 
> Greetings,
> francky
> 

That what just a (corrected) slipup. No the problem is much deeper then
this. Been reading about 'has layout', without success though


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Containing floats in 100% high container

[Andreas Håkansson]

Hi,

I would like to start off by thanking 'Ingo Chao' and 'francky' for 
their help in my 'Minor browser inconcistencies' post - Thanks guys!

On the page in question [1] i have a 100% high div that contains the 
two columns of text. The problem occurs when either of the columns 
extend the full height of the screen. In IE the main div id expanded to 
fit the contents but in opera/firefox it does not.

If I remove the 100% hight of the main div and use the :after float 
clearing css trick then it works fine, but then I end up with a 
background that doesnt strech all the way down if the contents doesn't 
fill the entire screen length.

Open it in a browser to see what I mean, I have colored the divs to 
make it clearer on what is going on. Any good workarounds for this 
which till still enable me to use a 100% high div (thus making the 
background strech the entire hight) while containing the floats 
correctly?


[1] http://www.selfinflicted.org/css/float_problems.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Layout using em for widths

[Martyn Clark]

Hi all
Could anyone explain the reason, or solution to the problem I have when
setting a three col layout using em's for the width size. The problem arises
when I place an image that is tightly butted up to the left col and the top
header, with the image spanning across the rest of the available space, in
FF all is fine but in ie the image seems to be larger than it really is
causing an overlap of the image on the left col. If I set width using pixels
the problem goes away, I have tried this using the image as a background and
placing it directly and the result is the same.

Kind Regards Martyn


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help with layout problem in IE6 (maybe 5 too)?

[Gunlaug Sørtun]

Nick Casares wrote:
> I've got a layout that I've been working on here:
> 
> http://www.nova-web-solutions.com/new/
> 
> It works great in Safari and FIrefox Mac/Win, but breaks in IE 6 
> (possibly 5, but I haven't tested). I have a feeling it has to do 
> with the order of my code, but I can't quite figure it out. Does 
> anyone have any idea what's going on here?

1: Looks like a 'hasLayout'[1] affected container in a tight layout.

Deleting the 'hasLayout' trigger...
#contentwrapper {width: 510px;}
...will solve that problem, but #navbar may need a slight correction in
IE/win.

2: Remember that not all browsers have the same margin/padding defaults
on lists. Set complete margins and paddings for cross-browser reliable
results.

#content ol {
padding-left: 50px;
margin: 15px 30px 15px 0;
}
...looks pretty cross-browser reliable, and something like...
#content ul {
padding-left: 30px;
margin: 0 50px 20px 0;
}
...shouldn't be too far off either.

The above tested in IE6, Firefox 1.5.0.4 & Opera 9beta2.
Can't test in IE5/win at the moment, but from the looks of it in IE6'
Quirks mode, it's probably only centering of page that's missing in IE5.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/