Re: [css-d] Simple unordered list Firefox problem
Philippe, you gave me a very valuable information and I just learned
something new. I fixed the problam as you suggested by removing
list-style: inside.
For those who want to visit a copy of the broken page -
http://pax.pcc.edu/gjackson/students/mpetrov/_source/other/css-d/firefox-list-style-display-problem.htm
On 1/21/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote:
On 22 Jan 2006, at 10:35 am, Martin Petrov wrote:
Could you please see my site with Firefox and check the unordered list
of links on the right. It shows properly in IE and Opera, but not with
Firefox.
It must be a simple problem, but the negative margins used for the
sidebar confuse me and I'm so exhausted right now :)
http://pax.pcc.edu/gjackson/students/mpetrov/
Imho, Opera, Safari, IE get it wrong in this case.
Difficult case, and the css 2.1 docs are not very clear here.
On #extra ul, you specify {list-style-position:inside};
this means, create an inline object that is the bullet within the box
generated by the li
Fictional tag sequence would be:
lispanbullet/span./li
But the a is set to {display:block}. This moves the box generated
by the a to a (new) line of it's own.
Imho, Opera, Safari, IE get it wrong in this case.
The better way to handle your list would be to set the list-style-
position to outside (the default) and work out your padding/margins
from there.
Philippe
---
Philippe Wittenbergh
http://emps.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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Replace Picture Bar with New Set
Donna Pfledderer @ Virtual Business Connection wrote:
I'm not sure how to ask this, but on this page
http://www.1startescape.com/NewSite/gallery_natPlaces.html
http://www.1startescape.com/NewSite/css/portfolio.css
When the user clicks on the arrow I want the picture bar to be replaced
with new thumbnails.
Hi Donna,
If there aren't thousands of images, the easy way is just to make a kind
of dia-show with hard links under the arrows. These can lead to one or
more copied pages with a new strip of images. Later on you have only to
add a new page if the 6th of 7th new painting is added.
In this way your visitor is not dependent of the use of javascript, and
no inline frames are needed (or: you don't have to find a solution with
a serverside database and a serverside script).
To assure a quick download, you can add a div with the css for an
unvisible #preload { margin-left: -px; display: none; height: 0; }
of the needed images on the end of each gallery page before. Looking at
a page is then loading, in the background, the images of the next one.
Then I remarked (by accident!) that if JS is supported/on, you can click
on the thumbnails to get the enlargement. You can add in the
portfolio.css: div.boxPictureBar img {cursor: pointer;}, then the
helping hand is pointing to that.
But in browsers in which javascript is not supported, or not enabled,
you cannot see the enlargements! For that users maybe you can add a
noscript/noscript rule which shows the enlargement at css-hovering
over the thumbnails: then everybody is served. ;-)
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the nextcolumn
From: Mike Soultanian [EMAIL PROTECTED] http://www2.csulb.edu/colleges/cota/test5.html Let's say I have two columns and there is a div in each column. If I add a margin-top to the left column, it pushes the div down in the other column when viewed in Firefox. Is this normal behavior or is it a bug? This does not happen in Opera or IE. This is not a bug you are observing, but collapsing margins instead. See the following wiki page for more information and links. http://css-discuss.incutio.com/?page=CollapsingMargin You can also google escaping margins to find some of the early discussion and links to pretty decent demos of what was considered a bug at first (four years ago). Here's a link to a css-d thread - Joe's demo is still online - http://archivist.incutio.com/viewlist/css-discuss/7423 And Micah's page - http://www.ugcs.caltech.edu/~takoyaki/css-test/escaping_margins/ W3C specs - http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins I hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in thenextcolumn
Mike Soultanian wrote: This is not a bug you are observing, but collapsing margins instead. See the following wiki page for more information and links. Hi Holly, I am familiar with collapsing vertical margins, but that's not the issue I'm running into; or maybe it is in another form. I'm having problems with adjacent columns (horizontally) affecting each other. If you look at my example page, you'll notice that there is no margin-top specified on the left column, yet it's being pulled down with the right column. http://www2.csulb.edu/colleges/cota/test5.html Hi Mike, I don't see any problem with your example page. If you're talking about the second column being lower than the 1st one, this is due to your margin on h1 in column #2. Regards, Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down inthenextcolumn
Mike Soultanian wrote: Thierry Koblentz wrote: Mike Soultanian wrote: http://www2.csulb.edu/colleges/cota/test5.html Hi Mike, I don't see any problem with your example page. If you're talking about the second column being lower than the 1st one, this is due to your margin on h1 in column #2. Regards, Thierry | www.TJKDesign.com Did you look in both IE and if FF. There is a difference with example 2. Sorry, I looked in IE6, not in FF. It's rare people complain about the latter ;-) Padding, but also *border* on the DIV should fix the problem (remove the gap). Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down inthenextcolumn
Sorry, I looked in IE6, not in FF. It's rare people complain about the latter ;-) Padding, but also *border* on the DIV should fix the problem (remove the gap). Actually, if you reload the page, you'll see my updated examples. However, in my real web page, I can't use any padding or a border on the container. Is IE actually getting something correct for a change?? http://www2.csulb.edu/colleges/cota/test5.html thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in thenextcolumn
From: Mike Soultanian [EMAIL PROTECTED]
you'll notice that there is no margin-top specified
on the left column, yet it's being pulled down with the right column.
http://www2.csulb.edu/colleges/cota/test5.html
I did try it in IE and Mozilla before I replied previously, and it's still
margin collapsing that is causing what you see. The not-zeroed margin on the H1
element (as Theirry has pointed out) in the right column is escaping from
the border-less/padding-less div container and creating the margin you are
noticing between the text before the div, and the div itself. Zero the top
margin on the H1 and the space will disappear.
h1 {margin-top: 0;}
hth,
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] horizontal drop down menu with HORIZONTAL drop down sub menus
Hi folks, I am trying to create a simple centered horizontal (text) menu with a drop down menu that is HORIZONTAL not vertical. I need it to be placed within a table. I have been trying to implement this idea: http://www.tjkdesign.com/articles/dropdown/demo.asp But i can not get it to center and want the drop down menu to center toono matter what the browser size is. It can be css, or java script, or dhtml. I just need something that works. any suggestions or links i should look at. I didn't think this was going to be tough but it is killing me! thanks in advance, ww __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop down sub menus
Hi folks, I am trying to create a simple centered horizontal (text) menu with a drop down menu that is HORIZONTAL not vertical. I need it to be placed within a table. I have been trying to implement this idea: http://www.tjkdesign.com/articles/dropdown/demo.asp But i can not get it to center and want the drop down menu to center toono matter what the browser size is. It can be css, or java script, or dhtml. I just need something that works. Could you please not cross-post on thelist and css-d? Those of us who are subscribed to both get enough email as it is... DHTML = marketing speak for JavaScript + HTML + CSS It would also be very helpful to send us an example where it doesn't work, as Thierry's working example is nothing to debug, as there is no bug :-) -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop down submenus
ww wrote: Hi folks, I am trying to create a simple centered horizontal (text) menu with a drop down menu that is HORIZONTAL not vertical. I need it to be placed within a table. I have been trying to implement this idea: http://www.tjkdesign.com/articles/dropdown/demo.asp But i can not get it to center and want the drop down menu to center toono matter what the browser size is. It can be css, or java script, or dhtml. I just need something that works. If you have Dreamweaver, this might be a solution for you: http://www.projectseven.com/products/menusystems/tbm/demos/design_purecenter.htm If not, you can see if our CSS approach to centering can be used for your page. Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop down sub menus
On 1/22/06, Christian Heilmann [EMAIL PROTECTED] wrote: Could you please not cross-post on thelist and css-d? Those of us who are subscribed to both get enough email as it is... DHTML = marketing speak for JavaScript + HTML + CSS It would also be very helpful to send us an example where it doesn't work, as Thierry's working example is nothing to debug, as there is no bug :-) -- Chris Heilmann Blog: http://www.wait-till-i.com Sorry about the cross-post but i didn't assume that everyone on one list was subscribed to the other and since it is sunday i was trying to cover all possible friendly folks out there to help out. I know Thierry's works great...but is not quite what i need, here is a link to a test page i am working on http://www.todayhomes.com/v2/ i would like the menu to center itself within the table and the drop down menu to appear below the main menu no matter what the browser window is sized to. thanks, ww Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop down submenus
If you have Dreamweaver, this might be a solution for you: http://www.projectseven.com/products/menusystems/tbm/demos/design_purecenter.htm If not, you can see if our CSS approach to centering can be used for your page. Al Sparber PVII http://www.projectseven.com Al, I don't have mx 2004 just plain old mx (mac version) will your product work on this version? I am trying to do it without buying a program but might have to resort to it if i can't get it figured out! thanks, ww __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] using display:table-cell blows up in IE
I finally figured out how to achieve the look of what used to be floated divs, centered in a page (when I don't know the width of the parent div). Right now, I'm using a wrapper div with a display:table and an inner wrapper div with a display:table-row. The colored boxes for the movie campaigns are set to display:table-cell. However, in IE, this displays all the campaign divs one on top of the other, as opposed to the intended horizontal layout. I'm aware that this is an issue in IE, however, but I can't seem to find a solution or hack to get it to work. The fix is located at: http://archivist.incutio.com/viewlist/css-discuss/42280 Hoping someone knows how to get this to look correct. It works properly in Firefox/most everything else. The page: http://stg.participate.net/ The CSS: http://stg.participate.net/css/w3c.css Thanks! -Jack -- John Haas Web/Multimedia Designer [man][ape] design w: http://www.manapedesign.com e: [EMAIL PROTECTED] p: 215.868.2661 630 N. 17th St. #1 Philadelphia, PA 19130 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
On Jan 22, 2006, at 4:33 PM, John Haas wrote:
I finally figured out how to achieve the look of what used to be
floated divs, centered in a page (when I don't know the width of
the parent div).
Right now, I'm using a wrapper div with a display:table and an
inner wrapper div with a display:table-row. The colored boxes for
the movie campaigns are set to display:table-cell.
However, in IE, this displays all the campaign divs one on top of
the other, as opposed to the intended horizontal layout.
Hrmmm -- you mentioned you don't know the width of the parent div;
but I assume you know the width of the centered div.
Is there a reason you're not using the following:
div id=centeredSome content.../div
#centered { width: 600px; margin: 0 auto; }
This will work regardless of the width of the parent element, or even
if there is no parent element.
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop down sub menus
On 1/22/06, ww [EMAIL PROTECTED] wrote:
here is a link to a test page i am working on
http://www.todayhomes.com/v2/
Above everything else:
#TJKDropDownMenu {
position:relative;
}
Now it's inside. Style the rest as you need.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
On 1/22/06, John Haas [EMAIL PROTECTED] wrote: I'm aware that this is an issue in IE, however, but I can't seem to find a solution or hack to get it to work. The fix is located at: http://archivist.incutio.com/viewlist/css-discuss/42280 Hoping someone knows how to get this to look correct. Apparently the IE fix is to apply text-align:center where you have display:table and display:inline-block where you have display:table-row. Obviously, behind a conditional comment or hack. Did you try that? -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
Hrmmm -- you mentioned you don't know the width of the parent div;
but I assume you know the width of the centered div.
Is there a reason you're not using the following:
div id=centeredSome content.../div
#centered { width: 600px; margin: 0 auto; }
This will work regardless of the width of the parent element, or even
if there is no parent element.
I'm assuming you mean if I had continued to use the float method, as
opposed to this display:table stuff.
div id=features_wrap
div id=features
div/div
div/div
div/div
/div
/div
The reason I had issues with the whole setup was that I can't say how
many plain div's will be within that #features div, hence I couldn't
put a width on the #features, and couldn't center that via a margin: 0
auto. #features_wrap has to be 100% width.
-Jack
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
Apparently the IE fix is to apply text-align:center where you have
display:table and display:inline-block where you have
display:table-row. Obviously, behind a conditional comment or hack.
Did you try that?
Yes, the hack I have in my CSS now is::
body.home #features_table {
display:table;
margin:0 auto;
}
body.home #features {
padding: 0;
margin: 0 auto;
display:table-row;
height:17.35em;
}
body.home #features div {
display:table-cell;
font-size: .86em;
padding: 12px;
width:110px;
height:18em;
text-align:left;
}
/* IE/Mac \*//*/
body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
/**/
-Jack
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
On 1/22/06, John Haas [EMAIL PROTECTED] wrote:
/* IE/Mac \*//*/
body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
/**/
But this only applies to IE Mac, if I'm not mistaken. I think you
meant to have:
* html body.home #feature_table {
* html body.home #features {
at least, if you wanted it to apply to IE Win as well.
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features. Or maybe
that was to apply display:inline to #features #div.
Let me know if you get it to work.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop down sub menus
On 1/22/06, Christian Montoya [EMAIL PROTECTED] wrote:
On 1/22/06, ww [EMAIL PROTECTED] wrote:
here is a link to a test page i am working on
http://www.todayhomes.com/v2/
Above everything else:
#TJKDropDownMenu {
position:relative;
}
Now it's inside. Style the rest as you need.
I'm so close i can feel it!
I added the code you suggested as well as another snippet offered from
a different list member. Now my sub menu does appear under the main
menu...yeah!!...but i still can't get the whole thing to center within
the table.
http://www.todayhomes.com/v2/
link to css: http://www.todayhomes.com/v2/css/menu/basic.css
every thing is great...i just need the menu to be centered instead of flush left
thanks again,
ww
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features.
I tried that as well, it didn't work either.
Well, here's what I have now, still not working, as you can see in IE.
http://stg.participate.net
body.home #features_wrap {
margin:0;
padding: 0;
background-color:#00;
width:100%;
text-align:center;
}
body.home #features_table {
display:table;
margin:0 auto;
}
body.home #features {
padding: 0;
margin: 0 auto;
display:table-row;
height:17.35em;
}
body.home #features div {
display:table-cell;
font-size: .86em;
padding: 12px;
width:110px;
height:18em;
text-align:left;
}
* html body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
* html body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
Christian Montoya wrote:
On 1/22/06, John Haas [EMAIL PROTECTED] wrote:
/* IE/Mac \*//*/
body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
/**/
But this only applies to IE Mac, if I'm not mistaken. I think you
meant to have:
* html body.home #feature_table {
* html body.home #features {
at least, if you wanted it to apply to IE Win as well.
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features. Or maybe
that was to apply display:inline to #features #div.
Let me know if you get it to work.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop down submenus
ww wrote:
here is a link to a test page i am working on
http://www.todayhomes.com/v2/
i would like the menu to center itself within the table and the drop
down menu to appear below the main menu no matter what the browser
window is sized to.
As Christian said, you need position:relative in #TJKDropDownMenu
To center the menu you can try this:
#menu {width:20em;margin:0 auto}
You have to increase the top margin for IE to have the nested ULs show below
the top level items.
Also, I think you have IE running in Quirksmode, so I believe using a simple
#menu {text-align:center}should do the trick.
HTH,
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] resolved: using display:table-cell blows up in IE
Alright, got it to work. IE doesn't recognize div for this hack, I
had to use span's in this case. See the technique at:
http://phrogz.net/CSS/inlineblock.html
Thanks for the help,
Jack
John Haas wrote:
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features.
I tried that as well, it didn't work either.
Well, here's what I have now, still not working, as you can see in IE.
http://stg.participate.net
body.home #features_wrap {
margin:0;
padding: 0;
background-color:#00;
width:100%;
text-align:center;
}
body.home #features_table {
display:table;
margin:0 auto;
}
body.home #features {
padding: 0;
margin: 0 auto;
display:table-row;
height:17.35em;
}
body.home #features div {
display:table-cell;
font-size: .86em;
padding: 12px;
width:110px;
height:18em;
text-align:left;
}
* html body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
* html body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
Christian Montoya wrote:
On 1/22/06, John Haas [EMAIL PROTECTED] wrote:
/* IE/Mac \*//*/
body.home #features_table {
display: block;
margin: 1em 0;
text-align: center;
}
body.home #features {
display: inline-block;
width: 1px;
white-space: nowrap;
}
/**/
But this only applies to IE Mac, if I'm not mistaken. I think you
meant to have:
* html body.home #feature_table {
* html body.home #features {
at least, if you wanted it to apply to IE Win as well.
And come to think of it, I'm pretty sure you want to apply
display:inline-block to #features div, not #features. Or maybe
that was to apply display:inline to #features #div.
Let me know if you get it to work.
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
John Haas
Web/Multimedia Designer
[man][ape] design
w: http://www.manapedesign.com
e: [EMAIL PROTECTED]
p: 215.868.2661
630 N. 17th St. #1
Philadelphia, PA 19130
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL drop downsubmenus
Al Sparber wrote: ww wrote: Hi folks, I am trying to create a simple centered horizontal (text) menu with a drop down menu that is HORIZONTAL not vertical. I need it to be placed within a table. I have been trying to implement this idea: http://www.tjkdesign.com/articles/dropdown/demo.asp But i can not get it to center and want the drop down menu to center toono matter what the browser size is. It can be css, or java script, or dhtml. I just need something that works. If you have Dreamweaver, this might be a solution for you: http://www.projectseven.com/products/menusystems/tbm/demos/design_purecenter.htm If not, you can see if our CSS approach to centering can be used for your page. I took a look at that page and thought it was a good looking CSS solution, but then found out it was JS... Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal drop down menu with HORIZONTAL dropdownsubmenus
Al Sparber wrote: From: Thierry Koblentz [EMAIL PROTECTED] If you have Dreamweaver, this might be a solution for you: http://www.projectseven.com/products/menusystems/tbm/demos/design_purecenter.htm If not, you can see if our CSS approach to centering can be used for your page. I took a look at that page and thought it was a good looking CSS solution, but then found out it was JS... As I grow to learn the mind of the CSS zealot, I only deal offlist with this kind of rubbish. As I'm about to tell you offlist, I have nothing against JS solutions... when they are *presented* as JS solutions (the same goes with your 3 column layout). My apologies to all for this waste of bandwidth... Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Formatting Issues:
Jim Nannery wrote: Cory wrote: I'm sorry, I think you guys are misunderstanding what I am saying. I am not talking about how the layout looks in the browser, I am talking about when you right click and view the source code, THAT is what is all messed up. In particular the CSS. In DW8, the CSS is all nice and neat just like I coded it, but if you view the CSS CODE in a browser window, it is all messed up and all over the place like it lost the formatting. What would cause that? The browser, the FTP program that I am using or what? Cory [...] Since I don't use Dreamweaver (old hand coder) I'm *guessing* that DW uses some proprietary formatting that isn't recognized by the browser you are trying to view it in. [...] Hi Cory, I don't have DW either, but guess it will be the way DW is making the tab space. The same thing is happening for instance in Frontpage: there they use a tab space which is about 4 letters in width. Openend the same css-file (or javascript-file: same effects) in Wordpad, the space is 6 letters. And in Notepad ... 10 letters in width ( sometimes not showing the tabs, but a black sign instead, without spacing). With 2 or more indenting tabs for nested div's it doesn't show good anymore. Then there are huge white spaces and wrappings to next lines: *unordered listings*. ;-) You can check this by moving in the css-file with the arrow keys: big jumps in the whitespaces indicate the tab positions. It can be also, that in DW a proportional font-type is used, while not in Notepad. In browsers, it depends of the default text-editor you have assigned in the browser configuration: the text-editor that will be used automatically when the browser discovers a css- or other text file that has to be opened. Does the html render as expected in the browser? If so, I wouldn't worry to much about how the code looks in view source. [...] Agree! - When I am in a clear mood, I don't use the tab key when coding, but give 2 or 3 ordinary spacebar spaces - then the code is always good looking. francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in thenextcolumn
http://www2.csulb.edu/colleges/cota/test5.html
I did try it in IE and Mozilla before I replied previously, and it's
still margin collapsing that is causing what you see. The not-zeroed
margin on the H1 element (as Theirry has pointed out) in the right
column is escaping from the border-less/padding-less div container
and creating the margin you are noticing between the text before the
div, and the div itself. Zero the top margin on the H1 and the space
will disappear.
h1 {margin-top: 0;}
Ahhh, I think I'm getting it. So, the H1 is always 30px away from the
text, it's just bringing the container down with it, which is
essentially bringing the floated left column down, as well. I would
have thought that the left column would have had more authority as it
doesn't have margin-top applied to it so it wouldn't be brought down
with the container, or at least, push it back up there, but I guess not.
However, like I've noticed and like you mentioned, if the container has
any containing properties (border or padding), it will instead calculate
the margin relative from the border or padding. Is there any other way
that you know of to create any other containing properties that will not
allow the margin to escape from the container? On my real site, I
cannot put a border or padding on that container.
Thanks!
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the next column
From: Mike Soultanian [EMAIL PROTECTED]
http://www2.csulb.edu/colleges/cota/test5.html
h1 {margin-top: 0;}
Ahhh, I think I'm getting it. So, the H1 is always 30px away from the
text, it's just bringing the container down with it, which is
essentially bringing the floated left column down, as well.
At the default font size, in whatever browser you're looking in, the top margin
for the H1 is 30px. If you zero that, there will be no more margin between the
text and the following div that includes the left and right columns.
I would
have thought that the left column would have had more authority as it
doesn't have margin-top applied to it so it wouldn't be brought down
with the container, or at least, push it back up there, but I guess not.
The margin escapes the container, and separates anything in the container from
the text above, regardless of presumed authority.
However, like I've noticed and like you mentioned, if the container has
any containing properties (border or padding), it will instead calculate
the margin relative from the border or padding. Is there any other way
that you know of to create any other containing properties that will not
allow the margin to escape from the container?
Zeroing the top margin on the H1 would be my first suggestion. If you still
want the text in the right column moved down, and want to retain the H1 (which
I notice you've removed in the current iteration of the test page) you could
try wrapping the left column content in another div and applying the padding,
as little as 1px, to that (without zeroing the margin on the H1).
If you decide to zero the margin on the H1, you could then probably add padding
to that element to get the text on the right to move down perhaps,
depending on what you really need.
Experiment, I guess, or show us the site so we can make better suggestions than
just guessing what will work based on an oft-changing demo.
~holly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the next column
At the default font size, in whatever browser you're looking in, the top margin for the H1 is 30px. If you zero that, there will be no more margin between the text and the following div that includes the left and right columns. Yeah, I understand that. I stuck that 30px in there to make the symptoms more apparent than the default padding on a h1 tag. The margin escapes the container, and separates anything in the container from the text above, regardless of presumed authority. Well, I found a couple interesting things. If I apply the margin-top to the content within the left column (which is floated left), it will push the text down and does not pull down the content in the right column (as is happening in example 2). Another thing I noticed is that if I float both of those columns to the left (instead of only the left column), the margin-top of the right column no longer escapes the container and only pushes the text down in the right column. Don't know if that means much as I don't know all the rules behind floated and unfloated elements. Zeroing the top margin on the H1 would be my first suggestion. If you still want the text in the right column moved down, and want to retain the H1 (which I notice you've removed in the current iteration of the test page) you could try wrapping the left column content in another div and applying the padding, as little as 1px, to that (without zeroing the margin on the H1). I changed it from h1 just to make sure it wasn't specific to h1, which it isn't. It somewhat bothers me that I can't apply margin-top to an element in the right column as it's going to pull down the text in other columns, but there's plenty that could be, and is, worse with all the browser issues ;) As far as wrapping a column with 1px padding or border, I'm guessing you meant to say to apply it on the right column as that's the one that's where the margin-top is escaping the container, yes? If you decide to zero the margin on the H1, you could then probably add padding to that element to get the text on the right to move down perhaps, depending on what you really need. Oh yeah! I totally forgot that I can use padding as well... and that wouldn't collapse. Good point! I just tested it out and that worked. Sweet! I had just read about that on a site a day ago, too.. argh... too much information in the brain! Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] SOLVED! Re: margin in one column pushes content down in the next column
Thanks to Holly's suggestion of padding-top, I was able to fix the problem. The completed page with examples of the broken version and the fixed version is here: http://www2.csulb.edu/colleges/cota/test5.html thanks! Mike Mike Soultanian wrote: At the default font size, in whatever browser you're looking in, the top margin for the H1 is 30px. If you zero that, there will be no more margin between the text and the following div that includes the left and right columns. Yeah, I understand that. I stuck that 30px in there to make the symptoms more apparent than the default padding on a h1 tag. The margin escapes the container, and separates anything in the container from the text above, regardless of presumed authority. Well, I found a couple interesting things. If I apply the margin-top to the content within the left column (which is floated left), it will push the text down and does not pull down the content in the right column (as is happening in example 2). Another thing I noticed is that if I float both of those columns to the left (instead of only the left column), the margin-top of the right column no longer escapes the container and only pushes the text down in the right column. Don't know if that means much as I don't know all the rules behind floated and unfloated elements. Zeroing the top margin on the H1 would be my first suggestion. If you still want the text in the right column moved down, and want to retain the H1 (which I notice you've removed in the current iteration of the test page) you could try wrapping the left column content in another div and applying the padding, as little as 1px, to that (without zeroing the margin on the H1). I changed it from h1 just to make sure it wasn't specific to h1, which it isn't. It somewhat bothers me that I can't apply margin-top to an element in the right column as it's going to pull down the text in other columns, but there's plenty that could be, and is, worse with all the browser issues ;) As far as wrapping a column with 1px padding or border, I'm guessing you meant to say to apply it on the right column as that's the one that's where the margin-top is escaping the container, yes? If you decide to zero the margin on the H1, you could then probably add padding to that element to get the text on the right to move down perhaps, depending on what you really need. Oh yeah! I totally forgot that I can use padding as well... and that wouldn't collapse. Good point! I just tested it out and that worked. Sweet! I had just read about that on a site a day ago, too.. argh... too much information in the brain! Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
