Re: [css-d] width:100% + padding/margin question
Chang Huang wrote:
The 10px padding of #box2 will be allocated outside of #box1.
According to the box model, this is the correct behavior (except for
buggy IE6). But that is not what I want, I want the padding for #box2
remain inside #box1 and keeping the width in %.
How can I do that?
For your calculations to work as intended within the W3C box model in
compliant browsers now, you must use percentages on both size and
padding for #box2 and make them add up to 100% of #box1.
Something like:
#box2 { width:96%; height:90%; padding:5% 2%; }
(It's a case for CSS table, me thinks.)
You'll (probably) be able to let the browsers subtract 10px padding from
100% size and then add the padding, some day in the future...
http://www.w3.org/TR/css3-values/#calc
...but for now you'll have to do those calculations yourself before
entering them into CSS.
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/
[css-d] Awkward layout
Hi all. I have placed a pdf file at the following URL: http://www.webbwize.co.uk/Test_Area/ketron-dec06.pdf The first two pages show a layout that I wish to achieve. Obviously the top-left header is straightforward and could be put into a 1/2 width left column and I could have a 1/2 width right column for the other text. Try as I may, I can't get my head around putting images in the center so that the left and right column text flows around the image, as per the pdf file. I've been searching the Internet and so far have not found anyone demonstrating this type of layout. I'm not asking anyone to write my code for me, but if someone could give me some pointers to generally setting up a page like these, I'd be very grateful. I suspect I'm going to look stupid and someone will tell me that there are hundreds of such pages. :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus __ 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] width:100% + padding/margin question
Chang Huang wrote:
div id=box1
div id=box2
/div
/div
#box1 { width:500px; height:200px; }
#box2 { width:100%; height:100%; padding:10px; }
The 10px padding of #box2 will be allocated outside of #box1.
According to the box model, this is the correct behavior (except for
buggy IE6). But that is not what I want, I want the padding for #box2
remain inside #box1 and keeping the width in %.
How can I do that?
Assuming your code is exactly what you're using on a site somewhere, the
setting of 100% width on #box2 is superfluous. A div is a block level
element, so #box2 would automatically fill the 500px width of #box1.
Setting horizontal padding on a block level element without setting the
width essentially gives you the 100%-10px-10px that you want;
That takes care of the width issue. Height is a little tricker. Since
adding 10px to the padding of #box2 would make its height
100%+10px+10px, you have to fake it by setting a 10px vertical margin on
child elements and preventing collapsing margins with overflow:auto
(assuming you'd want overflow:auto for a fixed height box anyway).
So, if this is your HTML:
div id=box1
div id=box2
pContent/p
/div
/div
This CSS should approximate what you're looking for:
#box1 { width:500px; height:200px; background:#f00; }
#box2 { height:100%; padding:0 10px; background:#ff0; overflow:auto; }
#box2 p { background:#fff; margin:10px 0; }
The colors are there for testing, of course.
In an overflow situation, collapsing margins will prevent any bottom
margining (faux padding) to appear on the last element contained with
#box2. I've never found a decent workaround for this, but the code above
will give you three sides at least.
Hope it helps.
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - From dot concept to dot com since 1999
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
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] Awkward layout
Alan K Baker wrote: Obviously the top-left header is straightforward and could be put into a 1/2 width left column and I could have a 1/2 width right column for the other text. Try as I may, I can't get my head around putting images in the center so that the left and right column text flows around the image, as per the pdf file. I've been searching the Internet and so far have not found anyone demonstrating this type of layout. I'm not asking anyone to write my code for me, but if someone could give me some pointers to generally setting up a page like these, I'd be very grateful. I suspect I'm going to look stupid and someone will tell me that there are hundreds of such pages. :-) Hi Alan! The technique you're seeking was covered in an A List Apart article in late 2004: http://www.alistapart.com/articles/crosscolumn/ ...and again in early 2005: http://alistapart.com/articles/crosscolumn2/ Sorry, I couldn't find hundreds of links, but these should help out. ;) --Bill P.S. I haven't forgotten about our email conversation from weeks ago, just been busy. I'll send you an update sometime soon. -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ 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] Too much for MSIE 6 and 7 to cache?
Hello list There is a group of captures on this public page on Browsercam, three pages x MSIE 6 and 7 http://www.browsercam.com/public.aspx?proj_id=385801 and the thing I don't understand at the moment is why sometimes the masthead of the web page does not appear and sometimes it does. The web pages are image-heavy at the top, to fulfil all the client's desires, viz * tiled background image (11 pixels x 542 pixels), 922 bytes * pseudo top frame with background image (900 pixels x 151 pixels), 42kb * pseudo top frame also has a transparent .gif (900 pixels x 151 pixels) overlaying the background image to make it harder to see what dpi that background image is at (there is a reason for this, too complicated to explain), 1.9kb The membership list page has always displayed as it should but the masthead on the others do not always display - is it too much for MSIE 6 and 7 to cache? I am going to try making the transparent .gif narrower and stretch it to 900 pixels with the code. The URLs of the pages themselves are visible on the captures - I didn't want to include them in this posting because this list is indexed by search engines, and after some tidying up this redeveloped site is due to go live in the next few days. TVIA Rachel __ 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] Awkward layout
- Original Message - From: Bill Brown To: Alan K Baker Cc: css-d Sent: Friday, August 22, 2008 9:15 AM Subject: Re: [css-d] Awkward layout Hi Alan! The technique you're seeking was covered in an A List Apart article in late 2004: http://www.alistapart.com/articles/crosscolumn/ ...and again in early 2005: http://alistapart.com/articles/crosscolumn2/ Sorry, I couldn't find hundreds of links, but these should help out. ;) --Bill P.S. I haven't forgotten about our email conversation from weeks ago, just been busy. I'll send you an update sometime soon. Hi Bill. Thanks for that. Two is fine - better than none. :-) Probably all I will need. Actually, a lot of it is obvious after you've read it, but it takes a clever person to point it out. Now off to try to incorporate some of the ideas. As and when for 'other stuff'. I guess we're all busy, but that must be better than being idle. g Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus __ 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] Too much for MSIE 6 and 7 to cache?
Rachel Mawhood wrote: There is a group of captures on this public page on Browsercam, three pages x MSIE 6 and 7 http://www.browsercam.com/public.aspx?proj_id=385801 and the thing I don't understand at the moment is why sometimes the masthead of the web page does not appear and sometimes it does. With IE6 running under WINE on Linux - none of your pages seemed to have any problems with the masthead. Don't know how your Browsercam session was set to capture, maybe it wasn't waiting long enough every time before doing the capture?? -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Too much for MSIE 6 and 7 to cache?
Hi David Don't know how your Browsercam session was set to capture, maybe it wasn't waiting long enough every time before doing the capture?? Thank you - I did wonder if that might be the problem. When the Board members were invited to review the site last week, one wrote that when she first looked at the web site my computer does not show the picture in the top of the site on the introduction site when entering but then If I return to the introduction after another site it works ok. (When she says site, I think she means page.) Which sounded as if, when one first opens the web site, the images are taking too long to load. I must see what I can do to mitigate that. Kind regards Rachel At 09:52 22/08/2008, david wrote: [snip] With IE6 running under WINE on Linux - none of your pages seemed to have any problems with the masthead. Don't know how your Browsercam session was set to capture, maybe it wasn't waiting long enough every time before doing the capture?? -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Too much for MSIE 6 and 7 to cache?
Hi Rachel, no problem here with IE6. Images were displayed on first page loading. Cheers, jens -- Jens Brueckmann http://www.yalf.de __ 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] Wondering why this happens
Hi folks, I'm wondering why this happens http://herlug.org.uk/gimping/test.html The menu and content are both contained in a div which has the background url set. However the menu content seems to have no effect, in that the background url is not continued for the height of the menu before the base url kicks in to finish the centre piece off. I thought the menu height would pull the background url down as it is contained in the div that draws the background url. Obviously I have got something wrong in that expectation. Can you offer any help? Regards Lesley __ 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] width:100% + padding/margin question
--- On Fri, 8/22/08, Bill Brown [EMAIL PROTECTED] wrote: In an overflow situation, collapsing margins will prevent any bottom margining (faux padding) to appear on the last element contained with #box2. I've never found a decent workaround for this, but the code above will give you three sides at least. Bill, can you elaborate on this point? In FF2/Win, I DO see a bottom margin on that last element when it scrolls due to overflow: auto. E.g. the yellow background 'shows through' below the last paragraph, same size as the other 'borders'. - Bobby __ 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] Margin collapse around float
According to the CSS2.1 spec Vertical margins between a floated box and any other box do not collapse, yet my testing reveals that, in the following arrangement: 1. a normal paragraph 2. a floated paragraph 3. a cleared paragraph margins collapse between 2 and 3, but not between 1 and 2. At least, this is the case for FF2 and Opera9, whilst IE7 does not collapse either set of margins. Who is right, have I misunderstood this part of the spec., or is something else coming into play? Example at: http://www.fiveminuteargument.com/collapsing-margins-after-float Cheers, - Bobby __ 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] Wondering why this happens
Lesley Binks wrote:
http://herlug.org.uk/gimping/test.html
I thought the menu height would pull the background url down as it is
contained in the div that draws the background url. Obviously I have
got something wrong in that expectation.
Can you offer any help?
Hi Lesley,
See if this helps:
#dropshadow_mid { /* repeats the middle image of the centre block */
display: inline-block; /*** ADD ***/
margin: 0;
padding: 1px 0;
overflow: hidden; /*** ADD ***/
background: url(800.800.middle.png) repeat-y center;
}
#dropshadow_mid {
display: block; /*** ADD ***/
}
Best,
Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - From dot concept to dot com since 1999
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
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] Margin collapse around float
I don't have anything to offer to the solution other then the fact that Safari 3.1.2 seems to be doing what you said.To try and represent it in my ASCII art: | Normal Paragraph | | | Floated Paragraph | | cleared Paragraph | Which I believe is what you are saying? On Aug 22, 2008, at 7:27 AM, Bobby Jack wrote: According to the CSS2.1 spec Vertical margins between a floated box and any other box do not collapse, yet my testing reveals that, in the following arrangement: 1. a normal paragraph 2. a floated paragraph 3. a cleared paragraph margins collapse between 2 and 3, but not between 1 and 2. At least, this is the case for FF2 and Opera9, whilst IE7 does not collapse either set of margins. Who is right, have I misunderstood this part of the spec., or is something else coming into play? Example at: http://www.fiveminuteargument.com/collapsing-margins-after-float Cheers, - Bobby __ 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/ -- Jason Pruim Raoset Inc. Technology Manager MQC Specialist 11287 James St 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] Margin collapse around float
--- On Fri, 8/22/08, Jason Pruim [EMAIL PROTECTED] wrote: ... Safari 3.1.2 seems to be doing what you said ...: | Normal Paragraph | | | Floated Paragraph | | cleared Paragraph Spot on. And now that IE is the only one of the big 4 to display the behaviour that seems to be described in the spec, I'm more confused than ever. There MUST be something I'm missing ... - Bobby __ 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] width:100% + padding/margin question
Bobby Jack wrote: Bill, can you elaborate on this point? In FF2/Win, I DO see a bottom margin on that last element when it scrolls due to overflow: auto. E.g. the yellow background 'shows through' below the last paragraph, same size as the other 'borders'. Hi Bobby, I get the bottom margin on some OS/Browser combos as well, but more often, it collapses. I haven't checked the spec yet, but I suspect that this behavior is incorrect because it isn't countered by the normal collapsing margin fixes (application of padding or border between elements). I could be totally off-base there though: I'm only on my first cup of coffee. Test Page: http://theholiergrail.com/focus-on-style/bottom-margin-collapse-with-overflow-auto.html --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ 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] width:100% + padding/margin question
--- On Fri, 8/22/08, Bill Brown [EMAIL PROTECTED] wrote: Test Page: http://theholiergrail.com/focus-on-style/bottom-margin-collapse-with-overflow-auto.html Thanks, Bill. That's more-or-less the exact same test I had and, FYI, the border does NOT collapse on FF2/Win. - Bobby __ 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] width:100% + padding/margin question
Bobby Jack wrote: Thanks, Bill. That's more-or-less the exact same test I had and, FYI, the border does NOT collapse on FF2/Win. It's very interesting, isn't it? It's not the behavior I'd expect. My thinking is the same for your other post: I would expect the margins above /and/ below to prop, rather than collapse, or at least for both to do the same. I'd interpret it to be inconsistent with the specs. I trimmed out your demo and messed with it six ways to Sunday and couldn't get it to prop. Very weird. Bugs perhaps? --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ 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] width:100% + padding/margin question
Bill Brown wrote: I get the bottom margin on some OS/Browser combos as well, but more often, it collapses. I haven't checked the spec yet, but I suspect that this behavior is incorrect because it isn't countered by the normal collapsing margin fixes (application of padding or border between elements). I could be totally off-base there though: I'm only on my first cup of coffee. Test Page: http://theholiergrail.com/focus-on-style/bottom-margin-collapse-with-overflow-auto.html That is not a case of 'margin-collapsing'. :-) In this case, the bottom-margin of the last-child paragraph is swallowed by the overflow on the parent box (the one with overflow:auto and height:100% set). You'd have to look at CSS2.1:10.6, esp 10.6.3 and 10.6.6 (which is not so clear), and check CSS2.1:8.3.1 Opera 9.5, Gecko 1.9 (fx3), gecko 1.91.pre, WebKit (nightly build and Safari 3.1) are consistent in this. IE6 7 also swallow the bottom-margin, as 'hasLayout' is true on the parent box. See also this thread: http://lists.w3.org/Archives/Public/www-style/2008Feb/thread.html#msg0 Philippe --- Philippe Wittenbergh http://l-c-n.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] width:100% + padding/margin question
Bill Brown wrote: Bobby Jack wrote: Bill, can you elaborate on this point? In FF2/Win, I DO see a bottom margin on that last element when it scrolls due to overflow: auto. E.g. the yellow background 'shows through' below the last paragraph, same size as the other 'borders'. Hi Bobby, I get the bottom margin on some OS/Browser combos as well, but more often, it collapses. I haven't checked the spec yet, but I suspect that this behavior is incorrect because it isn't countered by the normal collapsing margin fixes (application of padding or border between elements). I could be totally off-base there though: I'm only on my first cup of coffee. Test Page: http://theholiergrail.com/focus-on-style/bottom-margin-collapse-with-overflow-auto.html --Bill You will not find this in the spec. Even though the bottom margin is not shown in FF3, Opera 9.5, Safari and IE8, the spec doesn't elaborate why this is the case. More information. http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/MarginBottomChildNotRendered.html We as author just shake our heads and look at the stars and wonder, what is the spec. -- Alan http://css-class.com/ Nearly all men can stand adversity, but if you want to test a man's character, give him power - Abraham Lincoln Save the Internet - http://www.savetheinternet.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] Margin collapse around float
On Aug 22, 2008, at 8:27 PM, Bobby Jack wrote: According to the CSS2.1 spec Vertical margins between a floated box and any other box do not collapse, yet my testing reveals that, in the following arrangement: 1. a normal paragraph 2. a floated paragraph 3. a cleared paragraph margins collapse between 2 and 3, but not between 1 and 2. At least, this is the case for FF2 and Opera9, whilst IE7 does not collapse either set of margins. Who is right, have I misunderstood this part of the spec., or is something else coming into play? Example at: http://www.fiveminuteargument.com/collapsing-margins-after-float There is indeed something else: the margin-bottom between the floated paragraph (10px) does not collapse with the margin-top of the next paragraph. What happens here is 'clearance' (specified on paragraph 3 in the test case). That 'clearing' can be understood as 'extend the margin-top of the clearing element (parag 3) enough to get it past the floated element'. The margin-top of paragraph 3 actually collapses with the margin- bottom of paragraph 1, but is then extended by the used height + margins of paragraph 2. http://www.w3.org/TR/CSS21/visuren.html#flow-control Philippe --- Philippe Wittenbergh http://l-c-n.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] Wondering why this happens
Bill Brown wrote:
Lesley Binks wrote:
http://herlug.org.uk/gimping/test.html
I thought the menu height would pull the background url down as it is
contained in the div that draws the background url. Obviously I have
got something wrong in that expectation.
Can you offer any help?
Hi Lesley,
See if this helps:
#dropshadow_mid { /* repeats the middle image of the centre block */
display: inline-block; /*** ADD ***/
margin: 0;
padding: 1px 0;
overflow: hidden; /*** ADD ***/
background: url(800.800.middle.png) repeat-y center;
}
#dropshadow_mid {
display: block; /*** ADD ***/
}
Bill
You are very kind.
I'm a numpty - I completely don't understand how that works at all.
However - google is my friend and
http://www.w3.org/TR/CSS21/visuren.html#visual-model-intro looks worth
reading.
I'm currently guessing my simple concept of a div as a block is quite wrong.
Regards
Lesley
__
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] width:100% + padding/margin question
Philippe Wittenbergh wrote: Bill Brown wrote: That is not a case of 'margin-collapsing'. :-) In this case, the bottom-margin of the last-child paragraph is swallowed by the overflow on the parent box (the one with overflow:auto and height:100% set). Right...margin-swallowing, not margin-collapsing. Whatever was I thinking? g See also this thread: http://lists.w3.org/Archives/Public/www-style/2008Feb/thread.html#msg0 That's a useful thread. I've subscribed to that list. Nice catch on the other post as well. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ 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] Margin collapse around float
--- On Fri, 8/22/08, Philippe Wittenbergh [EMAIL PROTECTED] wrote: The margin-top of paragraph 3 actually collapses with the margin- bottom of paragraph 1, but is then extended by the used height + margins of paragraph 2. http://www.w3.org/TR/CSS21/visuren.html#flow-control Of course! I'm sure I was subconsciously aware of this one, and it's why I always see extraneous whitespace after floats in IE. Another obscure CSS detail, causing yet another IE bug, and my faith in the world order is restored :) Thanks, Philippe. - Bobby __ 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] One Rounded Corner is Problematic
Thanks to Gunlaug's suggestion to try this approach for my 2-column design: http://www.alistapart.com/articles/negativemargins/ I've ported my earlier attempt over to this - and quite easily (though IE6 is totally messed up yet, and IE 7 has a couple quirks). http://www.springfieldmo.gov/newSite/negMargin.html http://www.springfieldmo.gov/newSite/negMargin.css But focusing on one issue at a time, the one that is across all browsers is the upper left rounded corner in the content area. I'm using only one image for all 4 corners to minimize server calls, but it's making it difficult to get the text to be on top of that one image. I thought about applying a z-index through a class to the h1 tag (or to whatever else might be in that position), but this isn't a great option when text is resized smaller. The corner then ends up on top of the text below the top heading. Any ideas for getting the upper left rounded corner (.tlC) to live below any content? Now to try and figure out why in the world IE6 blows this apart ... Chris A. __ 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 problem
Hi everyone, I'm working on the website template in Joomla and having problem with the top navigation in IE6. For some reason, it's being pushed down in IE6. It works great in Mozilla and IE7. Can anyone please suggest where is the problem and how can it be resolved. Thanks in advance. Here is the link to the website template: http://nexgenmediatechnology.com/NexGenWebsite/ Regards, Deep Garcha __ 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] rollover discrepency
ah, I love explanations. I'm not great on memory unless I understand
something. Never would've been a good actor.
Okay, so the basic idea as I see it is to work with the anchors
instead of the li. I saw the li as the more base part and worked
from big to small, but here small was the essential part (the link).
Now that side li and side li:hover are gutted, do I still need
them? I noted that it worked fine without them.
thank you for your help Bill.
daniel
On Aug 22, 2008, at 11:12 AM, Bill Brown wrote:
This should help. Explanation follows code.
#side li {
color: #FFF; /* - REMOVE [1] */
padding: .25em; /* - REMOVE [2] */
}
#side li:hover {
background: #F3E0A8; /* - REMOVE [3] */
color: #000; /* - REMOVE [4] */
}
#side li a {
background-color: #CCA349; /* + ADD [5] */
color: #FFF;
display: block;
padding: 0.25em; /* + ADD [6] */
text-decoration: none;
}
#side li a:hover {
background: #F3E0A8; /* + ADD [7] */
color:#00;
}
[1] Redundant - Already in anchor style.
[2] Moved to 6.
[3] Moved to 7.
[4] Redundant - Already in anchor hover style.
[5] Just good practice when specifying color.
[6] From LI style.
[7] From LI:hover style.
Hope it helps.
--Bil
--
Daniel Kessler
University of Maryland College Park
School of Public Health
3302E SPH 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] rollover discrepency
Daniel Kessler wrote: Okay, so the basic idea as I see it is to work with the anchors instead of the li. I saw the li as the more base part and worked from big to small, but here small was the essential part (the link). Now that side li and side li:hover are gutted, do I still need them? I noted that it worked fine without them. Nah, you can get rid of em if you don't need to style anything else on them. When it comes to padding and margins, I find it's often best to work with the /innermost/ element. So, in this case, padding on your a pushes out on your li which pushes out on the ul and so on. Rarely do I find I need to style an intermediate box unless it's to zero something out (like margins on ul/li, etc.). In your case, you gain another particular advantage since IE lte 6 doesn't support :hover on most elements, but it will on the anchor. Thus, you get a :hover effect that'll work cross-browser. ;) thank you for your help Bill. You're most welcome, of course. Glad I could help. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ 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] One Rounded Corner is Problematic
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
discuss.org] On Behalf Of Chris Akins
Sent: Friday, August 22, 2008 9:38 AM
To: CSS-D List
Subject: [css-d] One Rounded Corner is Problematic
Thanks to Gunlaug's suggestion to try this approach for my 2-column
design:
http://www.alistapart.com/articles/negativemargins/
I've ported my earlier attempt over to this - and quite easily (though
IE6 is totally messed up yet, and IE 7 has a couple quirks).
http://www.springfieldmo.gov/newSite/negMargin.html
http://www.springfieldmo.gov/newSite/negMargin.css
But focusing on one issue at a time, the one that is across all
browsers is the upper left rounded corner in the content area. I'm
using only one image for all 4 corners to minimize server calls, but
it's making it difficult to get the text to be on top of that one
image. I thought about applying a z-index through a class to the h1
tag (or to whatever else might be in that position), but this isn't a
great option when text is resized smaller. The corner then ends up on
top of the text below the top heading.
Any ideas for getting the upper left rounded corner (.tlC) to live
below any content?
Hi Chris,
Try the following:
div.textpadderC {position:relative;}
--
Regards,
Thierry | http://www.TJKDesign.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] Wondering why this happens
Bill,
From what I see, you can combine the two styles because of the same name,
but then you have display:inline-block and block in the same style. How can
this be? Are you working around something in IE? Inline-block possibly?
Thanks,
Keith
On Fri, Aug 22, 2008 at 7:39 AM, Bill Brown [EMAIL PROTECTED] wrote:
Hi Lesley,
See if this helps:
#dropshadow_mid { /* repeats the middle image of the centre block */
display: inline-block; /*** ADD ***/
margin: 0;
padding: 1px 0;
overflow: hidden; /*** ADD ***/
background: url(800.800.middle.png) repeat-y center;
}
#dropshadow_mid {
display: block; /*** ADD ***/
}
Best,
Bill
__
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] Too much for MSIE 6 and 7 to cache?
Hi Jens Thank you for looking - that's really helpful. Kind regards Rachel At 10:44 22/08/2008, Jens Brueckmann wrote: Hi Rachel, no problem here with IE6. Images were displayed on first page loading. Cheers, jens -- Jens Brueckmann http://www.yalf.de __ 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] Wondering why this happens
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Keith DiSarno Sent: Friday, August 22, 2008 12:58 PM To: [EMAIL PROTECTED] Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org Subject: Re: [css-d] Wondering why this happens Bill, From what I see, you can combine the two styles because of the same name, but then you have display:inline-block and block in the same style. How can this be? Are you working around something in IE? Inline-block possibly? afaik, the display:inline-block/display:block hack (to trigger hasLayout) works only if the two are *not* in the same block declaration. -- Regards, Thierry | http://www.TJKDesign.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] IE6 Stacking Issue or Something Else?
Using a basic negative margins framework, I've modified to get almost everything to work across browser/platform land except for our ol' friend IE6. http://www.springfieldmo.gov/newSite/negMargin.html http://www.springfieldmo.gov/newSite/negMargin.css In IE6 only, the Contact Us area in the left column won't snug right up to the right-hand content column. Thus, the background border shadow effect breaks. View in a standards-compliant browser to see what it should look like. Is this one of the known IE6 issues? If so, I can Google the issue if someone just points me in the right direction. Also, on the light purplish blue content area, the bottom shadow border won't show in IE6 only. Again, after trying to target various things with CSS changes, I am left without answers. All in all, I do prefer this negative margin layout over the one I was using earlier. The file sizes are smaller on both the HTML and CSS, and I can now put the source in any order. I had been using an expression to do the min/max width for IE6, but I think at this point I'll just forget that feature for IE6 and let it be. With IE6 numbers starting to fall, it's only a matter of time. Thanks in advance for more tips. Chris A. Web Coordinator City of Springfield, MO __ 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] Trouble with line-height and div overflow:hidden
What I need to achieve: A CMS template provides a fix-sized div (height and width are px- based) in which I need to display arbitrary text entered by the user. Hence, if the full text doesn't fit into the div it needs to be cut off i.e. invisible. So, the div style will contain overflow:hidden. However, since the last line of visible text in the div must not be cut off horizontally I need to tinker with the line-attribute, right? The inherited font-size for the div is 1em. I played around with the line-height value in 'em' until I could make sure that no pixel of the last visible line of text in the div is cut off. Then I switched browser/OS and got totally different results - line-heigths are always different. Am I using the wrong approach here? Is it even possible to achieve in CSS what the design folks require in their Photoshop layouts? Regards, Marcel -- Marcel Stör, http://www.frightanic.com Blog: http://frightanic.wordpress.com Skype: marcelstoer __ 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] Wondering why this happens
Thanks Thierry! Keith D. On Fri, Aug 22, 2008 at 4:07 PM, Thierry Koblentz [EMAIL PROTECTED] wrote: -Original Message- From: [EMAIL PROTECTED] [mailto: [EMAIL PROTECTED] discuss.org] On Behalf Of Keith DiSarno Sent: Friday, August 22, 2008 12:58 PM To: [EMAIL PROTECTED] Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org Subject: Re: [css-d] Wondering why this happens Bill, From what I see, you can combine the two styles because of the same name, but then you have display:inline-block and block in the same style. How can this be? Are you working around something in IE? Inline-block possibly? afaik, the display:inline-block/display:block hack (to trigger hasLayout) works only if the two are *not* in the same block declaration. -- Regards, Thierry | http://www.TJKDesign.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] IE6 Stacking Issue or Something Else?
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
discuss.org] On Behalf Of Chris Akins
Sent: Friday, August 22, 2008 1:21 PM
To: CSS-D List
Subject: [css-d] IE6 Stacking Issue or Something Else?
Using a basic negative margins framework, I've modified to get almost
everything to work across browser/platform land except for our ol'
friend IE6.
http://www.springfieldmo.gov/newSite/negMargin.html
http://www.springfieldmo.gov/newSite/negMargin.css
In IE6 only, the Contact Us area in the left column won't snug right
up to the right-hand content column. Thus, the background border
shadow effect breaks. View in a standards-compliant browser to see
what it should look like.
Is this one of the known IE6 issues? If so, I can Google the issue if
someone just points me in the right direction.
Try this:
* html #content {margin-left:200px;}
--
Regards,
Thierry | http://www.TJKDesign.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] Trouble with line-height and div overflow:hidden
The issue (my opinion), isn't really one of CSS but of concept. The short answer to what CSS can achieve is yes it can do its part to get to a Photoshop design PROVIDED that design is really one for the web and not for print or some other fixed medium. Sounds like what you're up against is a design that isn't considering what the web really is - a flexible medium that has elements you'll never be able to control - user's resolution, preferred text size, etc. These variables pretty much dictate that if your content is important at all, then your containers for that content should grow and shrink with said content. Setting up a container that's fixed in BOTH height and width is failing to design for the web, in my opinion. It's design for print. So, to answer your question about approach: yes my opinion is it's the wrong approach since it's not taking into account the flexible nature of the web. Think as a web page first, then let your design beautify what the web is. As an example of my own struggles with a Photoshop design that I thought would be impossible see what I'm finishing right now: http://www.springfieldmo.gov/newSite/negMargin.html It has been difficult, but this is a CSS-only design - no tables for layout. It's probably not award winning, but it's reasonably complex for a CSS-only site. But it's nearly identical to the original Photoshop design. I, too, love exactness in my design, but I have learned that some things MUST allow for the variables inherent in what the web is. Good luck in the pursuit. :-) Christopher Web Coordinator City of Springfield, MO On Fri, Aug 22, 2008 at 3:41 PM, Marcel Stör [EMAIL PROTECTED] wrote: What I need to achieve: A CMS template provides a fix-sized div (height and width are px- based) in which I need to display arbitrary text entered by the user. Hence, if the full text doesn't fit into the div it needs to be cut off i.e. invisible. So, the div style will contain overflow:hidden. However, since the last line of visible text in the div must not be cut off horizontally I need to tinker with the line-attribute, right? The inherited font-size for the div is 1em. I played around with the line-height value in 'em' until I could make sure that no pixel of the last visible line of text in the div is cut off. Then I switched browser/OS and got totally different results - line-heigths are always different. Am I using the wrong approach here? Is it even possible to achieve in CSS what the design folks require in their Photoshop layouts? Regards, Marcel -- Marcel Stör, http://www.frightanic.com Blog: http://frightanic.wordpress.com Skype: marcelstoer __ 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] IE6 Stacking Issue or Something Else?
Apologies if I was playing around with the stylesheet when you looked
at it, but margin-left:200px is already in the #content rules. I
don't think I had modified that rule, but I've been trying quite a few
things in my efforts to understand what the issue is.
Adding the IE6-only specification below doesn't seem to add anything.
Am I missing something? I did try it, though, and no dice.
Regards,
Chris
On Fri, Aug 22, 2008 at 3:53 PM, Thierry Koblentz [EMAIL PROTECTED] wrote:
Try this:
* html #content {margin-left:200px;}
__
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] Trouble with line-height and div overflow:hidden
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Marcel Stör Sent: Friday, August 22, 2008 10:41 AM To: css-d@lists.css-discuss.org Subject: [css-d] Trouble with line-height and div overflow:hidden What I need to achieve: A CMS template provides a fix-sized div (height and width are px- based) in which I need to display arbitrary text entered by the user. Hence, if the full text doesn't fit into the div it needs to be cut off i.e. invisible. So, the div style will contain overflow:hidden. However, since the last line of visible text in the div must not be cut off horizontally I need to tinker with the line-attribute, right? The inherited font-size for the div is 1em. I played around with the line-height value in 'em' until I could make sure that no pixel of the last visible line of text in the div is cut off. Then I switched browser/OS and got totally different results - line-heigths are always different. Am I using the wrong approach here? Is it even possible to achieve in CSS what the design folks require in their Photoshop layouts? Suggest instead that you get them away from designing in Photoshop - because Photoshop is not dynamic about its presentation but is static - the opposite of the web. I'd set the box height in ems, because then you've got a measure that's connected with the font size used. You can set your line height indepently of units, so you can calculate a box height to hold X number of lines - I'd think that if you're using 1em font size and a line height of 1.4, a box to hold 10 lines of text would be 10x1.4 = 14 ems. I've not tested this, but I think that would make the 10th line of text be right at the bottom of the box, not partially cut off by falling outside the fixed height of the box. Plus the box height would still be usable for visitors who've increased or decreased their font size (another feature of the web that makes Photoshop a poor design choice). David Jones, Content Coordinator, Customer Relations Information and Technology Management - KL PS, (808) 948-5830 MMS hmsa.com made the following annotations. -- This electronic message is not an offer to contract, the acceptance of an offer to contract, or in any other way intended to contractually obligate HMSA; neither is it intended to change the terms of any existing contract unless specifically so stated. The information contained in this electronic message (or attached hereto) is intended only for the individual or entity to which it is addressed and may contain information that is confidential and protected by law. If you are not the intended recipient of this e-mail, you are cautioned that use of its contents in any way is prohibited and may be unlawful. If you have received this communication in error, please notify the sender immediately by e-mail or telephone and return the original message by e-mail to the sender or to [EMAIL PROTECTED] We will reimburse you for any cost you incur in notifying us of the errant e-mail. Thank you. · == __ 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] Trouble with line-height and div overflow:hidden
On 22.08.2008, at 23:04, Chris Akins wrote: Setting up a container that's fixed in BOTH height and width is failing to design for the web, in my opinion. It's design for print. I fully agree 100%. It's not my call however. The div height/width is given and I have to deal with it. etc. These variables pretty much dictate that if your content is important at all, then your containers for that content should grow and shrink with said content. Again, I agree. In this particular case, however, the content isn't _that_ important I guess. In the div there's an image and some teaser text describing the image - both rendered as a link to the content in full view (different page). Regards, Marcel -- Marcel Stör, http://www.frightanic.com Blog: http://frightanic.wordpress.com Skype: marcelstoer __ 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] IE6 Stacking Issue or Something Else?
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
discuss.org] On Behalf Of Chris Akins
Sent: Friday, August 22, 2008 2:11 PM
To: [EMAIL PROTECTED]
Cc: CSS-D List
Subject: Re: [css-d] IE6 Stacking Issue or Something Else?
Apologies if I was playing around with the stylesheet when you looked
at it, but margin-left:200px is already in the #content rules. I
don't think I had modified that rule, but I've been trying quite a few
things in my efforts to understand what the issue is.
Adding the IE6-only specification below doesn't seem to add anything.
Works fine on my end (using IE Dev Toolbar)
Am I missing something? I did try it, though, and no dice.
As you say, in negMargin.css you have this:
#content {
background:#EAECF7 url(images/midBgndL.gif) repeat-y scroll 1px 50%;
margin:20px 20px 40px 200px;
padding-bottom:25px;
position:relative;
}
But on the last line you have this:
* html #content {margin-left:207px;}
So if you didn't plug the rule I suggested *after* that last rule then it is
normal that nothing changed.
I hadn't checked your styles sheet before now (just used the dev toolbar),
but of course knowing now that you have that rule in there you would not
have to add anything, but instead remove that last rule.
--
Regards,
Thierry | http://www.TJKDesign.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] Testing CSS for higher screen resolutions
Hi. I'm new to the list, and relatively new to CSS, as well. I've taught myself quite a bit in the course of designing my website, but there is one problem I haven't been able to overcome: My screen resolution is 1024x768, and the content of my site fits that window nicely. I want to test how it will behave on a monitor with higher resolution. There will be plenty of unused space on a widescreen monitor, and I need to see how the content of the site is displayed in that environment. There are questions I can't answer in my own browser, such as - Does it center everything appropriately, or is everything left-justified? - Are the background images carried all the way throughout, or are there big white stripes on each side? - Are the three columns close together or spaced way apart? Since a new laptop is not currently in the budget (darn!) is there some CSS trick I can employ to trick the system into thinking the resolution is higher than it is? Even if I have to use the horizontal scrollbar to see everything, that's fine. Thanks! Lisa -- http://lisaclarke.net __ 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] Testing CSS for higher screen resolutions
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] discuss.org] On Behalf Of Polka Dot Cottage Admin Sent: Friday, August 22, 2008 3:21 PM To: css-d@lists.css-discuss.org Subject: [css-d] Testing CSS for higher screen resolutions Hi. I'm new to the list, and relatively new to CSS, as well. I've taught myself quite a bit in the course of designing my website, but there is one problem I haven't been able to overcome: My screen resolution is 1024x768, and the content of my site fits that window nicely. I want to test how it will behave on a monitor with higher resolution. There will be plenty of unused space on a widescreen monitor, and I need to see how the content of the site is displayed in that environment. There are questions I can't answer in my own browser, such as - Does it center everything appropriately, or is everything left-justified? - Are the background images carried all the way throughout, or are there big white stripes on each side? - Are the three columns close together or spaced way apart? Hi Lisa, There is no need to *see* the site, these questions could be answered just by looking at the styles sheet. -- Regards, Thierry | http://www.TJKDesign.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] Testing CSS for higher screen resolutions
On 2008/08/22 18:20 (GMT-0400) Polka Dot Cottage Admin apparently typed: I'm new to the list, and relatively new to CSS, as well. I've taught myself quite a bit in the course of designing my website, but there is one problem I haven't been able to overcome: My screen resolution is 1024x768, and the content of my site fits that window nicely. I want to test how it will behave on a monitor with higher resolution. There will be plenty of unused space on a widescreen monitor, and I need to see how the content of the site is displayed in that environment. There are questions I can't answer in my own browser, such as - Does it center everything appropriately, or is everything left-justified? That depends on your CSS and your intent. - Are the background images carried all the way throughout, or are there big white stripes on each side? Same thing. - Are the three columns close together or spaced way apart? Example URL? Since a new laptop is not currently in the budget (darn!) is there some CSS trick I can employ to trick the system into thinking the resolution is higher than it is? Even if I have to use the horizontal scrollbar to see everything, that's fine. The trick is to not use 1024x768 in the first place, at least not exclusively. It's not necessary, and will constrain your mindset into a comfort zone rut. Even in Windows you can just change the resolutions as often as needed without rebooting. You can do this too in Mac and Linux. But in Linux, you can have 2 or 3 or 4 or more resolutions simultaneously - such as 1024x768, 1400x1050 1920x1440, all on a single CRT display. This you do by configuring as many custom user configurations as you wish, and logging in as each of those users separately on virtual screens, and hot-key switching among them as often as you want. Of course, you'll only be seeing the relative differences, not realistic ones. Realistic would mean changing to a display size appropriate to each selected resolution along with each logical switch. If you think this isn't simple enough, that's probably true. But what's also true is there's no need for you or your page design to care about resolution whatsoever. The web is naturally elastic, and really does not work well with the static magazine pages that most web sites amount to, at least, not outside a narrow range of anachronistic and low resolutions. With proper CSS, everyone can see more or less the same thing without regard to their display size or screen resolution. Various terms are used to describe this design method, such as elastic or fluid. Of course, elastic or fluid is not what most web sites do, so it takes a bit of work to find good example sites. Some elaborate ones can be found at http://cssliquid.com, while some more basic demos can be found in http://sperling.com/ http://fm.no-ip.com/auth/Sites/dlviolin.html http://fm.no-ip.com/auth/Sites/ksc/ -- Love is not easily angered. Love does not demand its own way. 1 Corinthians 13:5 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Testing CSS for higher screen resolutions
My answer: If you don't mind the wait, http://browsershots.org/ will give you some options and be able to actually see how it renders. My 2 cents... I am with you Lisa, I like to see how things look at different resolutions and such. Not saying the previous information was wrong at all, but some of us just aren't as versed in CSS, and don't know that we made a mistake/error just by looking at it. What was previously posted is correct, and *should* work, but I am a visual person. Ronald Reagan said Trust, but verify.. I trust that the CSS is correct, but I want to verify that it works before I release my site to the world realizing I overlooked 1 style and now look like an absolute fool. Two cents poorer, Keith D. __ 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] Testing CSS for higher screen resolutions
Here is what the left side looks like on my 1928 wide monitor. http://www.jimdavis.org/polkadot.jpg You may want to consider centering the header content for viewing on wider monitors. Jim www.jimdavis.org On Fri, Aug 22, 2008 at 3:20 PM, Polka Dot Cottage Admin [EMAIL PROTECTED] wrote: Hi. My screen resolution is 1024x768, and the content of my site fits that window nicely. I want to test how it will behave on a monitor with higher resolution. __ 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] Testing CSS for higher screen resolutions
Polka Dot Cottage Admin wrote: My screen resolution is 1024x768, and the content of my site fits that window nicely. I want to test how it will behave on a monitor with higher resolution. Lisa Viewing your page in Opera at zoom 90%, 80%, 50% will give you an idea of how it might look at a higher resolution. You're not doing too bad on this end, considering I run Mac Opera at minimum-font size 32 px. -- A thin red line and a salmon-color ampersand forthcoming. 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/
