Re: [css-d] AlphaImageLoader

[Melianor]

Hi Kirsten,

You are missing some important attributes in
AlphaImageLoader.Basically you need to add the enabled attribute and
the sizingMethod.

Here is a working exampl:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,
src='/images/frontend/dropmenu/servicesBg.png');

Here is the link to the Microsoft definition for the AlphaImageLoader:
http://msdn2.microsoft.com/en-us/library/ms532969.aspx

regards, Jens




-- 
So long, and thanks for all the fish!
__
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] Safari overflow:auto problem

[Juliet Jacobson]

I'm new to this list and have searched for posts related to this  
problem but haven't found any, so I'm going to ask... I've made a div  
that contains a long, horizontal swf that I want to scroll side to  
side by means of overflow: auto. This works fine everywhere I care  
about, except Safari/Mac.  You can see my problem (only on Mac/ 
Safari) at:

http://stories.mnhs.org/stories/mgg/timeline.do?eraID=2&;mode=flash

here's the relevant css:
#scroll_time {
height: 405px;
width: 750px;
overflow: auto;
border: thin solid #E1E1E1;
padding: 0;
margin-top: 0px;
}

Any clues or info will be most appreciated! 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] two variable width divs side by side

[Paul Sommer]

Hi,

I have a "simple" problem that I try to solve now for almost 3 weeks (not 8 
hours a day but
long enough)
Simple, because it is solves within 5 minutes when using tables, but it seems 
to be impossible
to do it table free. Please proof me wrong. :-)

The page consists of two columns. The left column should contain a menu and has 
a fixed width.
the right column contains a table with data from a database. The user can 
choose, which information
of the database he wants to see. So it is obvious that the table (ans thus the 
right column) has a
variable width.

Everything works fine until the outer div reaches the right edge of the browser 
window. Then the
right column will be placed beneath the menu instead of right from it.

This is my code so far (stripped to a minimum):


  
That's the way it looks
impossible without tables?
  
  

  
11
22
  

   
    


You can see the test page here (shrink your browser windows to see the effect)
http://paul-sommer.de/test/tablefree.html

This example also contains a tabled layout to show the intended behaviour.
The table also shows the wanted colouring which also seems impossible with DIVs.
I wonder why people are encouraged not to use tables when the alternative 
solution is that painful
and time consuming (not to speak at all about the browser incompatibilities)


Please help me, as I'm totally frustrated and considering giving up table free 
layout.

Thanks in advance Paul

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

[Mauricio Samy Silva]

> At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote:
>>I hosted a test case showing a possible solution:
>>Please, look at:  http://www.maujor.com/temp/css-d/hover-effect.html
__

> Mauricio, this technique as you've used it here doesn't survive
> text-resizing, but it looks like that can probably be corrected by
> setting block heights in ems to prevent them from colliding.
> Paul
 __

Hi Paul,
Thank you for feedback.
Setting block heights in ems didn't works, but setting  in ems the top 
property for absolutely positioned blocks do.
I've fixed it.

Maurício Samy Silva
http://www.maujor.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] two variable width divs side by side

[Rory Fitzpatrick]

On 23/05/07, Paul Sommer <[EMAIL PROTECTED]> wrote:
> 
>   
> That's the way it looks
> impossible without tables?
>   
>   
> 
>   
> 11
> 22
>   
> 
>   
>    
> 
>
> Please help me, as I'm totally frustrated and considering giving up table 
> free layout.
>
Try this out for size:



  That's the way it looks
   without tables


  


  11
  22

  

 
  

If you want to increase the space between the divs simple increase the
margin-left value (108px - this allows for the 100px width + total 6px
margin + 2px of border).

Hope this helps

Rory
__
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] USING RELATIVE AND ABSOLUTE POSITIONING

[Brian Crescimanno]

On 5/23/07, Jason Chan <[EMAIL PROTECTED]> wrote:
> This is the one and only thing i learned about these two properties,
> relative and positioning. are there any other things that you can do with
> them?
>

Hi Jason,

Perhaps the most commonly used feature available when relative or
absolute positioning is used is the z-index.  I use it most often when
I have a transparent gif or png image that I want to overlap certain
sections of the page; relative positioning allows me to move the
element outside of the document's normal flow and z-index ensures that
its always above the other elements.

Here are a couple of URL's with some helpful information as to how
each position type works; they should help get you started:

"Learn CSS Positioning in 10 Steps"
http://www.barelyfitz.com/screencast/html-training/css/positioning/

"BrainJar.com: CSS Positioning"
http://www.brainjar.com/css/positioning/

Brian
__
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] Vertical Space Grudge Match: br vs css

[Del Wegener]

> Jukka K. Korpela wrote:
>> On Mon, 21 May 2007, david wrote:
>>
>>> that each line is
>>> easily handled as a separate paragraph, with CSS controlling line
>>> spacing and left/right margins.


Just to add my two cents worth.  When writing mathematics one frequently 
must display a formula which in fact is in the middle of a sentence.  It 
certainly would not be appropriate to think of that displayed formula as a 
separate paragraph.

Del 


__
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] USING RELATIVE AND ABSOLUTE POSITIONING

[James Gadrow]

Jason Chan wrote:
> When do you use relative, absolute, and/or fix positioning ? I mean I 
> understand the concepts but I am mainly floating div containers to 
> construct a layout for a site. The only time that I see myself using 
> relative or absolute is in this case:
>
>
> HTML:
>
> 
>
> 
>  
>
>  
>
> CSS:
>
> #header { position: relative; }
>
> #logo { position: absolute;
>   top: 10px;
>   left: 10px; }
>
> where the positioning of the logo is absolutely positioned inside the 
> header bc the position is labeled as relative.
>
>
> This is the one and only thing i learned about these two properties, 
> relative and positioning. are there any other things that you can do 
> with them? 
I find absolute positioning to be a great way to sub-divide a column in 
a 3 column layout where the sub divided section as using clear to 
establish a further columned section would place it below the 3 main 
columns.

Also, absolute positioning is cool for total separation layouts. Say you 
have three divs each children of the body element but div2 is a 
navigational element that you want placed inside div1 you can position 
it absolutely and have it fit together perfectly. Having each of your 
page element completely separate from one another allows you to use 
multiple stylesheets to create entirely different layouts without having 
to worry about what is nested where. This could be a great boon if 
you're designing to meet accessibility guidelines.

-- 
Thanks,

Jim

__
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] Empty Inline elements and backgrounds

[Aaron Cohen]

hmm. I can't wrap the following text in the span,
because that is static content, whereas the spans I am
creating are dynamic and must be inserted directly
after each link.

I kind of got it working at:

http://cohencentral.com/appendFileName/

However, because the outside span is positioned
absolute, it's taken out of the flow and overwrites
the following text. Is there a way to position it
absolutely and also make it take up its own space so
that the following text makes room for the icon and/or
the generated text?


> Well, if there's content in the span it should
> display correctly (thus, 
> you're only add the nbsp where you don't add content
> and this is usually 
> as easy as adding an 'else' condition if scripting).
> 
> However, in the interest of staying on topic. Try
> wrapping the 
> bothersome span as well as any following text inside
> another span and 
> then wrap just the following text in another span
> that's on the same 
> document level as the empty span. Then set each 2nd
> span to display: 
> block; float: left; and then use absolute
> positioning on their parent 
> span to place it back where it belongs. This
> distance could be more 
> easily calculated if you set the line-height of the
>  element. So it 
> would look like:
> 
> span span {display: block; float: left;}
> ul li {line-height: 1em; position: relative;}
> .textWrap {position: absolute; left: 100%;}
> 
> Text Here  class="textWrap"> Some More 
> Text.
> 
> That's pretty ugly but it sounds like your script is
> preventing a lot of 
> easier solutions. Now, you'd want to test that
> cross-browser because 
> something is tickling my brain about using position:
> absolute inside 
> position: relative but I don't remember off hand
> what it could be...
> 
> -- 
> Thanks,
> 
> Jim
> 
> 


Thanks,
-Aaron


   
Ready
 for the edge of your seat? 
Check out tonight's top picks on Yahoo! TV. 
http://tv.yahoo.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] Help needed with couple of problems

[Tango]

Holly Bergevin wrote:
> From: Tango <[EMAIL PROTECTED]>
>   
>> I really
>> need to contain the content inside the #map  .
>> http://thetangos.com/tango/map_listing.html
>> 
page moved to here http://www.oldclan.net/test_area/map.html
>
> Then you really need a clearing element to be inserted right before the close 
> of that div. With your current markup, that would be the next to last thing 
> before the closing body tag.
>
> ~holly

Thanks Holly

That fixed my problem.  I still some have troubles with floats in
general, but with this added info and this article
http://www.complexspiral.com/publications/containing-floats/ I now have
a much better understanding of floats.

Tango
http://www.thetangos.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] Float within a Float

[grovesdavid]

Hi,

Know it's difficult, but this is not on the web, and even though only very 
small not fair to ask others to load it in to their browser.

I have a content div floated left, which contains another div floated right.

The inner div will not move of the bottom of the containing div.

I've added a clearing div and it just sits on top of that. All height and 
width declarations are in % , everything else works just fine.

Any help would be gratefully appreciated...

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/

Re: [css-d] Float within a Float

[Ian Young]

>
>
> Hi,
>
> Know it's difficult, but this is not on the web, and even though
> only very
> small not fair to ask others to load it in to their browser.
>
> I have a content div floated left, which contains another div
> floated right.
>
> The inner div will not move of the bottom of the containing div.
>
> I've added a clearing div and it just sits on top of that. All height and
> width declarations are in % , everything else works just fine.
>
> Any help would be gratefully appreciated...
>
> TIA
>
> David G)

Hi David

I suspect that it may have something to do with your heights. Following
works fine for me:



Untitled

#container
{background:yellow;width:100%;overflow:hidden;text-align:center;height:500px
}
#content {float:left;width:90%;margin:0 
auto;height:50%;background:blue;}
#right {float:right;width:25%;background:red;height:20%}















No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.467 / Virus Database: 269.7.6/815 - Release Date: 22/05/2007
15:49

__
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 creating big gap

[Tim Offenstein]

Greetings,

I'm having an issue with IE6 that I can't resolve without some 
expertise from you all. The page is 
http://www.ahs.uiuc.edu/research/center/default.htm, the Staff 
section. (The ugly background colors are from my trouble shooting 
efforts.) IE6 is creating a huge gap between the director's 
information and the section title "Theme Leaders". It appears to be 
reacting to the left hand nav content but doesn't strike me as being 
a valid assumption. I notice this most on IE but have discovered that 
other browsers seem to have the same issue with the ironic exception 
of IE7 which shows it just fine regardless of window size.

Relevant CSS is http://www.ahs.uiuc.edu/css/base.css & fonts.css.

Another side issue with IE6 that has bugged me for a long time occurs 
when you resize the page. When resizing, a white section and lines 
appear behind the left nav and across the page. This disappears the 
instant you mouse over the drop down menu. It doesn't do this on any 
of the other academic unit pages which are based on the same css, nor 
does it occur anywhere else other than IE. Any suggestions to a 
remedy would be greatly appreciated.

As always, thanks for the help.

-Tim
-- 
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
  Tim Offenstein  ***  College of Applied Health Sciences  *** 
(217) 244-2700
CITES Departmental Services Web Specialist  *** 
www.uiuc.edu/goto/offenstein

__
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 within a Float

[Shelly]

 >>I have a content div floated left, which contains another div floated 
right.
The inner div will not move of the bottom of the containing div.<<

The one that's floated right should come first in the source code, I 
think.  So if your code looks like so:


blah blah text here

right floated box here



Then however long your text stuff is, it'll push the right floated thing 
down.  If you source it like so:



right floated box here

blah blah text here


Then no matter how much text you have, the "right" div will be at the 
top of it's container, and the text will wrap around it.

~Shelly
__
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 within a Float

[grovesdavid]

Shelly wrote:

The one that's floated right should come first in the source code, I


Hi Shelly,

That fixed it, I've left the clearing div in place in the hope it will 
assist in alignment later on..

BTW, I've noticed that when I reply it goes back to the individual. So I 
hope you don't mind, as I've put this back on the list for all to see.
Thanks

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] IE6 creating big gap

[Mauricio Samy Silva]

From: "Tim Offenstein" <[EMAIL PROTECTED]>
Subject: [css-d] IE6 creating big gap
> The page is
> http://www.ahs.uiuc.edu/research/center/default.htm, the Staff
>  IE6 is creating a huge gap between the director's
> information and the section title "Theme Leaders".
> -Tim

Hi Tim
The heading "Theme Leaders" and "Health" must be enclosed within
the same DIV floated to the left.
As you coded one DIV for "Theme Leaders" and another for "Health"
you broken the basic tamplate => DIV to the left folowed by DIV to the 
right.
and this crashes the layout.
One possible solution is to change the following code fragment:


Theme Leaders:



Health



Kenneth L. Watkin, PhD
...

by this one:


Theme Leaders: 
Health



Kenneth L. Watkin, PhD
...

And let's see if the rezising bug dissapear
with this fix.

Regards,

Maurício Samy Silva
http://www.maujor.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] IE6 creating big gap

[Tim Offenstein]

At 3:47 PM + 5/23/07, Mauricio Samy Silva wrote:
>Hi Tim
>The heading "Theme Leaders" and "Health" must be enclosed within
>the same DIV floated to the left.
>As you coded one DIV for "Theme Leaders" and another for "Health"
>you broken the basic template => DIV to the left folowed by DIV to the right.
>and this crashes the layout.

Thanks Mauricio for your response however I tried your suggestion and 
am still getting the big gap. I also tried adding in an empty 
list-right class to keep the template consistent (although I'm aware 
empty divs are not best practice) and still got the gap.

Still scratching my head.

-Tim
-- 
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
  Tim Offenstein  ***  College of Applied Health Sciences  *** 
(217) 244-2700
CITES Departmental Services Web Specialist  *** 
www.uiuc.edu/goto/offenstein

__
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] Site check

[Silvester Kok]

Hi,

Would it be possible to check this site on any major css flaws in  
different browsers ?

I have tested Safari, IE 6/7 firefox

Thanks in advance

Silvester

URL:  http://home.rosedev.nl/
__
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] Site check

[Matt McCool]

The navigation looks nice, like the image sprites.

But when the text is resized with the browser (in firefox), the #infobar div
gets pushed down, and the #menu sprite images are exposed.

Could you adjust the positioning of #infobar to fix this?
__
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] two variable width divs side by side

[Paul Sommer]

"Rory Fitzpatrick" wrote:

> Try this out for size:
> 
> 
> 
>   That's the way it looks
>without tables
> 
> 
>   
> 
> 
>   11
>   22
> 
>   
> 
>  
>   


Maybe I have stripped my example a bit too much :-)

Your solution works only with that simple example. The "real thing" has a 
background image attached
to the right column.
(please look at the extended sample here 
http://paul-sommer.de/test/tablefree.html )
Expanding that image to the left side is not a solution as the menu column 
grows if the user
enlarges the font size (Ctrl + in firefox). 
The menu column must be sized with em (I think). Otherwise the text runs out of 
the box
if the user enlarges the text.




> 
> If you want to increase the space between the divs simple increase the
> margin-left value (108px - this allows for the 100px width + total 6px
> margin + 2px of border).
> 
> Hope this helps
> 
> Rory
> __
> 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/


--
Sei nicht verzweifelt, wenn es ums Abschiedsnehmen geht. Ein Lebewohl
ist notwendig, ehe man sich wiedersehen kann. Und ein Wiedersehen, sei
es nach Augenblicken, sei es nach Lebenszeiten, ist denen gewiß, die
Freunde sind.
-- Richard Bach
__
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] Centering a floating list.

[Jon Hughes]

First, let me apologize for not having a test page. I'm at work and am
unable to access FTP.

I have a list I am trying to center, here is the code to create a test
page:

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



Untitled Document

.mpl {
float:left;
display: block;
text-align:center;
font-size:0.9em;
padding-right:1em;
}
.mpl strong {
font-size:1.3em;
display:block;
}
.last {
padding:0;
}




Center |
Center

1 - 14$6.62
15 - 49$5.00
50 - 199$3.76
200+$3.38





Obviously, the code is messy.  That's not how it will look when I push
it live, I promise :)

Basically, in IE7, it will at least try to center it, but it doesn't
actually (it's shifted to the side a bit) and in FF, it doesn't move at
all.

I'm sure I am just overlooking something silly, but I've been hacking at
this code for 6 hours now and it's time to ask for help!
__
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] Site check

[David Laakso]

Silvester Kok wrote:
> Hi,
>
> Would it be possible to check this site on any major css flaws in  
> different browsers ?
>
> I have tested Safari, IE 6/7 firefox
>
> Thanks in advance
>
> Silvester
>
> URL:  http://home.rosedev.nl/
>   





Opera/9.20
Camino/1.0.4
IE/6 and 7

The horizontal nav is breaking a little early (+1).
I am not sure why: the header images did not load on my end in IE.
Best,
~dL
__
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] Site check

[ROSEDEV]

Matt,

I have tried this, but because the navigation is based on a list it  
sizes with the text. overflow: hidden does not
do the trick.

Silvester


On May 23, 2007, at 7:30 PM, Matt McCool wrote:

> The navigation looks nice, like the image sprites.
>
> But when the text is resized with the browser (in firefox), the  
> #infobar div
> gets pushed down, and the #menu sprite images are exposed.
>
> Could you adjust the positioning of #infobar to fix this?
> __
> 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] Site check

[ROSEDEV]

David

Thanks, header images are in Flash player 8 and 9 so that might be  
the problem. Need a fix for this too. Again thanks.

Regards,

ROSE Development
Silvester Kok


On May 23, 2007, at 7:54 PM, David Laakso wrote:

> Silvester Kok wrote:
>> Hi,
>>
>> Would it be possible to check this site on any major css flaws in
>> different browsers ?
>>
>> I have tested Safari, IE 6/7 firefox
>>
>> Thanks in advance
>>
>> Silvester
>>
>> URL:  http://home.rosedev.nl/
>>
>
>
>
>
>
> Opera/9.20
> Camino/1.0.4
> IE/6 and 7
>
> The horizontal nav is breaking a little early (+1).
> I am not sure why: the header images did not load on my end in IE.
> Best,
> ~dL
> __
> 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/

[css-d] IE 6 not displaying image

[Sandy]

Hey all,

Any idea of what may be going on here? IE6 does not display the image in 
the top left side of the banner.

http://www.uoguelph.ca/~dmangroo/index.html

thanks!

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/

[css-d] IE 6 not displaying image

[Sandy]

Hey all,

Any idea of what may be going on here? IE6 does not display the image in 
the top left side of the banner.

http://www.uoguelph.ca/~dmangroo/index.html
styles are here:
http://www.uoguelph.ca/~dmangroo/mangroo.css

thanks!

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/

[css-d] Faux column working in IE6, but not Firefox or Netscape

[Dova Wilson]

http://www.gwvirginia.gwu.edu/newsite/pg2.4.html
 
My faux columns are working in IE6, but not in Firefox 2.0.0.3. I
haven't tested extensively in other browsers, but Netscape 7.0 and 7.2
don't seem to be working either. The page and css have passed W3C
validation.
 
I have a background image set on #wrapcolumns with a width of 738px.
background: url (../images/bg2.gif) repeat-y;
 
The left hand subnavigation column (#navbarside, float: left) should be
dark blue and the #wrapper (float: right with other divs inside of it)
should have a white background.
 
My style sheet is at /styles/pg.2.3.css. 
 
Note that I'm still tweaking a number of other things on the page.
 
Thanks in advance for help with this.
 
Dova H. Wilson
Marketing Communications Specialist
George Washington University Virginia Campus
20101 Academic Way, Suite 134
Ashburn, Virginia 20147
Phone: 703-726-3652
Fax: 703-726-3655
www.gwvirginia.gwu.edu
 
__
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] two variable width divs side by side

[Paul Sommer]

"Rory Fitzpatrick" wrote:

> Try this out for size:
> 
> 
> 
>   That's the way it looks
>without tables  
>   
> 
>   
>   
> 
>   11
>   22  
>   
> 
>   
>    
> 


Maybe I have stripped my example a bit too much :-)

Your solution works only with that simple example. The "real thing" has a 
background image attached
to the right column.
(please look at the extended sample here 
http://paul-sommer.de/test/tablefree.html )
Expanding that image to the left side is not a solution as the menu column 
grows if the user
enlarges the font size (Ctrl + in firefox). 
The menu column must be sized with em (I think). Otherwise the text runs out of 
the box
if the user enlarges the text.


__
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] clear property clears all floats?

[Erin Spangler]

Could someone tell me what I'm doing wrong with this page?
http://www.hotfrenchbulldogs.com/angus2.html

My goal is to float the first image (angus-02) to the left with the text 
along side. Then I'd like the next image (angus-03) to clear the float 
from the first image and be centered below the image and text above it. 
But, adding my float class to that second image floats it down below my 
(floated) left navigation. Why?

Thanks!

-- 
Erin Spangler
www.thedogsonline.com
Web Design and Hosting
for the Dog Enthusiast

__
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] clear property clears all floats?

[Tim Offenstein]

At 3:11 PM -0400 5/23/07, Erin Spangler wrote:
>Could someone tell me what I'm doing wrong with this page?
>http://www.hotfrenchbulldogs.com/angus2.html
>
>My goal is to float the first image (angus-02) to the left with the text
>along side. Then I'd like the next image (angus-03) to clear the float
>from the first image and be centered below the image and text above it.
>But, adding my float class to that second image floats it down below my
>(floated) left navigation. Why?

Hi Erin,

I'm having similar problems with floats but in looking over your 
code, why not remove the clearcenter class on the second image and 
instead use class="center" on the p element as you've done with 
glory.html? This will bring Angus' second image up like you're 
describing.

Cute dogs BTW. My miniature dachshund, Oscar, would love a buddy!

-Tim
-- 
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
  Tim Offenstein  ***  College of Applied Health Sciences  *** 
(217) 244-2700
CITES Departmental Services Web Specialist  *** 
www.uiuc.edu/goto/offenstein

__
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] changing font sizes - pt > px doesn't work in CSS

[Michael Stevens]

Here's the site in question: www.bctarizona.com
 
It's a nightmare and I'm slowly trying convert it to good XHTML/CSS. Today I
was attempting to change all the type from points to pixels via the
stylesheet. I put font-size: 13px in the body and then changed all the other
specs as %s to reference it. There's a normal class which was set to 10pt so
I changed it to 100% which should make it equal what's in the body tag. But,
ALL the text with a class of normal is MUCH larger and DOES NOT change
regardless of what I put in the stylesheet. No matter what I changed the
body tag or normal class it all stayed the same. And, since I made all the
other tags % they should reference the body which means that
increasing/decreasing the body {font-size...} should increase everything,
including the top & side menus. Not so...
 
So, there are a lot of problems including but not limited to: it's all
tables, no DOCTYPE, most of the styles are inline... Don't bother validating
it and telling me it doesn't validate. I know. I'm trying to convert it to
good code but it's slow in progress. And, other than no DOCTYPE I don't see
how any of the errors make the pages ignore px.
 
I have worked around it by defining everything as px which isn't making
anything easier. Why doesn't this site like to use px in the manner you
should? If it's just an issue of no DOCTYPE that should be an easy fix. I
tried adding it to the header.php page but it errored out on me. I'll have
to figure out why PHP doesn't like the DOCTYPE in front of .
 
Thanks for any insight...
 
Mike
__
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 and IE7 having trouble with images HEEEEELLLLLLLPPPPPPP!!!!!!!!! Please please please

[Sandy]

Please please help!

This page
http://www.uoguelph.ca/~dmangroo/research/research.html
is displaying in all kinds of versions of FF and Opera just fine.

In IE6, the top left logo doesn't show up. The big image in the content 
is fine.

In IE7, the top left logo is there looking just as it should, and the 
big image in the content is not displaying the bottom 3rd.

I just don't see what the trouble is, and any help would be much 
appreciated.

thanks in advance,
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] two variable width divs side by side

[Susanne Jäger]

Paul Sommer wrote, On 23.05.2007 20:58:

> Your solution works only with that simple example. The "real thing" has a 
> background image attached
> to the right column.
> (please look at the extended sample here 
> http://paul-sommer.de/test/tablefree.html )
> Expanding that image to the left side is not a solution as the menu column 
> grows if the user
> enlarges the font size (Ctrl + in firefox). 
> The menu column must be sized with em (I think). Otherwise the text runs out 
> of the box
> if the user enlarges the text.

Not sure if I got the problem, but perhaps something like that  - uses
position instead of float to avoid problems with too wide table
(untested just to give you an idea) assuming a solid background-color
for the menu column.







#container {position: relative; border-left: yellow solid 20em;
background-image: ...}
#menu {width: 18em; position: absolute; left: 1em; top: 0;}

anything else you didn't mention? ;-)

Gruß
Susanne

-- 
http://sujag.de - Webentwicklung und -beratung
10119 Berlin, Tel: 030 - 440 483 47
* CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp
http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT
__
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] changing font sizes - pt > px doesn't work in CSS

[David Laakso]

Michael Stevens wrote:
> Here's the site in question: www.bctarizona.com
>  
> It's a nightmare and I'm slowly trying convert it to good XHTML/CSS. Today I
> was attempting to change all the type from points to pixels via the
> stylesheet. I put font-size: 13px in the body and then changed all the other
> specs as %s to reference it...trimmed]
>  
> Mike
>
>   
It is a lot easier if you set default (100%) on the body.  And use 
percent throughout for font-sizes and a raw number (no unit of measure) 
for line-height.
This is a 5 minute fast & dirty pass at what you've got:


body {
font: 100% Verdana, Arial, sans-serif;
 
}


.veryverysmall{font-size: 70%;}
.verysmall{font-size: 76%;}
.small{font-size: 80%;}
.normal{font-size: 85%;}
.large{font-size: 95%;}
.verylarge{font-size: 120%;}
.huge{font-size: 150%;}
.bold{font-weight: bold;}

.caption  { font-size: 70%; }
.sectionhead { font-size: 110%;  }


.pagetitle {
font-size: 95% ; }

.leftmenuheader {
 
font-size: 90%;
line-height: 1.3;
  
}

a.leftmenutext, a.leftmenutext:link, a.leftmenutext:visited {
font-size: 85%;
line-height: 1;
 
}

.leftmenulogin {
   
font-size: 80%;
 
}

.leftmenuloginheader {
font-size: 80%;

}

a.leftmenulogintext, a.leftmenulogintext:link, a.leftmenulogintext:visited {
font-size: 80%;

}

a.topmenu, a.topmenu:link, a.topmenu:visited {
 
font-size: 80 %;

}


td.updatesheader {

font-size: 120%;
 
}

.footertext { font-size: 80%; }




__
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] changing font sizes - pt > px doesn't work in CSS

[Michael Stevens]

-Original Message-
From: David Laakso

It is a lot easier if you set default (100%) on the body.  And use percent
throughout for font-sizes and a raw number (no unit of measure) for
line-height.
This is a 5 minute fast & dirty pass at what you've got:

body {...]
--

By setting body to 100% you still haven't define it, have you? That's why I
was trying to set body to 13px and % for everything else.

Mike


__
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] changing font sizes - pt > px doesn't work in CSS

[Ed Seehouse]

On 5/23/07, Michael Stevens <[EMAIL PROTECTED]> wrote:
>
> -Original Message-
> From: David Laakso
>
> It is a lot easier if you set default (100%) on the body.  And use percent
> throughout for font-sizes and a raw number (no unit of measure) for
> line-height.
> This is a 5 minute fast & dirty pass at what you've got:
>
> body {...]
> --
>
> By setting body to 100% you still haven't define it, have you? That's why
> I
> was trying to set body to 13px and % for everything else.
>
> Mike
>
>
While this last is true, I think we have to realize that the web is not a
fixed medium, it is a flexible one.  The vast majority of folks have either
set their default font sizes according to their preferences, or have
accepted the browser default because it doesn't bother them enough to find
out how to change it.

If this is so, then if you set your body font to 100% as David suggests, you
will be least likely to offend the largest part of your audience.  On the
other hand if you use 13px for a default font size I will not be able to
read your page without resizing it, a nuisance to me.  That alone, depending
on my mood, may well be (often is) enough to send me away without reading
further.

-- 
Ed Seedhouse
__
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] Repost: Text covered on IE7, images covered on IE6

[Ingo Chao]

Tom McNeer wrote:
> ...
> http://www.identitysciences.com/layouts/test.html
> 
> In Firefox and Safari, all seems well. In IE7, the lower part of the footer
> text is cut off.

The text gets clipped by its line-height, I'd say. What is the reason to 
insert 2 breaks and having a line-height of 0.4em? Vertical centering?
see
http://css-discuss.incutio.com/?page=CenteringTextVertically

> In IE6, the images on the left of the main content area are being covered or
> truncated on the left edge. The hand and the clock should both extend to the
> left edge of the content area.

Again a clipping effect. See
http://www.satzansatz.de/cssd/onhavinglayout.html#clip

to prevent an element from being clipped,
  in IE7, it needs haslayout
  in IE6, it needs haslayout and position:relative

An image always has layout in IE. All you need is to add position:relative.

Ingo


-- 
http://www.satzansatz.de/css.html
__
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] clear property clears all floats?

[Richard Grevers]

On 5/24/07, Erin Spangler <[EMAIL PROTECTED]> wrote:
> Could someone tell me what I'm doing wrong with this page?
> http://www.hotfrenchbulldogs.com/angus2.html
>
> My goal is to float the first image (angus-02) to the left with the text
> along side. Then I'd like the next image (angus-03) to clear the float
> from the first image and be centered below the image and text above it.
> But, adding my float class to that second image floats it down below my
> (floated) left navigation. Why?
>
If you wrap both images in a floated container, the clear will
restrict itself to that container. the container will have to have
some dimension specified to avoid "haslayout" issues.
-- 
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
Lost yet? http://www.lost.eu/3d33f
__
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] Faux column working in IE6, but not Firefox or Netscape

[Philippe Wittenbergh]

On May 24, 2007, at 3:46 AM, Dova Wilson wrote:

> http://www.gwvirginia.gwu.edu/newsite/pg2.4.html
>
> My faux columns are working in IE6, but not in Firefox 2.0.0.3. I
> haven't tested extensively in other browsers, but Netscape 7.0 and 7.2
> don't seem to be working either. The page and css have passed W3C
> validation.
>
> I have a background image set on #wrapcolumns with a width of 738px.
> background: url (../images/bg2.gif) repeat-y;
>
> The left hand subnavigation column (#navbarside, float: left)  
> should be
> dark blue and the #wrapper (float: right with other divs inside of it)
> should have a white background.

IE is saved by its own stupidity: your #wrapcolumns 'haslayout' [1]:  
it has a width declared.
In other browsers, the #wrapcolumns collapses in height, because it  
only contains floated blocks, which are removed out of the flow.
One solution is insert a clearing div at the end of #wrapcolumns to  
force it to stay open.
Or take one of the 'easy clearing' solutions:

more options listed on the wiki


[1] http://www.satzansatz.de/cssd/onhavinglayout.html
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/

Re: [css-d] changing font sizes - pt > px doesn't work in CSS

[Philippe Wittenbergh]

On May 24, 2007, at 6:22 AM, David Laakso wrote:

> Michael Stevens wrote:
>> Here's the site in question: www.bctarizona.com
>>
>> It's a nightmare and I'm slowly trying convert it to good XHTML/ 
>> CSS. Today I
>> was attempting to change all the type from points to pixels via the
>> stylesheet. I put font-size: 13px in the body and then changed all  
>> the other
>> specs as %s to reference it...trimmed]
>>
>> Mike
>>
>>
> It is a lot easier if you set default (100%) on the body.  And use
> percent throughout for font-sizes and a raw number (no unit of  
> measure)
> for line-height.
> This is a 5 minute fast & dirty pass at what you've got:
> [...]

Also bear in mind that in quirksmode, font-size inheritance on tables  
doesn't work.
You have to add a rule: table {font-size:100%} for %font-sizing to  
work (even if one specifies a font-size in px on body)

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] AlphaImageLoader

[Kirsten Rourke]

Jens,

Thank you very much for the help. It's clear to me that I'm not getting the way 
this should be written. I added in the parts you mentioned but I am obviously 
missing something else because FF now won't work and IE6 is still broken.

Do you happen to know if there is any reason why this would crash N4? I'm 
trying to not crash anything and BrowserCam looks like N4 crashed.

Thanks again,

Kirsten



__
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] AlphaImageLoader

[Melianor]

It will certainly crash in N4, since CSS is used, that was not
supported back then. When you do not use conditional comments, like in
your example and resort to css hacks to solve such quirks, you would
use @import for the css, so that it will not be regarded by N4.

I wonder though, why N4 does not seem to disregard the conditional
comments. Maybe some others have more insight here. N4 has never been
a requirement yet.

Besides using BrowserCam, you can still install N4 seperatly on your
machine if you are using a Microsoft OS based development machine for
your site. Downloads are still available for that version.

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] Centering a floating list.

[Melianor]

Hi John,

This will not work that way. Your approach is correct in some ways,
but no in others.

This should be working code, working on IE 7 downwards, Opera, FF, Safari,









1 - 14$6.62
15 - 49$5.00
50 - 199$3.76
200+$3.38






The list might look shifted a bit, since the default margins and
paddings of lists look a bit different in FF, IE and such. I just
added the border, so that you can see that the content container is
actually centered ;)

regards, Jens


-- 
So long, and thanks for all the fish!
__
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/