[css-d] Problem with overlapping divs
Dear all I have strayed away from my tried and trusted layout to something new and am having a problem with overlapping. If some kind sole could have a look at: http://www.digitalplot.co.uk/cutandthrust/ I would very much appreciate it. As there are only two menu items I wanted to keep them outside the main body so they did not use valuable space but, when you shrink the browser window, they flow over the rest of the page. I really want the menu to remain in the green area. What I would like it for the page to shrink no further that the edge of the menu as in: http://www.digitalplot.co.uk/cutandthrust/perfect.jpg The css is at http://www.digitalplot.co.uk/cutandthrust/text_style.css I hope there is a solution but am not over optimistic but any workaround would be much appreciated. I am on the digest so please could anyone email me directly. Many thanks Annie Anne Pennington [EMAIL PROTECTED] http://www.digitalplot.co.uk __ 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] Two-column fluid layout
Greetings, all, I'm trying to create a two-column, fluid layout using the method described in this article: http://www.alistapart.com/articles/multicolumnlayouts/ (In short, the method involves creating the illusion of equal-height columns by making a div with a wide left border and then floating another div over that border.) I'm running into a few problems, to wit: 1. In Firefox (v.2.0.0.11), the contents of the sidebar div (called #menu in my code) are not showing up. 2. In IE7, the position of #content fluctuates as the width of the browser window is changed. 3. In IE6, the contents of #menu aren't showing up and the left edge of #content is cut off. The HTML is here: http://imp.purplelagoon.org/current/index.shtml CSS is here: http://imp.purplelagoon.org/css/imp.css CSS exceptions for IE6 are here: http://imp.purplelagoon.org/css/iestyle.css Any ideas? Thanks, Kristen [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] vertical-align property examples/info
Hi all, Can anyone point me to good sources of info and simply examples for uses of the vertical-align property other than TD elements? I've looked at the CCS 2.1 spec at http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align, but don't quite understand what is considered a inline-level element for applying vertical-align properties. So, I still end up falling back on table constructs in certain cases where I am trying to apply a vertical-align. This usually happens in forms, and I'm trying to get away from using tables for drop back and punt layout control. Best, Rob __ 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] vertical-align property examples/info
Hi Bob,have a look at http://www.ibloomstudios.com/articles/vertical-align_misuse/ Ernie :) From: [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Date: Sun, 20 Jan 2008 10:16:36 -0500 Subject: [css-d] vertical-align property examples/info Hi all, Can anyone point me to good sources of info and simply examples for uses of the vertical-align property other than TD elements? I've looked at the CCS 2.1 spec at http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align, but don't quite understand what is considered a inline-level element for applying vertical-align properties. So, I still end up falling back on table constructs in certain cases where I am trying to apply a vertical-align. This usually happens in forms, and I'm trying to get away from using tables for drop back and punt layout control. Best, Rob __ 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/ _ Connect and share in new ways with Windows Live. http://www.windowslive.com/share.html?ocid=TXT_TAGHM_Wave2_sharelife_012008 __ 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] BG Image doesn't sit correctly in my div when I have a form inside (Firefox problem)
hello everyone, I have a contact page which has a basic form. At the moment I have each page with a content div with a background image at the bottom. All looks fine on the other pages. But when I use the form elements on the content page within the contents div the background seems to sit at the bottom of the form and not the contents div. This seems to work ok in safari but doesn;t work in Firefox, can someone help please.. here is the link: http://www.precociouscollective.com/testfolder/contact.php -- 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] BG Image doesn't sit correctly in my div when I have a forminside (Firefox problem)
This seems to work ok in safari but doesn;t work in Firefox, can
someone help please..
Firefox is setting the background image at the bottom of the content div.
You need to change your definition for the fieldset.submit to use padding
instead of margin in feedback_contact.css:
fieldset.submit {
border-style:none;
padding-bottom:10px;
}
Regards,
Kepler Gelotte
http://www.neighborwebmaster.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] beginner's issues with spacing
I've got a homepage with a header which is a jpg. I'm using HTML Kit to write the code and in that, and in IE there is no space above and below the header jpg. But in Firefox and Opera there is space above and below. I'm doing something wrong but I can't think what it is. Also the bottom jpg which is in a div called 'theories' has a load of space above it in Firefox but not in IE. And the footer is bigger in Firefox, than in IE. Here is the page: http://www.revise-now.co.uk/A2Comms/ and the CSS is http://www.revise-now.co.uk/A2Comms/new.css Thanks for any help. (And is there a way to get HTML Kit to do its initial preview in Firefox?) __ 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] beginner's issues with spacing
Try adding a universal selector at the beginning of your css to zero out all
margins and paddings across browsers. Different browsers have different
default margins and padding, so this is a good way to clear your slate at
the beginning. Try something like
* {margin:0; padding:0;}.
Valerie
On Jan 20, 2008 5:24 PM, Stuart Walsh [EMAIL PROTECTED] wrote:
I've got a homepage with a header which is a jpg. I'm using HTML Kit to
write the code and in that, and in IE there is no space above and below
the header jpg. But in Firefox and Opera there is space above and below.
I'm doing something wrong but I can't think what it is.
Also the bottom jpg which is in a div called 'theories' has a load of
space above it in Firefox but not in IE.
And the footer is bigger in Firefox, than in IE.
Here is the page:
http://www.revise-now.co.uk/A2Comms/
and the CSS is
http://www.revise-now.co.uk/A2Comms/new.css
Thanks for any help. (And is there a way to get HTML Kit to do its
initial preview in Firefox?)
__
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] beginner's issues with spacing
Stuart Walsh wrote:
I've got a homepage with a header which is a jpg. I'm using HTML Kit to
write the code and in that, and in IE there is no space above and below
the header jpg. But in Firefox and Opera there is space above and below.
I'm doing something wrong but I can't think what it is.
Adding padding-top: 1px; to ruleset #header will collapse the margin [1]
The space below the header image is a gap caused by top margin of the
nav ul.
Adding margin-top: 0; to ruleset #topnav ul will close it.
Also the bottom jpg which is in a div called 'theories' has a load of
space above it in Firefox but not in IE.
This may help:
#theories
{
/*margin-top : 3em;*/ - delete
/*padding-top : 2em;*/--delete
padding-top: 5.75em; add tweak
}
And the footer is bigger in Firefox, than in IE.
Kill the margin-top on #footer p. Add margin-top: 0; to selector #footer p
Here is the page:
http://www.revise-now.co.uk/A2Comms/
and the CSS is
http://www.revise-now.co.uk/A2Comms/new.css
Thanks for any help. (And is there a way to get HTML Kit to do its
initial preview in Firefox?)
Also, add font-size: 100%; to the body declaration to kill a
font-scaling bug when setting fonts in em's in IE (causes IE to go goofy
at any setting other than text-size medium.
The page is wider than intended in IE6.0. I am not sure of the cause.
And I do not have time to download your files. I guess that it may be
doubling a margin?
Try adding display: inline; to selector #culture. I f this does not
correct the problem, write back.
[1]
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
HTH.
Best,
~dL
PS Dunno anything about HTML Kit.
--
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/
[css-d] Expanding container div
I thought my container div [#artbody] would expand only to fit the content occupying it, but it expands to fill a much larger area. What can I do to make it function as I want it to? -- Kim Brooks Wei 201.475.1854 http://thewei.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] Expanding container div w/url
I thought my container div [#artbody] would expand only to fit the content occupying it, but it expands to fill a much larger area. What can I do to make it function as I want it to? http://thewei.com/china/zodiac.php -- Kim Brooks Wei 201.475.1854 http://thewei.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] Expanding container div w/url
On Jan 21, 2008, at 10:31 AM, Kim Brooks Wei wrote: I thought my container div [#artbody] would expand only to fit the content occupying it, but it expands to fill a much larger area. What can I do to make it function as I want it to? http://thewei.com/china/zodiac.php What do you mean ? The div is explicitly set to be 100% wide (that is, as wide as the parent block element, in this case body). It does that, correctly. And it is as tall as all the content inside of it: a h5, a table, a div and a p. Note that in a decent browser, the margin-top on the h5 is collapsing through the #artbody div. This doesn't happen in iExploder, as #artbody has 'layout'. 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] Problem with overlapping divs
Anne Pennington wrote: Dear all I have strayed away from my tried and trusted layout to something new and am having a problem with overlapping. If some kind sole could have a look at: http://www.digitalplot.co.uk/cutandthrust/ I would very much appreciate it. As there are only two menu items I wanted to keep them outside the main body so they did not use valuable space but, when you shrink the browser window, they flow over the rest of the page. I really want the menu to remain in the green area. There are no real workarounds, because the containers aren't interconnected. As you can see here... http://www.gunlaug.no/tos/alien/ap/test_08_0121.html ...the overlapping _can_ be prevented on narrow windows, as the menu stays in the green area and the main container centers on wide windows - 1240 wide and beyond. However, the whole line-up gets skewed on narrow windows, because only #container acts on the presence of #nav and the other elements center in the window on their own. If you relax on the centering then the line-up is easy, as the main containers can be floated left with a suitable margin-left to keep them lined up. 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] Two-column fluid layout
Murphy, Kristen Anne wrote: I'm trying to create a two-column, fluid layout using the method described in this article: http://www.alistapart.com/articles/multicolumnlayouts/ (In short, the method involves creating the illusion of equal-height columns by making a div with a wide left border and then floating another div over that border.) I'm running into a few problems, to wit: 1. In Firefox (v.2.0.0.11), the contents of the sidebar div (called #menu in my code) are not showing up. Delete 'overflow: hidden' on #container, as nothing can show up outside #container's content-area with that property/value present. 2. In IE7, the position of #content fluctuates as the width of the browser window is changed. #container isn't given a width, so as a float it shrink-wraps and jumps slightly in width with the width of #content - length of the text-lines. Same jumping appears in Opera (for the same reason), btw. 3. In IE6, the contents of #menu aren't showing up and the left edge of #content is cut off. Again the effect of 'overflow: hidden' on #container. The various versions of IE/win have several bug-variants related to 'overflow: hidden' and 'position: relative', so what one version does says nothing about what the other versions may come up with. Style with care. http://imp.purplelagoon.org/current/index.shtml The faked equal height columns solution using borders, needs very precise and complete styling to really work across browser-land. I've used it for years - long before the ALA article came out... http://www.gunlaug.no/contents/wd_1.html ...although I prefer the (even more complex) column outline version... http://www.gunlaug.no/contents/wd_additions_26.html ...which is the same but uses wide paddings instead of wide borders. I recommend a re-read of the ALA article, to get a thorough understanding of all the little details needed for reliable and stable use of the method. Once you've got it it's a real problem-solver. 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] Expanding container div w/url
On Jan 21, 2008, at 3:08 PM, Kim Brooks Wei wrote:
What do you mean ?
The div is explicitly set to be 100% wide (that is, as wide as the
parent block element, in this case body). It does that, correctly.
Philippe, the div expands to the body width whether I set the width
to 100% or not. The width is now not specified and the same thing
happens.
That is normal and the default behaviour for a block level element.
http://www.w3.org/TR/CSS21/visudet.html#propdef-width
I suspect that what you want is for the div to be as wide as its
content, behaving like a table would do: shrink-wrapping. That div
won't do that be itself, though. Without declaring a width:
You could set it to 'display:table':
#artbody {display:table;}
but that won't work in iExploder.
Or you could float it, but then it won't centre.
Or you could declare a width on it, but no 100%. e.g
#artbody {width: 50em; margin:auto;}
#artbody has 'layout'
I'm sorry, I didn't get this reference.
http://www.satzansatz.de/cssd/onhavinglayout.html
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] Expanding container div w/url
At 12:19 PM +0900 1/21/08, Philippe Wittenbergh wrote: http://thewei.com/china/zodiac.php What do you mean ? The div is explicitly set to be 100% wide (that is, as wide as the parent block element, in this case body). It does that, correctly. Philippe, the div expands to the body width whether I set the width to 100% or not. The width is now not specified and the same thing happens. #artbody has 'layout' I'm sorry, I didn't get this reference. -- Kim Brooks Wei 201.475.1854 http://thewei.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] Site check please :Arun Dixit:
Re: www.arundixit.com Firefox displays as intended. IE6 and IE7 do not display header background. Additionally, IE6 does not center content.s of #inner. Appreciate advice/ suggestions for above. Also, a general site check please. Thanks. -- Best, JL Jehangir Larry __ 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/
