Re: [css-d] Div's not lining up in IE (any :P)
Gunlaug_Sørtun wrote:
Mike Smith wrote:
Temp site: http://www.grum.com/temp/j/index.html
I have a div floated left and it's supposed to line up vertically
with the div in the content area. It does just that in FF and
Netscape9, but IE6 and IE7 have the left floated div a little higher
than the content one.
It is a collapsing margins[1] case, where the original 20px margin-top
on #spotlight escapes the #content div in non-IE browsers, while IE/win
contains that margin within the #content div and thereby pushes
#spotlight that much down relative to the left div.
One way to fix the line-up across browser-land, is therefore to zero out
the escaping margin...
#spotlight {
margin: 0 40px 0 230px;
}
For testing-purposes, adding...
#content {
padding-top: 1px;
}
without zeroing out the margin-top on #spotlight, will make all
browsers contain the margin and push #spotlight down.
regards
Georg
Adding padding-top to the #content div will actually accentuate the gap though
this will even things out across browser-land. To achieve the line up in IE
like the other browsers it's better to allow for greater margin collapse [1].
This will work as long as the #content div doesn't have layout caused by a
hasLayout trigger [2].
#content {
margin: 10px;
margin-top: 20px; /* add, same as height of top margin of heading */
}
This is the first IE bug (browser-land variation) I ever noticed. Now I know
why it happens.
[1] http://css-class.com/test/bugs/ie/floatsandblockelements.htm
[2] http://www.satzansatz.de/cssd/onhavinglayout.html
Alan
http://css-class.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 Problem
Hi, I've problem that there is a gap between the div called top and container on IE6 , it works fine on FF IE7 http://www.frontrow.jo/ and here is the css styles http://www.frontrow.jo/includes/common.css any idea ? Thanks in advanced Ibrahim __ 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] horizontal list in ie 6
Ross Hulford wrote:
I have done this and fixed it before but I cannot remember how I did it! At
the moment my list steps in ie 6
Item1
Item2
Item3
The css
#middleMenu li a{
height:20px;
display:block;
float:left;
margin-left:20px;
font-size:11px;
text-decoration:none;
color:#FCEE21;
background-color:#00;
}
Hi Ross,
Try this:
http://www.positioniseverything.net/explorer/creep.html
It's more than likely you can get away with avoiding the trigger, and
changing padding-bottom on the outer div (#middleMenu) to margin-bottom.
However, I'm not entirely sure how that affects your layout.
HTH
Mark
__
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] Div's not lining up in IE (any :P)
Alan Gresley wrote:
Adding padding-top to the #content div will actually accentuate the gap
though this will even things out across browser-land.
Hi Alan,
Well, that is exactly what Georg already said
Georg wrote:
For testing-purposes, adding...
#content {
padding-top: 1px;
}
without zeroing out the margin-top on #spotlight, will make all
browsers contain the margin and push #spotlight down.
...but that wasn't an intended solution. I'm pretty sure that
recommendation was made so Mike could see the full margins in effect and
what exactly is going on.
To achieve the line up in IE like the other browsers it's better to allow for
greater margin
collapse [1].
I am curious - why is that better than the alternatively proposed
zeroing out of the top margin on the offending #spotlight div? To my
mind, zeroing the margin is as clean and simple as it gets, since that
*was* causing the problem in the first instance.
Mark
__
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] absolutely positioning an a into a li IE6 7
Hi Shawn, wanted to say thank you for your suggestions. I did not notice your message until you sent it to my individual mail box. What you suggested worked perfectly well. It is not the solution I've eventually adopted, this due to the adding of a tooltip incompatible with absolute positioning of the works link. If you wish, check the code at: http://www.giuseppecraparottacv.co.uk/work-web-test-works-absolute.html Please note that the code still has to be cleaned and redundant properties are not been yet removed. The design looks really ugly being that incompleted. What's interesting is go through the problem-solving process leading to the solution you provided: This was the initial situation: Having added width:100% to the odd and even lis in order to absolutely position the works links in IE6 properly, increasing the page size implied the appearance of phantom gaps - as you defined them :-) - in IE6 and 7. Too bad... As a fix, you suggested to float the lis to the left. Now I have few questions, maybe you have some time to help me to freeze this experience into everlasting Knowledge (wow...) Being the width of the ul defined, floating the lis doesn't have the standard function to put the lis side by side but instead of simulating a kind of IE-dedicated glue effect sticking the lis together no matter the size of the page. Would you approve this reasoning? Wanna add something to the rationale? Could what I've experienced be appropriately defined as a IE bug? Is there some logic behind this IE behaviour, or is it just a manifestation of IE non-sense? Any mistake from my side? Thank you very much Shawn, Giuseppe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS tooltip hidden by other elements
Thank you Georg for the... class, I appreciate that very much. Regards, G __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS tooltip hidden by other elements
Thank you for the theory, I appreciate that very much. Regards, G __ 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] Div's not lining up in IE (any :P)
Mark Henderson wrote: Alan Gresley wrote: Adding padding-top to the #content div will actually accentuate the gap though this will even things out across browser-land. [...] ...but that wasn't an intended solution. I'm pretty sure that recommendation was made so Mike could see the full margins in effect and what exactly is going on. That's right. Since collapsing margins is an often misunderstood or totally lost standard behavior made partly useless by IE/win bugs, the easiest way to demonstrate and *test* for what's happening is to make the involved margin visible by preventing it from escaping its own container and collapse into other margins in standard compliant browsers. The 1px padding is interpreted the same way by all browsers, and once all involved vertical margins are uncollapsed and visible in the actual case, one can decide which ones to keep and which ones to change to achieve the intended line-up across browser-land. For more on the subject, check the linked-in articles/demos in the relevant 'hasLayout' subsection... http://www.satzansatz.de/cssd/onhavinglayout.html#uncollapse 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] IE6 Problem
Ibrahim Y wrote: I've problem that there is a gap between the div called top and container on IE6 , it works fine on FF IE7 http://www.frontrow.jo/ Looks like the gap is created by one of the scripts, as it only appears half way through script executions. Can't test which script is responsible for what since they don't survive direct file-downloading at my end, but there's no gap if I turn off script support before loading the page. May give you a starting-point in search of the cause. 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] Div's not lining up in IE (any :P)
Mark Henderson wrote:
Temp site: http://www.grum.com/temp/j/index.html
Alan Gresley wrote:
Adding padding-top to the #content div will actually accentuate the gap
though this will even things out across browser-land.
Hi Alan,
Well, that is exactly what Georg already said
To achieve the line up in IE like the other browsers it's better to allow
for greater margin
collapse [1].
I am curious - why is that better than the alternatively proposed
zeroing out of the top margin on the offending #spotlight div? To my
mind, zeroing the margin is as clean and simple as it gets, since that
*was* causing the problem in the first instance.
Mark
Hi Mark
I would actually blame it on the float So why is it better? Because it
adding something to the CSS that has no impact on Gecko, Opera 9.5 (alpha) and
Safari (beta). Mike was aiming for IE to follow these other browsers. Opera
9.24 or earlier also shows the same bug. Zeroing out the margins on the
#spotlight div will do nothing since the problematic margins in question
belongs to the the first heading in the #spotlight div which is approximately
20px and the #content div. What Gecko, Opera 9.5 (alpha) and Safari (beta) are
doing is collapsing the top margin of the heading (approx. 20px) into the top
margin of the #spotlight div (20px) which in turn collapses in the top margin
of the Content div of 10 pixels which now becomes 20px. Collapsing margins [1].
In IE though, the top margin of the heading has fully collapsed into the top
margin of the #spotlight div which in turn has only partially collapsed into
the top margin of the #content of by 10px. By increasing this top margin of the
#content to 20px will allow the full collapsing on the margins for IE and Opera
9.24 earlier .. and bye bye bug. [2] example 5a.
I think Georg may have be baffled by the bug and suggested testing with padding
to debug. Georg may even been checking in Opera 2.24 or earlier Zeroing out
the margin on the heading also works around the bug but this requires changing
the CSS so the good browsers will follow IE which I would say isn't Georg
general approach when working with IE. ;-).
#spotlight h1 {
margin-top: 0;
}
or
#content {
margin: 10px;
margin-top: 20px; /* add, same as height of top margin of heading */
}
[1] http://www.w3.org/TR/CSS21/box.html#collapsing-margins
[2] http://css-class.com/test/bugs/ie/floatsandblockelements.htm
Alan
http://css-class.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Drop Shaow for Div techiques
thanks very much- this is just what I was looking for! Thierry Koblentz [EMAIL PROTECTED] wrote: = On Behalf Of Karen Davis I'm wanting to add a drop shadow around a contentWrapper div and would like to know which technique is superior. Any links to preferred tutorials would also be appreciated, as well as reasons for the recommendations. This may help: http://tjkdesign.com/articles/drop-shadow_and_AlphaImageLoader.asp -- 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-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 Problem
Ibrahim Y wrote:
Hi,
I've problem that there is a gap between the div called top and
container on IE6 , it works fine on FF IE7
http://www.frontrow.jo/
and here is the css styles
http://www.frontrow.jo/includes/common.css
any idea ?
Thanks in advanced
Ibrahim
This also affects IE7. The fixes for this bug are.
#container ul, #container p {
margin-top:20px; /* IE will behaves like other browsers */
}
or
#container ul, #container p {
margin-top:0; /* other browsers will behaves like IE */
}
This is due to the effects of hasLayout [1] on margins [2]. Both the #left and
#right divs are floated (hasLayout trigger). All good browsers will show the
top margin of the p and ul elements, the children of the #left and #right
divs respectively, IE will however make these default margins disappear. The
next version of IE may behave similar to the other good browsers since
hasLayout is now history with IE8.
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2]
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/DefaultMarginDisappear.html
Alan
http://css-class.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] Div's not lining up in IE (any :P)
The original poster asked for a way to make IE/win line up elements same as FF and Netscape9, so that's what Georg gave him a working solution for. That there are a number of other ways to achieve the requested line-up, leaves plenty of room for others to reveal their solutions. That Georg also included a suitable way to make the relevant collapsing margin visible in all browsers, seems to have resulted in exactly what Georg wanted: that more people became aware of what's going on. That's nice ... keep it coming. Always a few more web designers that may learn something from such threads. Alan Gresley wrote: I think Georg may have be baffled by the bug and suggested testing with padding to debug. Georg may even been checking in Opera 2.24 or earlier Zeroing out the margin on the heading also works around the bug but this requires changing the CSS so the good browsers will follow IE which I would say isn't Georg general approach when working with IE. ;-). Georg isn't baffled at all, and knows perfectly well how both collapsing margins and IE/win (hasLayout and other) bugs behave. FWIW: He co-authored more than one article on these subjects. For the record: Georg doesn't follow a general approach when dealing with anything. He chooses a suitable approach for each case. As for testing in Opera: the mentioned v.2.24 was never launched AFAIK, but Georg did test in Opera 9.50beta (build 9694), and half a dozen older 9 and 8 versions for good measure - before replying to the original poster. If anything; testing, testing and more testing is Georg's approach, and it's a working one that I'll recommend. regards Molly 'the cat' - co-author and certified bug-killer -- 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] Need help with multi-div placement
I'm attempting to convert a table form to a CSS form. I'm working off of an example I found at http://www.alistapart.com/stories/practicalcss/. The table form is at http://www.barnettresolutions.com/index.php and my CSS form in progress is at http://www.barnettresolutions.com/index2.php. There are 3 divs on the page. The 3 paragraphs on the right are one div, the QA below it is another and the form is the third. I got the right-hand column placed correctly but am unable to get the form div to float to the top on FF. I've experimented with both padding, margin and top settings and get the same results. Can some please provide me with the advice to get this working? Regards, Tim p.s. please ignore the placement and spacing of the field labels. I'll address that later. __ 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] Emulating Frames
(sorry if you are on Thelist for dups)
I'm trying to replace an existing frame setup:
+---+
| header |
+-+-+
| | |
| | |
|scrollable div | scrollable div|
| | |
| | |
+-+-+
| footer (optional) |
+---+
with fixed height header and footer and with the center content area
fluid as in this example:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
The problem I'm having is to get the center content area to *fill*
vertically the content area as the window is resized.
In the center content area I have two divs:
div id=content
div id=left/div
div id=right/div
/div
with #left, #right { float: left }. Each of those have content of
varying length depending on the page and want each to be separately
scrollable.
What I can't seem to figure out is how to get the height of one (or
both) of the left or right divs to fill 100% height of the content
area based on the current window size.
If the window is sized very tall then the divs should
expand to fill the content area. If the window is sized small the
content will shrink (and display scroll bars if needed). There should
be a minimum width.
Can anyone point me to an example of how to accomplish this?
I've also looked at:
http://www.fu2k.org/alex/css/frames/
Thanks,
--
Bill Moseley
[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] Need help with multi-div placement
Big Moxy wrote: http://www.barnettresolutions.com/index2.php. There are 3 divs on the page. The 3 paragraphs on the right are one div, the QA below it is another and the form is the third. I got the right-hand column placed correctly but am unable to get the form div to float to the top on FF. I've experimented with both padding, margin and top settings and get the same results. Working example: http://www.gunlaug.no/tos/alien/bm-2/test_07_1229.html 1: added the missing div-ending inside form. 2: IE/win (all versions) has a clearing bug, making it ignore the 'clear: right' on #quickForm. Commenting out that 'clear' makes the #quickForm go as high as it can in FF (and other standard compliant browsers), but it can't go higher then the float that is preceding it - #quickQA. 3: to make #quickForm go all the way to the top, the right column stuff has to become one float, so I added one and called it #column. 4: both #quickInfo and #quickQA becomes redundant when contained in #column, but I kept them in there and commented out all but the margins on them. Those margins can be moved over to the content of #quickInfo and #quickQA if you want to. 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] Need help with multi-div placement
Thanks, Georg! I suspected I need to combine the divs into 2, one for each column. Regards, Tim Gunlaug Sørtun wrote: Big Moxy wrote: http://www.barnettresolutions.com/index2.php. There are 3 divs on the page. The 3 paragraphs on the right are one div, the QA below it is another and the form is the third. I got the right-hand column placed correctly but am unable to get the form div to float to the top on FF. I've experimented with both padding, margin and top settings and get the same results. Working example: http://www.gunlaug.no/tos/alien/bm-2/test_07_1229.html 1: added the missing div-ending inside form. 2: IE/win (all versions) has a clearing bug, making it ignore the 'clear: right' on #quickForm. Commenting out that 'clear' makes the #quickForm go as high as it can in FF (and other standard compliant browsers), but it can't go higher then the float that is preceding it - #quickQA. 3: to make #quickForm go all the way to the top, the right column stuff has to become one float, so I added one and called it #column. 4: both #quickInfo and #quickQA becomes redundant when contained in #column, but I kept them in there and commented out all but the margins on them. Those margins can be moved over to the content of #quickInfo and #quickQA if you want to. regards Georg __ 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] Tables, borders, cellspacing, cellpadding and CSS
Hi,
I am having problems with tables, basically I want to do all formatting in CSS
but am having problems knowing how to do cellspacing and cellpadding table
attributes in CSS.
At the moment I have :-
table {
border: 1px solid black;
}
td {
border: 1px solid black;
}
th {
border: 1px solid black;
}
and
table cellspacing=0 cellpadding=2
...
/table
How do I do this all in CSS ?
Many thanks in advance,
Aaron
__
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] Tables, borders, cellspacing, cellpadding and CSS
Aaron Gray wrote:
Hi,
I am having problems with tables, basically I want to do all formatting in
CSS but am having problems knowing how to do cellspacing and cellpadding
table attributes in CSS.
At the moment I have :-
table {
border: 1px solid black;
}
td {
border: 1px solid black;
}
th {
border: 1px solid black;
}
and
table cellspacing=0 cellpadding=2
...
/table
How do I do this all in CSS ?
Try this...
table,
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 2px;
}
In IE, though, cellspacing has priority over border-collapse /
border-spacing (so don't use it).
Rafael
Ref.: http://www.w3.org/TR/REC-CSS2/tables.html#borders
__
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] Div's not lining up in IE (any :P)
On Dec 28, 2007 11:00 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It is a collapsing margins[1] case, where the original 20px margin-top
on #spotlight escapes the #content div in non-IE browsers, while IE/win
contains that margin within the #content div and thereby pushes
#spotlight that much down relative to the left div.
One way to fix the line-up across browser-land, is therefore to zero out
the escaping margin...
#spotlight {
margin: 0 40px 0 230px;
}
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
http://www.gunlaug.no
Thanks, Georg. I knew the list would have the answer and teach me why it
wasn't working. ;)
Mike 3 list.
I also added
#content {
padding-top: 20px;
}
to keep the proper spacing, as that space is used in other areas of the
site.
Now to get on with reading the rest of this thread and learning more.
Thanks again,
Mike
__
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/
