[css-d] Layout Basics: Floats, Position, Overflow
Hello,
I have a question involving the effect of the position and overflow
properties on floats. My example is a simple two-column layout. The left
column, called Main_Nav, is floated left and assigned a width (270px); the
right column, called Details, not floated nor assigned a width, is given a
left-margin equivalent to the width of the navigation column. In IE7 and
various versions of Firefox on PC this works to create a liquid layout in
which the Details column expands to fill the width of the browser unoccupied
by Main_Nav. Here are the CSS rules for these columns:
#Main_Nav
{
float: left;
width: 270px;
display: inline;
overflow: hidden;
}
#Details
{
margin: 0 0 0 270px;
position: relative;
overflow: hidden;
}
Here is an example of this layout:
http://maui.pedrera.com/Clients/codebase/cpr/
Now I realize there are things on this page not exactly kosher from a
standards-compliant perspective. We are using a table to provide a big easy
control for people to toggle the visibility of the Main_Nav column. But the
thing I wanted to ask about concerns the necessity of setting the position
and overflow properties on the Details column. This column needs to contain
.NET controls which render a variety of UI widgets such as draggable list
items and collapsible panels and whatnot. I discovered that unless I
applied the position and overflow properties as above the layout would break
in IE7 and IE8 when a user interacted with these widgets.
Although satisfied that the problem appears to have been fixed, I am curious
to know why this was necessary. I realize this involves some very basic
concepts. I would appreciate it if anyone could let me know whether there
is something incorrect about this layout.
Thanks,
John
John Gribben
Pedrera, Inc.
215 348 7446
john.grib...@pedrera.com
http://www.pedrera.com http://www.pedrera.com/
__
css-discuss [cs...@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] IE7 Margin Jumps On Hover
Hello,
I'm having a problem similar to the one posted with the subject Odd Jumping
Behavior on Hover - IE Only of Course.
Here is my example:
http://rincon.pedrera.com/clients/pedrera/standards/Services_Philadelphia_we
bsite_design_development.asp
In IE7, when I hover the cursor over any of the links in the secondary
navigation column (the grey column on the left), the callout box that is
floated to the right of the main content area (the callout with the subhead
Ready to learn more?) jumps to the left. The left margin that is applied
to the callout disappears, and the callout is jammed against the copy.
This margin leap is triggered by the application of a background image to
the span tag that surrounds the secondary navigation text when it's parent
anchor tag is hovered over:
#secondarynav.services ul li a:hover span
{
background: url(../Images/Icon_NavSecArrow_Services.gif) 1.8em
0.3em no-repeat;
}
If I comment out the above background change, the margin leap does not
occur.
Does anybody know of a way to prevent this leap from happening?
Thanks,
John
John Gribben
Pedrera, Inc.
215 348 7446
[EMAIL PROTECTED]
http://www.pedrera.com http://www.pedrera.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] IE Printing Problem
Hi everyone, I'm running into a problem getting a site to print out correctly in IE. The first page is okay, but the succeeding pages are a disaster (the main content is broken into several pages and then disappears). We created a print style sheet that hid mostly everything but the main content, but the client wants the appearance of the screen styles to persist in printouts:-(. Research indicates that removing floats should fix this problem, but that's not working for me - and I don't know how I'm going to be able to retain the layout if I lose the floats. Does anybody have any experience with this issue? Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com/ http://www.pedrera.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] Suckerfish Drop-Down breaks on IE6
I removed the extraneous z-indexes as you advised, and removing the positioning from the float adjacent to the navigation seems to have fixed the problem. I'm not sure if this is what you meant by setting position and z-index from the outside. Take care, John Hi, no, I meant setting position:relative and z-index on the navigation #primarynav itself. regards, Ingo -- http://www.satzansatz.de/css.html Ingo, Thanks a lot for your clarification. I made the change to the #primarynav div, and now it works! http://windows.pedrera.com/clients/greenbaum/nav.asp John __ 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] Suckerfish Drop-Down breaks on IE6
John Gribben wrote: http://windows.pedrera.com/clients/greenbaum/nav.asp There is a conceptual problem and a bug. z-index does apply to positioned elements only. Some of your z-indexes are set on non-positioned elements. Remove them, they are distracting. From the inside: The second level has z-index+position, but it is nested inside positioned elements without z-index, and finally sitting inside a float. The bug: both the navigation and the following div are floats. The positioned element without z-index does not escape from this float in IE, but locks the descendant positioned elements with z-index in. In IE, you'll have to set position:relative and z-index from the outside. Ingo -- http://www.satzansatz.de/css.html Hi Ingo, Thanks a lot for your help. I removed the extraneous z-indexes as you advised, and removing the positioning from the float adjacent to the navigation seems to have fixed the problem. I'm not sure if this is what you meant by setting position and z-index from the outside. Take care, John __ 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 Drop-Down breaks on IE6
Hello, I'm trying to make a sucker-fish-style drop-down menu (a hybrid that also uses sprites for the top level items), but it's not working on IE6. There seems to be a problem with the content div that sits immediately below the menu. If I isolate the menu from all other code on the page, it works fine. But if I place just one div beneath the menu, on IE6, the drop-down disappears after my cursor passes over the first menu item. It's as if the z-index of the adjacent item exceeds that of the drop-down, although this is not the case. Here is the page with the example: http://windows.pedrera.com/clients/greenbaum/nav.asp Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.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] Safari a:hover problem
Hello, Does anybody know how to fix the bug in Mac Safari that prevents the display of a:hover effects in anchors placed within list items? I've tried setting both the parent ul and li to display: block and position: relative, as recommended by a couple of Googled articles, but this hasn't helped. Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.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] Safari Overflow Bug
Hello everybody, I am having a problem on Mac Safari with a navigation list that uses CSS sprites: http://windows.pedrera.com/Clients/omnia/Index.asp On Mac Safari, the drop-down menus beneath the primary navigation are inaccessible because they are overlapped by the anchor areas of the navigation. If you mouse over the drop-downs, you activate the hover style of the navigation items. It appears that the overflow property, set to hidden on the primary navigation stuff, is being ignored. Does anybody have any experience with this issue? Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.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] IE Navigation Flicker (non-bg-image related)
Hello, I'm trying to put together a liquid primary navigation panel (five items, with each li assigned 20% width), and it is working fine on Firefox, but on IE 6-7, the last item on the right is flickering: http://windows.pedrera.com/clients/pedrera/nav/ It seems as though IE considers the last item to be just on the edge of the acceptable width for the list. Does anybody know how to address this problem? Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.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 Content Duplication
Most probably it is related to the double html comments in your file. Remove them. See PIE for a start. http://www.positioniseverything.net/explorer/dup-characters.html We see those duplicated characters in tight float settings, near elements with display:none, or hidden inputs, but mostly after double html comments. Sometimes a float plus single html comment will do. Whether such an trigger takes two or more characters, is a little academic. Ingo -- http://www.satzansatz.de/css.html That was it! Thank you very much Ingo! And thanks to everybody who responded to my query! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 Content Duplication
Hello everybody, I'm having a weird problem with IE6. I am coding a page with a series of nested divs. In IE6, a fragment of the content in the last div is duplicated at the bottom of the series. Here's the page: http://windows.pedrera.com/clients/tierney/bayerpmp/newsletterhtml/ At the bottom of the page, part of the final list item (Pest Control) is weirdly duplicated. Has anybody experienced this before? Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Disappearing Primary Nav
Hi everyone, A client is unable to view the primary navigation on this site: http://www.albaadvisors.com/ They claim to be having this problem with the latest version of Firefox on XP. I've tested with this browser and don't have the problem. Can anybody spot something I am doing wrong? Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Type Sizing
Hello everybody, I've been struggling with reliable alternatives to pixel-based type sizing methods, but I haven't been able to find any. I've read many articles on this subject. It's perhaps the aspect of standards-based coding that for some reason I find the most confusing. Here is an example: http://windows.pedrera.com/clients/omnia/temp/ With this template, I used a percentage (62.5%) to set the root parent size for the body and then used em units to set the size of all child elements. This seemed to work well on IE 7, Firefox 2, and Safari 3 on my system (Win XP 2002, SP2), but on my boss's machine (which is, I think, basically identical to mine), the sizing method doesn't work on IE 7. The text is too large, as if the Text Size were set to Larger. I checked his browser settings - the Text Size was set to Medium (as it was for my browser). Am I missing something? We have the same versions of IE, our Text Size settings are the same, but his browser is rendering the type larger than mine by an order of magnitude. Thanks, John John Gribben Pedrera, Inc. 215 348 7446 [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Framesworks
Hello, I've been reading the article in ALA about CSS Frameworks, and I was wondering if there is any consensus in the group about abstracting style sheets into multiple files. We haven't done that yet, although it seems like a good idea (and an upcoming project would benefit from it). Is this a common practice? How serious a drawback is the multiplication of HTTP requests? Thanks, John John Gribben Pedrera, Inc. [EMAIL PROTECTED] http://www.pedrera.com http://www.pedrera.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Feedback Requested
Thanks to all who responded to my post! This list continues to be a valuable source of support. Take care, John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Feedback Requested
Hello, I really appreciate the help I've received from this list. Can anybody give me feedback on this site: http://windows.pedrera.com/clients/dss/ I don't have any specific questions. I was just wondering if anybody can catch anything radically off. We're targeting MSIE 6/7 and Win/Mac Firefox + Netscape. Thanks, John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox Wmode Bug
Hello, Does anyone have any experience dealing with the bug in Firefox that disables mouseover events in Flash when the animation file is placed in an absolutely positioned element and the Wmode parameter of the animation is set to transparent or opaque? I've built a page where an animation is positioned beneath some other elements, and a button is not clickable in Firefox. Thanks, John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floating Divs Over Flash
Hello, Does anyone have any experience floating HTML elements over Flash via absolutely-positioned divs? I know that this is possible with the most up-to-date browsers, but I'm not aware of how wise this is in terms of backward-compatibility. Can anyone point to successful examples of this? Thanks, John __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
