[css-d] Vertical alignment question
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
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 p 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
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
Hi Guys I am building a site here: http://www.weddingcompanycornwall.co.uk/ http://www.weddingcompanycornwall.co.uk/wp-content/themes/weddings/style.css Using Stu Nicholls code from here: http://www.cssplay.co.uk/layouts/fixit.html 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
Richard Brown wrote: I am building a site here: http://www.weddingcompanycornwall.co.uk/ http://www.weddingcompanycornwall.co.uk/wp-content/themes/weddings/style.css 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
Richard Brown wrote: http://www.weddingcompanycornwall.co.uk/ ... 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
Richard Brown wrote: http://www.weddingcompanycornwall.co.uk/ http://www.weddingcompanycornwall.co.uk/wp-content/themes/weddings/style.css 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
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
Ingo Chao wrote:
Richard Brown wrote:
http://www.weddingcompanycornwall.co.uk/ ... 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...
http://www.gunlaug.no/contents/wd_additions_15.html
...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
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?
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; }
a href=# class=green-buttonspan class=lnbsp;/spanbAdd to
Watchlist/bspan class=rnbsp;/span/a
-
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
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?
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
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?
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)
Hi Alicia, Hint: close the header-div before starting the submenu div. [1] :-) : testpage http://home.tiscali.nl/developerscorner/css-discuss/test-alicia.htm. 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?
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?
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+tutorialstart=0ie=utf-8oe=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?
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
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?
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
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
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 link id=StyleSheet rel=stylesheet type=text/css media=all 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?? - 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
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 link id=StyleSheet rel=stylesheet type=text/css media=all 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 link id=StyleSheet rel=stylesheet type=text/css media=all href=../includes/style.css / link rel=stylesheet type=text/css media=print href=../includes/print.css / 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
[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
[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
[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... http://annevankesteren.nl/2005/10/ie-import-hack ...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.
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
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: http://www.positioniseverything.net/easyclearing.html 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
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
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: http://www.positioniseverything.net/easyclearing.html 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] http://www.w3.org/Style/Examples/007/maps.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] misalignment title wrapping
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)
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 http://home.tiscali.nl/developerscorner/css-discuss/test-blog2-a.htm. 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 http://home.tiscali.nl/developerscorner/imaging/image-saving.htm. __ 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
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 div class=top-left, so this class
gets the clear and you are saved. :-)
And to get IE in line, you can place a non-breaking-space (nbsp;)
instead of the normal space between Add and Mortgage (= compensation
for the IE-only
fix tabNav a {width:0.1em;} ).
See testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-rolland-new.html.
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
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: lione/li li|/li litwo/li 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/
