[css-d] Vertical alignment question

[Eoin Maguire]

Hi,

 

 Not sure if this got through last time, but I have a problem with
positioning something nicely within an image background. I've uploaded the
code for people to see, if you look at this page you'll see that on the far
right there's a score of 67%, but it's not sitting nicely against the orange
background. I've tried quite a few different techniques to get this to sit
vertically and horizontally centered against the orange background but I
can't quite get it.

 

 

It would be great if the resident CSS experts would have a look at it and
suggest a possible fix, here's the URL with the example code on it:

 

 

http://www.miselva.com/css/cssproblem.html

 

 

Thanks!

__
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] Vertical alignment question

[Dave Goodchild]

On 11/07/06, Eoin Maguire <[EMAIL PROTECTED]> wrote:
>
> Hi,
>
>
>
> Not sure if this got through last time, but I have a problem with
> positioning something nicely within an image background. I've uploaded the
> code for people to see, if you look at this page you'll see that on the
> far
> right there's a score of 67%, but it's not sitting nicely against the
> orange
> background. I've tried quite a few different techniques to get this to sit
> vertically and horizontally centered against the orange background but I
> can't quite get it.



The 67% is not contained in any element. Why not  put it inside a  or
other containing element and target that?

It would be great if the resident CSS experts would have a look at it and
> suggest a possible fix, here's the URL with the example code on it:
>
>
>
>
>
> http://www.miselva.com/css/cssproblem.html
>
>
>
>
>
> Thanks!
>
> __
> 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/
>



-- 
http://www.web-buddha.co.uk
http://www.projectkarma.co.uk
__
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 not playing nice...please help

[APC]

Hi everyone,

I'm changing the design for my site http://www.daddaily.com and am running into 
a lot of Internet Explorer problems.  The site displays fine in FireFox.

I would very much appreciate anyone's help as to why my navbar and sidebar 
don't show.

Thank you very much,

Art

PS, I love the /. redesign so used the same design for my header.  It is just 
temporary while I iron out the IE bugs.  Will be changing that shortly.
__
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] Random Space

[Richard Brown]

Hi Guys

I am building a site here:


Using Stu Nicholls code from here:


However, I seem to have gained a random space in the content div. You can see 
it at the top of the scroll bar. Does anyone know where it comes from please?

Whilst writing I would also ask folks what they think of the navigation 
please? At the moment if you go into the "Our Designers" page, the secondary 
navigation arrives in the footer. Any comments please?

Bit thanks to Stu and thanks for reading this.
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
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] Random Space

[Els]

Richard Brown wrote:

> I am building a site here:
> 
> 
>
> However, I seem to have gained a random space in the content
> div. You can see it at the top of the scroll bar. Does anyone
> know where it comes from please?

Yup. You placed the #content at 120px from the top, and gave the 
#header a height of 100px.
There's 20px difference between those two values :-)

-- 
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] Random Space

[Ingo Chao]

Richard Brown wrote:
> 
> ... Whilst writing I would also ask folks what they think of the navigation 
> please? 


What is a "Mens Hire Mother of the Bride Shop" ?

Ingo

-- 
http://www.satzansatz.de/css.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/

Re: [css-d] Random Space

[David Laakso]

Richard Brown wrote:
> 
> 
> 
> Whilst writing I would also ask folks what they think of the navigation 
> please? At the moment if you go into the "Our Designers" page, the secondary 
> navigation arrives in the footer. Any comments please?
>   
Since Els replied to the CSS question, I guess I get to venture into the 
twilight zone of *personal opinion.* The nav jump to the bottom did not 
bother me. I thought, at first, that the top nav was a text sub-title. 
Pipe separators(or something like that) between the link items might 
help? I /did not/ care for the header/footer v- scrollbars when the 
font-s are zoomed. With regard to the content text, what's with the 
centered lines? Try flush left/scatter right instead. Palatino is tiny 
to begin with, so bump 90% on the body to default(100%). And it is 
sometimes exquisite in italic when it changes to a display font(around 
107 to 109%). So it might not hurt, to push the envelope, going even 
larger on the content-text p (italic 120% or 130%?-- this is sure to 
freak out your peers, if not my good friend Felix Miata :-) ).


Best,
~dL
PS These are, of course, my personal opinions.

-- 

http://chelseacreekstudio.com/ca/ccs/pow/pow.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/

Re: [css-d] Random Space

[Richard Brown]

Hi David and anyone else

On Tuesday 11 July 2006 15:10, David Laakso wrote:
> Try flush left/scatter right instead.
How do I apply this please?
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
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] Random Space

[Gunlaug Sørtun]

Ingo Chao wrote:
> Richard Brown wrote:
> 
>>  ... Whilst writing I 
>> would also ask folks what they think of the navigation please?
> 
> 
> 
> What is a "Mens Hire Mother of the Bride Shop" ?

Must be a "dual purpose" service :-)

...a bit more separation seems to be needed.



Generally regarding the layout:
There's a problem with...

body {height:100%;}

...and...

* html body {
padding:120px 0 50px 0;
}

...making the body 100%+120px+50px tall in IE6. The extra height is
added below footer.

Comment out / delete the 'height: 100%', and body will self-adjust to
100% height including paddings in IE6.

---

There's a similar problem with...

#content {padding:20px;}

...and...

* html #content {width:100%;}

...making the #content 40px too wide in IE6.

Comment out / delete the 'width:100%;' and it will default to 100% width
including paddings in IE6.

---

I think you should study Stu's "fixed layout" a bit more, as you have
clearly not picked up the simple fact that he puts IE6 (and IE7) in
quirks mode (while your page does not). Thus Stu has avoided all
problems by *not* dealing with them, and he is simulating a standard
style-effect in browsers that *do* understand the real thing.

I think the real "position: fixed" is a better option, with a
mode-independent workaround for IE/win.
Something like this...

...seems to work quite well in most browsers.

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] Random Space

[Felix Miata]

On 06/07/11 15:33 (GMT+0100) Richard Brown apparently typed:

> On Tuesday 11 July 2006 10:10 -0400, David Laakso wrote:

>> Try flush left/scatter right instead.

> How do I apply this please?

#content {
...
text-align:left/*center*/;
}
-- 
"If you confess with your mouth, 'Jesus is Lord', and believe in
your heart that God raised him from the dead, you will be saved."
Romans 3:23 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://mrmazda.no-ip.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/

[css-d] A good CSS/text button?

[Tom Dell'Aringa]

Hi everyone,

I'm searching for a good solution that will allow us to use scalable,
graphic backgrounds as buttons while still using plain text. The main reason
for this is to allow for ease of editing buttons without going back to the
image editor, as well as internationalization.

Currently, one of our developers implemented this solution:
-

.green-button {
padding: 0 0 10px 0;
display: inline;
font: bold 12px Arial;
vertical-align: middle;
white-space: nowrap; }

.green-button span.l {
 text-decoration:none;
 background: url("button_left.gif") left center no-repeat;
 padding: 4px 6px 4px 0; }

.green-button b {
 text-decoration:none;
 color:#ff;
 background: url("button_center.gif") center center repeat-x;
 padding: 4px 0; }

.green-button span.r {
 text-decoration:none;
 background: url("button_right.gif") right center no-repeat;
 padding: 4px 6px 4px 0; }

.green-button:hover b { text-decoration: none; }

 Add to
Watchlist 

-

You can see what it looks like (with CSS inline) at:

http://www.pixelmech.com/rev/cssbutton.html

It works, but I'm not crazy about it for a couple of reasons. One is that it
is tricky to position correctly. And I am just wondering if there is a
better way to do it. (A sliding doors method perhaps?) I've searched for css
buttons, but all I seem to come up with is stuff I am familiar with -
basically replacing text with an image or css rollovers, but none of that
really fits what we need here.

Any suggestions on how to improve what we have, or a better solution
altogether? (I'm thinking there is a better way to do this.)

Thanks

Tom
__
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] Francky's Corners and accessible tabs

[rollandburn]

Hi all,  after great help and suggestions from quite a few of the  
members here I have come to another block in my css training.  After  
successfully implementing francky's rounded corners and accessible  
tabs separately, I find that I am having a problem getting the tabs  
to sit on top of the rounded corner div.  The tabs are sliding down,  
overlapping the div instead of sitting on top.  Teh following link  
illlustrates this.

http://www.rollandburn.com/test.html

again, thanks for un-stumping me! hehe



__
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] A good CSS/text button?

[MarcLuzietti]

Tom, it's very simple. Use the sliding doors method.

http://alistapart.com/articles/slidingdoors/ &
http://alistapart.com/articles/slidingdoors2/

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

Re: [css-d] Vertical alignment question

[David Laakso]

Eoin Maguire wrote:
> [... if you look at this page you'll see that on the far
> right there's a score of 67%, but it's not sitting nicely against the orange
> background. I've tried quite a few different techniques to get this to sit
> vertically and horizontally centered against the orange background but I
> can't quite get it. 
>
> http://www.miselva.com/css/cssproblem.html 
>   
Eoin, I have no idea how to fix it. Just a suggestion, though: you may 
get better results from someone that actually knows what they are doing, 
if you validate the html before posting(it will not solve the problem). 
You've got an  inline element containing a block-level element-- or 
something like that, that's causing it not to validate. Also, it /might/ 
be easier to fix if the styles were embedded in the head of the 
document, instead of inline in the markup.
Regards,
~dL

-- 

http://chelseacreekstudio.com/ca/ccs/pow/pow.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/

Re: [css-d] A good CSS/text button?

[Christian Heilmann]

wrote:
> Tom, it's very simple. Use the sliding doors method.
>
> http://alistapart.com/articles/slidingdoors/ &
> http://alistapart.com/articles/slidingdoors2/

I am using one big image for that kind of stuff:
http://icant.co.uk/articles/flexible-css-menu/

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
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] Horizontal menu (positioning)

[Alicia C]

>
> >
> Hi Alicia,
> Hint: close the header-div before starting the submenu div. [1] :-) :
> testpage
> .
> Now the fine tuning!
>
> Greetings,
> francky
>
> [1]
> Cascade style: if the #submenu is inside the #header, the #submenu is
> dripping wet under the cascade (positioning, colors, ...) of the #header.
> If the #submenu is outside the #header, it is starting it's own cascade.


oh now I see! It worked great in both Firefox and IE:
http://www.freewebs.com/highwayjunkie/blog2.htm

Thank you =D! Also, one more thing: what if I want any column to be the
longest? I tried to read and use some tutorials, but I messed everything  =(
I read it's something about liquid, flexible layouts, don't really know. Any
help, please? =)
__
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] A good CSS/text button?

[Guy K. Haas]

> wrote:
>> Tom, it's very simple. Use the sliding doors method.
>>
>> http://alistapart.com/articles/slidingdoors/ &
>> http://alistapart.com/articles/slidingdoors2/
>
> I am using one big image for that kind of stuff:
> http://icant.co.uk/articles/flexible-css-menu/

Nice.  When you blow it up large enough, SOME of the tabs [2nd and 4th)
display a second left-end image.  Any clue about why?

And, what is the best way to create those tab images?  Not just what tool,
but how the heck do you draw/shape the curves and shading?

--Guy K. Haas
  Software Exegete in Silicon Valley

__
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] A good CSS/text button?

[Christian Heilmann]

> >> Tom, it's very simple. Use the sliding doors method.
> >>
> >> http://alistapart.com/articles/slidingdoors/ &
> >> http://alistapart.com/articles/slidingdoors2/
> >
> > I am using one big image for that kind of stuff:
> > http://icant.co.uk/articles/flexible-css-menu/
>
> Nice.  When you blow it up large enough, SOME of the tabs [2nd and 4th)
> display a second left-end image.  Any clue about why?

Well, the image doesn't fit any more. If you really consider the need
that some users need to blow up the text to this size, create bigger
images. However, this is the danger of these tests: Breaking them is
easy but would a needy user really need text that big or would a
screen magnifier be needed anyways?

> And, what is the best way to create those tab images?  Not just what tool,
> but how the heck do you draw/shape the curves and shading?

Photoshop CS2, comes with a rounded corners shape and a good gradient
tool. Also, presets for plastic buttons.

There is also a plethora of tutorials out there:
http://fresherimage.com/Tips/Photoshop/PlasticButton/
http://www.google.co.uk/search?q=plastic+button+tutorial&start=0&ie=utf-8&oe=utf-8
__
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] A good CSS/text button?

[MarcLuzietti]

If one has watched the example you have gave closely, he sees the
button has /four/ rounded corners and each of them requires another
(and in this case: empty) html element if the button has to be fully
scalable.
==
Well, you could use JavaScript to add the extra spans, so that the HTML 
code stays neat, but
that's straying from the purpose of the list. Something like Nifty Corners 
would do it nicely.

I would note that in the original, the use of non-breaking spaces is 
redundant (and anti-standards). 
Simply adding a little padding, ala padding:0 1em; would achieve the 
effect much more gracefully.

-- 
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] load multiples css with one page

[neal]

Hello all

I have a site where i am using one style sheet to load others

here it is:

@import url("layout.css");
@import url("modules.css");
@import url("print.css") print;


problem is IE (really?!!)  doe's not recognize the print delivered in this
manner - does it have to be pulled in the page separately? - I have
googled this - but no answers

Thanks

N
__
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] A good CSS/text button?

[Christian Heilmann]

> If one has watched the example you have gave closely, he sees the
> button has /four/ rounded corners and each of them requires another
> (and in this case: empty) html element if the button has to be fully
> scalable.
> ==
> Well, you could use JavaScript to add the extra spans, so that the HTML
> code stays neat, but
> that's straying from the purpose of the list. Something like Nifty Corners
> would do it nicely.
> I would note that in the original, the use of non-breaking spaces is
> redundant (and anti-standards).
> Simply adding a little padding, ala padding:0 1em; would achieve the
> effect much more gracefully.

In short:
http://css-discuss.incutio.com/?page=RoundedCorners

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
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] load multiples css with one page

[Michael Landis]

On 7/11/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> Hello all
>
> I have a site where i am using one style sheet to load others
>
> here it is:
>
> @import url("layout.css");
> @import url("modules.css");
> @import url("print.css") print;
>
> problem is IE (really?!!)  doe's not recognize the print delivered in this
> manner - does it have to be pulled in the page separately? - I have
> googled this - but no answers

How is the parent stylesheet loaded? I could imagine browsers having
issues if you define a stylesheet with a media indicator that loads
another stylesheet that also has a media indicator.

Makes sense to me to link the print sheet separately, so that all of
your media is organized individually.

HTH,

Michael
__
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] load multiples css with one page

[neal]

> On 7/11/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>> Hello all
>>
>> I have a site where i am using one style sheet to load others
>>
>> here it is:
>>
>> @import url("layout.css");
>> @import url("modules.css");
>> @import url("print.css") print;
>>
>> problem is IE (really?!!)  doe's not recognize the print delivered in
>> this
>> manner - does it have to be pulled in the page separately? - I have
>> googled this - but no answers
>
> How is the parent stylesheet loaded? I could imagine browsers having
> issues if you define a stylesheet with a media indicator that loads
> another stylesheet that also has a media indicator.
>
> Makes sense to me to link the print sheet separately, so that all of
> your media is organized individually.
>
> HTH,
>
> Michael
>

Good Question Michael
Here is how it's being loaded


I do not have too much control over this - but may have some -
I did think since it has media="all" that may be a problem?
It does work in FF - if I take away media="all" might that work in IE then??
 - I'll try it -

thanks for any other suggestions

Neal

__
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] load multiples css with one page

[Michael Landis]

On 7/11/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> I have a site where i am using one style sheet to load others
>
> here it is:
>
> @import url("layout.css");
> @import url("modules.css");
> @import url("print.css") print;

I wrote:

> How is the parent stylesheet loaded? I could imagine browsers having
> issues if you define a stylesheet with a media indicator that loads
> another stylesheet that also has a media indicator.
>
> Makes sense to me to link the print sheet separately, so that all of
> your media is organized individually.

Neal wrote:

> Here is how it's being loaded
>  href="../includes/style.css" />
>
> I do not have too much control over this - but may have some -
> I did think since it has media="all" that may be a problem?
> It does work in FF - if I take away media="all" might that work in IE then??

You might also want to try media="screen, print". If that doesn't
work, and removing media="all" doesn't work, either, then you might
want to look at




HTH,

Michael
__
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] load multiples css with one page

[Gunlaug Sørtun]

[EMAIL PROTECTED] wrote:
> Hello all
> 
> I have a site where i am using one style sheet to load others
> 
> here it is:
> 
> @import url("layout.css");
> @import url("modules.css");
> @import url("print.css") print;
> 
> 
> problem is IE (really?!!)  doe's not recognize the print delivered in this
> manner - does it have to be pulled in the page separately? - I have
> googled this - but no answers

You're right: IE won't find that stylesheet when 'media' is declared in 
an @import rule. IE is looking for a stylesheet with a completely 
different name - which of course doesn't exist. It's a bug in all 
Trident[1] based browsers - including IE7 last time I checked.

Solution: don't declare 'media' on the @import rule. Wrap the entire 
stylesheet-content in an '@media print'[2] rule instead.

Georg

[1]http://en.wikipedia.org/wiki/List_of_web_browsers#Trident-based_browsers
[2]http://www.w3.org/TR/REC-CSS2/media.html#at-media-rule
-- 
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] load multiples css with one page

[neal]

> [EMAIL PROTECTED] wrote:
>> Hello all
>>
>> I have a site where i am using one style sheet to load others
>>
>> here it is:
>>
>> @import url("layout.css");
>> @import url("modules.css");
>> @import url("print.css") print;
>>
>>
>> problem is IE (really?!!)  doe's not recognize the print delivered in
>> this
>> manner - does it have to be pulled in the page separately? - I have
>> googled this - but no answers
>
> You're right: IE won't find that stylesheet when 'media' is declared in
> an @import rule. IE is looking for a stylesheet with a completely
> different name - which of course doesn't exist. It's a bug in all
> Trident[1] based browsers - including IE7 last time I checked.
>
> Solution: don't declare 'media' on the @import rule. Wrap the entire
> stylesheet-content in an '@media print'[2] rule instead.
>
>   Georg
>
> [1]http://en.wikipedia.org/wiki/List_of_web_browsers#Trident-based_browsers
> [2]http://www.w3.org/TR/REC-CSS2/media.html#at-media-rule
> --
> http://www.gunlaug.no



Thanks Georg - I placed @ media enclose print declarations in style.css
@import url("layout.css");
@import url("modules.css");

@media print {
--declarations

}

and it works in FF and IE

I suppose the @media can't be pulled in for the print style
soemthing like this

@import url("layout.css");
@import url("modules.css");
@media print url("print.css");

??

__
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] load multiples css with one page

[Gunlaug Sørtun]

[EMAIL PROTECTED] wrote:

> I suppose the @media can't be pulled in for the print style soemthing
>  like this
> 
> @import url("layout.css"); @import url("modules.css"); @media print 
> url("print.css");
> 
> ??

IIRC, IE/win will mess it up.
For the record: it is this bug...

...we're dealing with here.

I use @import without any 'media' declared, and the @media rule for
media-control inside all my (latest) stylesheets.
This allows me to have separately acting styles for more than one media
in a single stylesheet, which may come handy at times.

I then have one @import *with* 'media' declared, that I use to feed
IE-only styles without the use of conditional comments.

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] layout flips from vert. to horz. when viewed in IE.

[Patrick Roane]

I was wondering if there is something I can do to make the layout seen here:

www.kitchenbarschaumburg.com

look the same across both IE and Mozzilla. I like the way it looks in Mozzilla.

Thanks.

Patrick
__
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] [QUESTION] Can't get my text to wrap part 2

[David Hucklesby]

On Mon, 10 Jul 2006 01:29:46 -0400, Melissa Carraway wrote:

> [...] My problem is that on pages with a lot
> of text, the outer DIV doesn't get taller to fit the copy. Instead
> it pokes out the bottom.
>

Hi Melissa,
Welcome back. The link you gave does not seem to work, but this
sounds like a "float containment" problem. This article describes
the issue and has a cross-browser solution:

  

Warning: I believe that the declaration "display: inline-table"
should read "display: inline-block". Looking over the article, some
of the text would confirm this. I seem to recall that the
"inline-block" value fixes it for IE7 as well.

Others may wish to correct or confirm this.

FWIW: "display: inline-block" validates as CSS 2.1. My experience with
the jigsaw validator is that, by default, it validates to CSS 2, which
flags inline-block as an error.

I love standards-- there are so many to choose from!  :D

Cordially, David
--


__
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] Uberlinks Update

[Al Sparber]

Just a quick note that our Uberlinks CSS list menu tutorial has been 
updated. CSS has been optimized a tad and there is now an automatic 
current page link highlighter that works with a small (540byte) 
script.

http://www.projectseven.com/tutorials/css/uberlinks/index.htm

The code is still free to use on personal or commercial sites. Just 
keep the comments intact in the external CSS and script files.


-- 
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".




__
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] my bad.... CSS issues Take three. -apology/clarification

[David Hucklesby]

> Melissa Carraway wrote:
>>
>> I don't know what I would do if I had no absolute positioning to
>> play with. That was the first way I learned and for me it worked
>> okay for a while. What am I doing wrong?
>>

On Mon, 10 Jul 2006 13:52:30 -0400, Zoe M. Gillenwater replied:
>
> Using absolute positioning. :-) Again, you should *not* use
> absolute positioning as a layout method, period.
>

On Tue, 11 Jul 2006 15:09:29 -0700, David Hucklesby wrote:
> Welcome back. The link you gave does not seem to work, but this
> sounds like a "float containment" problem. This article describes
> the issue and has a cross-browser solution:
>
> 
>

Hello again, Melissa,
Sorry I got off-track with that reply. For some reason my email
client is not threading this discussion correctly.

Just to say that I would not go quite as far as Zoe and ban absolute
positioned layouts completely. My own site uses it. But that was
designed over three years ago, and much more is known and written
about float-based layouts.

The problem you have discovered is that absolutely positioned blocks
act similarly to Photoshop "layers" in that they act completely
independently of underlying "layers". While floats also act as "layers"
in some respects, they do so interact with other elements on the page,
giving you much more control.

To add to the remarks about positioning, I would note that you can
also position block elements using margins.[1]

Cordially, David.
--
[1] 
--



__
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] misalignment & title wrapping

[Gwydionmom]

I have a site that is *almost* done (finishing up some text mostly),  
with 2 issues that I hope are small and easy to correct.

The site is here:
http://www.d2care.org/draft.php

The first problem is with IE on Windows.  If it can be fixed without  
messing up anyone else, that would be great, but I can live with it  
if it's going to scramble the browsers that are working properly.   
Anyway, on the other browsers I've tested, the top line of the  
content is even with the top of the menu, but in IE, it's dropped  
down a bit.

The second problem might be harder to fix.  Short headings work just  
fine, but for longer ones, or if the browser window is narrow, they  
wrap.  When they wrap, the background image repeats on the second  
line, the background color and border overlap the first part of the  
heading, and the border is missing on the right of the top line and  
the left of the bottom line.  What I'd ideally like to see happen is  
that everything would stay in a nice even box with a border all the  
way around.  I've thought about setting the heading to not wrap,  
which would probably create horizontal scrolling, but I'm not sure  
that is ideal either.

Other than that, my own computer is a Mac running OSX 10.4, and the  
layout is fine on Safari 2.0, Firefox 1.5, Opera 9, and IE 5.2
The Windows XP is not mine (so I don't have all the numbers), Firefox  
is fine, and IE is OK except for the above issue.
I have a friend running 9.2 on an old Mac, and she said aol 5.0  
(which I think is basically an old version of IE) is OK, except the  
right menu is/was missing (I made a couple of changes to try to fix  
it but she hasn't looked again yet to see if that helped), and the  
site is OK on Netscape 6.
So, if anyone has the ability to check out other combos, I would very  
much appreciate any feedback.

Thanks!

Jennifer Laus

__
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] Horizontal menu (positioning)

[francky]

Alicia C wrote:

> oh now I see! It worked great in both Firefox and IE:
> http://www.freewebs.com/highwayjunkie/blog2.htm
>
> Thank you =D! Also, one more thing: what if I want any column to be 
> the longest? I tried to read and use some tutorials, but I messed 
> everything  =( I read it's something about liquid, flexible layouts, 
> don't really know. Any help, please? =)

The problem is that the background-color (or -image) of the shortest 
column cannot be under that column.
The trick is to fake "column-backgrounds" with a background image 
(y-repeated) in the container of both columns: the "faux columns" 
method. Kind of colored curtain behind the columns, as long as the 
largest column: it's liquid too. :-)

See testpage here 
.

Greetings,
francky

btw1: I was so free to adapt some other things as well: see comments in 
source code.
btw2: The header-img as gif instead of jpg is winning 71-21=50kB (image 
is downloaded in about 1/4 of the time of the jpg): more joy for the 
modem-visitors of the site. ;-)
For some remarks about saving of gif's, jpg's and png's: see over here 
.

__
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] Francky's Corners and accessible tabs

[francky]

rollandburn wrote:

>Hi all,  after great help and suggestions from quite a few of the  
>members here I have come to another block in my css training.  After  
>successfully implementing francky's rounded corners and accessible  
>tabs separately, I find that I am having a problem getting the tabs  
>to sit on top of the rounded corner div.  The tabs are sliding down,  
>overlapping the div instead of sitting on top.  Teh following link  
>illlustrates this.
>
>http://www.rollandburn.com/test.html
>
>again, thanks for un-stumping me! hehe
>  
>
Yes: because the tabs a in a floating div, out of the normal flow of the 
html. A {clear: left;} in the first independent div under it lets the 
new div start below the tabs-bar.
In this case, the first div is the , so this class 
gets the clear and you are saved. :-)
And to get IE in line, you can place a non-breaking-space ( ) 
instead of the normal space between "Add" and "Mortgage" (= compensation 
for the IE-only
fix  "tabNav a {width:0.1em;}" ).
See testpage 
.

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/

[css-d] IE draws a random line through nav & links issue

[Brian Cummiskey]

Hi all,

I'm working on a client website using wordpress as the back end.  I have 
highly customized the skin to make it less blog-like and more CMS-like, 
as the application suits.  I modified the menu system so that Categories 
are listed on the top nav, and Pages are listed on the secondary nav.

I have two issues with this (barebones) layout:

Issue 1:

When I met wth my client at their place the other day, I noticed for the 
first time a weird IE quirk.  When scrolling occurs, sometimes the nav 
bars when you scroll back up will have a random 1px white line through 
them.  I DON'T see it and HAVEN'T been able to reproduce this on my 
IE6/xp on my laptop, but I linked it to a buddy on the same setup who 
does see it.

To reproduce:

go to: http://www.mtcues.com/beta/category/testimonials/ (not limited to 
this page, just the longest one that should require scrolling on most 
"normal" resolutions) in ie6
scroll down so nav bars are out of view, scroll back up to top. 
repeat a couple times.  a white line may appear.

I'm guessing it has something to do with my a:hover thick bottom borders 
on the links, but I'm not certain.


Issue 2a:

Also only in IE, the RSS link doesn't work as a link all the time.  It's 
fine in firefox, but in IE, only parts of the link are "hoverable".  I'm 
using a standard RSS icon as a background image to the list element.  
See the footer list.

Issue 2b: 

Also on this footer list, I'm using pipes as list elements, and i'd like 
to get away from this.
ie:
one
|
two

I would like to maintain the pipe separator, but realize that this is 
poor semantics.  Since the elements are written dynamically (login vs 
logout links, and the admin panel link if logged in as admin) i need to 
include the pipe on a per-element basis and i'm not sure how to go about 
this.



TIA,
-Brian


__
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 draws a random line through nav & links issue

[Brian Cummiskey]

Rahul Gonsalves wrote:
> First off, nice design.
Thanks.  It's bare-bones right now.  I have some images in the works to 
spice it up some, but that's the framework/main color theme.
>
> I don't see either of your problems, running IE6.0.2900.2182 (SP2). 
> I'm able to click on the entire RSS link + icon, and I don't see the 
> white bars in your nav bar randomly appearing.
I had my buddy take a SS.  I uploaded it here:  
http://www.mtcues.com/beta/bars.jpg
It is not always in that position-- it moved randomly it seems, and he 
said he also cought it acting about 20px tall blocking the whole top nav 
bar with the white.
>
> The third issue I can't help you :-) , but I hope someone will, as I'm 
> also looking for the same solution.
:)   I'm sure someone on here knows

Thanks,

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