Re: [css-d] CSS Tables and colspan
On 6/13/12, Markus Ernst wrote:
> Hello
>
> I am not sure if this message has got through the technical problems, so
> I take the liberty to send it again - I apologize for the case it worked
> and just nobody had an answer.
>
> I have a form, which I put in a layout table:
>
>
>
> First section of the form:
>
>
> Mylabel
>
>
>... (more label/input pairs)
>
> Other section, quite long title
>
>
> Otherlabel
>
>
>... (more label/input pairs)
>
>
> In order to make it responsive, I changed it to s, and applied CSS
> display:table-* declarations.
>
>
>
> First section of the form:
>
>
> Mylabel
>
>
>... (more label/input pairs)
>
> Other section, quite long title
>
>
> Otherlabel
>
>
>... (more label/input pairs)
>
>
> div { display:table }
> div div { display:table-row }
> div div div { display:table-cell }
>
> It works well, except that I can't get the elements with the section
> titles to span two rows - so the left column with the labels gets forced
> to the maximum width of the titles.
>
> I tried something like:
> div div div.colspan { display:block }
> Which did not seem to change anything.
>
> The only solution that comes to my mind is to separate the table into 2,
> and take the titles out of it. This means I will have to apply fixed
> widths to the left column's elements. Is there something better?
>
> Thanks for your comments!
> Markus
---
I've attached a screenshot of what I get with your table based code.
Is this how you want it to look? If not, can you explain betternot
sure what you mean by: " works well, except that I can't get the
elements with the section titles to span two rows - so the left column
with the labels gets forced to the maximum width of the titles." or
attached a link or jpg of what you want it to look like.
Rod Castello
---
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Tables and colspan
Le 14 juin 2012 à 04:25, Markus Ernst a écrit :
> I have a form, which I put in a layout table:
>
> ...
>
> In order to make it responsive, I changed it to s, and applied CSS
> display:table-* declarations.
>
> ...
>
> div { display:table }
> div div { display:table-row }
> div div div { display:table-cell }
>
> It works well, except that I can't get the elements with the section titles
> to span two rows - so the left column with the labels gets forced to the
> maximum width of the titles.
>
> I tried something like:
> div div div.colspan { display:block }
> Which did not seem to change anything.
That won't work, as the rendering engine expects to find an element with
display:table-cell. Absent that element, it will create one on the fly.
See CSS 2.1:17.2.1, part. the parsing described after 'The following steps are
performed in three stages.'
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
In the end your div.colspan is still wrapped in a cell whose width depends on
the overall width of table and cells.
> The only solution that comes to my mind is to separate the table into 2, and
> take the titles out of it. This means I will have to apply fixed widths to
> the left column's elements. Is there something better?
Why don't you keep it as an html table, and then change the display value of
table, tbody, tr, td, etc to 'block' within a media query ?
e.g
@media screen and (max-width:832px) { /* <-- whatever value floats your boat
here */
table, thead, tbody, tfoot, tr, th, td { display:block; /* other styles */ }
}
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering a form inside multiple divs
Part of the problem here might be DIVitis /and/ not using the FIELDSET element /and/ insufficient/improper knowledge of HTML table usage. This comes as a jolting surprise to many developers but the W3C has actually said that tables can be used for arranging form fields: "The HTML table model allows authors to arrange data --- text, preformatted text, images, links, forms, form fields, other tables, etc. --- into rows and columns of cells." See more at these two links: http://developer.cmzmedia.com/?p=71 and http://developer.cmzmedia.com/?p=349 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob Question
There is a 3px area of white space around each image.
I now have the following css:
body {
margin: 0 auto;
width: 1280px;
font-family: Arial,sans-serif;
color: black;
}
#menu {
display: inline;
position: relative;
clear: left;
margin: 0;
width: 1280px;
top: -1px;
height: 36px;
}
That's the whole file. I still have the following html:
Please advise.
TIA,
Chris
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob Question
On 6/13/12, Chris Stuckey wrote:
> I now have the following css:
>
> body {
> margin: 0 auto;
> width: 1280px;
> font-family: Arial,sans-serif;
> color: black;
> }
>
> #menu {
> display: inline;
> position: relative;
> clear: left;
> margin: 0;
> width: 1280px;
> top: -1px;
> height: 36px;
> }
>
> That's the whole file. I still have the following html:
>
>
> width="108" height="36" id="nav-izquierda" alt=""/>
> height="36" id="home" alt="Home button"/>
> width="113" height="36" id="services" alt="Services button"/>
> height="36" id="rentals" alt="Rentals button"/>
> height="36" id="nav-mitad" alt=""/>
> height="36" id="store" alt="Online Store button"/>
> width="120" height="36" id="locations" alt="Locations button"/>
> height="36" id="about" alt="About Us button"/>
> height="36" id="contact" alt="Contact Us button"/>
> height="36" id="nav-derecha" alt=""/>
>
>
> Now they do indeed appear inline; however, with about a 3px white border
> around them which has to go. Please advise.
> TIA,
> Chris
---
Is the 3px around each image, or around the entire group?
Rod Castello
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob Question
I now have the following css:
body {
margin: 0 auto;
width: 1280px;
font-family: Arial,sans-serif;
color: black;
}
#menu {
display: inline;
position: relative;
clear: left;
margin: 0;
width: 1280px;
top: -1px;
height: 36px;
}
That's the whole file. I still have the following html:
Now they do indeed appear inline; however, with about a 3px white border around
them which has to go. Please advise.
TIA,
Chris
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob Question
Add this to #menudisplay:inline;
The images width's should also add to less than the width of the div.
-Fred Hahnel
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Stuckey
Sent: Wednesday, June 13, 2012 3:11 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Noob Question
Hi;
I have this in my css:
#menu {
position: relative;
clear: left;
margin: 0;
width: 1280px;
top: -1px;
height: 36px;
}
and this in my html:
This displays each image in its own row. What I am trying to accomplish is to
get them to display all in one row as if they were table definitions in the
same row. How do?
TIA,
Chris
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
This message contains information which may be confidential and privileged.
Unless you are the intended recipient (or authorized to receive this message
for the intended recipient), you may not use, copy, disseminate or disclose to
anyone the message or any information contained in the message. If you have
received the message in error, please advise the sender by reply e-mail, and
delete the message. Thank you very much.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Tables and colspan
Hello
I am not sure if this message has got through the technical problems, so
I take the liberty to send it again - I apologize for the case it worked
and just nobody had an answer.
I have a form, which I put in a layout table:
First section of the form:
Mylabel
... (more label/input pairs)
Other section, quite long title
Otherlabel
... (more label/input pairs)
In order to make it responsive, I changed it to s, and applied CSS
display:table-* declarations.
First section of the form:
Mylabel
... (more label/input pairs)
Other section, quite long title
Otherlabel
... (more label/input pairs)
div { display:table }
div div { display:table-row }
div div div { display:table-cell }
It works well, except that I can't get the elements with the section
titles to span two rows - so the left column with the labels gets forced
to the maximum width of the titles.
I tried something like:
div div div.colspan { display:block }
Which did not seem to change anything.
The only solution that comes to my mind is to separate the table into 2,
and take the titles out of it. This means I will have to apply fixed
widths to the left column's elements. Is there something better?
Thanks for your comments!
Markus
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Noob Question
Hi;
I have this in my css:
#menu {
position: relative;
clear: left;
margin: 0;
width: 1280px;
top: -1px;
height: 36px;
}
and this in my html:
This displays each image in its own row. What I am trying to accomplish is to
get them to display all in one row as if they were table definitions in the
same row. How do?
TIA,
Chris
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie8 and ie9 font-size em issue and container to narrow.
Hello, Thanks again. > > 2/ Not sure what you mean regarding the width of the article; however, > once issue 1/ is resolved, then issue 2/ may no longer be problematic > [IE 8/9 will resolve itself] ? I was seeing the site on a 1024 resultion on IE, and I missed a rule there. So it wasn't an issue. All clear. ps- I will request the list help once I start dealing with my first (oh yeah) mobile friendly (or at least, mobile colleague) version. :) Thanks a lot, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie8 and ie9 font-size em issue and container to narrow.
On Wed, Jun 13, 2012 at 8:05 AM, mem wrote:
http://teias.dev/about
By looking into good browsers and IE you will find two issues:
1)
ISSUE:
The font size on hgroup h1 span is HUGE.
The way I found to "fix" was to pass that font-size declaration to
it's parent - is this ok ?
2)
article is taking 70% of something else, but not the intended container.
As you can see, ALL article content is to narrow when compared with
the same article rendered on good browsers.
Haven't found any way to properly solve this.
Any clue ?
k. regards,
mem
!/ Try resetting the font to:
article header hgroup h1 {
display:inline-block;
padding-top: 5px;
margin-right:2px;
font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
padding-left: 2%;
line-height: .9;
font-size: 2.6em;
}
article header hgroup h1 span {
display:inline-block;
background: #d8e5e4;
font-size:1em/*add*/;
/*font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
padding-left: 2%;
line-height: .9;
font-size: 2.6em;*/
}
2/ Not sure what you mean regarding the width of the article; however,
once issue 1/ is resolved, then issue 2/ may no longer be problematic
[IE 8/9 will resolve itself] ?
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie8 and ie9 font-size em issue and container to narrow.
bad link. My bad.
http://dev.teias.org.pt/about
k. regards,
mem
On Jun 13, 2012, at 13:05 , mem wrote:
> Please take a look on the following page:
>
> http://teias.dev/about
>
> By looking into good browsers and IE you will find two issues:
>
>
> 1)
> The point was to have the background narrow then the line-height so, I've
> come up with this:
>
> article header hgroup h1 {
>display:inline-block;
>padding-top: 5px;
>margin-right:2px;
> }
>
> article header hgroup h1 span {
>display:inline-block;
>background: #d8e5e4;
>font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
>padding-left: 2%;
>line-height: .9;
>font-size: 2.6em; <-- ON IE 9 (at least) we get a HUGE font instead of the
> desired size like seen on good browsers;
> }
>
> ISSUE:
> The font size on hgroup h1 span is HUGE.
> The way I found to "fix" was to pass that font-size declaration to it's
> parent - is this ok ?
>
>
>
>
> 2)
> article is taking 70% of something else, but not the intended container.
> As you can see, ALL article content is to narrow when compared with the same
> article rendered on good browsers.
>
> Haven't found any way to properly solve this.
> Any clue ?
>
>
>
>
> k. regards,
> mem
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie8 and ie9 font-size em issue and container to narrow.
Please take a look on the following page:
http://teias.dev/about
By looking into good browsers and IE you will find two issues:
1)
The point was to have the background narrow then the line-height so, I've come
up with this:
article header hgroup h1 {
display:inline-block;
padding-top: 5px;
margin-right:2px;
}
article header hgroup h1 span {
display:inline-block;
background: #d8e5e4;
font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
padding-left: 2%;
line-height: .9;
font-size: 2.6em; <-- ON IE 9 (at least) we get a HUGE font instead of the
desired size like seen on good browsers;
}
ISSUE:
The font size on hgroup h1 span is HUGE.
The way I found to "fix" was to pass that font-size declaration to it's parent
- is this ok ?
2)
article is taking 70% of something else, but not the intended container.
As you can see, ALL article content is to narrow when compared with the same
article rendered on good browsers.
Haven't found any way to properly solve this.
Any clue ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
