Re: [css-d] IE won't let static content move up to flow around
Philippe wrote:
[--- Le 02/02/2006 19:38, Ingo Chao a écrit : ---]
.clear_solvent {float:left; width:0px; height:0px;}
div id=right-float-1
pThis div is floated to the right./p
pLorem ipsum dolor sit amet,.../p
/div
pstrongThis paragraph is not floated .../strong/p
div class=clear_solvent!/div
div id=right-float-2
pThis div is floated .../p
/div
pstrongThis paragraph is not floated and sits in the source
after the second right float. .../strong/p
1) I had to applied a style=margin-left: -3px to div.clear_solvent to
avoid the second paragraph that is not floated to have an unexpected
(very small) left margin in IE6.
.clear_solvent {
float: left;
width: 0;
height: 0;
margin-left: -3px;
}
Philippe,
nice catch, I forgot to correct the IE6 3px text jog.
2) As we are compelled to include an additional div.clear_solvent that
is empty and is only necessary to IE. In the HTML, we can nclue it in a
Conditional Comment so that only IE will see that div:
!--[if IE]
div class=clear_solvent/div
![endif]--
(I have deleted the comment inside the div.clear_solvent to avoid
/div to be seen by other browsers.)
I am undecided.
While I don't expect this little additional element to cause problems,
one can never know, so hiding it from the others is probably save.
On the other hand, this clear_solvent method would be used in tight
float settings. These tight floats sometimes cause the duplicated
characters bug in IE6 (and still in IE7b2, btw.), or worse, are crashing
IE, although in very rare cases. An additional comment, in combination
with other comments, may induce this dup character bug too in IE6 (this
part of the bug is fixed in IE7b2).
So this innocent looking documentation attempt
!-- This element fixes the isthereanameforit-bug --
!--[if IE]
div class=clear_solvent/div
![endif]--
may cause problems that are difficult to debug. Authors are baffled when
IE6 kicks one or two characters into the screen where they don't belong to.
(
Or, I haven't had time to test it, are we allowed to add a comment
phrase /inside/ the conditional comment?
!--[if expression] comment_phrase HTML ![endif]--
or
!--[if expression] HTML ![endif] comment_phrase --
I don't know, and I did not find a mention of it in [1].
Next thing I haven't tested: The internal comment was meant to provide
IE6 from expanding this element in height by the inherited line-height.
div class=clear_solvent!/div
But this is probably irrelevant here.
)
Anyway, your variant is looking promising. Thanks so much!
Thanks to all who are testing this bugfix.
Ingo
[1]
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
--
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] CSS Rounded Website
- Original Message - From: Martin Davis III [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Sunday, February 05, 2006 2:10 AM Subject: [css-d] CSS Rounded Website I'm attempting to make a website with rounded boxes. Seems to be that IE6 is adding space on my box. Can a get a browser check and suggestions to this problem? http://www.smwstudios.com Thanks, Martin I'm not sure what space you're referring to, but the page looks just fine in XP/SP2 and IE7b2? Michael S. Rose Bluegrass Plus Events Calendar http://mmrose.home.comcast.net __ 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] vertical stretch .. just can't get it
well I have read about 10 different site postings about how to do a CSS
based vertical column stretch.. I would have to say.. I think time to give
up and go back to table layouts.
is this not possible??? :
- 2 columns
- they both stretch vertically to fill page and/or content
Seems like it should be pretty simple but all the posts I have seen either
dont work in both FF and IE or have silly constraints like column 2 has to
have more content than column 1.
Not as neat with tables.. BUT IT DOES WORK!!
I managed to stumble upon this almost solution:
CSS:
body {
color: #000;
background: #f0f;
font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
font-size: 84%;
padding: 0;
margin: 0;
}
#wrapper
{
overflow: hidden; position:absolute;
height:100%; width:100%;
min-height: 100%;
}
#block_1
{
float: left;
width: 159px;
margin-left: 0;
background-color:white;
border-right: 3px solid #aaa;
height:100%
}
* html #wrapper
{
display: inline;
height:100%;
}
#block_2
{
position:absolute;
width:100%;
margin-left: 159px;
background-color:green;
}
#block_1, #block_2
{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
HTML:
div id='wrapper'
div id='block_1'
img src=sites/default/picture.jpg width='159' alt=''
img src=sites/default/tag.jpg alt=''
img src=sites/default/news_archive.jpg width='159' alt=''
img src=sites/default/contact.jpg alt=''
blah
/div
div id='block_2'Some body text here./div
BUT.. this seems to work in FF 1.5, Opera, Mozilla.. but of course not IE6.
Anyone see something obvious in my solution that would make it work in IE or
can they point me to a post that has a solution?
cheers,
Peter Lindstrom
Email: [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problems with sidebar and header in IE6
Hello friends, I hope you can help me. http://www.yashnikov.ru/ Page looks good in Firefox 1.5 and Opera 8+. I have 2 weird problems in IE. I have problems with header and sidebar. I have no ideas how resolve it. :) P.S. Please! excuse my English. -- Best regards, Vladimir Yashnikov http://www.yashnikov.ru/ __ 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] CSS Rounded Website
Martin Davis III wrote: I'm attempting to make a website with rounded boxes. Seems to be that IE6 is adding space on my box. Can a get a browser check and suggestions to this problem? http://www.smwstudios.com Thanks, Martin Mike Martha wrote: I'm not sure what space you're referring to, but the page looks just fine in XP/SP2 and IE7b2? In IE6 under Win98SE there are some differences. There is more height in the boxes when IE6: see screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/smw-studio.gif. I didn't study the css, but I guess it has to do with the line-height. btw-1: centering of menu not yet ready in IE. btw-2: see you make images with fixed width for the round corners. Means every box has to be drawn in separate images. A way to use just 1 image for all is described in the article Liquid round corners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. Perhaps you can use some of that. francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] vertical stretch .. just can't get it
is this not possible??? : - 2 columns - they both stretch vertically to fill page and/or content Threatening to use tables won't get you much advice here...I'd be surprised if anyone else replied to a message that starts out that way.[/noise] [signal] There are plenty of suggestions here: http://css-discuss.incutio.com/?page=AnyColumnLongest One True Layout: http://www.positioniseverything.net/articles/onetruelayout/ Faux Columns: http://www.alistapart.com/articles/fauxcolumns/ [/signal] -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] Problems with sidebar and header in IE6
Vladimir Yashnikov wrote: Hello friends, I hope you can help me. http://www.yashnikov.ru/ Page looks good in Firefox 1.5 and Opera 8+. I have 2 weird problems in IE. I have problems with header and sidebar. I have no ideas how resolve it. :) P.S. Please! excuse my English. XP_S2 IE6.0 looks the same as FF and Opera. I do not have IE7b2. There is nothing wrong with your English, either :-) . Regards, ~davidLaakso . -- http://www.dlaakso.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] vertical stretch .. just can't get it
is this not possible??? : - 2 columns - they both stretch vertically to fill page and/or content Jono gave solutions for any column longest, as for the filling the page, there are footer solutions in CSS, too. This is not a technical problem but a misunderstanding in thinking. A web page is not a canvas that is as big as your browser window is, it is as high as the content is, and that is it. If you don't have content, your page will not fill the browser window. Which might be a good thing - as you will realise the more you surf with Opera on a smartphone. CSS is not there to make tables better, as long as there is no multi column model in HTML everything will be a hack. If you embrace diversity of displays then CSS is fun, if you want it to be as strict as spacer gif and width=1 layouts, then it can be annoying. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] vertical stretch .. just can't get it
On 2/5/06, Peter Lindstrom [EMAIL PROTECTED] wrote: - 2 columns - they both stretch vertically to fill page and/or content This is my test for a full height layout: http://riczho.dyndns.org:1123/fullheight/ Unfortunately, it doesn't work in IE7.. But I've tested this in IE 6, Firefox, Opera, Konqueror (and I've heard that it should work in Safari-- Mac IE 5 may be another issue though). Ricky __ 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] Screwed Layout in IE - Contnet area expanded, BG repeating.
Hi all,
I am in the middle of finalising my website/portfolio and have been
predominatley designing in Firefox, and then using conditional IE statements to
include styles that make adjustments for IE based browsers. However, my
portfolio page in IE is a little bit screwed up. The content section seems
expanded, and its background is beginning to repeat on the right, but I don't
see what style is causing this. The website portfolio page can be found at
http://www.reflectivestudios.co.uk/newsite/portfolio.html. The content area's
correct size can be viewed at http://www.reflectivestudios.co.uk/newsite/ (or
alternatively, look at the website in Firefox).
The CSS relating to the Posrtfolio page is as follows...
#content {
width: 540px;
background: url(../images/page.png) repeat-y;
margin: 32px auto 0px auto;
}
#contenthelper {
padding:20px 15px 0px 15px;
margin:0 10px;
background:url(../images/top_shadow.gif) top repeat-x;
}
#contenthelper p {
/*margin: 10px 0;*/
}
/* - Portfolio Page - */
#in-progress_content {
padding: 20px;
text-align: center;
}
#content_wrap {
position: relative;
width: 600px;
}
#projects {
float: left;
width: 150px;
height: 300px;
overflow: auto;
margin: 35px 0 10px 0;
padding: 0px 0px 0 10px;
}
#projects ul {
font: normal 10px/14px 'Lucida Grande','LucidaGrande',Lucida,Sans-Serif;
color: #666;
list-style-type: none;
margin: 0;
padding: 0;
}
#projects ul li {
padding: 5px 0;
margin: 0;
list-style-image: none;
display: block;
width: 149px;
}
#projects ul li a {
padding: 0;
margin: 0;
display: block;
color: #666;
}
#projects ul li a:hover {
padding: 0;
margin: 0;
display: block;
color: #759AC4;
background: none;
}
#portfolio {
float: left;
position: relative;background: url(../images/dotted_line_vert.gif) top
left repeat-y;
width: 300px;
top: 0;
right: 0;
padding: 0 0 0 10px;
margin: -30px 0 0 10px;
}
#portfolio h1 {
font: normal 18px arial, 'Times New Roman', Serif;
line-height: 22px;
color: #690101;
padding: 0px 0 0px 0;
margin: 20px 0 0 0;
}
#portfolio h3 {
font: bold 10px/12px georgia, serif;
color: #333;
text-transform: uppercase;
padding:10px 0 0px 0;
margin: 0;
}
#portfolio p {
font: normal 11px/16px 'Lucida Grande','LucidaGrande',Lucida,Sans-Serif;
color: #666;
padding: 2px 0 8px 0;
margin: 0;
}
/* --- End Portfolio Page --- */
The problem may lie somewhere in the actual CSS file, so feel free to download
that.
If anyone can help me identify the problem, so that I can eradicate it in my MS
specific CSS file it would be great.
Thanks
Tryst
__
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] Problems with sidebar and header in IE6
David Laakso wrote: Vladimir Yashnikov wrote: [...] http://www.yashnikov.ru/ Page looks good in Firefox 1.5 and Opera 8+. I have 2 weird problems in IE. I have problems with header and sidebar. I have no ideas how resolve it. :) [...]XP_S2 IE6.0 looks the same as FF and Opera. [...] Hi Vladimir, Under Win98SE: in IE6.0 the page has a gap above the header, and too much margin in the sidebar. I tried to download the html-file to see what I could manage. Then there happened this: - IE could not download the file. - O.k., I copied the source code from FF, and pasted in Notepad. - Now all Cyrillic letters where transformed to ???. - O.k., seems logical. - Seeing the file (refering to the same css-file at yashnikov.ru) in IE off-line: aha, gaps were disappeared! (?!) See screenshots http://home.tiscali.nl/developerscorner/css-discuss/images/yashnikov-screens.gif . - Back to Firefox: Firefox could download the complete file: so I did that. - Looking in IE: gaps again! - For safety: I set all top-margins and paddings to zero in the html (by hand, with inline style for every div), what was already done in the style sheet; you never know. But no closing of the gap! Impossible?! - Now closely comparing the downloaded file and the original source code (as viewed by Firefox) gives that they are not 100% identical! Difference is: some strange signs before the doctype: Downloaded: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN [...] Source code in FF: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN [...] Looking at the same source code in IE, then IE displays: Source code in IE:!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN [...] When I delete the before-doctype things, IE is normal. - And that doesn't sound too weird, for IE is flipping on everything before the doctype. ;-) 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] Float Left? In IE its Leftfield
I thought this would be simple to accomplish, and it is in every browser but IE. Simple float left of images, with a clear after each second one to get another row. Page also has a float right of a another page graphic. All works as desired until the very last image, which shows up way out of place in IE, under the right floated page graphic. Can find no reason for this, nor how to fix. Any help appreciated. Page is at http://larimerworkforce.org/lcycc_photos.htm Steve Moore Larimer County __ 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] Float Left? In IE its Leftfield
Steve Moore wrote: I thought this would be simple to accomplish, and it is in every browser but IE. Simple float left of images, with a clear after each second one to get another row. Page also has a float right of a another page graphic. All works as desired until the very last image, which shows up way out of place in IE, under the right floated page graphic. Can find no reason for this, nor how to fix. Any help appreciated. Page is at http://larimerworkforce.org/lcycc_photos.htm Reason: IE/win hasLayout[1] bug. Complex variant that needs more than one correction for IE/win. No /browser-hacks/ needed though. How to fix: adding a 'hasLayout-trigger' (width: 420px /* or something close to that value */) and something for IE to hold on to (position: relative) when positioning the content inside the existing container-div that follows the rightmost image in your source code - containing the 6 image-divs. Working example with inline styles: img src=lcycc_cr.jpg alt= width=240 height=240 class=right div style=width: 420px; position: relative; !-- this one -- div class=lcyccphotoimg ... Add an ID or CLASS to that div, and move styles to same in stylesheet. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Screwed Layout in IE - Contnet area expanded, BG repeating.
Hi all,
I managed to find the problem with this. I had the following declaration
screwing things up :(
#content_wrap {
position: relative;
width: 600px;
}
Thanks
Tryst
__
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] float-setup with mysterious top-margin...
Jesper Brunholm skrev: I'm afraid that this is something simple, that I've gone blind on... On http://www.triomio.dk/index_e.html (and several more pages on the site with floated content) the content-floats to the right (the CD-cover) has a mysterious margin-top, levelling it with the bottom of the menu-box on it's left side, in Firefox 1.501 and Opera 8 :-( I have found a solution: to have en left-column content in one floated box instead of the previous two. Thank you for all interest shown :-) Best regards Jesper Brunholm __ 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] CSS Rounded Website
francky wrote: Martin Davis III wrote: I'm attempting to make a website with rounded boxes. Seems to be that IE6 is adding space on my box. Can a get a browser check and suggestions to this problem? http://www.smwstudios.com Thanks, Martin Mike Martha wrote: I'm not sure what space you're referring to, but the page looks just fine in XP/SP2 and IE7b2? In IE6 under Win98SE there are some differences. There is more height in the boxes when IE6: see screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/smw-studio.gif. I didn't study the css, but I guess it has to do with the line-height. btw-1: centering of menu not yet ready in IE. btw-2: see you make images with fixed width for the round corners. Means every box has to be drawn in separate images. A way to use just 1 image for all is described in the article Liquid round corners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. Perhaps you can use some of that. francky Thanks all of you for your help. I love this mailing list. I'll be sure to check out your tutorial on rounded corners. I was thinking myself there had to be a better way than drawing a new image for every box. Martin __ 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] float-setup with mysterious top-margin...
Jesper Brunholm wrote: On http://www.triomio.dk/index_e.html (and several more pages on the site with floated content) the content-floats to the right (the CD-cover) has a mysterious margin-top, levelling it with the bottom of the menu-box on it's left side, in Firefox 1.501 and Opera 8 :-( I have found a solution: to have en left-column content in one floated box instead of the previous two. Thank you for all interest shown :-) Too late now :-) but it sounds like a case of 'collapsing margins'[1]. It often is when Explorer get it right. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins -- 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] Floats Background Images
Zellie,
On Feb 5, 2006, at 12:30 PM, Zellie D. McClelland wrote:
This is my first post.
Welcome to the list!
First, validate your html and css. Often little typos can escape
notice and cause all kinds of difficulty. Computers are inherently
stupid and will do what you typed, not what you meant.
I am employing background images beneath the text links. These images
appear when I employ a float: right; but they disappear when I use a
left float and
margin-left
Here's the css I used to get the look I think you want
#navbar ul{
list-style: none;
padding: 0px;
margin: 0;
margin-left: 287px;
}
#navbar li {
float: left;
}
#navbar ul li a {
display: block;
...
And they are jumping out of the containing div.
One of the rules about floats is that if an element has all its
children floated, it takes up no space. So, in your case, if you put a
background image on #navbar ul it won't show because the li are all
floated and the ul ends up with a height of 0.
http://www.zdsign.com/gwp/new.html
http://www.zdsign.com/gwp/new.css
Thanks for the url. It makes helping _much_ easier!
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] WebKit and button/submit styling
Bon jour, I just noticed that the latest WebKit (Safari nightly) builds have a different rendering of styled submit button elements - Safari used to have a different approach to the styling of form components and despite the CSS it used the default system Aqua GUI components. Now, in the latest nightly builds, it looks like Safari is accepting the CSS styling of those elements. Can anyone confirm this? It may be the default rendering from 2.0.4+ ... (I personally prefer the former clean Aqua behavior.) -- Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net __ 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] Problems with sidebar and header in IE6
Hello francky, [...] http://www.yashnikov.ru/ Page looks good in Firefox 1.5 and Opera 8+. I have 2 weird problems in IE. I have problems with header and sidebar. I have no ideas how resolve it. :) [...]XP_S2 IE6.0 looks the same as FF and Opera. [...] Hi Vladimir, Under Win98SE: in IE6.0 the page has a gap above the header, and too much margin in the sidebar. Yes, it was a big problem for me. - Seeing the file (refering to the same css-file at yashnikov.ru) in IE off-line: aha, gaps were disappeared! (?!) See screenshots http://home.tiscali.nl/developerscorner/css-discuss/images/yashnikov-screens.gif [...] Difference is: some strange signs before the doctype: Downloaded: i╩?i╩?!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN [...] Source code in FF: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN [...] This signs is a Unicode Signature (BOM)! When I saved a header.php for my Wordpress theme, text editor added BOM by defoult. :) When I delete the before-doctype things, IE is normal. - And that doesn't sound too weird, for IE is flipping on everything before the doctype. ;-) francky. Francky, thank you very much! :) -- Vladimir Yashnikov http://www.yashnikov.ru __ 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] Hey Guys!
Hey there everyone. Just wanted to say hello as I've just subscribed. I'll look forward to talking and helping some of you. Scott. __ 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] Problems with sidebar and header in IE6
Hi francky, David, and Vladimir francky wrote: - Now closely comparing the downloaded file and the original source code (as viewed by Firefox) gives that they are not 100% identical! Difference is: some strange signs before the doctype: Downloaded: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN [...] Source code in FF: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN [...] Could this be a Cyrillic version of the problem of saving UTF-8 with a BOM (Byte Order Mark)? If the text editor involved does not allow you to specify UTF-8 without BOM, you may have to manually delete those characters from the file. I use XVI32.exe to examine and edit if needed .htm files and find that, with my system, when I save from notepad what I have typed on an English-language limited keyboard, the default save seems to assume ASCII (which is AFAIK the same as UTF-8 for English keyboard characters) and I get no problems. For keyboards with other characters than English, I don't expect saving as ASCII to work. I recommend you go to http://www.chmaas.handshake.de/delphi/freeware/xvi32/xvi32.htm and get yourself a copy of XVI32.exe. Regards, Gene Falck [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is IE7b2 particularly slow on a:hover ?
Ingo Chao wrote: http://www.positioniseverything.net/explorer/percentages.html Is it just this bug demo, and IE7b2 requires lots of CPU time to correct the buggy margin-%-calculation? Or do you have experienced similar performance lacks with a change on hover on your pages? I've noticed this performance issue too, especially for input fields. Eg, changing the border colour on hover. It's interesting that the csshover.htc hack seems to perform better than IE's own implementation. __ 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] non collapsing col.
hello i am not sure how to do this. i want a right col not to collapse to the bottom left when a window is narrowed. i have one div centers the content on the pages with other divs inside the box please look at http://idealzone.net/slf when you resize the window making it narrow, the right col. jumps down. how do i stop this? thanks [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Clear/Float Issue
I was wondering if anyone can help me address an issue with IE. The page in question is http://x0f.org Layout works fine in Firefox, and borks in IE and I can't see/understand why. Its something to do with the floats I think, or the clearing. Anything anyone can offer would help =) Scott. __ 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] non collapsing col.
rashantha de silva wrote: i want a right col not to collapse to the bottom left when a window is narrowed. i have one div centers the content on the pages with other divs inside the box please look at http://idealzone.net/slf That's what floats are supposed to do. To prevent this you can assign a fixed width to the containing div ( or a min-width, plus a width to IE only...) Right now your page seems unreachable, so I'm replying without seeing your code. djn -- Dejan Kozina Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 http://www.kozina.com/ - e-mail: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Clear/Float Issue
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fx0f.org%2F 8 validation errors, starting off with a closing /li that has no corresponding opener ... the rest seem to be related to unescaped or unencoded characters in query strings in hrefs, don't know what to do about that. When I tried to validate the CSS, the results page displayed this: Please, validate your XML document first! Line 74 Column 11 The element type ul must be terminated by the matching end-tag /ul. -- David [EMAIL PROTECTED] authenticity, honesty, community Scott Wilcox wrote: I was wondering if anyone can help me address an issue with IE. The page in question is http://x0f.org Layout works fine in Firefox, and borks in IE and I can't see/understand why. Its something to do with the floats I think, or the clearing. Anything anyone can offer would help =) Scott. __ 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 Clear/Float Issue
eeep! iI copy and pasted that part back in just before I wrote my email :) my bad, also forgot to encode amps too. Validation hits fixed, still same issue though :( david wrote: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fx0f.org%2F 8 validation errors, starting off with a closing /li that has no corresponding opener ... the rest seem to be related to unescaped or unencoded characters in query strings in hrefs, don't know what to do about that. When I tried to validate the CSS, the results page displayed this: Please, validate your XML document first! Line 74 Column 11 The element type ul must be terminated by the matching end-tag /ul. __ 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 Clear/Float Issue
Scott Wilcox wrote:
Validation hits fixed, still same issue though :(
http://x0f.org
Cause: divider-image (/media/gfx/divider.jpg) is 9px too wide for the
space given, and IE/win expands containers...
Result: div id=contentColumn becomes 9px too wide and runs out of
space - falling below side-columns.
Quick fix - add:
#contentColumn {margin: 0 -10px 0 0;}
...which gives IE/win 1px extra space for its bug.
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/
[css-d] align issue
I have an odd issue, that is just been tormenting me for hours now... http://tct2006.com/growing/ I cannot seem to make the div id=main, the box in the center that hold the Nav the Content,. I cannot seem to make it align to the top of its parent container. I really must be over looking something small here... it really baffles me.,... I put an outline on the wrap to emphasize where it is suppose to go. thanks. -jeremy __ 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] align issue
Thanks Rahul that does fix it , but causes a problem in IE when i shrink the window. I have the float there to keep it in place when I resize the window in IE. Maybe i should look into absolute positioning it. -jeremy Removing the float:left on the #wrap (actually deleting the entire section) seems to fix it for me. Couldn't tell you why, and only tested on FF1.5.0.1 (XPSP2). Hope this helps, Rahul. __ 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] align issue
jeremy wrote:
http://tct2006.com/growing/
I cannot seem to make the div id=main, the box in the center that
hold the Nav the Content,. I cannot seem to make it align to the
top of its parent container.
The usual suspect: 'collapsing margins'[1]. Doesn't show up in IE/win
because of the 'hasLayout'[2] bug in that browser.
Fix (one alternative) - add:
#main {padding-top: 1px; margin-top: -1px;}
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align issue
That was amazing... thank you!
I have never heard of that happening.
thank you.
The usual suspect: 'collapsing margins'[1]. Doesn't show up in IE/win
because of the 'hasLayout'[2] bug in that browser.
Fix (one alternative) - add:
#main {padding-top: 1px; margin-top: -1px;}
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[2]http://www.satzansatz.de/cssd/onhavinglayout.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] multi columns layouts in the Zen Garden, floating and positioning
I've just been going through what has been done at the Zen Garden and was wondering why the absolute positioning method is almost always used. Numbers: 31, Hedges 35, Release One 93, South of the Border 95, Corporate Zenworks 100, 15 Petals all use this position: absolute method to place the navigation links on one side - number 100, 15 Petals, is covered in More Eric Meyer on CSS. Douglas Bowman talks a little bit about designing in the Zen Garden (he did number 17, Golden Mean): http://www.stopdesign.com/log/2003/05/27/in_the_garden.html He writes here: This can potentially eliminate the option of using float as a means to group content into side-by-side columns. Such is the case when applying style to the Zen Gardens markup. Using position:absolute for a few of the divs frees us up to layout the page with pieces of content in specific positions without relying on their order within the markup. But I don't see the float option as being eliminated in the Zen Garden. More that it is a less flexible way of laying out the page... OR, I don't know what I'm talking about. Still, there are about 200 designs up and I've only gone thruogh about ten of them so far. I'll keep looking - just thought it might be easier (lazier) to ask in the mailing list :) --- cj [EMAIL PROTECTED] wrote: On 2/2/06, Christian Collins wrote: Does anyone know of a Zen Garden layout that floats the linkList div to the left or right of the main content? I've looked through 5 or 6 two-column layouts so far and they all use the position: absolute method. does it have to be zen garden layouts? if not, there are some nice two column layouts listed in the wiki, and i've heard the three column ones can usually be easily turned into two columns. http://css-discuss.incutio.com/?page=CssLayouts __ Find your next car at http://autos.yahoo.ca __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats Background Images
Roger Roelofs wrote:
Welcome to the list!
First, validate your html and css. Often little typos can escape
notice and cause all kinds of difficulty. Computers are inherently
stupid and will do what you typed, not what you meant.
Here's the css I used to get the look I think you want
#navbar ul{
list-style: none;
padding: 0px;
margin: 0;
margin-left: 287px;
}
#navbar li {
float: left;
}
#navbar ul li a {
display: block;
[...]
Hi Zellie,
Validating is your lifebelt indeed!
I saw the html-validator is indicating 8 errors, but when you rewrite
the link to the stylesheet in:
link rel=stylesheet type=text/css
href=http://www.zdsign.com/gwp/new.css; /
(all lower case, and a /slash before the end) there are only the two
alt's to add to the images.
This done, the css-validator can work now.
I see you are using a fixed font-size. In IE that can work (although it
isn't too accessible, for users cannot enlarge the font size clientside).
But ... better browsers as Firefox and Opera DO enlarge the fonts, when
the user wants that: view fontsize larger.
That gives a problem: then your menu is breaking down, as you see.
Solution is to make a more liquid design, with relative distances. That
means that you cannot use the also fixed format of the button-image.
Happily, therfore is also a solution: make a background-image which is
high enough for the biggest font size, and place that with the
background-position property on the bottom line of the button. When
needed, then the button will grow.
Think a test page
http://home.tiscali.nl/developerscorner/css-discuss/zdsign.htm will
say more then 1000 words, so have a look in the source code.
You can play around with all px and things to see what happenz if changing.
Succes!
fracncky
__
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] multi columns layouts in the Zen Garden, floating and positioning
Christian Collins wrote: I've just been going through what has been done at the Zen Garden and was wondering why the absolute positioning method is almost always used. Zen Garden is about looks - not about practical design. AP-based layouts work well when it's all about looks - as long as no one challenges them. A lot of those Zen Garden creations are completely lost when subjected to simple font-resizing in a browser - any browser, but that doesn't matter there. But I don't see the float option as being eliminated in the Zen Garden. More that it is a less flexible way of laying out the page... OR, I don't know what I'm talking about. Floats will behave like floats - always, and can't be positioned freely without some extra markup. That's a no-no in the Zen Garden. In practical design OTOH there are no such limits, which makes float-based layouts a lot more flexible/scalable than AP-based layouts can ever be. Combining floats, flow and AP in the same layout - using floats and flow for the major parts and AP for bits and pieces - gives us the best of both worlds, and is probably the best option at hand today. Some of the Zen Garden designs use such combinations to their advantage, and will actually work in the real world. Others are created as static and non-scalable as a screenshot, and tend to break when subjected to any real-world browser-options. 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] float-setup with mysterious top-margin...
Gunlaug Sørtun skrev:
On http://www.triomio.dk/index_e.html (and several more pages on
the site with floated content) the content-floats to the right (the
CD-cover) has a mysterious margin-top, levelling it with the
bottom of the menu-box on it's left side, in Firefox 1.501 and
Opera 8 :-(
Too late now :-) but it sounds like a case of 'collapsing margins'[1].
It often is when Explorer get it right.
I've reopened a page with the setup on
http://www.triomio.dk/testsetup.html, and I am struggling to see how
this can be collapsing margins. As far as I can gather, the contributing
factors are (all declared in
http://www.triomio.dk/script/oldstyle.css, only relevant style is
quoted below)
The #menu box to the left (the one with positioned menu links in it):
#menu {
width: 300px;
height: 150px;
margin-left: 0px;
margin-right: 1px;
margin-top: 5px;
position: relative;
float: left;
}
below that, the graphical element:
#sgraf {
border-top: 4px solid #c08e09;
width: 300px;
height: 400px;
clear: left;
float: left;
margin-bottom: 2em;
}
then I have #indhold (big container with everything to the right of the
menu in it)
#indhold {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 40px;
padding-left: 310px;
padding-right: 1.2em;
padding-top: 0;
}
and finally the contend is floated with inline style
div style=width: 365px; float: left; margin-top: 0;
I think that it is the clear:left; of #sgraf that is still clearing
when we get to the floated content. Actually, reconsidering, I think
that it _should_ do so (considering the rules). I was fooled by
Explorer's neat behaviour, and did not look far enough back into my setup.
Can you confirm this, or show me the margin-collapse :-) ?
Thanks again, best regards
Jesper Brunholm
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
__
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] multi columns layouts in the Zen Garden, floating and positioning
On 2/5/06, Christian Collins [EMAIL PROTECTED] wrote: I've just been going through what has been done at the Zen Garden and was wondering why the absolute positioning method is almost always used. Please don't use the Zen Garden for layout examples. It's nice inspiration, but looking under the hood is usually not useful. Then again, if you want columns and you don't intend to use a footer, absolute positioning usually works just fine :) -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.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/
