Re: [css-d] can an absolute box inside a relative one expand it?
My security software forbids any page located at http://www.geocities.ws/ to load. May I suggest a new hosting provider if you want people to look at the code. Strange. Is geocities.ws a host for malware? In any case, John D tipped me on another service. Here is what I'm trying to achieve: http://sweepslate.vacau.com/absolute-in-relative/desired-result.png here is my failed effort: http://sweepslate.vacau.com/absolute-in-relative/expand-failure.html and here is another failed effort to use z-index and negetive margin with float: http://sweepslate.vacau.com/absolute-in-relative/float-test.html A pointer about absolute and fixed positioning. The only way to counter elements removed from the normal flow is to add padding to something that equal the heights and widths of positioned elements. In you case, this would be the content div. And in the meantime, leave me some time to experiment with this. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can someone explain?
Kevin - I understand the border now. The text was calculated to be 19.2px by
the browser, so adding a border made it 20.2, and the 2nd list element didn't
slide to the left. Your explanation has helped a lot. Thanks again.
Sara
On May 17, 2011, at 6:58 PM, Kevin A. Cameron wrote:
I think this makes sense. Because the lis are floated the uls have 0
height, so they both start at the same location. When you add negative margin
to the first li it's pulled above the containing ul. The second li when
floated left only sees the beginning of the ul and then is pulled up, and
thereby overlapping.
I'm sure someone here knows more about box model implementations by browsers
and could provide a more technical answer.
Kevin
On Tue, May 17, 2011 at 12:13 PM, Sara Haradhvala har...@comcast.net wrote:
Hi Jim,
Margins and padding are 0.
Here is the HTML:
div id=menu
ul
li
a href=#a1/a
a href=#a2/a
/li
/ul
ul
li
a href=#b1/a
a href=#b2/a
/li
/ul
/div
The CSS is:
* {margin:0; padding:0}
#menu {margin-top:20px}
ul {list-style:none}
ul * {float:left;}
li {margin-top: -20px}
Thanks,
Sara
On May 17, 2011, at 2:11 PM, JWN wrote:
Morning Sara
You wrote
Hi,
I have two unordered lists, where each list has 1 list item with 2 links.
If I float the list items and anchors left, all 4 anchors line up
horizontally as expected. If I add a margin to the list items (but not the
anchors), all anchors move down and are still horizontally lined up as
expected. But if I put a negative margin on the list items instead, the
anchors move up as expected, but the anchors from the 2nd list overlay
the anchors from the first list instead of sitting to the right of them.
I'm not understanding why this is, and hope someone can explain.
I'm using firefox 4 on the Mac.
Thanks,
Sara
Just a guess but you might try zeroing out margins and padding on the body.
body {
margin:0;
padding:0;
}
Can you provide a link to an actual page or at least a test page showing
the problem? It's always easier to help when we can see what is going on
with the rest of CSS / xHTML.
Best
Jim Nannery
www.oldcurmudgeon.net
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6,7 8 Float problems - Can anyone help
Hi I have been searching the archives and trying out the IE bug fixes but it's still bugging me. The problem occurs in IE6, 7 and early 8 the right hand navigation drops down below the main content, common enough problem I thought, I have tried clear properties, removed negative margins enlarged the page/wrapper size, looked into 3px jog and various other float drop solutions, the site validates ok and works well on all other browsers, so can anyone advise me were I am or have gone wrong? the url is http://www.appledore-letting.co.uk Many thanks Mark T __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6,7 8 Float problems - Can anyone help
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css- discuss.org] On Behalf Of sodit Sent: Wednesday, May 18, 2011 7:37 AM To: css-d@lists.css-discuss.org Subject: [css-d] IE6,7 8 Float problems - Can anyone help Hi I have been searching the archives and trying out the IE bug fixes but it's still bugging me. The problem occurs in IE6, 7 and early 8 the right hand navigation drops down below the main content, common enough problem I thought, I have tried clear properties, removed negative margins enlarged the page/wrapper size, looked into 3px jog and various other float drop solutions, the site validates ok and works well on all other browsers, so can anyone advise me were I am or have gone wrong? the url is http://www.appledore-letting.co.uk Many thanks Mark T From what I can see you have two issues: 1) you have padding-left for the content id set to 24px even though you only have 23px available 2) you have sidebar2 and the clear div outside of the page wrapper. Fix these and you should be good to go Thank you, Marc Hall HallMarc Websites 610.446.3346 http://www.hallmarcwebsites.com/ Spread the word about my services and earn money! Contact me for details. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Borders oddity when page viewed in Chrome
On 5/3/2011 12:45 AM, css-d-requ...@lists.css-discuss.org wrote: On May 1, 2011, at 6:16 AM, Keith Purtell wrote: I noticed the following problem today when I view my splash page in Google Chrome. The lower borders in the navigation box render normally, but all vertical and topmost borders are too light. I'm baffled. http://www.keithpurtell.com/kthings/chrome.png Interesting? Which OS is that ? And which version of Chrome ? Looking at the screenshot, the lower borders are rendered twice - once the expected color, once a lighter shade. Looks more like an issue with graphics rendering libs. it is like the borders are not painted hooked on the pixel grid (painted between 2 pixels). Does it changes if you resize the window slightly (making the width an even or odd number of pixels) ? #navigatex is set to have a width of 604px (even), but due to margin: auto, it doesn't always land exactly on the pixel grid, depending on the width of the parent blocks(s)/viewport. Each LI has a computed height of 109px (odd number !) on my system. Philippe, David, et al... Sorry for the ridiculously tardy reply. Something big came up. I took all the suggestions and reworked the style sheet wherever it seemed appropriate. The results were successful. Thank you! -KP __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can someone explain?
Oh LOL! Serves me right for using an ol... Kevin On Tue, May 17, 2011 at 5:44 PM, Philippe Wittenbergh e...@l-c-n.comwrote: On May 18, 2011, at 9:26 AM, Kevin A. Cameron wrote: While testing I came across this weird bug/artifact. the contents of the ol lis (1 2 3) are shown twice: http://www.kacevisual.com/files/float-test/float-test.html Does anyone understand why? They are not really rendered twice. Change the textual contents of your ol li elements to read ‘x’ ‘y’ ‘z’ instead of ‘1’ ‘2’ ‘3’ and you’ll see what is happening. The first digit you see in your test case is the list marker, the second one is the textual content of the li. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] chrome css problem: border around link not respected
thx, tried again with inline-block and this solves the issue without causing too much trouble in IE7 :) On Wed, May 18, 2011 at 6:40 AM, David Hucklesby huckle...@gmail.comwrote: On Wed, May 18, 2011 at 4:12 AM, David Hucklesbyhuckle...@gmail.comwrote: On 5/17/11 6:07 PM, Paulo Silva wrote: Hi all, I have this small testcase: http://jsfiddle.net/sV8js/ [...] I don't know if that's a bug or not. But you will apply more of your CSS to those links if you make them display: inline-block; At the moment, vertical padding is not applied. I agree your result is unexpected. -- Cordially, David On 5/17/11 9:25 PM, Paulo Silva wrote: Sorry, I forgot to mention I found this bug exactly because I'm removing inline-block from my css, so that's what I want to avoid (for IE7 compatibility) :) Why? display:inline-block gives IE 6 and 7 hasLayout which behaves very much like inline-block when applied to elements that are inline - as your links are... -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
