[css-d] Tables to CSS design - banner
I'm trying to move a table-based design to css layout, and I have a few questions. I'm not trying to make it a perfect match (I'm not the designer) but I want to get it close, and use it to answer a few questions I have. Here's the table layout that was given to me: http://hank.org/demos/bannertable.html http://hank.org/demos/global.css Here's the css version: http://hank.org/demos/banner.html http://hank.org/demos/banner.css My main questions are how should the layout change with window resizing and with font changes? And how to best implement that. 1) The table version has an explicit width and so shrinking the window doesn't effect the design (just requires scrolling). In the css version the DO SOMETHING links starts wrapping. I'm not really sure what the correct behaviour is (guess it depends on the client). This seems like a reasonably common design, so any suggestions how you would lay this out to best deal with font changes and window resizing? 2) If I do set a width, is it better to use em instead of px for the width, so the width adjusts with the font sizes? 3) The bottom 1/2 of the banner has two div's, the DO SOMETHING text and links, and the search box. Is there a way to get the text from both divs to line up on the same center line (vertically)? Or is it a matter of just adjusting both until they match? 4) With the css version, making the font size larger (ctrl+ in firefox) makes the search box grow, but the containing orange box doesn't grow to contain it. The containing box is height: 40px, again, would it be better to use em in that case? Thanks, -- Bill Moseley [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tables to CSS design - banner
Bill, on Tuesday, December 27, 2005 at 16:23 Bill Moseley wrote: 1) The table version has an explicit width and so shrinking the window doesn't effect the design (just requires scrolling). In the css version the DO SOMETHING links starts wrapping. I'm not really sure what the correct behaviour is (guess it depends on the client). The table layout has a fixed width while your css layout is liquid. These are two different approaches. IMHO you should give your css layout a min-width with appropriate fixes for IE. (http://css-discuss.incutio.com/?page=MinWidth) 2) If I do set a width, is it better to use em instead of px for the width, so the width adjusts with the font sizes? If you use loads of background-images it will be easier to use px and give the layout enough space for the text to grow at least to 150%. IMHO it is more usable if the whole layout is sized in em, but this is personal preference. 3) The bottom 1/2 of the banner has two div's, the DO SOMETHING text and links, and the search box. Is there a way to get the text from both divs to line up on the same center line (vertically)? Or is it a matter of just adjusting both until they match? You can control it by box and line-heights. 4) With the css version, making the font size larger (ctrl+ in firefox) makes the search box grow, but the containing orange box doesn't grow to contain it. The containing box is height: 40px, again, would it be better to use em in that case? Don't use height for the surrounding box. Clear the floats and let the box take the space it needs. (Use padding to make it a bit bigger if you need it!) regards Martin __ 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] Tables to CSS design - banner
Bill Moseley wrote: I'm trying to move a table-based design to css layout... Here's the table layout that was given to me: http://hank.org/demos/bannertable.html http://hank.org/demos/global.css Here's the css version: http://hank.org/demos/banner.html http://hank.org/demos/banner.css My main questions are how should the layout change with window resizing and with font changes? And how to best implement that. In addition to Martin's suggestions, start with a proper doctype (you have none now; consequently, ie is in quirks mode) and validate the markup. That sure is a lot of code for a banner. Thanks, Regards, ~david Laakso __ 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] Tables to CSS design - banner
On Tue, Dec 27, 2005 at 11:38:42AM -0500, David Laakso wrote: In addition to Martin's suggestions, start with a proper doctype (you have none now; consequently, ie is in quirks mode) and validate the markup. That sure is a lot of code for a banner. I knew someone would comment about about the doctype. I'll update then when I have some free time, but I was asking more about overall design, not a specific browser problem. When you say a lot of code, do you mean for the css version or the table version? If the css version, how would you write it differently in less code? -- Bill Moseley [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site Check - Internet Explorer (Win)
Hi Guys Could someone please take a look at this site in WinIE? I have given the wrap a background image and I am hoping it works in IE. Basically I am trying new ideas Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] Site Check - Internet Explorer (Win)
Hi, IE 6 using XP is forcing the right column down below the main content. Screenshot available on request. Jim On 12/27/05, Richard Brown [EMAIL PROTECTED] wrote: Hi Guys Could someone please take a look at this site in WinIE? I have given the wrap a background image and I am hoping it works in IE. Basically I am trying new ideas __ 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] site check - IE bug?
Please forgive me if I am asking a sophomoric or oft-asked query. I am new to the list, and did browse the archives, but I believe what I am seeing has some sort of nickname that I do not yet know. What is going on in this page? http://www.tfelice.com/variety/index.html Viewed in Firefox, all is as I would expect. Viewed in IE 6.0.28 much of the backgrounds are 'missing'. I can take another application window, and 'wipe' it over the top of the IE layout, and expose portions of the background. Is this what is referred to as the 'peekaboo bug'? The definitions of the bug I have seen refer more to floats, afaict. Any help would be greatly appreciated. Thanks! I would be very interested in hearing what causes this, and possible workarounds. Thanks, Tony __ 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] width: 100%, 100% in IE
Paul Walker wrote: I would greatly appreciate it if someone could explain to me why. I have tried my very best in your last thread. At what point do you have a specific question? Ingo -- http://www.satzansatz.de/css.html __ 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] Site Check - Internet Explorer (Win)
Hi Jim and All I have read the Position is Everything site on the double margin bug and it suggested applying, display: inline to the sidebar. I have done this and hope that it makes a difference! Please could someone tell me whether I should I also apply it to the content div because that is floated left with a margin-left as well? Many thanks. Site url: http://www.cregy.co.uk/ Site css: http://www.cregy.co.uk/wp-content/themes/Cregy/style.css On 27 Dec 2005, at 20:26, Jim Davis wrote: Richard, This shows the body of your page in IE 6 with the MS DOM inspector showing the location of the div's. I haven't looked at you css, but I suspect you are dealing with the IE double margin bug. See http://www.positioniseverything.net/ for more information. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] width: 100%, 100% in IE
All the padding left and right is inherited down, for a combined total of
92px at any width.
This creates a fix, but moves the subnav over 92:
#menu ul {
list-style-type: none;
float: none; display: none;
margin: 0; padding: 5px 0 5px 102px;
/*added 92 to the previous 10*/
background-image: none;
background-color: #fff;
border: none; border-bottom: solid 1px #000;
}
Hth
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:41 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] width: 100%, 100% in IE
The problem with your proposed solution is that 1) it creates a horizontal
scroll bar in the browser and 2) if the window is resized small enough, the
original problem resurfaces.
Perhaps someone has a better method of accomplishing the same look w/
different (but symantically correct) markup and css?
Thanks,
~PJ
- Original Message -
From: {tonyFelice} [EMAIL PROTECTED]
To: 'Paul Walker' [EMAIL PROTECTED]
Sent: Tuesday, December 27, 2005 12:25 PM
Subject: RE: [css-d] width: 100%, 100% in IE
Paul,
I don't know that I could tell you *why* but I can tell you the
width:150%;
seems to fix it.
Hth.
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:07 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] width: 100%, 100% in IE
The nested unordered list is absolutely positioned and set with a width of
100%, but does not take up the width of the browser window in IE6. I
would
greatly appreciate it if someone could explain to me why.
The markup and css are here:
http://www.paulwalker.tv/tabs.htm
Thank you,
~PJ
__
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-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] width: 100%, 100% in IE
The extra space is not always 92px, it varies according to which submenu is
active.
Quick question: How did you figure out the gap was exactly 92px?
- Original Message -
From: {tonyFelice} [EMAIL PROTECTED]
To: 'Paul Walker' [EMAIL PROTECTED]
Sent: Tuesday, December 27, 2005 1:21 PM
Subject: RE: [css-d] width: 100%, 100% in IE
Paul,
I'm sorry I forgot about the scrollbars.
Is the extra space always 92px for you? That's what it seems to be for
me,
and it's very odd, and to me, indicates something declared.
Part of it is inherited from the
#menu li {
float: left;
margin: 0; padding: 0 0 0 9px;
background: url(left.gif) no-repeat left top;
}
Reducing the left padding to 0 leaves me with 74px of space, a loss of 18.
I continued on, and found that all left/right padding in your example
contributed a portion of the gap.
#menu {
list-style-type: none;
margin: 0; padding: 10px 0px 0px 0px; /*can pull left out
for a loss of 4; orig val 10*/ /*can pull right out for a loss of 4; orig
val 10*/
font: small/1.5em georgia, serif;
}
#menu li {
float: left;
margin: 0; padding: 0px 0px 0px 0px; /*can pull this out for
a loss of 18; orig val 9*/
background: url(left.gif) no-repeat left top;
}
#menu a {
float: left; display: block;
padding: 5px 0px 4px 0px; /*can pull left out for a loss of
6; orig val 6*/ /*can pull right out for a loss of 15; orig val 15*/
background: url(right.gif) no-repeat right top;
font-weight: bold; color: #35595a; text-decoration: none;
}
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:41 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] width: 100%, 100% in IE
The problem with your proposed solution is that 1) it creates a horizontal
scroll bar in the browser and 2) if the window is resized small enough,
the
original problem resurfaces.
Perhaps someone has a better method of accomplishing the same look w/
different (but symantically correct) markup and css?
Thanks,
~PJ
- Original Message -
From: {tonyFelice} [EMAIL PROTECTED]
To: 'Paul Walker' [EMAIL PROTECTED]
Sent: Tuesday, December 27, 2005 12:25 PM
Subject: RE: [css-d] width: 100%, 100% in IE
Paul,
I don't know that I could tell you *why* but I can tell you the
width:150%;
seems to fix it.
Hth.
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:07 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] width: 100%, 100% in IE
The nested unordered list is absolutely positioned and set with a width
of
100%, but does not take up the width of the browser window in IE6. I
would
greatly appreciate it if someone could explain to me why.
The markup and css are here:
http://www.paulwalker.tv/tabs.htm
Thank you,
~PJ
__
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-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] width: 100%, 100% in IE
Ok, that was close.
#menu ul {
list-style-type: none;
float: none; display: none;
margin: 0; padding: 5px 92px 5px 10px;
background-image: none;
background-color: #fff;
border: none; border-bottom: solid 1px #000;
}
Fixes the provided example perfectly.
But, although the right padding was 92px and could be affected by modifying
the inherited padding, that wasn't the real source. Anybody want to season
a guess as to what else in this page is 92px? The left of the active tab.
So, because these are nested the way they are, applying the 'selected' class
to any of the subsequent subnavs, as would be the case in production, the
amount of right padding on the subnav is equal to the left of the active
tab.
I can tell that some brain-bending went into this layout, so maybe an
appropriate IE fix would be to handle the subnav background and lower border
in a completely separate block, impervious to these idiosyncracies.
Hth
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of {tonyFelice}
Sent: Tuesday, December 27, 2005 2:31 PM
To: 'Paul Walker'
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] width: 100%, 100% in IE
All the padding left and right is inherited down, for a combined total of
92px at any width.
This creates a fix, but moves the subnav over 92:
#menu ul {
list-style-type: none;
float: none; display: none;
margin: 0; padding: 5px 0 5px 102px;
/*added 92 to the previous 10*/
background-image: none;
background-color: #fff;
border: none; border-bottom: solid 1px #000;
}
Hth
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:41 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] width: 100%, 100% in IE
The problem with your proposed solution is that 1) it creates a horizontal
scroll bar in the browser and 2) if the window is resized small enough, the
original problem resurfaces.
Perhaps someone has a better method of accomplishing the same look w/
different (but symantically correct) markup and css?
Thanks,
~PJ
- Original Message -
From: {tonyFelice} [EMAIL PROTECTED]
To: 'Paul Walker' [EMAIL PROTECTED]
Sent: Tuesday, December 27, 2005 12:25 PM
Subject: RE: [css-d] width: 100%, 100% in IE
Paul,
I don't know that I could tell you *why* but I can tell you the
width:150%;
seems to fix it.
Hth.
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:07 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] width: 100%, 100% in IE
The nested unordered list is absolutely positioned and set with a width of
100%, but does not take up the width of the browser window in IE6. I
would
greatly appreciate it if someone could explain to me why.
The markup and css are here:
http://www.paulwalker.tv/tabs.htm
Thank you,
~PJ
__
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-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] width: 100%, 100% in IE
Good thinking...I did create a create a class just for that.
div id=menuborder/div
#menuborder {
position: absolute; top: 35px; left: 0; z-index: -10;
width: 100%; height: 20px;
border-bottom: solid 1px #4C7F80;
background: #fff;
display: none;
}
Obviously, not the ideal solution. I think I may experiment with nesting an
unordered list in a definition list next.
Another question: What's a good source to read about inheritance, how to
override it and browser quirks? Also is padding: 0 0 0 9px; ever treated
differently than padding-top: 0; padding-right: 0; padding-bottom: 0;
padding-left: 9px; ?
Thanks,
~PJ
- Original Message -
From: {tonyFelice} [EMAIL PROTECTED]
To: '{tonyFelice}' [EMAIL PROTECTED]; 'Paul Walker'
[EMAIL PROTECTED]
Cc: css-d@lists.css-discuss.org
Sent: Tuesday, December 27, 2005 1:52 PM
Subject: Re: [css-d] width: 100%, 100% in IE
Ok, that was close.
#menu ul {
list-style-type: none;
float: none; display: none;
margin: 0; padding: 5px 92px 5px 10px;
background-image: none;
background-color: #fff;
border: none; border-bottom: solid 1px #000;
}
Fixes the provided example perfectly.
But, although the right padding was 92px and could be affected by
modifying
the inherited padding, that wasn't the real source. Anybody want to
season
a guess as to what else in this page is 92px? The left of the active tab.
So, because these are nested the way they are, applying the 'selected'
class
to any of the subsequent subnavs, as would be the case in production, the
amount of right padding on the subnav is equal to the left of the active
tab.
I can tell that some brain-bending went into this layout, so maybe an
appropriate IE fix would be to handle the subnav background and lower
border
in a completely separate block, impervious to these idiosyncracies.
Hth
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of {tonyFelice}
Sent: Tuesday, December 27, 2005 2:31 PM
To: 'Paul Walker'
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] width: 100%, 100% in IE
All the padding left and right is inherited down, for a combined total of
92px at any width.
This creates a fix, but moves the subnav over 92:
#menu ul {
list-style-type: none;
float: none; display: none;
margin: 0; padding: 5px 0 5px 102px;
/*added 92 to the previous 10*/
background-image: none;
background-color: #fff;
border: none; border-bottom: solid 1px #000;
}
Hth
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:41 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] width: 100%, 100% in IE
The problem with your proposed solution is that 1) it creates a horizontal
scroll bar in the browser and 2) if the window is resized small enough,
the
original problem resurfaces.
Perhaps someone has a better method of accomplishing the same look w/
different (but symantically correct) markup and css?
Thanks,
~PJ
- Original Message -
From: {tonyFelice} [EMAIL PROTECTED]
To: 'Paul Walker' [EMAIL PROTECTED]
Sent: Tuesday, December 27, 2005 12:25 PM
Subject: RE: [css-d] width: 100%, 100% in IE
Paul,
I don't know that I could tell you *why* but I can tell you the
width:150%;
seems to fix it.
Hth.
Tony
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Paul Walker
Sent: Tuesday, December 27, 2005 1:07 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] width: 100%, 100% in IE
The nested unordered list is absolutely positioned and set with a width
of
100%, but does not take up the width of the browser window in IE6. I
would
greatly appreciate it if someone could explain to me why.
The markup and css are here:
http://www.paulwalker.tv/tabs.htm
Thank you,
~PJ
__
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-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 --
Re: [css-d] site check - IE bug?
{tonyFelice} wrote:
http://www.tfelice.com/variety/index.html
Now, you should have addressed that page for direct access, so I didn't
have to break out of frames in order to look at the actual trouble-spot.
Viewed in Firefox, all is as I would expect.
Viewed in IE 6.0.28 much of the backgrounds are 'missing'.
It's an IE/win bug alright. I think you've got the name right also,
although I never give name to bugs. I prefer descriptions since I would
run out of names before covering 1% of all IE-bugs.
The bug falls within the 'missing Layout'[1] group, and can be cured by
adding a 'hasLayout' trigger.
However, in your example one of the less destructive triggers is very
effective when placed at the right element.
Try adding:
#border1 {position: relative;}
...which is the most used cure for your version of the bug. Tested on
your page.
BTW: looks like an overdone nesting-case if a white border is all you
want on that page. One wide border on #page would do just fine.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] dt and dd Elements into one line?
hello there! i'm playing around with a form where labels an inputs are related also through the dl-Elements dd and dt. how can i get a dd an dt into one row? i could not figure it out. for example: dl dtlabel for=abcABC/label/dt ddinput id=abc name=abc //dd /dl how will dt and dd get into one line of text? i'm confused because floating and inline-display of them doesn't work for me. thanks for helping links or comments! henry. __ 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] width: 100%, 100% in IE
Il giorno 27/dic/05, alle ore 23:01:05, Paul Walker ha scritto: Also is padding: 0 0 0 9px; ever treated differently than padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 9px; ? Thanks, ~PJ It's exactly the same one -- ilduca69 XHTML+CSS http://ilduca69.altervista.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/
[css-d] FW: dt and dd Elements into one line?
Henry,
I apologize if my previous reply was hasty, I now see that you mentioned
that inline display does not work for you.
What browser/platform are you testing the code on?
Thanks in advance,
Tony
!--- snippet follows, tested in IE6/win fox/win ---
html
head
style type=text/cssdd,dt{display:inline;}/style
/head
dl
dt
definition term/dt
dd
definition data
/dd
/dl
body
/body
/html
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of heinrich klassen
Sent: Tuesday, December 27, 2005 4:00 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] dt and dd Elements into one line?
hello there!
i'm playing around with a form where labels an inputs are related also
through the dl-Elements dd and dt.
how can i get a dd an dt into one row? i could not figure it out.
for example:
dl
dtlabel for=abcABC/label/dt
ddinput id=abc name=abc //dd
/dl
how will dt and dd get into one line of text? i'm confused because
floating and inline-display of them doesn't work for me.
thanks for helping links or comments!
henry.
__
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] Site Check
Hello Everybody, My First post. I am a learning newbie I am rewriting my site in css the home page is now complete at http://www.ivanstestsite.co.uk/index2.html my external css styles are at http://www.ivanstestsite.co.uk/CssFiles/oldglossopstylesheet.css http://www.ivanstestsite.co.uk/CssFiles/oldglossophorizontalmenu1.css http://www.ivanstestsite.co.uk/CssFiles/oldglossopvertmenu.css Everything seems OK in firefox but the horizontal menu does not act as well as I would like in ie6. Any hints or comments would be very welcome. Also any results in any other browsers would help Cheers Ivan www.old-glossop.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] Active link styling with php
Kenoli Oleari wrote: Some of you may be interested in the following page: http://www.longrange.org/nav_test/page_1.php --Kenoli IE does not understand it. Opera thinks the page is fuchsia. And for once, I think I'll side with IE-- as I do not understand it, either. Best, ~david Laakso __ 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] Site Check
Hi Ivan, I'm new too, (first day =), but I would still love to help. I think the best thing to do in this instance is for you to produce what's called a 'minimal test case', in other words, isolate the exact elements of the layout that you have issue with, and present each individually. For example, isolate only the markup involved in creating the nav menu, as well as the css styles that directly relate to it, and compile them into a single page free of content and the like. It would then be easy for you to make a specific declaration about the performance/bugginess of the nav, for example, to say, I find that certain elements of the navigation are taller than others, and I would like them to display in a uniform fashion. Similarly, it would then be easier for a larger number of people to asses the issues in this way. Does that help at all? Tony -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ivan Bell Sent: Tuesday, December 27, 2005 5:07 PM To: css-d@lists.css-discuss.org Subject: [css-d] Site Check Hello Everybody, My First post. I am a learning newbie I am rewriting my site in css the home page is now complete at http://www.ivanstestsite.co.uk/index2.html my external css styles are at http://www.ivanstestsite.co.uk/CssFiles/oldglossopstylesheet.css http://www.ivanstestsite.co.uk/CssFiles/oldglossophorizontalmenu1.css http://www.ivanstestsite.co.uk/CssFiles/oldglossopvertmenu.css Everything seems OK in firefox but the horizontal menu does not act as well as I would like in ie6. Any hints or comments would be very welcome. Also any results in any other browsers would help Cheers Ivan www.old-glossop.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/
[css-d] different height on form elements due to different DTD
hi list, here is the problem:
CSS:
input{
height:30px;
padding:0;
margin:0;
font:12px Verdana,sans-serif;
}
html(no DTD):
html
headtitletest/title/head
body
input type=text /
input type=submit value=text button /
/body/html
The form elements are displayed in the same height(IE,Firefox,Opera),
but when I changed the DTD to xhtml,
!doctype html public -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
they are different, the button is a little bit short in Firefox and IE,
while opera works just fine.
so what is the exact thing does the botton have to do with DTD? I'm so
confused about this.
can anyone please tell me why?
Thanks!
--
t.E.l : +8605513602273
m.o.B : +8613855184110
q.Q : 7387905
B.L.o.G : http://old9.wordpress.com
E.m.A.i.L : qi.jiahui⊕gmail.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] position: absolute; width: 100%, IE width not 100%
Hallo Paul, This was my response to your first question about the same topic; posted in Holland on Mon Dec 26 02:07:04 CST 2005 (time notation in my send-box: Mon, 26 Dec 2005 09:07:04 +0100). I tried to forward it to you (only) on Tue, 27 Dec 2005 05:39:35 +0100. It seems it did not reach you in the one or other way. My suggestion was to start a whole new ul, illustrated with working test page for IE, FF and Opera. Hope you can use my remarks alternative. Or do you think it's not good enough for your purpose? francky Tue Dec 20 20:26:15 CST 2005 Paul Walker wrote: I have unordered list that is absolutely positioned within another unordered list. The display is defined to block and the width is set to 100%, but in IE the width is not quite reaching 100%. It works fine in Firefox and I have not tested in other browsers. The example file can be seen here. http://www.paulwalker.tv/tabs.htm I welcome any other general comments regarding my markup and css. I remarked some other things in http://www.paulwalker.tv/tabs.htm: in FF there is a scrollbar left-right at the bottom (about 5px scrollable, but nevertheless), in Opera the submenu-items stay vertical, and (in all browsers) things go wrong when trying to enlarge the fontsize (clientside). The last because of the fixed format of the bg-image. So I tried to build it up from scratch, to see where the ship would go down; with one of the Suckerfishes as a save harbour to start (omitting the vertical sublisting when hovering - in the same time no sf-javascript for hovering in IE needed). With trial and error (not so good in the theory ;-), I found that it has also to do with the doctype: in FF in some doctypes you cannot (anyway: I couldn't) get rid of the margin between an omitted list-img and the starting of the text (at list-style-type: none). The problem is to get the whole thing liquid and getting the subitems horizontal as well. In Firefox I had it working, but I didn't succeed in IE and Opera. Then I decided to separate the subitems within the li's of the items. I made separate ul's for all the subitems. This way the subitems can be made horizontally again in IE and Opera. Not for the css beauty top-100, but as long as you have static pages (and don't need a show of the subitems by hovering the items), it doesn't matter for the effect on screen. * That can be a problem for no-style readers: the submenu-items show on the same level as the menu-items, without any correspondency. But with some extra skip-/go to-links (with margin-left -px hided for normal seeing) I think this problem can be reduced. Well, in the end I got a working draft (a bit nightly build too ;-), without using position:absolute: http://home.tiscali.nl/developerscorner/css-discuss/paulwalker-francky.htm Perhaps this is something in the good direction, I hope you can use it for further development. franky ps: last times I could not reach the original anymore; happily I did not empty my cache ! Cannot send to Paul Walker paul at paulwalker.tv at the moment: server down? __ 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] Recommendations on layout??
I'm trying to figure out the best way to layout this page, of course not using tables to line up the pricing in one column with services in the previous column, and yet think ahead for the future of their shopping cart, such as an add to, or go to button possibly in 3rd and 4rth columns. Anyone have some bright ideas? It obviously can't be an ID since it will get used multiple times in pages. I'm thinking possibly this can extend to the thumb nail images within other aspects of the shopping cart, such as a thumbnails replacing the services (as mentioned above) and yet be within a category (like gift item - candles) and have a name below it with 2 -3 words at most. http://videointegrations.com/serenity/high_brow_wax.html Thanks ahead! -scott __ 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] different height on form elements due to different DTD
old9 wrote: html(no DTD): ...vs. !doctype html public -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; Source-code and CSS are interpreted differently, and it's either in accordance with standards or in accordance with something else. No DTD = no standard - browsers renders/act as their creators found best. That's all they had back around 1995, and the results of the browser-wars still shows. We often call it 'quirks mode'. Transitional DTD = almost standard - browsers renders/act close to W3C standards. Not really a standard at all, but usually close enough for comfort. Not all browsers have this 'almost standard' mode, and will then usually interpret 'Transitional' as 'Strict'. Strict DTD = browsers are supposed to render/act as close to any written part of the relevant W3C standards as they possibly can. Few do, but they are getting closer. --- Have a Google for the rest - search for 'quirks mode', 'standard compliant mode', 'strict mode' and so on. Plenty of nonsense around, but some good and informative stuff too. --- Recommendation: Once you've read all about the subject; go read up on HTML4.01 Strict, and stick to it. If you know how to code for xml-compliant browsers - and only then - you may code in accordance with XHTML1.0 Strict. It's all found on the W3C site http://www.w3.org/. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Active link styling with php
Thanks for the feedback.-- That's interesting. It's working on all three browsers on the Mac, including Opera. No fuchsia. Does IE Win just do nothing with it? Is there any clear way in which it breaks in WIE? I must say I don't understand the code either. I started to parse out the php and it seemed like a kind of hybrid of procedural and object oriented code. It is probably php4, which only partially implemented objects. I guess it's not much use if it doesn't work on Windows (I presume that is the platform you are on). I will look at it some more and see if I can identify any known IE Windows issues. There are hovers, but they are all related to links, which is something i think Microsoft understands. There are two things I try to give as little support to as possible: Microsoft and George Bush. Unfortunately, there are still a lot of unrepentant sinners in the world. Some day . . . --Kenoli On Dec 27, 2005, at 4:11 PM, David Laakso wrote: Kenoli Oleari wrote: Some of you may be interested in the following page: http://www.longrange.org/nav_test/page_1.php --Kenoli IE does not understand it. Opera thinks the page is fuchsia. And for once, I think I'll side with IE-- as I do not understand it, either. Best, ~david Laakso Kenoli Oleari Neighborhood Assemblies Network [EMAIL PROTECTED] 510-601-8217 http://www.horizonsofchange.com http://www.sfnan.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/
[css-d] Older IE, future IE 7 and multi styles
When I created a web page that use three different styles with style switcher and configured them using FireFox. It works beautifully. However, when I approached IE and read on the net that it is suggested to use conditional comments instead of hacks. I realized that I got more than 3 style files and how can I get around to it using style switcher? My approach would be to use conditional comments INSIDE these style files that I've been working on. Is it possible or do anyone have better idea? Here is the page: http://www.deafaviator.org/deepspace/index.php On bottom of default page, there are 3 style list. -- Power to people, Linux is here. __ 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] Pure CSS Image Map Tooltips
Has anyone seen an example of pure CSS tooltips being used on an image map? I keep finding plenty of examples using JavaScript, but none with just CSS. Is my search a lost cause? Thanks! -- Yazmin Wickham Contractor - Internet Development http://www.yazmin.net __ 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 Nav Problem
Les, On Dec 27, 2005, at 10:03 PM, Les Mizzell wrote: I'm using a horizontal navigation with sub-list. I've used this on a bunch of sites with no problem. However, I ain't had enough coffee today or something. Here's a quick and dirty version not complicated by anything else on the page: Test Nav File: http://www.columbiacityjazz.com/navTEST.cfm Test CSS: http://www.columbiacityjazz.com/navTEST.css Works exactly as expected in Netscape and Firefox. Ain't working in I.E. I can't easily help you with ie/win since I'm on a mac. I can tell you that the hover effect works on ff1.5, safari 1.31, and Opera9 with one exception. It will help you low-vision users to remove the height from #nav a so when we size the text up for easy readability it doesn't chop off the bottom half of all the words. the bad news is that the sub-menus don't drop down in ie/mac. The reason it doesn't work in ie/win is that that browsers will only honor hovers applied to 'a' tags. Thats why people have tried javascript assisted solutions like 'Son of Suckerfish' hth Roger, Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Pure CSS Image Map Tooltips
Yazmin, On Dec 27, 2005, at 10:44 PM, Yazmin Media wrote: Has anyone seen an example of pure CSS tooltips being used on an image map? I keep finding plenty of examples using JavaScript, but none with just CSS. Is my search a lost cause? If you ned irregular shapes, then yes. I think so. If you absolutely position a elements on an image (each a element will be rectangular) then just add the 'title' attribute to the a element to get the tooltip. hth Roger, Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ 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] Pure CSS Image Map Tooltips
On 12/27/05, Roger Roelofs [EMAIL PROTECTED] wrote: Yazmin, If you ned irregular shapes, then yes. I think so. If you absolutely position a elements on an image (each a element will be rectangular) then just add the 'title' attribute to the a element to get the tooltip. Roger, I do need irregular shapes. Oh well. Thanks for the reply! Here I come DHTML... -- Yazmin Wickham Contractor - Internet Development http://www.yazmin.net __ 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 Nav Problem
The reason it doesn't work in ie/win is that that browsers will only honor hovers applied to 'a' tags. Thats why people have tried javascript assisted solutions like 'Son of Suckerfish' DOH! ...and there you go! I forgot to include the javascript file!!! Jezz! I haven't made accessibility adjustments yet - but thanks for noticing that! Thanks, Les __ 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] dt and dd Elements into one line?
On Dec 27, 2005, at 2:59 PM, heinrich klassen wrote: how can i get a dd an dt into one row? i could not figure it out. A quick search on google for Definition Lists should yield some helpful results... This site will prob have what you need, or it will at least give you some good ideas: (Scroll down to the bottom of the page, look for header Style definition lists) http://www.maxdesign.com.au/presentation/definition/ Hth, Cheers, Micky __ 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] Double Margin Bug in WinIE
Hi All I was informed that I might have the double margin bug for the following site: Site url: http://www.cregy.co.uk/ Site css: http://www.cregy.co.uk/wp-content/themes/Cregy/style.css I applied the P.I.E. solution to the sidebar and would like to know that all is working fine now. Please could someone take a look for me. I was unsure as to whether I needed to add display: inline; to both the sidebar and content column. Many thanks for your help. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] Older IE, future IE 7 and multi styles
Scott Hamm wrote: ... I realized that I got more than 3 style files and how can I get around to it using style switcher? My approach would be to use conditional comments INSIDE these style files that I've been working on. Is it possible or do anyone have better idea? Conditional comments are no good inside stylesheets, they belong in the HTML source-code. Probably many ways to combine stylesheet-links. I use the javascript-switcher: http://www.howtocreate.co.uk/jslibs/htmlhigh/swapstyle.html ...which is capable of combining any number of stylesheets. Will work with stylesheet-links both outside and inside conditional comments. I don't use this stylesheet-switcher to handle links from inside conditional comments, but did test that method a long time ago. Note that at least IE6 and older IE-versions can only handle some 30 stylesheet-links in total in a page, regardless of how many are activated at any one time. Don't know about IE7, and other, new, browsers don't have known limitations on this point. --- Gecko have some problems with my implementation, as it can be seen/tested on my site. That's not the switcher at fault, but a flaw in Gecko when it comes to handling of the heavily styled selector itself - a Gecko-bug. IE, Opera and Safari handle it flawless, and the script itself covers just about every browser out here, AFAIK. Check documentation on http://www.howtocreate.co.uk/ regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] different height on form elements due to different DTD
[snip: problem with different looks on different doctypes] I'll just throw in a quick link to our WIKI as supplemental answer to Sørtun's neat one: http://css-discuss.incutio.com/?page=DocType Best regards Jesper Brunholm __ 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/
