[css-d] NiceForms CSS Issues in FF / Chrome / IE8, but not IE7
I am using the NiceForms JavaScript library to style the form fields on a basic contact form. All of the form fields are working correctly except for the textarea field. I have done this in the past and had it work, but in this case I have run into a wall. In IE7 and IE8 Compatibility mode, everything works fine. In FireFox, Chrome, or IE8, the placement of the corner images is incorrect. I am using the latest version of the script, which according to the web site should support most major browsers. Can somebody take a look and see if you can find anything off in my CSS because I know I have had this working on other sites. http://www2.admentus.com/contact-us/ Thanks -- Jeff __ 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] 100% body height not expanding beyond viewport
This is probably basic, but it has me stumped at the moment. I have a
design where the body background is a single color and then there is a
wrapper around the content which is centered on the page. The background of
that wrapper is white and is supposed to extend the full height of the page
- even if the content itself does not. So, my CSS looks like this .
html, body {
height: 100%;
background: #d0dce7;
}
#bodyWrap {
position: relative;
width: 90%;
margin: 0 auto;
max-width: 1276px;
min-width: 796px;
min-height: 100%;
}
* html #bodyWrap {
height: 100%;
background: #ff;
}
Now, when the context does not extend the full height of the viewport, this
works just fine. The bodyWrap div extends the full height of the view
port and there is this nice white column going the full height of the page
with blue side bars. The issue is when the content extends beyond the
height of the viewport. Then, the bodyWrap div extends with the content
like it should. However, the body element, or at least the background color
does not extend - it stops at the height of the view port.
Can somebody help me out with what I am missing here?
Thanks
-- Jeff
__
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/
Re: [css-d] 100% body height not expanding beyond viewport
This has not appeared on the list yet, so I apologize if it ends up
duplicated. Thx.
From: Jeff Chastain [mailto:li...@admentus.com]
Sent: Friday, July 17, 2009 4:01 PM
To: 'cs...@css-discuss.org'
Subject: 100% body height not expanding beyond viewport
This is probably basic, but it has me stumped at the moment. I have a
design where the body background is a single color and then there is a
wrapper around the content which is centered on the page. The background of
that wrapper is white and is supposed to extend the full height of the page
- even if the content itself does not. So, my CSS looks like this .
html, body {
height: 100%;
background: #d0dce7;
}
#bodyWrap {
position: relative;
width: 90%;
margin: 0 auto;
max-width: 1276px;
min-width: 796px;
min-height: 100%;
}
* html #bodyWrap {
height: 100%;
background: #ff;
}
Now, when the context does not extend the full height of the viewport, this
works just fine. The bodyWrap div extends the full height of the view
port and there is this nice white column going the full height of the page
with blue side bars. The issue is when the content extends beyond the
height of the viewport. Then, the bodyWrap div extends with the content
like it should. However, the body element, or at least the background color
does not extend - it stops at the height of the view port.
Can somebody help me out with what I am missing here?
Thanks
-- Jeff
__
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] IE issue with positioning
I am having some issues with IE getting a layout design to work and I would
like to see if anybody can offer any pointers before this drives me nuts.
The issue I am running into is that I have a box which has a fluid width
(90% of the page). Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side. The following CSS rules work just fine in FireFox
#container {
position: relative;
margin: 0 auto;
width: 80%;
#header {
position: absolute;
top: 0;
left: 14px;
right: 14px;
}
In IE however, the header box is positioned right, but it does not expand
the full width of its container. Instead it has an extra wide margin on the
right side. I think this could probably be fixed with a box model hack, but
I cannot figure out the right combination of rules to make IE behave.
Any ideas would be appreciated.
Thanks
-- Jeff
__
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/
Re: [css-d] IE 6 Float Issue
Does anybody have any ideas what is happening here? This is really driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.
Thanks
-- Jeff
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue
Well, IE 6 is at it again for me. I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing
issues. I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal to
the floated block width plus one, which should cause there to be a 1px gap
between the two. The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart. Can anybody offer any suggestions here?
style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style
div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div
Thanks
-- Jeff
__
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/
Re: [css-d] IE 6 Float Issue
No, I tried that one earlier and did it again just to make sure. Even with the 'display: inline' added to the floated box, the margin in between the two boxes is still 4px instead of 1px. Thanks -- Jeff From: Dave Goodchild [mailto:[EMAIL PROTECTED] Sent: Friday, April 13, 2007 8:40 AM To: Jeff Chastain Cc: [EMAIL PROTECTED] Subject: Re: [css-d] IE 6 Float Issue Could be the IE double-margin bug? Try adding display:inline to the floated element... __ 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/
Re: [css-d] IE 6 Float Issue
Well, what I have ended up doing is floating everything left. The example
here is part of the page that is just 2 columns (the header), but below that
is a three column layout. If I float everything left, giving all blocks a
defined width, everything appears to work. As this is a fixed width layout,
I can go with defining widths for each block. Not the cleanest thing in the
world, but it appears to be working.
Thanks
-- Jeff
From: jeffrey morin [mailto:[EMAIL PROTECTED]
Sent: Friday, April 13, 2007 11:08 AM
To: Jeff Chastain
Cc: [EMAIL PROTECTED]
Subject: Re: [css-d] IE 6 Float Issue
On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote:
Does anybody have any ideas what is happening here? This is really driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.
Thanks
-- Jeff
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue
Well, IE 6 is at it again for me. I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing
issues. I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal to
the floated block width plus one, which should cause there to be a 1px gap
between the two. The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart. Can anybody offer any suggestions here?
style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style
div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div
Thanks
-- Jeff
what about just floating the second block right instead of having the
margin. unless i am missing the point on this?
Jeff
__
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] IE Problem
I am not sure how to better describe this as I really cannot figure out what is going on. I have a problem where a block of content is simply disappearing in IE, but displays just fine in Firefox. The site is http://www.kcoutlet.com. The home page is split into 2 columns and the title bar of the top box in the left column is simply disappearing. If I change the order of the boxes, the title bar of whichever box is on top will disappear. I am using the NiftyCorners script to round the boxes, but removing it has not effect. Any ideas - this is really baffling me? Thanks -- Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
Re: [css-d] IE Problem
Okay, this gets even better. If I scroll the window such that the title bar scrolls off the page, then scroll back ... it magically appears again. Am I loosing my mind or is IE really this quirky? Thanks -- Jeff -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jeff Chastain Sent: Saturday, August 26, 2006 2:46 PM To: 'CSS Discuss' Subject: [css-d] IE Problem I am not sure how to better describe this as I really cannot figure out what is going on. I have a problem where a block of content is simply disappearing in IE, but displays just fine in Firefox. The site is http://www.kcoutlet.com. The home page is split into 2 columns and the title bar of the top box in the left column is simply disappearing. If I change the order of the boxes, the title bar of whichever box is on top will disappear. I am using the NiftyCorners script to round the boxes, but removing it has not effect. Any ideas - this is really baffling me? Thanks -- Jeff __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
Re: [css-d] Remove inherited background image?
Okay, here it is ... http://www.admentus.com/temp/index.htm
Basically what this is is a Suckerfish 3-level drop down menu that is being
styled to look like the Windows Silver Luna theme in Outlook. The
multi-level styling/inheritance on this is driving me nuts and there are
several issues I still dealing with.
In both FireFox and IE, when you move from a second tier link to a third
tier link (Tools - Account Manager - Community Profile), the yellow
background on the second tier link disappears where it should remain, so
apparently one of my background clearing attempts is working a little too
well.
Then in IE, there are two issues. When you mouseover a link that does not
have an icon (Site - Crescent Beach Villas), then you get the background
image of the first tier link, not the solid yellow background color that you
should get. There is also a one pixel margin/border bug that is causing a
bit of flicker in IE that does not appear in FireFox.
Primarily this application will be used by IE 6 and FireFox, but if anybody
can see any problems in other browsers or offer any quick easy solutions, I
would be glad to hear it.
Thanks.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Zoe M. Gillenwater
Sent: Friday, April 28, 2006 7:26 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Remove inherited background image?
Jeff Chastain wrote:
I have a multi-level list in which the top level list item has a
background image applied. The background image is being inherited by
all of the list items as expected, but I am trying to disable it for all
of the sub levels.
I tried a 'background-image: none' which seems to work for FireFox,
but not IE of course. Is there a way to do this?
ul id=list
li -- apply background image here
ul
li !--- but not here
#list li { background: url('test.gif'); } #list li li { background:
none; }
Jeff,
I'm betting there is something else in your page or CSS that is causing the
conflict. Can we see your page please?
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Remove inherited background image?
I have a multi-level list in which the top level list item has a background
image applied. The background image is being inherited by all of the list
items as expected, but I am trying to disable it for all of the sub levels.
I tried a 'background-image: none' which seems to work for FireFox, but not
IE of course. Is there a way to do this?
ul id=list
li -- apply background image here
ul
li !--- but not here
#list li { background: url('test.gif'); }
#list li li { background: none; }
Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
Re: [css-d] Remove inherited background image?
IE is processing the sublevel rule, it just does not clear the background
image that is inherited. I have tried both background: none; and
background-image: none;. The transparent image has been suggested and while
it sounds awful, that may be the only solution.
Thanks.
-Original Message-
From: francky [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 27, 2006 10:34 PM
To: Jeff Chastain
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Remove inherited background image?
Jeff Chastain wrote:
I have a multi-level list in which the top level list item has a
background image applied. The background image is being inherited by
all of the list items as expected, but I am trying to disable it for all of
the sub levels.
I tried a 'background-image: none' which seems to work for FireFox, but
not IE of course. Is there a way to do this?
ul id=list
li -- apply background image here
ul
li !--- but not here
#list li { background: url('test.gif'); } #list li li { background:
none; }
Thanks.
If no better solution is coming, maybe you can set it to
#list li li { background: url('transparent1x1.gif'); }
Or does IE not react at all in the sublevel-backgrounds?
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Suckerfish Drop Down and Fixed Height Container
I have the suckerfish drop down menu implemented inside of a div block which has a fixed position and height. The list displays just fine, but the drop downs are not displaying as they drop down below the height of the containing box. If I increase the height of the containing box (which breaks the layout) the drop downs appear fine. So, how can I get the drop downs to display outside of the containing box? I have setup the z-index on the containing box to be higher than the z-index of the div box below it and I have set the z-index of the ul lists to be higher than the containing box and nothing has any effect. Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
Re: [css-d] Suckerfish Drop Down and Fixed Height Container
Try this ... http://www.admentus.com/temp/index.htm At this point, I have made the containing block 4.5em high (it is supposed to be 1.5em) and if you hover over one of the links at the top of the page, you can see the start of the drop down list before it disappears. How do I get it to display on top of the other blocks? Thanks. -Original Message- From: Bill Brown [mailto:[EMAIL PROTECTED] Sent: Tuesday, April 25, 2006 3:14 PM To: 'Jeff Chastain' Subject: RE: [css-d] Suckerfish Drop Down and Fixed Height Container I have the suckerfish drop down menu implemented inside of a div block which has a fixed position and height. The list displays just fine, but the drop downs are not displaying as they drop down below the height of the containing box. If I increase the height of the containing box (which breaks the layout) the drop downs appear fine. So, how can I get the drop downs to display outside of the containing box? I have setup the z-index on the containing box to be higher than the z-index of the div box below it and I have set the z-index of the ul lists to be higher than the containing box and nothing has any effect. Thanks. Jeff, Do you have a URL we can have a look at to see the problem? Thanks. Bill Brown Webmaster, MacNimble.com ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Full Height Column?
I am trying to put together a layout similar to Microsoft Outlook where the left column of the page is full height and has a series of links at the bottom of that column. I have found plenty of examples of using background colors to make a column appear full height, but I need one that actually is 100% of the window height ... in other words, I am almost trying to build a frameset using CSS. Part 2 of this is how to get the links to be positioned at the bottom of the column no matter its contents. Any suggestions? Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
Re: [css-d] Full Height Column?
Okay, I have actually managed to get pretty close on this. It works in FireFox, but not IE of course. So, can anybody give this a look and provide any suggestions on fixing it for IE? In IE, the modePane won't drop to the bottom of the left column and the middle and right columns are not appearing at all. http://www.admentus.com/temp/index.cfm Thanks. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jeff Chastain Sent: Sunday, April 23, 2006 8:35 PM To: css-d@lists.css-discuss.org Subject: [css-d] Full Height Column? I am trying to put together a layout similar to Microsoft Outlook where the left column of the page is full height and has a series of links at the bottom of that column. I have found plenty of examples of using background colors to make a column appear full height, but I need one that actually is 100% of the window height ... in other words, I am almost trying to build a frameset using CSS. Part 2 of this is how to get the links to be positioned at the bottom of the column no matter its contents. Any suggestions? Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Nested floats and clearing?
I have run into this several times before, but today I cannot find a
work-around. So, what is the correct behavior or proper way to clear a
float that is nested inside of another float without clearing the parent
float as well? Example time ...
div id=left
some content here
/div
div id=right
img src=xyz.gif class=alignLeft /
some content here ...
br class=clear /
some content here ...
/div
--
.left { width: 49%; float: left; }
.right { width: 49%; margin-left: 50%; }
.alignLeft { float: left; }
.clear { clear: both; }
--
The problem here is that when the clear is used inside of the right column,
it does not just clear the right column, it clears the entire page - messing
up the two column layout. So, when you have a float nested within another
float, how do you clear just the inner float? The code I am working on
right now has objects floated both left and right in the right column, so I
have to use a clear: both which wipes out the layout. Any suggestions?
Thanks
-- Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
Re: [css-d] Nested floats and clearing?
Well, okay, bad example, but you get the idea. I just found another article
that said the same thing ... float all or float none. That is not a
detractor to CSS or anything
Thanks.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Els
Sent: Saturday, April 15, 2006 8:26 AM
To: Jeff Chastain; css-d@lists.css-discuss.org
Subject: Re: [css-d] Nested floats and clearing?
Jeff Chastain wrote:
I have run into this several times before, but today I cannot find a
work-around. So, what is the correct behavior or proper way to
clear a float that is nested inside of another float without clearing
the parent float as well? Example time ...
div id=left
some content here
/div
div id=right
img src=xyz.gif class=alignLeft /
some content here ...
br class=clear /
some content here ...
/div
--
.left { width: 49%; float: left; }
.right { width: 49%; margin-left: 50%; } .alignLeft { float: left; }
.clear { clear: both; }
--
The problem here is that when the clear is used inside of the right
column, it does not just clear the right column, it clears the entire
page - messing up the two column layout.
So, when you have a float nested within another float, how do you
clear just the inner float?
That's not what you are having. Your br float isn't inside another float.
div#right isn't floated. If it were floated, the nested float would not
clear the left column.
The code I am working on
right now has objects floated both left and right in the right column,
so I have to use a clear: both which wipes out the layout. Any
suggestions?
Yup, float the right column, or don't clear the nested floats.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Table Styling
I have a table that is being provided to me - i.e. I cannot modify the table structure, classes, or id names (or lack thereof). The table looks something like this ... table ... class=tabTable . tr td class=tabFootCelltotals/td td class=tabFootCellnbsp;/td td class=tabFootCell24,655/td td class=tabFootCell16,503/td td class=tabFootCell226,232/td /tr tr td class=tabFootCellaverages/td td class=tabFootCellnbsp;/td td class=tabFootCell2,4,66/td td class=tabFootCell1,650/td td class=tabFootCell22,623/td /tr /table What I would like to do is simply set the text alignment where the first cell is left justified and the last three cells are right justified. Is there a way to reference these table cells differently without a specific id tag on them? Thanks -- Jeff Chastain __ 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] Table Styling
Christian - What are you referring to here? I have looked through this page and I must be missing what you are seeing. Thanks for the help. -- Jeff -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Montoya Sent: Sunday, September 25, 2005 5:16 PM To: Jeff Chastain Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Table Styling There is a way to do that. Look here: http://icant.co.uk/csstablegallery/ __ 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/
RE: [css-d] Table Styling
The problem I have here is that I have absolutely no control over the HTML markup. In the code in my original post, the table itself has a class and each of the cells has the exact same class. I am trying to style the first cell differently from the other cells, only using CSS as I cannot change the HTML markup. So, only using CSS, is there a possible cross-browser solution to style the first table cell differently from the others without have a unique ID or class on it? Thanks -- Jeff -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Montoya Sent: Sunday, September 25, 2005 8:23 PM To: Jeff Chastain Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Table Styling There are a lot of tables there that do the styling you want... first TD is aligned one way and the rest of the TD's are styled another. It's a gallery of CSS used with tables. A great resource. On 9/25/05, Jeff Chastain [EMAIL PROTECTED] wrote: Christian - What are you referring to here? I have looked through this page and I must be missing what you are seeing. Thanks for the help. -- Jeff -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Montoya Sent: Sunday, September 25, 2005 5:16 PM To: Jeff Chastain Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Table Styling There is a way to do that. Look here: http://icant.co.uk/csstablegallery/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.orghttp://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/ __ 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] Weird inheritance issue?
This one has be stumped, so if somebody could point out the obvious for me, I
would appreciate it. I have a set of nested div blocks as shown below.
div id=container
div class=crWrapper
div class=photoBlock
div class=crWrapper ... /div
/div
div class=photoBlock
div class=crWrapper ... /div
/div
/div
/div
Now, in my style sheet, I have styles declared for the crWrapper div using
descendent selectors as follows ...
#container .crWrapper { border: 1px solid #f00; }
Doing this, all three div blocks with class 'crWrapper' have a red border.
Now, I want to change the border of the inner 2 blocks. I should be able to
add a new line giving me the following in my style sheet, right?
#container .crWrapper { border: 1px solid #f00; }
.photoBlock .crWrapper { border: 1px solid #00f; }
When I do this, all three blocks still have a red border. The weird thing is
that if I change the 'class=photoBlock' to 'id=photoBlock' and update the
styles accordingly, I have red and blue blocks. Why does this not work for a
class, but will work for an id (which I can't use as there are multiple
'photoBlock's)?
Thanks
-- Jeff
__
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] Weird inheritance issue?
Well, you learn something new every day. I knew an id had preference over a
class, I just assumed since I specified the class which was nested inside, that
I would be good. Makes the style sheet a bit uglier, but that works.
Thanks
-- Jeff
From: Tom Livingston [EMAIL PROTECTED]
Sent: Wednesday, September 21, 2005 12:33 PM
To: [EMAIL PROTECTED]
Subject: Re: [css-d] Weird inheritance issue?
On Wed, 21 Sep 2005 13:23:57 -0400, Jeff Chastain
wrote:
When I do this, all three blocks still have a red border. The weird
thing is that if I change the 'class=photoBlock' to 'id=photoBlock'
and update the styles accordingly,
I have red and blue blocks. Why does this not work for a class, but
will work for an id (which I can't use as there are multiple
'photoBlock's)?
IIRC, ID has higher specifity than class. So it rules. Did you try:
#container .photoBlock .crWrapper { border: 1px solid #00f; }
HTH
--
Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
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] Float clearing problem
I am working on a new layout for an application. The layout is a 2 column layout ... the left column is a 210px column floated left and the right column has a 210px left margin. The right column ( div id=mainPanel ) displays correctly ... i.e. at up against the header to the right side of the left panel. The problem I am running into is that the content of the right column drops down below the content of the left column even though the column itself is placed correctly. I have tried a variety of clearing options, but nothing seems to work. This is probably something basic, but I am not seeing it tonight. Can anybody see what is wrong? http://www.fbxsolutions.com/projects/ca/administration/account/commProfile.cfm Thanks -- Jeff Chastain __ 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] Insert line break using css?
I have a set of HTML markup that consists of 4 span tags in a row ... span id=span1span 1/span span id=span2span 2/span span id=span3span 3/span span id=span4span 4/span In one layout, I need the four tags to be on a single line next to each other. In the second layout (different stylesheet), I need the 4th tag to drop down and be on its own line. Is this possible to do using css only without changing the markup? I have tried a couple of things without luck, so I am looking for suggestions. Thanks -- Jeff __ 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] Insert line break using css?
That was what I was looking for. Thanks.
-- Jeff
_
From: Wayne [mailto:[EMAIL PROTECTED]
Sent: Wednesday, July 06, 2005 9:26 PM
To: Jeff Chastain
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Insert line break using css?
On 7/6/05, Jeff Chastain [EMAIL PROTECTED] wrote:
In the second layout (different stylesheet), I need the 4th tag to
drop down and be on its own line. Is this possible to do using css only
without changing the markup?
You should be able to do this like the following:
#span4 {
display: block;
}
-Wayne
__
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/
