Re: [css-d] Stretching in IE7, even worse in IE6.
Georg, First of all, thanks a million for your help with this. It is a wonderful learning experience. I think it's amazing that so few little changes can have such a great effect. I updated the css files as you told me and now, IE 7 is looking as good as FF IE8. Even IE 6 is starting to shape up, though I do need to do a bit more research on IE 6. For example, the main navigation links appear without borders and without their background images, and sibling selectors don't work. Do I need to address the IE 'box model' issue to fix the links and the image positions? I'll have a search for a .png fix for IE6. Thanks for all the great tips! Oh, btw, When using conditionally commented stylesheets to fix IE, put them after the default stylesheet(s) in the page head. That'll make it easier to override the default stylesheet(s) with IE-specific styles without having to bother with modifying selector specificity to make those IE styles kick in. I tried this as you said but I found I still had to increase specificity on the conditional comments otherwise it didn't seem to work. http://www.satzansatz.de/cssd/onhavinglayout.html I heard good things about that article, looking forward to reading it. Thanks again! David Thanks very much for the suggestions! Glad you like the cow :) I think I can learn a lot from that layout you sent - it's simpler than what I've been trying. For now though I want to try to push layout ideas out of the markup. But I will work some of your ideas in. I also like what you did with the images. Even the wireframe itself is an interesting look from a design perspective, especially the dots. Thanks :) A couple of little things - does anyone know why: http://www.blueprintdesign.ie in FF when we zoom out, the background image doesn't stay fixed? Also, in Safari, the 'back to top' button only leaves us half way up the page? Thanks! Send instant messages to your online friends http://uk.messenger.yahoo.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering the page
Hi all,
I'm still at it. I've got a page that has no errors, no browser
issues, and I've done the auto, auto in the container div that
usually does the trick, but I can't seem to find why it isn't working
this time.
Please go to www.bcam.qc.ca , then to the Contact page, then, click
on the letter e in the word: Webmaster in the column on the left.
Here's the css:
@charset UTF-8;
body {
text-align: center; /* this centers the container in IE 5* browsers.
The text is then set to the left aligned default in the #container
selector */
color: #33;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background-color: #FF;
margin-top: 0px;
padding-top: 0px;
}
#container {
width: 1024px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#navbar {
width: 1024px;
background-color: #98ae6d;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #33;
text-align: center;
}
#mainContent {
width: 656px;
padding-right: 15px;
padding-left: 15px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #33;
background-color: #CC;
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #33;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #33;
}
#footer {
background-color: #98ae6d;
width: 688px;
text-align: center;
clear: none;
float: left;
}
#rightcolumn {
background-color: #487bb4;
width: 306px;
padding-left: 15px;
border-left-width: 15px;
border-left-style: solid;
border-left-color: #98ae6d;
float: left;
height: 400px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #e6fcbe;
}
#donate {
height: 200px;
width: 335px;
float: left;
border-left-width: 0px;
border-left-style: none;
padding-left: 0px;
text-align: center;
padding-top: 30px;
}
#donate #donate2 {
color: #33;
padding-bottom: 30px;
padding-top: 30px;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
#header {
width: 1024px;
background-image: url(images/bcamheader.jpg);
height: 160px;
}
Thanks,
Gerry
ge...@ckutfolk.com
www.ckutfolk.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to make rounded corners box with one image?
On 5/2/09 9:51 AM, Dan King dan.king...@yahoo.com wrote: I found an example online: http://modxcms.com/about/blog/rthrash/simple-rounded-corner-css-boxes.html that seemingly matches what I'm looking for. The concept is clear, but I need some help in figuring out how to determine margins/padding for the respective image used. If you or anyone else has used or understands the method demonstrated in the link provided, could you help clarify how to determine the needed margins/padding? Thanks. The technique in the article seems to have a lot of limitations (at least the dropped shadow part). Seems like your box cant be longer than the image used, or wider than that single image. If you have fixed width, it is easy to do rounded corners with one image. But if the box is flexible, you can try using jquery options: http://15daysofjquery.com/wrap-it-up-pretty-corners/13/ - divya -- I blog at http://nimbupani.com/blog __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 8
On 5/5/09 4:28 PM, Kathy Wheeler kat...@home.albury.net.au wrote: Ummm ... scratches head ... what do you mean by does not support ? IE6 standalone on my test win box loads pngs fine ( well ... as fine as ie6 is supposed to anyway - no png transparency :-( ). I use them (pngs) as background images for css elements, inline as normal images ... and ie6 displays them all. Do you perhaps mean the various png transparency hacks??? I'm still having trouble finding one of those that works for png transparency with CSS background images. Here is the BEST solution to IE png transparency: http://www.dillerdesign.com/experiment/DD_belatedPNG/ It does background-position on transparent pngs and is faster than the usual png hacks. I have also experienced MultipleIEs have issues with javascript (sometimes CSS). Plus it doesn't work as expected when u install IE 8. I am still looking for a good solution to test IE 6/7/8 in one machine, no luck so far. - divya -- I blog at http://nimbupani.com/blog __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] percentage bug IE6
Good evening Georg, It was foretold that on 09/05/2009 @ 22:19:15 GMT+0200 (which was 17:19:15 where I live) Georg Sørtun would write: You're attacking the wrong IE6 bugs - this has nothing whatsoever to do with the percentage bug. Thus, all fixes are misplaced. I see. On one hand i'm glad because it means i don't have to fiddle with expressions :-) I must say, i really was convinced it was that bug ... It is the automatic box-expansion caused by too wide content you're dealing with, and it's affecting #header, #leftcol, #maincontainer and #rightcol in your layout. So, i'f i understand it correctly it's a mix of the expanding box bug and the nav not being isolated. 2 problems where i thought it was only 1 that caused all... 1: #header contains an image that is 200px too wider than min-width even on normal font-size. Consequently IE6 expands header to contain that image regardless of actual page-width. The trick is to pull in both side-margins on the image so it appears to be narrower but still has /some/ width left. This will keep the image centered, and allow it to overflow #header also in IE6 without causing #header to expand. IE6, and all other browsers for that matter, now thinks the image is only 400px wide, and center it on windows that are wider than that. using negative margins, i understand. 2: Especially #leftcol has too wide content, and when #leftcol is affected by box-expansion all the other columns get pushed to the right. By hiding the overflow on all 3 columns in IE6 only, no expansion takes place even if the content becomes too wide. Then, by declaring 'position: relative' on all content-elements in all 3 columns, the overflowing part of the content stays visible but takes up no space. The result is that IE6 treats overflowing content same as IE7, which is wrong but appears right in most cases. overflow:hidden in combination with a relative position on all 3 columns? Upon reading it, it makes sense to me now! 3: The little shift of columns when you hovered over nav in IE6, is best fixed by isolating nav from the columns in the markup, in IE6 only. IE6 reacts best - most consistent - on a br / styled to take up no space, placed in a conditional comment. This was the part that got me confused... that shift really made me think it was that percentage bug and that something in my 'solution' caused the other problems. All these fixes are included, and commented, in this copy of your page... http://www.gunlaug.no/tos/alien/luc/test_09_0509.html ...and all fixes for imaginary IE6 bugs are removed. Just grabbed it Georg, gonna study on it later... Once again, thank you for the help and the detailed explanation. -- Best regards, Luc _ Using the best e-mail client: The Bat! version 4.1.5 with Windows XP (build 2600), version 5.1 Service Pack 3 and using the best browser: Opera. If you argue with an idiot, people watching may not be able to tell who's who. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering the page
try adding position:relative to the container __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
