Re: [css-d] Arrg, ie6 and less problems...
William Ellis wrote:
In ie5.5 and ie6 it garbages up so bad as to be unusable with
flickering and mishapped blocks. Even the page thumb is missing and
I have never seen that.
website: http://wildcotton.wrellis.net/test.html
For a start, at the very bottom of your stylesheet add...
@media screen {
* html .contentleft div, * html .contentcenter div, * html .contentright
div {height: 1%;}
* {position: static;}
.footer {width: 100%; display: table;}
* html .footer {width: auto;}
}
The first rule adds a 'hasLayout' trigger to all divs inside the three
columns.
Seems to work ok, but triggering 'hasLayout' on that many elements is
usually an overkill with potentially negative side effects, so you may
want to reduce that to only trigger 'hasLayout' on the divs that really
gain from it and test thoroughly.
Second rule - you should immediately stop believing in rumors like this...
* {
position:relative; /* rumored to help with some IE problems (other than
IE5/Mac. */
}
...and *never* add 'position: relative' to elements that don't need it.
What you have now is complete overkill, and destroys IE6' attempts on
scrolling and rendering your page.
Reset that to default = 'position: static' - that is: delete 'position:
relative' as universally applied property/value.
Footer's fixed height becomes a limitation in good browsers - especially
when font-resize is engaged at user-end.
Third rule is turning 'height' into 'min-height' and preserves full width.
That 'width: 100%' disturbs IE6, so fourth rule resets it to 'auto' for
that old browser.
The whole thing is wrapped in an @media screen rule for good measure, so
it won't be picked up by IE/Mac and other very old browsers. If that's
not an issue, then the @media screen rule wrapper can be left out.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] Arrg, ie6 and less problems...
Hi William! You may wish to start by validating your markup and CSS. http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwildcotton.wrellis .net%2Ftest.html shows 12 errors - including several missing closing P and div tags. HTH - Spike -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of William Ellis Sent: Thursday, January 31, 2008 5:24 AM To: css-d@lists.css-discuss.org Subject: [css-d] Arrg, ie6 and less problems... Hi folks, I am outside my league here, I am sure. I thought I was clever - but... I think my designs looks fine in Firefox and ie7. Client is happy as well. In ie5.5 and ie6 it garbages up so bad as to be unusable with flickering and mishapped blocks. Even the page thumb is missing and I have never seen that. website: http://wildcotton.wrellis.net/test.html css: http://wildcotton.wrellis.net/css/atlas.css http://wildcotton.wrellis.net/css/cbrc.css The problem is essentially restricted to the left hand list boxes. I know this is a long shot and leaning on everyone for their help but it will be much appreciated. William Ellis __ css-discuss [EMAIL PROTECTED] 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-discuss [EMAIL PROTECTED] 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] IE Issues Abundant
This site just refuses to display properly in Internet Explorer of any variety , versions 6 and 7 both providing a different set of problems. Granted my knowledge is limited as this is the first site I've coded in css, but I thought I had tried many things in order for IE to work properly for me. Firefox and Safari display the site perfectly. Any suggestions would be appreciated. I've listed just the few that are happening in IE7 as I borrowed a friend's laptop because I don't have Windows and that is what he runs, but anyone that would look in IE6 and help with those is appreciated. #1 IE7: ignores the .bottom property that should control how far the pop-up is from the word. #2 IE7: my image map for the logo that takes one back to the home page only works on the home page. While, there are two different style sheets I've looked and I can't see anything different that would affect the image map. #3 IE7: the second level of my navigation doesn't show when hovering over children under the gatherings menu. The only specific issue I know of in v6: #1 IE6: navigation will not align properly over the menu item as of the last time I checked. Site: http://www.cometothewell.org/newsite CSS: http://www.cometothewell.org/newsite/styles.css Sub Page CSS: http://www.cometothewell.org/newsite/substyles.css Thank you for your help. David Terrell Never miss a thing. Make Yahoo your home page. http://www.yahoo.com/r/hs __ css-discuss [EMAIL PROTECTED] 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] GIF to PNG switch didn't work
I see - thank you very much. daniel On Jan 30, 2008, at 5:24 PM, Gunlaug Sørtun wrote: Daniel Kessler wrote: Well that certainly helps me with my box - thanks. Clearly I should've put it on a blank page before posting. Sheesh. Maybe this is more useful... http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you regards Georg -- http://www.gunlaug.no -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] 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] GIF to PNG switch didn't work
Wow, 225 errors :O On 1/30/08, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Maybe this is more useful... http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you regards Georg Thanks for the link Georg, pointed out few things I, myself, never thought of. -- Krystian - Sunlust __ css-discuss [EMAIL PROTECTED] 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] GIF to PNG switch didn't work
On Jan 30, 2008, at 5:24 PM, Gunlaug Sørtun wrote: Daniel Kessler wrote: Well that certainly helps me with my box - thanks. Clearly I should've put it on a blank page before posting. Sheesh. Maybe this is more useful... http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you Daniel, I think what they are getting at is the possibility, that because of all the errors on your page, it could make it very hard/impossible to fix it. If you clean up the errors first, and still have problems, then we have a good starting point. I have been in this situation before... And sometimes the smallest things can chance how stuff renders. I mean, just change the DOCTYPE and watch how differently IE can display with that one small change... -- Jason Pruim Raoset Inc. Technology Manager MQC Specialist 3251 132nd ave Holland, MI, 49424 www.raoset.com [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] 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] Positioning within a table cell?
On Jan 27, 2008, at 1:47 PM, [EMAIL PROTECTED] wrote: Quoting Jeff Piazza [EMAIL PROTECTED]: I'm having a problem trying to position a paragraph at the bottom right of a table cell. The only way I can think to accomplish this is to declare the table cell position: relative;, and then use absolute positioning for the paragraph within the cell. However, this seems to have the effect of positioning the paragraph relative to the viewport, rather than a table cell. I don't understand why this is, or what workaround will get me past this. The only workaround I can think of is to stick some wrapper element, like a 'div', into each the cells and then relatively position it via CSS. Ugly, but it should work. On Jan 27, 2008, at 1:19 AM, Philippe Wittenbergh wrote: That would work, if you want to position the element from the top. But 'bottom' will not position the element at the bottom of the table- cell, only at the bottom of the div (which will only be as tall as its in-flow content). Does this mean I'm just out of luck for positioning a paragraph at the bottom of a table cell? /JEP __ css-discuss [EMAIL PROTECTED] 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] columns won't float
Hey all, there's something that has me flummoxed, and I hope someone out there can help. I am working on a project where I am doing mark up, filling in pages on someone else's template, someone else's css. There is some funky stuff in there that I can't change, so the pages don't validate. For the most part I have been able to come up with pages that seem to look fine, but there is this one where I would like to have these 2 divs float side by side, and they won't. The float works ok when I open it without linking to the style sheet, but does not work when it is all together. I can't see what is preventing this float! The Botany and the Zoology columns should be side by side. http://www.uoguelph.ca/ib/a_test/grad/graduate.shtml http://www.uoguelph.ca/ib/a_test/css/ib.css http://www.uoguelph.ca/ib/a_test/css/ie6-hacks.css http://www.uoguelph.ca/ib/a_test/css/sweetTitles.css http://www.uoguelph.ca/ib/a_test/css/tables.css thanks in advance for your help, Sandy __ css-discuss [EMAIL PROTECTED] 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] Arrg, ie6 and less problems...
Georg Spike, Thank you for responding. You suggestion worked. And even showed up more error which are now fixed as well. Silly of me to forget the WC3 validation service. Thanks again, Will Ellis Gunlaug Sørtun wrote: William Ellis wrote: In ie5.5 and ie6 it garbages up so bad as to be unusable with flickering and mishapped blocks. Even the page thumb is missing and I have never seen that. website: http://wildcotton.wrellis.net/test.html __ css-discuss [EMAIL PROTECTED] 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] columns won't float
Thanks for your help! You guys rock. Sandy wrote: For the most part I have been able to come up with pages that seem to look fine, but there is this one where I would like to have these 2 divs float side by side, and they won't. The float works ok when I open it without linking to the style sheet, but does not work when it is all together. I can't see what is preventing this float! The Botany and the Zoology columns should be side by side. http://www.uoguelph.ca/ib/a_test/grad/graduate.shtml Sandy I am not sure I understand. These changes put the Botany column adjacent to the Zoology column (adjust as needed and see IE/6.0). Is this what you are after? div style=float : left; border: 1px solid red; width: 190px; h2Botany/h2 ul style=margin-left : 20px; div style=float : left; border: 1px solid red; width: 190px; h2Zoology/h2 ul style=margin-left : 20px; Best, ~dL __ css-discuss [EMAIL PROTECTED] 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] columns won't float
Sandy wrote: For the most part I have been able to come up with pages that seem to look fine, but there is this one where I would like to have these 2 divs float side by side, and they won't. The float works ok when I open it without linking to the style sheet, but does not work when it is all together. I can't see what is preventing this float! The Botany and the Zoology columns should be side by side. http://www.uoguelph.ca/ib/a_test/grad/graduate.shtml Sandy I am not sure I understand. These changes put the Botany column adjacent to the Zoology column (adjust as needed and see IE/6.0). Is this what you are after? div style=float : left; border: 1px solid red; width: 190px; h2Botany/h2 ul style=margin-left : 20px; div style=float : left; border: 1px solid red; width: 190px; h2Zoology/h2 ul style=margin-left : 20px; Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] columns won't float
Sandy, When I played with the margins on the inner elements of those divs and/or adjusted the width of the zoology div, I was able to get it to float to the right of the other div. Apparently it doesn't have enough room currently, so it's being pushed down. -- Valerie www.valeriewininger.com On Jan 31, 2008 9:33 AM, Sandy [EMAIL PROTECTED] wrote: Hey all, there's something that has me flummoxed, and I hope someone out there can help. I am working on a project where I am doing mark up, filling in pages on someone else's template, someone else's css. There is some funky stuff in there that I can't change, so the pages don't validate. For the most part I have been able to come up with pages that seem to look fine, but there is this one where I would like to have these 2 divs float side by side, and they won't. The float works ok when I open it without linking to the style sheet, but does not work when it is all together. I can't see what is preventing this float! The Botany and the Zoology columns should be side by side. http://www.uoguelph.ca/ib/a_test/grad/graduate.shtml http://www.uoguelph.ca/ib/a_test/css/ib.css http://www.uoguelph.ca/ib/a_test/css/ie6-hacks.css http://www.uoguelph.ca/ib/a_test/css/sweetTitles.css http://www.uoguelph.ca/ib/a_test/css/tables.css thanks in advance for your help, Sandy __ css-discuss [EMAIL PROTECTED] 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/ -- Valerie Wininger www.valeriewininger.com __ css-discuss [EMAIL PROTECTED] 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] Suckerfish question
I am putting in a simple suckerfish dropdown menu in a section of a
proposed website. I hope its ok to attach to small images as I have
no other way to link this.
I am wondering why the width of level 2 is wider than level 1 in IE
and are the same width in other browsers. I haven't figured out where
the width is controlled from in the level two boxes.
This is a piece of the code
ul id=navliEWR Navigation br
ul
li a href= EWR Home Page/a/li
li a href= Getting Started/a/li
li a href= FAQ/a/li
/ul
/li
liDownloads br
ul
li a href= Microsoftreg; Excel Templates/a/li
li a href= XML/a/li/ul/li/ul
CSS coding
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
font-weight: bold;
}
#nav a {
display: block;
width: 10em;
text-decoration:none;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
background-color:#ff;
margin: 3px 3px -4px 7px;
padding: 4px;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /*using left instead of display to hide menus because
display: none isn't read by screen readers */
margin-top: .1em;
margin-left: -.95em;
}
IE 6 only#nav li ul {margin-left: -1.5em; }
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered
list items */
left: auto;
}
#nav li ul li {background-color: #ff; }
#nav li ul l#nav li ul li {background-color: #ff; }
#nav li ul li a {font-weight: normal; border-bottom: 1px solid
#99; padding-bottom: .2em}
__
css-discuss [EMAIL PROTECTED]
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] Iframe transparency
Ok, I am still at the stage where css makes me want to throw my monitor across the room. But I am trying. I am working on a real estate site using an iframe and can not figure out how to change the color from this lovely yellow and purple. I know the size is small, I think I can deal with that, I am just spinning my wheels on this color problem. I thought if I stripped everything away and tried to solve just this problem, then I could build back from there. But I still can't get rid of the yellow and purple. Could one of you gurus please help? This page does validate. http://chekmed.com/test_transparent.html Many Thanks, Cynthia __ css-discuss [EMAIL PROTECTED] 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] Iframe transparency
But I still can't get rid of the yellow and purple. Could one of you gurus please help? This page does validate. http://chekmed.com/test_transparent.html Test_transparent.html is the page (frameset) you are controlling. The iFrame contents is a different page: http://cpml.fnismls.com/idx/SearchIDX.aspx?RMLS_SESSION_GUID=%7bf36bdb9c -628f-4e31-a7c8-de2feec02631%7dMLS=CPMLSUBSCRIBER=3fbd9fd3-f792-4fa9-9 ad9-3f702a5dbcf1class=1 If you want to modify the colors there, you need to modify the CSS for that page. Remember that frames are simply 'containers' for other pages. Any CSS applied to the frameset will have no bearing on any of the pages loaded within the frames. -Darrel __ css-discuss [EMAIL PROTECTED] 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] Iframe transparency
In your case... there is nothing CSS can do for you. You are trying to apply CSS over fixed, inline styles. And since the content of the iframe comes from meta content=Microsoft Visual Studio 7.0 name=GENERATOR that's were you need to take your problem. Teach those guys using MVS to write proper CSS that is modifiable. Best regards, Mihai On Thu, 2008-01-31 at 11:19 -0500, Cynthia M. Brumbaugh wrote: Ok, I am still at the stage where css makes me want to throw my monitor across the room. But I am trying. I am working on a real estate site using an iframe and can not figure out how to change the color from this lovely yellow and purple. I know the size is small, I think I can deal with that, I am just spinning my wheels on this color problem. I thought if I stripped everything away and tried to solve just this problem, then I could build back from there. But I still can't get rid of the yellow and purple. Could one of you gurus please help? This page does validate. http://chekmed.com/test_transparent.html Many Thanks, Cynthia __ css-discuss [EMAIL PROTECTED] 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-discuss [EMAIL PROTECTED] 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] Columns? A Theoretical Question
Maybe I can be corrected, but I believe this isn't a CSS issue. It's a programming one. You can't put if/then statements into CSS - CSS isn't a programming language. ~Shelly __ css-discuss [EMAIL PROTECTED] 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] Iframe transparency
To all who responded. Thank you. I thought that might be the case after the research I did, but... I am not comfortable enough yet with css to take anything for granted. At least I can stop beating my head again the wall and go clean this 'blood' off my forehead ;) In your debt, Cynthia On 1/31/08 12:01 PM, Austin, Darrel [EMAIL PROTECTED] wrote: But I still can't get rid of the yellow and purple. Could one of you gurus please help? This page does validate. http://chekmed.com/test_transparent.html Test_transparent.html is the page (frameset) you are controlling. The iFrame contents is a different page: http://cpml.fnismls.com/idx/SearchIDX.aspx?RMLS_SESSION_GUID=%7bf36bdb9c -628f-4e31-a7c8-de2feec02631%7dMLS=CPMLSUBSCRIBER=3fbd9fd3-f792-4fa9-9 ad9-3f702a5dbcf1class=1 If you want to modify the colors there, you need to modify the CSS for that page. Remember that frames are simply 'containers' for other pages. Any CSS applied to the frameset will have no bearing on any of the pages loaded within the frames. -Darrel __ css-discuss [EMAIL PROTECTED] 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/ -- Cynthia M. Brumbaugh Chek-Med Systems, Inc. 200 Grandview Avenue Camp Hill, PA 17011 717-731-0717 [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] 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] Columns? A Theoretical Question
I'm faced with an issue I worked around once before, it presents again with a new face so I'd like to find an ultimate cure, not make do with the cheesy work-around. I need a div container with div-class items that auto-fill left or right. Such that: Item1 seeks top-left position(possibly unique ID but this should be a source code issue - if it's at the top of the stack then it is at the top of the stack), Item2 fills a right position only if the left is non-empty, Item3 fills a right position only if the left is non-empty, Item4 fills a right position only if the left is non-empty, etc. The goal is left-to right recursive, in rows. Below, a crude ascii graphic. I've been through the CSS so many times and changed so many things, I'm getting lost and I'd like to start over. What can I do, to make item elements auto-fill in rows starting from top-left? Reese --/ |Logo| Header content area/ |Area|/ |-/ |Left| --- - / |Nav | | Item 1 || Item 2 |/ |Menu| | |||/ |Item| | |||/ |Area| | |||/ || | |||/ || | |||/ || --- -|/ || | Item3|| Item 4 |/ || | |||/ || | |||/ || | |||/ || | |||/ || | |||/ || --- -|/ || | Item 5 || Item 6 |/ || | |||/ || | |||/ || | |||/ || | |||/ ctrl^v __ css-discuss [EMAIL PROTECTED] 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] form/fieldset alignment in IE
Hi all, Once again, our problem child is IE. The page at: http://www.cprtools.net/reg/regform1.php looks and performs as expected in Opera, FF2, Webkit28233 (Win, MacOS 10.5). IE7, is moving the topmost fieldset to the right edge of the viewport, leaving the 2nd fieldset where it belongs. IE6 (WinXPSP2) is doing much the same as it's older sister, but leaving some space to the right of the fieldset as compared to the viewport edge. I'm feeing first E.Meyer's reset.css (http://www.cprtools.net/reg/reset.css), then styling with http://www.cprtools.net/reg/style.css after. Any pointers are, as usual, greatly appreciated. Kind regards, -Ray -- Non scholae sed vitae discimus __ css-discuss [EMAIL PROTECTED] 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] (no subject)
I am trying to create using CSS to make a page that looks like this: http://sfnan.org/iotc/templates-php/pie_1.php This page is a series of divs positioned somewhat like a checker board. This page is created by CSS using absolute positioning within a div that is positioned relatively. For various reasons, I am interested in assembling the checkerboard divs using something besides position:absolute. I just can't make it work. Each rectangle is a separate div, some with background pictures and some with text. I'm not sure how to do this. I can get the first and second to line up floating the first to the left and clearing the second to the right. When I try to so this with additional divs, they seem to take on a life of their own, ending up in odd positions around the page or off the page. I have a few questions. If I want to line up a series of divs, do I make each one float:left and clear:right? If I want to start a new row, do I designate float: left, clear: both? This seems logical, but I can't get it to work. If I understand it right, position:relative lets me put the div in standard html sequence but indicate an offset using top and side positioning. This doesn't seem to work the way I would expect it to work. Please help me understand how to do what I am trying to do. Thanks, --Kenoli Kenoli Oleari 1801 Fairview Street Berkeley, CA 94703 Neighborhood Assemblies Network 510-601-8217, [EMAIL PROTECTED] http://www.sfnan.org, http://www.horizonsofchange.com __ css-discuss [EMAIL PROTECTED] 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] Fluid images
The only problem with this is that I need to resize the image in both height and width aspects. From the information included in this e-mail I gather that until the css3 background-size becomes more widely suppourted this will unlikely be an entirely css based solution. Has anyone had this problem and been able to find a javascript solution that uses as much css as possible? On Jan 25, 2008 5:34 PM, Stephan Wehner [EMAIL PROTECTED] wrote: On Jan 25, 2008 10:42 AM, Jack Blankenships [EMAIL PROTECTED] wrote: I have been reading some articles (http://www.alistapart.com/articles/elastic/ , http://www.htmldog.com/articles/elasticdesign/demo/ , http://www.antix.co.uk/code/css/imposing_minimum_width/example_3.htm , etc), but I am not finding the answer I am looking for. I want to have an image (several images) that are dynamically sized/fluid based on the browser window/viewport dimensions. I have a layout where the divs can be percentages of the available height and width, but it seems that whether I put the image inside the div or as a background-image I cannot get it to adjust based on the window dimensions. When I set the width or height to 100% using css, the image is set to 100% of its original size, without respect to its container. Did you try applying the width to the img ? See http://myosin3000.sugarmotor.net/imagesize.html I suppose that it makes things more complicated that I need to preserve the dimensional relationship between the height/width Actually this seems easy. See example above. Stephan -- Stephan Wehner - http://stephan.sugarmotor.org - http://www.thrackle.org - http://www.buckmaster.ca - http://www.trafficlife.com - http://stephansmap.org __ css-discuss [EMAIL PROTECTED] 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-discuss [EMAIL PROTECTED] 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] page check-positioning gap, font issues/questions
http://www.ricochet.org/ricochet2/company_principal.html i haven't yet viewed the page in msie; only opera and firefox on the mac. i'll deal with msie when the page is stable gap issue: at the top of the page (on top of yellow box and menus), i'm getting a gap. i've tried zeroing out margins and padding, but am obviously missing something. font question/issue originally, i speced .8em font size on html/body looked and worked fine. i know it's a no-no as i've been informed it causes issue in msie, i have been taught (by a list member) to use 100% on body and rescale further down the document. when i use 100% on body/html, and move the .8em to the wrapper, i don't get what i'm looking for. it would be nice to size the font once and forget it. suggestions... i know only a print designer would use such small type... what can i say? thanks in advance ron __ css-discuss [EMAIL PROTECTED] 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] Positioning within a table cell?
Probably everyone but I knew that div height=100% style=position: relative; is different from div style=height: 100%; position: relative; The latter does seem to work. Thanks! /JEP On Jan 31, 2008, at 8:02 AM, Mark Finney wrote: You could over come that with height:100% but it seems crazy to put a div inside each table cell... I am sure there is a way of positioning the paragraph on the bottom of the table cell? Surely better spending your time making that work? Good luck, Mark On 31/01/2008, Jeff Piazza [EMAIL PROTECTED] wrote: On Jan 27, 2008, at 1:47 PM, [EMAIL PROTECTED] wrote: Quoting Jeff Piazza [EMAIL PROTECTED]: I'm having a problem trying to position a paragraph at the bottom right of a table cell. The only way I can think to accomplish this is to declare the table cell position: relative;, and then use absolute positioning for the paragraph within the cell. However, this seems to have the effect of positioning the paragraph relative to the viewport, rather than a table cell. I don't understand why this is, or what workaround will get me past this. The only workaround I can think of is to stick some wrapper element, like a 'div', into each the cells and then relatively position it via CSS. Ugly, but it should work. On Jan 27, 2008, at 1:19 AM, Philippe Wittenbergh wrote: That would work, if you want to position the element from the top. But 'bottom' will not position the element at the bottom of the table- cell, only at the bottom of the div (which will only be as tall as its in-flow content). Does this mean I'm just out of luck for positioning a paragraph at the bottom of a table cell? /JEP __ css-discuss [EMAIL PROTECTED] 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-discuss [EMAIL PROTECTED] 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] (no subject)
It may be possible to use floats to achieve your objective. Here is a link to a demo using floats: http://www.jimdavis.org/test/checkerboard.html This uses two floats, one that is 16em wide by 8em high, and a blank that is 8em square. The image within the wide float is floated left and is given a class to set the width and height of the image to 8em by 8em. This makes sure the image is sized to fit the containing element and allows the image to change size when the user re-sizes the text in the browser. I have only tested this on a PC with FF and IE7, so not sure of results in other browsers and OS's. Jim On Jan 31, 2008 10:15 AM, Kenoli Oleari [EMAIL PROTECTED] wrote: I am trying to create using CSS to make a page that looks like this: http://sfnan.org/iotc/templates-php/pie_1.php This page is a series of divs positioned somewhat like a checker board. This page is created by CSS using absolute positioning within a div that is positioned relatively. For various reasons, I am interested in assembling the checkerboard divs using something besides position:absolute __ css-discuss [EMAIL PROTECTED] 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] form/fieldset alignment in IE
Ray Leventhal wrote: typos abound...thankfully not in my code: I'm feeing first E.Meyer's reset.css s/feeing/feeding -R __ css-discuss [EMAIL PROTECTED] 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] Columns? A Theoretical Question
I'm faced with an issue I worked around once before, it presents again with a new face so I'd like to find an ultimate cure, not make do with the cheesy work-around. I'm sorry to say that I'm unable to help with this problem, but I am curious to see your 'cheesy work-around'. What solution did you come up with, if I may ask? Thanks, Steve __ css-discuss [EMAIL PROTECTED] 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] page check-positioning gap, font issues/questions
Ron Zisman wrote:
http://www.ricochet.org/ricochet2/company_principal.html
i haven't yet viewed the page in msie; only opera and firefox on the
mac. i'll deal with msie when the page is stable
gap issue:
at the top of the page (on top of yellow box and menus), i'm getting
a gap.
font question/issue
originally, i speced .8em font size on html/body
suggestions...
ron
/gap/
Add
h1 { margin-top : 0; }
/fonts/
Right now you've got a mixed bag of %/px.
If you want to use em's it's:
html{
font-size: 100%; --- so IE will not go goofy ::
}
body {
font: 0.8em Verdana, Helvetica, sans-serif; em on the body
}
And em's (not px thereafter)
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
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] page check-positioning gap, font issues/questions
Ron Zisman wrote:
http://www.ricochet.org/ricochet2/company_principal.html
font question/issue
originally, i speced .8em font size on html/body
looked and worked fine. i know it's a no-no as i've been informed it
causes issue in msie, i have been taught (by a list member) to use
100% on body and rescale further down the document.
when i use 100% on body/html, and move the .8em to the wrapper, i
don't get what i'm looking for. it would be nice to size the font
once and forget it.
You had 'html, body {font-size: .8em;}'
That equals 'html {font-size: .8em;}' = 80% followed by 'body
{font-size: .8em;}' = 80%, and the sum of 80% x 80% is around 65%.
html {font-size: 100%;}
body {font-size: .65em;}
...or any other combination that starts with percentage and ends up at
around 65%, will give you a starting-point around the 65% of normal
browser default you're aiming for. So, declaring...
html {/* no font size */}
body {font-size: 65%;}
...will end up where you started without triggering any IE/win bugs.
Side note: do I have to remind you that starting small makes it less
likely that the actual font size will survive 'minimum font size' in a
few browsers..?
http://www.gunlaug.no/contents/wd_1_03_04.html
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] Positioning within a table cell?
If the height is known, then establishing a line-box with the same
line-height=height should allow for vertical-aligning a descendant at
the bottom of the cell.
http://www.satzansatz.de/cssd/tmp/tablebottom.html
In theory. Practically, IE7 and lower would need a display:inline-block
hackery, since its inline model is broken.
And some more real content on the table-cell breaks it all. No way.
td class=normalday
span class=dayofmonth2/span
p class=createtaga href=#?date=2008-03-2New/a/p
/td
.normalday {
...
height: 92px;
...
vertical-align: top;
}
.dayofmonth {
font-weight: bold;
}
.createtag {
float: right;
line-height: 92px;
margin: 0;
padding: 0;
}
.createtag a {
line-height: 1.12em;
font-size: xx-small;
vertical-align: bottom;
}
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
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] IE7 needs both width and min-width
Jason Crosse wrote: After a day of plenty of swearing, I seem to have found something out that I think I should have known about before. I'm posting in the hope it will help out some other hapless web developer and prevent some nasty monitor-forehead interfacing. For some reason, I know not why, after making a small change to an html page, IE7 stopped picking up some percentage widths (for floated elements). After a lot of swearing, I found out that sometimes, to even pick up a width, IE7 needs *both* a min-width and width. As I was using percentages that was not a hassle - so for example the rule float:left; width: 25.5%; was having no effect: the width of the element was shrinking down to the width of its content, while on IE6, Opera, Safari and Firefox everything was fine. Adding a min-width thus float:left; width:25.5%; min-width:25.5%; Sorted everything out. So now everything's hunky dory. I'm sure most of you on this list will have known about this and I'm quite surprised I haven't come across it before. That's part of the joy of the job, I suppose: after the frustration comes the satisfaction of learning something new and solving a problem. Can you show an URL to an simplified testcase, please? Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] 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] Safari reading IE comments
jeffrey morin wrote: Hi everyone, Has anyone ever come across a case where Safari will actually read what is in your IE conditional comments? i have never seen this before but am getting that now. IE conditionals are being used to deliver certain jsp files to certain versions but safari is just treating it like the comment isn't there. WEIRD! if anyone has had something like this happen and has any idea what's going on please email me. i'm on digest so you can just email me directly. Thanks so much Jeff Can you please post an URL to an simplified test case? Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] 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] help! with IE7 BG not at full height, and no footer colour..
Hi everyone, Im having a few problems in IE displaying a repeated background (faux columns). also at the bottom of the page I have a footer which doesnt display the background colour but has the working links?? I am using dremweaver CS3 on a Mac and all the validation passes and displays correctly in Firefox, Safari and Opera. I just can't work out whats going on.. Please could someone help as I have to get this live asap.. here is the link: http://www.twistedjunkie.eclipse.co.uk/index009.html -- Rob Freeman [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] 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] help! with IE7 BG not at full height, and no footer colour..
Rob freeman wrote: Hi everyone, Im having a few problems in IE displaying a repeated background (faux columns). also at the bottom of the page I have a footer which doesnt display the background colour but has the working links?? ... http://www.twistedjunkie.eclipse.co.uk/index009.html #content and #footer need haslayout set, for example zoom:1 -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] 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] form/fieldset alignment in IE
Ray Leventhal wrote: http://www.cprtools.net/reg/regform1.php IE7, is moving the topmost fieldset to the right edge of the viewport, leaving the 2nd fieldset where it belongs. IE6 (WinXPSP2) is doing much the same as it's older sister, but leaving some space to the right of the fieldset as compared to the viewport edge. -Ray Assuming you can mess around and play games with the html: /select br / :: add :: label for=phonePhone:nbsp;/label input type=text id=phone size=35 name=phonespan class=req*/spanbr label for=faxFax:nbsp;/label input type=text id=fax size=35br label for=emailEmail:nbsp;/label input onblur=checkemail() type=text id=email name=email size=35span class=req*/spanbr /fieldset div!-- --/div :: add :: And you may want to pay a visit to the Markup Validation Service. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] form/fieldset alignment in IE
Ray Leventhal wrote: Hi all, Once again, our problem child is IE. The page at: http://www.cprtools.net/reg/regform1.php looks and performs as expected in Opera, FF2, Webkit28233 (Win, MacOS 10.5). IE7, is moving the topmost fieldset to the right edge of the viewport, leaving the 2nd fieldset where it belongs. IE6 (WinXPSP2) is doing much the same as it's older sister, but leaving some space to the right of the fieldset as compared to the viewport edge. I'm feeing first E.Meyer's reset.css (http://www.cprtools.net/reg/reset.css), then styling with http://www.cprtools.net/reg/style.css after. Any pointers are, as usual, greatly appreciated. Kind regards, -Ray For IE 6, try assigning a fixed width (try 800px) to your form#regform as well as text-align:left and margin: 0 auto .Change your fieldset widths to auto, and see if that doesn't help get you a little closer to what you're looking to do. -HP __ css-discuss [EMAIL PROTECTED] 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] Columns? A Theoretical Question
Reese wrote: I'm faced with an issue I worked around once before, it presents again with a new face so I'd like to find an ultimate cure, not make do with the cheesy work-around. I need a div container with div-class items that auto-fill left or right. Such that: Item1 seeks top-left position(possibly unique ID but this should be a source code issue - if it's at the top of the stack then it is at the top of the stack), Item2 fills a right position only if the left is non-empty, Item3 fills a right position only if the left is non-empty, Item4 fills a right position only if the left is non-empty, etc. The goal is left-to right recursive, in rows. Below, a crude ascii graphic. I've been through the CSS so many times and changed so many things, I'm getting lost and I'd like to start over. What can I do, to make item elements auto-fill in rows starting from top-left? Reese --/ |Logo| Header content area/ |Area|/ |-/ |Left| --- - / |Nav | | Item 1 || Item 2 |/ |Menu| | |||/ |Item| | |||/ |Area| | |||/ || | |||/ || | |||/ || --- -|/ || | Item3|| Item 4 |/ || | |||/ || | |||/ || | |||/ || | |||/ || | |||/ || --- -|/ || | Item 5 || Item 6 |/ || | |||/ || | |||/ || | |||/ || | |||/ ctrl^v Have you tried using a ul to contain each Item as an li, and assigning definite dimensions to the lis and floating them left, or assigning display:inline to the lis? With each Item/li in either case, they will flow like that. Starting with that in mind, you could take it further, and I'm thinking that what you want is a bit more complicated, and I've oversimplified or not understood what you're asking. I apologize for that if I have done that. -HP __ css-discuss [EMAIL PROTECTED] 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] css positioning problems
http://www.ricochet.org/ricochet2/company_principal2.html
2 more positioning problems:
in the blue bar at the top is contact copy
#top {width:100%}
#top p { positioned from the left } which means if the font scales
differently in different browsers, it's not going to expand as i'd like.
didn't know how to position the right side of the copy as top is 100%
and the right margin is a variable.
tried to position absolute, probably didn't know what i was doing,
but the blue bar (#top) disappeared completely.
so , i'd like the right side of the text to align with right hand
side of the yellow box (header), and expand to the left.
second issue:
the 'Communications Design' #header h2. actually all h2's. ah,
scaling doesn't work so well.
the major issue is with the header h2, as positioned, when type is
scaled, it loses position and drops down and to the left, yellow on
yellow and yellow on gray, not very attractive, at least not to this
print designer.
it also screws up the line-up of the navigation columns
i know this is a lot to ask for on the cheap, but... can you throw
me a bone?
thanks,
ron
__
css-discuss [EMAIL PROTECTED]
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] Columns? A Theoretical Question
Highpowered wrote: Reese wrote: I'm faced with an issue I worked around once before, it presents again with a new face so I'd like to find an ultimate cure, not make do with the cheesy work-around. I need a div container with div-class items that auto-fill left or right. Such that: Item1 seeks top-left position(possibly unique ID but this should be a source code issue - if it's at the top of the stack then it is at the top of the stack), Item2 fills a right position only if the left is non-empty, Item3 fills a right position only if the left is non-empty, Item4 fills a right position only if the left is non-empty, etc. The goal is left-to right recursive, in rows. Below, a crude ascii graphic. I've been through the CSS so many times and changed so many things, I'm getting lost and I'd like to start over. What can I do, to make item elements auto-fill in rows starting from top-left? Reese --/ |Logo| Header content area/ |Area|/ |-/ |Left| --- - / |Nav | | Item 1 || Item 2 |/ |Menu| | |||/ |Item| | |||/ |Area| | |||/ || | |||/ || | |||/ || --- -|/ || | Item3|| Item 4 |/ || | |||/ || | |||/ || | |||/ || | |||/ || | |||/ || --- -|/ || | Item 5 || Item 6 |/ || | |||/ || | |||/ || | |||/ || | |||/ ctrl^v Have you tried using a ul to contain each Item as an li, and assigning definite dimensions to the lis and floating them left, or assigning display:inline to the lis? With each Item/li in either case, they will flow like that. Starting with that in mind, you could take it further, and I'm thinking that what you want is a bit more complicated, and I've oversimplified or not understood what you're asking. I apologize for that if I have done that. -HP __ css-discuss [EMAIL PROTECTED] 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/ If I understand it right... you could do this with every item in a div with float: left; __ css-discuss [EMAIL PROTECTED] 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] Columns? A Theoretical Question
Tudor Hariton wrote: Highpowered wrote: Reese wrote: I'm faced with an issue I worked around once before, it presents again with a new face so I'd like to find an ultimate cure, not make do with the cheesy work-around. I need a div container with div-class items that auto-fill left or right. Such that: Item1 seeks top-left position(possibly unique ID but this should be a source code issue - if it's at the top of the stack then it is at the top of the stack), Item2 fills a right position only if the left is non-empty, Item3 fills a right position only if the left is non-empty, Item4 fills a right position only if the left is non-empty, etc. The goal is left-to right recursive, in rows. Below, a crude ascii graphic. I've been through the CSS so many times and changed so many things, I'm getting lost and I'd like to start over. What can I do, to make item elements auto-fill in rows starting from top-left? Reese --/ |Logo| Header content area/ |Area|/ |-/ |Left| --- - / |Nav | | Item 1 || Item 2 |/ |Menu| | |||/ |Item| | |||/ |Area| | |||/ || | |||/ || | |||/ || --- -|/ || | Item3|| Item 4 |/ || | |||/ || | |||/ || | |||/ || | |||/ || | |||/ || --- -|/ || | Item 5 || Item 6 |/ || | |||/ || | |||/ || | |||/ || | |||/ ctrl^v Have you tried using a ul to contain each Item as an li, and assigning definite dimensions to the lis and floating them left, or assigning display:inline to the lis? With each Item/li in either case, they will flow like that. Starting with that in mind, you could take it further, and I'm thinking that what you want is a bit more complicated, and I've oversimplified or not understood what you're asking. I apologize for that if I have done that. -HP If I understand it right... you could do this with every item in a div with float: left; You could, but surely as they're labeled Item x in the diagram, it's more suited to a list, anyway :) Chris. __ css-discuss [EMAIL PROTECTED] 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] css positioning problems
Ron Zisman wrote:
http://www.ricochet.org/ricochet2/company_principal2.html
2 more positioning problems:
in the blue bar at the top is contact copy
#top {width:100%}
#top p { positioned from the left } which means if the font scales
differently in different browsers, it's not going to expand as i'd like.
didn't know how to position the right side of the copy as top is 100%
and the right margin is a variable.
tried to position absolute, probably didn't know what i was doing,
but the blue bar (#top) disappeared completely.
so , i'd like the right side of the text to align with right hand
side of the yellow box (header), and expand to the left.
second issue:
the 'Communications Design' #header h2. actually all h2's. ah,
scaling doesn't work so well.
the major issue is with the header h2, as positioned, when type is
scaled, it loses position and drops down and to the left, yellow on
yellow and yellow on gray, not very attractive, at least not to this
print designer.
it also screws up the line-up of the navigation columns
i know this is a lot to ask for on the cheap, but... can you throw
me a bone?
thanks,
ron
#stuff {border: 1px solid red; overflow: hidden; } :: add new
ruleset: 1st id to open/last to close in markup
#wrapper { border-right: 1px solid blue; position : relative; }
- :: add to selector ::
#header{
/*height:210px;*/ min-height: 20.2em; -- :: amend
}
* html #header{
height: 20.2em; -- :: for the evil one
}
#top p {
/*position:relative; --- :: delete these 3
left:368px;
padding:5px;*/
text-align: right; --- :: add
margin:0;
letter-spacing:.2em;
font-weight:lighter;
font-size:.9em;
}
.inside {width:768px; overflow : hidden; border: 1px solid fuchsia;}
:: add new ruleset: see markup below
body
div id=stuff
div id=top
div class=inside
pspanricochet: communication design/span | 845
735 3392 | [EMAIL PROTECTED]/p
/div!-- closes .inside --
/div!-- closes #top --
div id=wrapper
Communication Design will remain adjacent to the right side of the
yellow gray blocks; however, becuse it is a long word in a narrow
width, Communication will brel right at +2.
Since you wrote you wrote earlier you did not look at in IE6 or IE7,
neither did I.
I hope this helps and the mail does not mangle it too much.
Best,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
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] css positioning problems
David Laakso wrote:
Ron Zisman wrote:
http://www.ricochet.org/ricochet2/company_principal2.html
the 'Communications Design' #header h2. actually all h2's. ah,
scaling doesn't work so well.
ron
I neglected to include this in my last reply. You'll need it to position
#header h2.
#header h2 { border : 1px solid red;
position: absolute; top: 8.45em; left: 770px; - :: add
/*float:right; :: delete
these three
margin: -210px -155px 0 0;
padding-top:151px;*/
padding: 0;
font-weight: 200;
font-size:1.7em;
color:#ffbc08;
text-align: left;
}
Best,
~dL
__
css-discuss [EMAIL PROTECTED]
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/
