[css-d] floating right with negative right margin in IE
Hi everyone, Here is something based on the Any Order Columns technic mentioned in this article: http://www.positioniseverything.net/articles/onetruelayout/anyorder (great article indeed) div style=display:inline; float:left; margin-left:200px;width:200px; background:#CCC first div in source, at the right side /div div style=display:inline; float:left; margin-left:-400px;width:100px; background:#EEE second div in source, at the left side /div yes it works fine in IE. But It refused to work when I wanted everything to be floated to the right side: I changed the float:left to float:right, as well as the margin, like this: div style=display:inline; float:right; margin-right:200px;width:200px; background:#CCC first div in source, at the left side /div div style=display:inline; float:right; margin-right:-400px;width:100px; background:#EEE second div in source, at the right side /div The problem is, no matter how big the margin-right is,say -px, the left side of the second div just stick to the same line with the first div. Any suggestion here??? And now I have to set the negative margin to the first div to fix this, which is kinda weird: div style=display:inline; float:right; margin-right:200px; margin-left:-400px; width:200px; background:#CCC first div in source, at the left side /div div style=display:inline; float:right; width:100px; background:#EEE second div in source, at the right side /div And this bug, if it is a bug, apears in IE7 b2, too. :( You can get a live demo of what I said here: http://qi.jiahui.googlepages.com/nagative.html Any further reply would be greatly appreciated. Thanks! 9. __ 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] Styling Lists
Hi Guys I hope someone can pint me in the right direction please. I have this site: http://www.adl-bp.co.uk/home/ In the footer I have a list but I cannot stop it from placing a styling element at the start of the list. I cannot work out how to tell it not to style the element. If anyone could point me in the right direction on how to unstyle this element I would be very grateful. Css is at: http://www.adl-bp.co.uk/wp-content/themes/adl/style.css 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 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] Styling Lists
At 01:02 AM 3/7/2006, Richard Brown wrote:
http://www.adl-bp.co.uk/home/
In the footer I have a list but I cannot stop it from placing a styling
element at the start of the list. I cannot work out how to tell it not
to style the element. If anyone could point me in the right direction
on how to unstyle this element I would be very grateful.
Try {list-style-type: none} which you can apply to either UL/OL or LI:
http://www.w3.org/TR/CSS21/generate.html#lists
Regards,
Paul
__
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] Styling Lists
I hope someone can pint me in the right direction please. I have this site: http://www.adl-bp.co.uk/home/ In the footer I have a list but I cannot stop it from placing a styling element at the start of the list. The validator: [http://validator.w3.org/check?verbose=1uri=http://www.adl-bp.co.uk/home/] should point you to the answer: you are using li where you apparently meant div on your search section. HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ 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] simple problem?
Don - HtmlFixIt.com wrote: Peter Lloyd wrote: Guys, thanks for the suggestions... The problem with clear: left; used in the main content area is that it not only clears the image, but also the bottom of the search box in the left-had column! So I guess the question then becomes can I stop the interaction between the floated elements in the left column and the clearing elements in the main content area? I don't think you are using it right. If it is the contact info then name that a special paragraph that clears left. Because it is contained in the content div it only clears on that div and should not be affected by/or affect the search box. That is only true if the content div is floated itself. Otherwise, it does get affected by/affects other floats outside the content div. -- 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/
Re: [css-d] floating right with negative right margin in IE
old9 wrote: Hi everyone, [...] http://qi.jiahui.googlepages.com/nagative.html Any further reply would be greatly appreciated. Thanks! 9. Hi Old9, The style.../style is not in the head, and the html-validator mentions a not recognized charset. Maybe this has some influence, or is the same result seen in a validated version? 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] changing/alternating button text
is there a css way to make buttons/links that change text on hover? say you have a button which would be too wide if you place the entire text on it, so on hover you want alternate text to display. example: Contact Us -- normal state Our Location -- hover state __ 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] changing/alternating button text
This was it! - neither title nor acronym would fit this situation.
Somewhere buried deeply within my notes I have another solution, but
this works well - thx, Bob
Mike Dougherty wrote:
Are you opposed to using the title attribute?
a title='this text pops up on hover in most browsers'
href='foo.htm'Contact/a
directly changing the text is a behavior fit for javascript
however, CSS would let you do this:
a href='foo.htm'
span class='short'Contact/span
span class='long'Our more descriptive location text/span
/a
a span.long { display: none; } /* normally don't display the long text */
a:hover span.short { display: none; } /* when hovering, hide the short
text */
a:hover span.long { display: inline; } /* when hovering, show the long
text */
if you go this route, consider keyboard navigation doesn't invoke the
:hover pseudo element.
(also IE only allows :hover on a tags)
__
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] margin/padding-bottom relative to canvas bottom
the example i linked to doesn't do this? No, not precisely. In that example, the footer is positioned bottom: 0px and has a fixed height. On my page, the footer also sticks to the bottom, but doesn't have a fixed height; instead, the top edge of the footer is at a fixed distance from the top. Maybe I better try to solve the problem by defining overflow: scroll on the blue box. perhaps looking at it a different way will work. :) i'm sure you've seen people using negative margins to code columns, but have you tried negative margins with your footer? you might wonder why bother with negative margins when you could just position things abolutely, but the advantage is that your footer can take up all of the bottom space, which i *think* is what you want. works just fine in ff1.5, opera8.52, and ie6. http://sltclan.com/images/cj/css-d/scrolling-content.html hopefully i understood you right this time. crosses fingers __ 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] Arrangement
Hello there :D I'm having problems arranging stuff here and there :( My compo is here http://img208.imageshack.us/img208/6393/compo1he.png Does anyone know how i should arrange the elements keeping in mind min height to be around 480pixels? This is more of a design than a CSS problem. Personally I would ditch the centered text, it makes the otherwise very nice page look cheap. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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] Simple form get trould in IE 6
Hi everybody, I have designed a simple css form with 2 div put into a form like this http://pcdinh.dotgeek.org/css/forms/form3.html A trouble here is although I try to align a div to the left to allow the rest div floats to the right, making that form look table-like, I can not make it work on IE6. In IE, the two div has floated both to the right. With Firefox 1.5, I think it is Ok.** Could anyone help me to solve this problem? Thanks Dinh -- Who am I? __ 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] Looking for some layout help...
I am working on a new layout for a promo/landing type page and am having a problem figuring out why my promotion text area is not centering properly in it's content container. The page is here: http://www.xmission.com/~npetersn/test/landing_layout.html It works in IE6, but not firefox and safari?? There also seems to be a two pixel gap in the promotion text area that I can't figure out either. Any help from the good people on this list would be appreciated. Thanks, Nate __ 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] Alternative font sizing
Folks, let me propose a scenario to you and get your ideas on how useful/useless you would find it. As you know CSS 2 allows absolute and relative font sizing. Of course relative refers to the font size of the parent element, but I've often found myself pining for the ability to use a ratio relative to the size of the parent element itself rather than the parent's font table. This is primarily because while I love the concept of liquid designs, such layouts often fail in terms of usability when long-ish text blocks run longer than the print-standard of 50-70 characters per line. A fixed width design is significantly weaked by high-res displays, which makes a forced standard line length too often too small. An em/ex-based design width is OK, but requires the user to adjust the type size manually. If one accepts this as a legitimate problem, it seems to me the most obvious solution would be to provide a method of basing the current em space not on the parent element's em space, but on a percentage of the parent element's width. If dynamic, this would change the font size based on the width of the element particular to each user, but would still allow for the user to override the page's display with their own +/- adjustments. My colleague and I have been playing with this concept, and implementation is possible and pretty straight-forward with a little Javascript, but I wonder if such stuff would be of interest to anyone else? Jared Stein Director of Learning Media Development Distance Education, Utah Valley State College, MS 149 http://www.uvsc.edu/disted/ phone: (801) 863 8929 office: Learning Center 221d __ 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] Looking for some layout help...
[EMAIL PROTECTED] wrote: I am working on a new layout for a promo/landing type page and am having a problem figuring out why my promotion text area is not centering properly in it's content container. The page is here: http://www.xmission.com/~npetersn/test/landing_layout.html It works in IE6, but not firefox and safari?? You gave dl.roundedBox a margin of 0. Give it margin:auto and it will center. (boxes center if you give them a width and auto left and right margins, or identical left and right margins and an auto width) There also seems to be a two pixel gap in the promotion text area that I can't figure out either. I don't see a gap. Where is it and in which browser? -- 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/
Re: [css-d] Simple form get trould in IE 6
Dinh wrote:
I have designed a simple css form with 2 div put into a form like
this http://pcdinh.dotgeek.org/css/forms/form3.html
A trouble here is although I try to align a div to the left to allow
the rest div floats to the right, making that form look table-like, I
can not make it work on IE6.
The problem is caused by 'position: absolute' on div#left.
Absolute positioned elements won't float, so you either have to position
it or float it. IE is too buggy to figure out what to do with it, but
that's the least problematic part.
A slightly better solution would be...
div#left {
padding-top:5px;
width:50%;
float:left;
background-color:#CC9966;
min-width: 375px /* adjust to taste */;
}
div#right {
padding-top:5px;
width: 50%;
float: left;
background-color:#9933FF;
margin-right: -3px;
min-width: 375px /* adjust to taste */;
}
...which will line up nicely as long as there's enough space, and
linearize below that. It's working either way.
regards
Georg
--
http://www.gunlaug.no
__
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] Looking for some layout help...
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am having a
problem figuring out why my promotion text area is not centering properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
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] Alternative font sizing
Jared Stein wrote: Folks, let me propose a scenario to you and get your ideas on how useful/useless you would find it. As you know CSS 2 allows absolute and relative font sizing. Of course relative refers to the font size of the parent element, but I've often found myself pining for the ability to use a ratio relative to the size of the parent element itself rather than the parent's font table. This is primarily because while I love the concept of liquid designs, such layouts often fail in terms of usability when long-ish text blocks run longer than the print-standard of 50-70 characters per line. A fixed width design is significantly weaked by high-res displays, which makes a forced standard line length too often too small. An em/ex-based design width is OK, but requires the user to adjust the type size manually. If one accepts this as a legitimate problem, I don't, but I won't get into that right now - see below. it seems to me the most obvious solution would be to provide a method of basing the current em space not on the parent element's em space, but on a percentage of the parent element's width. If dynamic, this would change the font size based on the width of the element particular to each user, but would still allow for the user to override the page's display with their own +/- adjustments. My colleague and I have been playing with this concept, and implementation is possible and pretty straight-forward with a little Javascript, but I wonder if such stuff would be of interest to anyone else? Personally, I would *not* like it like that. It would mean that when I visit a site and find the line-length too short or too long, I'd widen or narrow my window, only to have zero result, plus seeing my font-size get very large or small. I'd then have to change my font-size in the browser to what I like, then most likely still want to adjust the window width some more, meaning having to adjust the font-size again, and so on. Next I'd surf to a different site, which has a different page setup, and different widths of boxes in it, and I'd have to start over again. Also - have you tried how that system works on a page with a fixed width sidebar and a flexible width content div? AIUI, narrowing the window would make the font-size of the content div smaller, while the font-size of the sidebar stayed intact, meaning that when I adjust my font-size in the browser, the content div will display my preferred font-size, while the sidebar content went too large. Nah, really, can't see any benefit at all of this idea... -- 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/
Re: [css-d] Alternative font sizing
Folks, let me propose a scenario to you and get your ideas on how useful/useless you would find it. I browse with a 3200x1200 twin monitor setup. If I ever expand the browser window to anywhere near full screen size on one of the monitors, it'd be because there's content clipped at a smaller size and I want to see it all: the whole of a table, a large image and so on. I can't imagine that anyone with any sense regularly uses a full- screen browser window at more than 1280; the whole point (for as many people as I've ever talked to about it) of a large screen for browsing purposes is to have multiple apps or windows visible at the same time, not to have a single window open at full screen size. If the content of the window - or the text within the site - were to zoom with the size of the browser window, it would either be infuriating (browsing with an effective body text size of 16px - 18px - 20px), or impractical and going against text size settings I've chosen manually, as an end user. I want to retain control over the size of text on my screen, not have a remote content manager or designer decide for me and have the text enlarge on me without choosing a larger size myself. You've stated... such layouts often fail in terms of usability when long-ish text blocks run longer than the print-standard of 50-70 characters per line If that's the case, I'd suggest that a flexible layout is less suited to the site or content in question than an alternative. Liquid layouts, with flexible main content columns, can be difficult to read and follow once they exceed, say, 500px (or 70 - 80 chars). I and many people who have tested layouts for us - online and off - find fixed-column layouts with respectably proportional columns much easier to recognize and read, than those with average amounts of text and flexible or full-width main content columns. HTH Regards Mark Howells www.permanenttourist.ch __ 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] 2 column layout confusion
Howdy gurus,
I am still working on the same design and now have a problem with 2
column layout. In FF the tops of the left column and right column are
somewhere above the bottom of header. In IE I had to add a br
clear=all / after the header to get the tops of the left and right
columns to line up.
div id=container
div id=header
div class=left/div
div class=right align=right
h2Phone - Quick Users Guide/h2
/div
/div!-- /header --
br clear=all /
div id=content
div class=leftContent
a href=docs/7940.pdf target=_blank7940 User's
Guide/abr /
a href=docs/7912.pdf target=_blank7912 User's
Guide/abr /
/div!-- leftContent --
div class=rightContent
pstrongVoIP User's Instructions/strong/p
ul
#content {
background: transparent;
font-size: 0.8em;
height: auto;
text-align: justify;
padding: 0;
z-index: 0;
}
#content div.leftContent {
float: left;
width:185px;
padding-left: 5px;
}
#content div.rightContent{
margin: 0px 40px 0px 210px;
}
I think that the problem is that I am attempting a reasonably complex
layout without all of the CSS knowledge that I need to do so. Can
someone show me the error of my ways? Thanks! Here is the test URL...
http://www.sigmaphinothing.org/voip.html
__
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] Alternative font sizing
Jared Stein wrote: Folks, let me propose a scenario to you and get your ideas on how useful/useless you would find it. ... My colleague and I have been playing with this concept, and implementation is possible and pretty straight-forward with a little Javascript, but I wonder if such stuff would be of interest to anyone else? I don't see the problem since we have more alternatives than the ones you presented. a: Fluid combined with min/max... http://www.gunlaug.no/contents/molly_1_01.html ...works in most cases. b: Elastic... http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ ...combines regular em-based width with max-width fixed to browser-window. However, if you are creating a working solution anyway, then I wouldn't mind seeing it live so I can evaluate it. One can never have too many options. regards Georg -- http://www.gunlaug.no __ 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] Alternative font sizing
Good points. One problem I still see, however, is that if you use a fixed width for text at say, 500px, then on your high res setup the text is impossibly small, and enlarging the text manually creates too-large text in too small an area. Not necessarily. Using a commonly used example, 10px Geneva/Verdana is easily legible to people with reasonable vision when using 1600px on a suitable monitor. Take a look at http://www.jungfrau-zeitung.ch/ artikel/?cq_*5a5b87e9=ivxPU=87988m0d where the main content column is about 450px (I think!). That's easily legible for me on a 20 monitor at 1600x1200; if I want to be daft and set 1600 x 1200 on a 17 monitor - which is a good way to get eye strain anyway :-) - then I'll increase the text size in the browser. The layout here is flexible enough and planned to accommodate zooming up to about 250 - 300% before the layout starts to break, which is, I would imagine, plenty for people who have poorer eyesight. The point is, if I as a user have a non-standard setup, then I should be able to choose to increase the text size myself if I want to, rather than have a larger text forced on me. Regards Mark Howells www.permanenttourist.ch __ 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] 2 column layout confusion
On 07.03.2006, at 18:10, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: [snip] You can't clear an element using position:fixed with clear=all. clear=all (or clear:both in CSS terms) will only clear a float. I'd suggest setting the margin-top of #content to the height of #header. [/snip] That doesn't work. It moves content in IE 160px below the header. In FF it moves the header 160px down from the top. That's probably because IE doesn't recognize position:fixed. Regards Mark Howells www.permanenttourist.ch __ 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] 2 column layout confusion
[EMAIL PROTECTED] wrote: I think that the problem is that I am attempting a reasonably complex layout without all of the CSS knowledge that I need to do so. Can someone show me the error of my ways? Thanks! Here is the test URL... http://www.sigmaphinothing.org/voip.html I think the problem is that you need to delete that gross image and make believe it never happened. There is no need to re-invent the wheel. There are numerous layouts on the Wiki http://css-discuss.incutio.com/ that are known to work. Pick one that suits your need(many of the 3 col layouts are easily converted to 2 cols). Regards, ~davidLaakso __ 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] 2 column layout confusion
[snip] You can't clear an element using position:fixed with clear=all. clear=all (or clear:both in CSS terms) will only clear a float. I'd suggest setting the margin-top of #content to the height of #header. [/snip] That doesn't work. It moves content in IE 160px below the header. In FF it moves the header 160px down from the top. That's probably because IE doesn't recognize position:fixed. Sorry, replied a bit too fast there and didn't see the problem with Firefox! Have you read http://css-discuss.incutio.com/? page=EmulatingFixedPositoning which relates to the problems associated with position:fixed? The margin-top on #content doesn't appear in http:// www.sigmaphinothing.org/css/test.css - is that where you're testing? Regards Mark Howells www.permanenttourist.ch __ 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] 2 column layout confusion
[snip] Sorry, replied a bit too fast there and didn't see the problem with Firefox! Have you read http://css-discuss.incutio.com/? page=EmulatingFixedPositoning which relates to the problems associated with position:fixed? The margin-top on #content doesn't appear in http:// www.sigmaphinothing.org/css/test.css - is that where you're testing? [/snip] No, I am testing locally. I just put that up so that you guys could take a look. I will read the page that you suggested. __ 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] 2 column layout confusion
[snip] I think the problem is that you need to delete that gross image and make believe it never happened. There is no need to re-invent the wheel. There are numerous layouts on the Wiki http://css-discuss.incutio.com/ that are known to work. Pick one that suits your need(many of the 3 col layouts are easily converted to 2 cols). [/snip] Whoa! Gross image? There is some positive re-enforcement there! (FYI, the image was provided to me, I don't really have a choice on that. And if I had created the image I would be totally insulted.) I have looked at several 2 and 3 column layouts and have made use of those that I know to work in other situations. The new things here are the header and footer. It would appear that the header is the major cause of the problem, but it is designed that way so that additional elements can be layered on top of the image. __ 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] google news layout structure- why is he like this?
hey guys [i hope this question haven't been asked till now, if so- my apologies.] I've looked at http://news.google.com page code layout, and I've seen that the page layout is table based. the containers are tables, the hidden personalization panels are also in tables. most of the page in build using tables. even the pictures are in cellspacing=5 tables. why is that? why haven't they used css layout? why the pictures are in tables and don't have simple margin:5px ? and i don't speak about the font tags they used... i assume that google guys used this technique for cross browsers support. but still, this brings me to a second question. after all our researches (and i can speak only for myself), table structure after all are the stable, consistent and reliable layout there is. of course- content will be putted using right HTML- P,H1-6,Divs, but still- the table layout proves himself as the right solution. what do you think? __ 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] Alternative font sizing
Hmm, maybe it's just me getting old and wanting my text bigger! Still one lingering thought: as user displays increasingly become higher resolution, there certainly will be a point--and I imagine not too far down the road--where what is currently readable by most people with the standard layout and font size will not be easily legible to a broad base with 'default' high-res displays. I think your 16x12 example is a good one, but really what would be wrong with setting it thus on a 17 monitor if the page display was more suitable to high-res? I'd question the logic of that. You have to have really good eyesight to be able to use any standard OS at 1600 x 1200 on a 17 display. The point is that as a user, you should be able to increase the text size if YOU want to, not as the designer forces you to. My point wasn't about cramming a big resolution into a small window space, more that most people I know who use 16x12 are working with big monitors and normal (c. 1024 - 1200) browser window widths. If you're using a small monitor, cranking it up to 1600x1200 and then having to use a full-width browser window whilst zooming everything to be able to read it, why not just use 1280 or 1024? If displays do increase in resolution, and remain at 17 or 20, then that'll mean that the text will be pretty illegible and 72 dpi web images pretty tiny if the resolution goes above 1920! Getting back onto the CSS tracks (here on the CSS list!), you'll avoid all kinds of pointless, expensive and time-consuming development by defining text sizes in such a way as to allow for client-side resizing, rather than a nifty technical solution which I, for one, would find annoying as a user. I may be Superman and be able to read 10px Geneva on a 15 monitor at 1600x1200, but if not, then I'll increase the text size if I need to. I'd respectfully say that you're digging yourself into a hole which you really don't need! Regards Mark Howells www.permanenttourist.ch __ 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] Menu Position in FireFox OK... IE Not so much
Please visit http://kaiserklan.com/roundtable/indexcss.php with FireFox or Safari it is very close to what I'm looking for with the exception of the horizontal menu under the banner not being wide enough to hold the search engine. But in IE (of course) it looks like sh... well you know, can anyone see an easy way for me to bring that horizontal menu back where it belongs? I can't offer a merit badge but I can offer a big How How to anyone who can help. -- YIS/YIV Keith D Kaiser -- Venturing Roundtable Commissioner kaiserklan.com kaiserklan.com/roundtable kaiserklan.com/wa0tjt [EMAIL PROTECTED] __ 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] Alternative font sizing
Yes, I see your point that this is the case for most people with standard OSs and browsers and resolutions, but wouldn't we like to move beyond 72dpi eventually? My own point of view (and this is where my 'logic' comes in) is that higher-res is always better if the software supports it. For example I have a little 14 laptop screen set to 1400x1050 (or higher depending on the project); I personally set Win to show large fonts so everything's readable, but it seems OSs of the future would better detect the res/screen and adjust the base font size automatically--even if it's just to set a baseline for the default or 'normal' setting. Oh, and the javascript for this took all of 20 minutes to write and test, so it's really not a big investment of time, and I don't see it as a hole. Currently the js has font-size dynamically increase/decrease as the window is resized, but it could calculate the window size on load and set the font-size once, with no font-size +/- as the window resizes--really this is no different than designers setting a base font-size for any element off the bat, except that in this case the base font-size is not some arbitrary 12pt/16px/0.9em or whatever, it's calculated based on the user's initial window size. Anyway, a few have commented that this is a bit off-topic, so I'll invite any further points/counterpoints offlist! Jared Stein Director of Learning Media Development Distance Education, Utah Valley State College, MS 149 http://www.uvsc.edu/disted/ phone: (801) 863 8929 office: Learning Center 221d Mark Howells [EMAIL PROTECTED] 3/7/06 10:38 AM Hmm, maybe it's just me getting old and wanting my text bigger! Still one lingering thought: as user displays increasingly become higher resolution, there certainly will be a point--and I imagine not too far down the road--where what is currently readable by most people with the standard layout and font size will not be easily legible to a broad base with 'default' high-res displays. I think your 16x12 example is a good one, but really what would be wrong with setting it thus on a 17 monitor if the page display was more suitable to high-res? I'd question the logic of that. You have to have really good eyesight to be able to use any standard OS at 1600 x 1200 on a 17 display. The point is that as a user, you should be able to increase the text size if YOU want to, not as the designer forces you to. My point wasn't about cramming a big resolution into a small window space, more that most people I know who use 16x12 are working with big monitors and normal (c. 1024 - 1200) browser window widths. If you're using a small monitor, cranking it up to 1600x1200 and then having to use a full-width browser window whilst zooming everything to be able to read it, why not just use 1280 or 1024? If displays do increase in resolution, and remain at 17 or 20, then that'll mean that the text will be pretty illegible and 72 dpi web images pretty tiny if the resolution goes above 1920! Getting back onto the CSS tracks (here on the CSS list!), you'll avoid all kinds of pointless, expensive and time-consuming development by defining text sizes in such a way as to allow for client-side resizing, rather than a nifty technical solution which I, for one, would find annoying as a user. I may be Superman and be able to read 10px Geneva on a 15 monitor at 1600x1200, but if not, then I'll increase the text size if I need to. I'd respectfully say that you're digging yourself into a hole which you really don't need! Regards Mark Howells www.permanenttourist.ch __ 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] Arrangement Attempt
Hello again :) Here http://nouhad.technat.org/2square/Re-done/index2.html is how the page looks after I applied my CSS Coding to it. CSS Source can be found here http://www.shortText.com/ve5f. HTML Source can be found here http://www.shortText.com/a6mw. My mock-up can be found herehttp://img208.imageshack.us/img208/6393/compo1he.png . 1) How do i float About and Services properly so that they look like how they should in the mockup 2) How would i make the background of About an image, and put another image (the image of the Post-It Note) on top of it? 3) What have i done wrong? Thanks Alot. nouhad __ 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] 2 column layout confusion
[EMAIL PROTECTED] wrote: Whoa! Gross image? There is some positive re-enforcement there! (FYI, the image was provided to me, I don't really have a choice on that. And if I had created the image I would be totally insulted.) -- De gustibus non est disputandum. There is no guarantee on any public forum that anyone is going to agree with you, or your client, on anything-- least of all, on matters of taste. You post and you take your chances with the replies. As for myself, I feel that the practical use of CSS /sometimes/ needs to be tempered with plain common sense. Regards, ~davidLaakso __ 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] Looking for some layout help...
Thanks Brett and Els for your quick responses.
I implemented your suggestions and the promotion text area is now properly
centered. Brett your suggestion to change the height to 48px properly
tightened up the gap that I am seeing on firefox and Safari but still exists
on IE6. The gap exists right between the the promotion text area dt and the
following dd tags.
Thanks again,
Nate
Quoting Brett Leber [EMAIL PROTECTED]:
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am having a
problem figuring out why my promotion text area is not centering properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area
that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
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] Looking for some layout help...
[EMAIL PROTECTED] wrote:
Thanks Brett and Els for your quick responses.
I implemented your suggestions and the promotion text area is now properly
centered. Brett your suggestion to change the height to 48px properly
tightened up the gap that I am seeing on firefox and Safari but still
exists
on IE6. The gap exists right between the the promotion text area dt and the
following dd tags.
It looks like IE is calculating height as height + padding (both defined
in CSS), thereby pushing the dd element down. (I should probably note
here that your use of dl is fairly non-standard and un-semantic.) More
importantly, getting those two elements to line up vertically correct
might not be possible. It might be better to create a single div to
contain the content, and assign a background image to that.
If you want it to scale, you might want to look into boxes with rounded
corners.
Brett
Quoting Brett Leber [EMAIL PROTECTED]:
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am
having a
problem figuring out why my promotion text area is not centering
properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area
that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
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] google news layout structure- why is he like this?
At 7:34 PM +0200 3/7/06, shlomi asaf wrote: I've looked at http://news.google.com page code layout, and I've seen that the page layout is table based. the containers are tables, the hidden personalization panels are also in tables. most of the page in build using tables. even the pictures are in cellspacing=5 tables. why is that? I doubt anyone here can say, unless we have Google folks who worked on that project and are willing to comment publicly. Speculating on the reasons for a specific design's choices isn't really on-topic, anyway. What WOULD be on-topic, and quite interesting, would be if someone took that page and recreated it using CSS, and everyone worked to help make it as cross-browser friendly as possible. Then we'd have a comparison, and a great example of the tradeoffs that are involved in CSS design (and there are some-- there are always tradeoffs no matter what technology or technique you use). So I hope that's where this thread ends up going. after all our researches (and i can speak only for myself), table structure after all are the stable, consistent and reliable layout there is. of course- content will be putted using right HTML- P,H1-6,Divs, but still- the table layout proves himself as the right solution. what do you think? I think your final assertion could easily be taken as flame-bait, and if others actually do take it that way, I'll have to close the thread. Hopefully, they'll not do so and instead concentrate on staying on-topic. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.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/
Re: [css-d] Looking for some layout help...
[EMAIL PROTECTED] wrote: Thanks Brett and Els for your quick responses. I implemented your suggestions and the promotion text area is now properly centered. Brett your suggestion to change the height to 48px properly tightened up the gap that I am seeing on firefox and Safari but still exists on IE6. The gap exists right between the the promotion text area dt and the following dd tags. It's caused by the line-height in the dt. If you set the line-height to 48px (height of image), the gap disappears. -- 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/
Re: [css-d] 2 column layout confusion
[snip] There is no guarantee on any public forum that anyone is going to agree with you, or your client, on anything-- least of all, on matters of taste. You post and you take your chances with the replies. As for myself, I feel that the practical use of CSS /sometimes/ needs to be tempered with plain common sense. [/snip] That is true, but it has nothing to do with the problem at hand. __ 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] 2 column layout confusion SOLVED
[snip] ...stuff... [/snip] I removed postion: fixed; from #header and it appears to have fixed the problem in FF. In IE it leaves the rightContent div slightly lower than the leftContent div which can either be fixed with a br clear=all / or clear:both (as suggested by Mark). Thanks all! __ 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] Looking for some layout help...
Thanks Els! Nate Quoting Els [EMAIL PROTECTED]: [EMAIL PROTECTED] wrote: Thanks Brett and Els for your quick responses. I implemented your suggestions and the promotion text area is now properly centered. Brett your suggestion to change the height to 48px properly tightened up the gap that I am seeing on firefox and Safari but still exists on IE6. The gap exists right between the the promotion text area dt and the following dd tags. It's caused by the line-height in the dt. If you set the line-height to 48px (height of image), the gap disappears. -- 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] Contents of 3rd floated column do not show up in IE6
Hello, This is my first post here so please be gentle. :) I'm having a problem with a CSS layout I started from a template I took from here: http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml The comments in the source file referenced this mailing list so I naturally turned here for help before starting to smash my head on the keyboard. Here's what I'm talking about: http://www.link7.ro/misc/cssd/test1.html Basically I have a 3 (faux-)column layout with 3 floated divs. The first and second columns are put in a separate container float and the third column is floated next to this container. Everything was alright while developing in Firefox but then I checked in IE 6 and there it was: the surprise! The contents of the third column were not showing up. I think it's there though, because it's taking up space under the other elements... But it's somehow invisible. I tried fiddling with the contained div's width and I noticed that if I reduce it by ~5 pixels the content shows up in IE but it's misaligned to the right and I don't understand why because if I set the third column's background to be visible there's clearly a gap on the left even if I set all margins and paddings to 0. Sorry about the mess in the code, I know half the comments are in English (kept from the original template) half are in Romanian. It's actually a draft, I haven't had time to clean it up yet. Please suggest fixes. Thanks, Janos __ 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] alt stick footer problem in IE
Hi, I've used 'The man in blue 's Alt Stick Footer technique on this site: http://www.guwoon.nl/caron/index.php and it works fine in Firefox, but IE 6 pushes my footer to far down.. I always get a scrollbar and the footer disappears under the browserwindow. Probably doing something stupid, but I don't see it anymore... can anyone please help me! : ) CSS: http://www.guwoon.nl/caron/css/footer.css (just the Alt stick footer code) http://www.guwoon.nl/caron/css/css_def.css , at the end of the file some 'normal' footer css ie.css http://www.guwoon.nl/caron/css/ie.css the ie hacks Thank you very much! Piet __ 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] General font size inheritance question
Scott Haneda wrote: I have a table td that has a font size set to .8em, if I put a h1 inside the td, any font size I set to the h1 will be a percentage of the td's .8. Only if you set the size in ems or percentage. As I recall, IE sets its header default sizes in points, for example, so they wouldn't be affected by the .8em. You could use points, pixels, mm, or absolute keywords (among others) without worrying about inheritance. This kinda bugs me, is there some other approach to be able to use consistent font sizes I'm not sure I understand the problem. You can always reset the relative font sizes, if you are willing to do a little math. If you set the font size to .8em on the TD, for example, and you want to get a font size of, say, 1.25 times the original value, just set the value to 1.25/.8 = 1.5625em. (Presumably you can round that a little.) It is perfectly consistent. If you are planning to change the font size of an outer element, of course, you'll need to recalculate the value for the inner element, as well. I guess from that standpoint it isn't maintenance friendly. But if you are going more than a level or too deep, you probably need to rethink your design, anyway. Font-size should be set sparingly. HTH, -Adam Kuehn __ 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] Calling all Wiki Contributors
This is Derek Hansen from the University of Michigan again (see [1] for my introductory post). I appreciate the warm welcome that I have received and the willingness of many of you to speak with me over the phone. In an attempt to better understand who is editing the wiki (since only IP addresses are shown for most of the editors), and why various edits are made, I have put together a few questions. If you have ever contributed to the wiki (e.g., adding a new page, or even making a minor edit on an existing page) I would greatly appreciate it if you would *reply to me directly* with the answers to the questions below. Feel free to leave any of them blank if you would rather not answer them. The first couple of questions relate to the consent form found at the end of the email. Thank you in advance for your time. Questions 1. Are you 18 or older? 2. May we use quotes from email messages and/or wiki edits that you have made in our published materials? (note that we will not use your name with them, but it may be possible that people could look up the quotes and identify you as the author) 3. May I use direct quotes from the email response? (again, they won't be specifically attributed to you) 4. How frequently do you edit the wiki? 5. Do you sign into the wiki when making changes? If not, would you be willing to provide me with the IP address that shows up in the Recent Changes when you make changes? 6. Please think back to the most recent wiki edit that you have made. a. Please describe the wiki edit. b. What prompted you to make the wiki edit? In other words, what happened that led you to make the edit. (e.g., something from a post to the css-d list; you were browsing the wiki for your own purposes and noticed it needed updating; ...) 7. Please think of other wiki edits that you have made. How are they different or similar to your most recent edit? Were there different experiences that prompted you to make those changes? 8. Have you ever created a wiki page or pages? If so, a. What page(s) did you create? b. What prompted you to create the wiki page? 9. Do you mind if I email you with any follow up questions regarding your answers to the questions above? 10. Would you be willing to let me call you for a phone interview? If so, please provide a time that work for you (including your time zone) and phone number I can reach you at. Thank you for your time, Derek Hansen School of Information University of Michigan 734-764-1008 [1] http://archivist.incutio.com/viewlist/css-discuss/70334 -- Consent Form You are not obligated to respond to this email. If there are any questions that you do not want to answer, you may leave them blank. In order to protect your privacy, we will not use names or describe personally identifiable information in our report. In addition to this interview we are reading through the css email list archive and wiki. In some cases, we may want to include direct quotes from email messages found in the archive in our final report. No personally identifiable information will be included in such quotes, however, there is a chance that the archives could be searched and the message could be attributable to the author. May we directly quote messages that you have authored that are found in the public email list archive and entries that you have contributed to in the wiki? We will save the information we have collected during our research (including your response to this email) until we have completed all the analyses that we need for our conference papers and journal articles. Three years after the last publication, we will destroy any data created by us, such as email messages, interview transcripts and recordings. The data that we gather will remain confidential to the extent allowable under local, state, and federal law. Do I have your permission to use quotes from your response to this email message? Please retain a copy of your response to this email as confirmation that you have provided your consent. If you have any concerns about how we are conducting this study, you may contact Derek Hansen by email at [EMAIL PROTECTED] or by phone at(734) 764-1008 or Mark Ackerman at [EMAIL PROTECTED] Should you have questions regarding your rights as a participant in research, please contact: Institutional Review Board Kate Keever 540 E. Liberty #202 Ann Arbor, MI 48109 Phone: 734-936-0933 email: [EMAIL PROTECTED] __ 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 widths not the same with image in td
http://newgeo.com/web/css/wide.html Top table, has an image in it 728px wide, with a 3px border Bottom table is the same spec, but no image, yet it is narrower. This seems to happen in Safari and FF on the mac, I can not test other browsers. How can I make the bottom table match up to the top one? -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ 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] Layout Errors
I am working on site and testing it in Linux Firefox, Windows IE 6, Windows Firefox and Windows Opera. The current layout has errors in Opera. Essentially in Opera when I add in the site logo image at the top, the main container seems to shift down several pixels and it moves out of alignment with the rest of the BG image. I'm not sure what's causing it. Does anyone have any suggestions? The test site is at: http://www.exclaimstudio.com/mike/ The CSS is at: http://www.exclaimstudio.com/mike/styles/default.css Thanks, R __ 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] Pure CSS tooltips
I've looked at a bunch of the css tooltip sites and the archives and I
have a workaround for this problem, but perhaps someone has a
suggestion on how to achieve what I really want...
===
CSS:
/*shout out to http://mikezilla.html*/
a.popup span { display: none; }
a:hover.popup span
{ display: block; position: fixed; margin: 0.25em; padding: 1em; top:
2em; right: 10em; width: 20em; z-index: 999; background: #ddd;
font-size: 0.9em; color: black; border-width: medium; border-style:
solid; border-top-color: #eee; border-left-color: #eee;
border-right-color: #999; border-bottom-color: #999; }
HTML:
a href=http://www.catb.org/~esr/jargon/html/H/hacker.html;
class=popuphackerspan1. A person who enjoys exploring the details
of programmable systems and how to stretch their capabilities, as
opposed to most users, who prefer to learn only the minimum necessary.
RFC1392, the Internet Users' Glossary, usefully amplifies this as: A
person who delights in having an intimate understanding of the
internal workings of a system, computers and computer networks in
particular./span/a
===
Originally, I had position:relative on a.popup and position:absolute
on a:hover.popup span, which worked OK except on Safari, where it was
clipped to the width of the link text. Any ideas on how to avoid the
clipping?
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] Table widths not the same with image in td
Scott Haneda wrote: http://newgeo.com/web/css/wide.html Top table, has an image in it 728px wide, with a 3px border Bottom table is the same spec, but no image, yet it is narrower. This seems to happen in Safari and FF on the mac, I can not test other browsers. How can I make the bottom table match up to the top one? Scott, you either need to make the image narrower by 6 pixels (the 3px border left and right take the cell beyond the 728 width allowed) or make the table wider by 6 pixels. All block-level elements also have the properties width and height. The margins, borders and padding you add to each element are then added on to these dimensions. [1] This all begs the question: why are you using tables anyway? http://www.yourhtmlsource.com/stylesheets/cssspacing.html __ 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] Table widths not the same with image in td
At 04:21 PM 3/7/2006, Scott Haneda wrote: http://newgeo.com/web/css/wide.html Top table, has an image in it 728px wide, with a 3px border You have declared the table width at 728px and the contained image width at 728px in inline declarations. Because the image width is declared in the markup, the browser is treating it as an intrinsic width. The browser is therefore expanding the table beyond its declared width to accommodate the intrinsic content width plus the border. Declare the image width to be 722px, and it should line up. HTH, -Adam Kuehn __ 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] looking for Suggestions/Gotcha's to avoid for a multi-stylesheet template type site.
Hello, I have done a few projects with css, but still consider myself a moderate beginner with especially css2. I have finally convinced the other people where I work to embrace css2 for a couple of specific projects. This is the reason for my question/request for recommendations/suggestions. Today alone, since I have re-joined this list I have seen many great references and have been studying them all day. We have a 'template' type site that our customers use that currently can be slightly customized with their logo and certain database driven content. However, they can not change any colors or layout. My task is to create a CSS based layout such that we can eventually create multiple stylesheets that our customers can choose and even write their own CSS for the provided content. I will also spend lots of time studying the wonderful csszengarden.com site as it realizes my ultimate goal - multiple unique styles. I do know I will need to offer 2 and 3 column layouts, at this time, I don't think a single column layout will be needed. So if anyone has any gotcha's I should watch out for, your input will be greatly appreciated. Regards, Dale __ 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] Layout Errors
Roy Anger wrote: I am working on site and testing it in Linux Firefox, Windows IE 6, Windows Firefox and Windows Opera. The current layout has errors in Opera. Essentially in Opera when I add in the site logo image at the top, the main container seems to shift down several pixels and it moves out of alignment with the rest of the BG image. I'm not sure what's causing it. Does anyone have any suggestions? The test site is at: http://www.exclaimstudio.com/mike/ The CSS is at: http://www.exclaimstudio.com/mike/styles/default.css Instead of applying those styles to img.header, apply them to the a element that the image is wrapped in. -- 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-d] Simple CSS Question?
Hey there, I'm new. Could somebody check out http://www.shopperschoice.com/ for me. The problem I'm having is that the page jumps down to the bottom when you resize below 800x600 in Internet Explorer. Please check out the CSS and let me know what I'm doing wrong here, thanks! Daniel Patterson __ 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] looking for Suggestions/Gotcha's to avoid for a multi-stylesheet template type site.
Here are a few things I'd recommend: Check your stuff in IE as you go along Avoid hacks (instead use conditional comments such as: !--[if lte IE 6] link charset=utf-8 rel=stylesheet type=text/css href=CSS/IE6patches.css / ![endif]-- instead Backup often /or use source control For me, the hardest thing to get my head around was positioning floats it's worth it though... __ 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] Menu background not showing (Pop Menu Magic)
http://www.netperceptions.com.au/qldair/ The navigation on this page doesn't stretch all the way across (which is fine) but I want the background colour to be the same red as the navigation is across the whole page. It does in IE, but not in Firefox or Opera and I'm at a loss as to why. I originally just had the navigation sitting in a div but it's now in a table temporarily. Stylesheet lives at http://www.netperceptions.com.au/qldair/stylesheet.css PMM stylesheet lives at http://www.netperceptions.com.au/qldair/p7pm/p7pmh2.css Joanne __ 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] FIR header with anchor
I'n using an image replacement technique for my headers. I had wanted to
use the same technique for a site's logo in the top banner as well, but
have run into validation issues with XHTML 1.0 Transitional DTD.
The problem is that the logo must be wrapped by an anchor linking back
to the front page (the nav is always available, but the client insists,
and i agree, in any case, that banner logos should do this, if
possible). But the height:0 rule causes the anchor to collapse as
well, of course. So simply wrapping the anchor around the header text
doesn't work.
In order for the header to be clickable, i must wrap the anchor around
the header. But that won't validate because then i've got a block
element inside of an inline element.
This is how the replacement is set up:
div id=banner
a href=/ title=blah blahh1my logo text/h1/a
/div
/* \*/
#banner h1 {
display: block;
overflow: hidden;
background-image: url(/images/logo.png);
background-repeat: no-repeat;
width: 405px;
padding-top: 25px;
height: 25px;
voice-family: \}\;
voice-family: inherit;
height: 0px;
}
/**/
I've tried marking it up properly, and then adding:
#banner h1 a
{
display: block;
min-width: 405px;
min-height: 25px;
}
to no avail. Does anyone have a suggestion? I'm willing to try other
replacement techniques, though this one has served me very well in the past.
brian
__
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 footer problem
From: Michael Clayton [EMAIL PROTECTED]
I discovered that the following code is what breaks the site in IE.
ul.nav {
list-style: url(bullet_small.jpg);
line-height: 1.5em;
margin-left: 18px;
padding: 0;
}
The list-style specifically is what kills it. Does anyone know why applying
a bullet image mucks up IE? I guess that's a dumb question. ;) Does anyone
know how to get around it? For now I'll just apply a background image, I
guess.
You may have more success with a background image anyway, but there is another
trigger for this little problem, and that is the padding at the top of the
columns (probably specifically the left column). You can probably solve things
and get to keep your list-style-image with the following change to your CSS -
.column-one-content, .column-two-content, .column-three-content
{
padding: 0 6px 6px; /* remove top padding */
border: none;
color: #000;
margin-top: 6px; /* add top margin to compensate for padding loss */
}
I hope that helps,
~holly
__
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] Arrangement Attempt
nouhad wrote:
Hello again :)
Here http://nouhad.technat.org/2square/Re-done/index2.html is how the page
looks after I applied my CSS Coding to it.
CSS Source can be found here http://www.shortText.com/ve5f.
HTML Source can be found here http://www.shortText.com/a6mw.
My mock-up can be found
herehttp://img208.imageshack.us/img208/6393/compo1he.png
.
Add a couple of div's to contain the rows of content so to speak.
#contentmidwrap{
width: 100%
}
#contentlowerwrap{
width: 100%
}
and then float left the two columns in each of these
As regards the other, find one of the liquid rounded corner sites[1] and
use that for the boxes with rounded corners, and then float the images
(like the sticky on that).
[1] http://www.cssplay.co.uk/boxes/krazy.html
__
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] Need a CSS/HTML/Joomla expert for Jello Piefecta Layout Issue
I'm having a problem with a template I set up using the Jello Piefecta layout (http://www.positioniseverything.net/articles/sidepages/jello-piefecta-clean.html). In a nutshell, one of my modules does not load properly when I use this layout. I am using Joomla CMS and all other templates I have created work except this one and it's the one I like best. I have posted my questions in the Joomla forums but I haven't received a response. I am hoping there is someone knowledgable enough on here to point me in the right direction. Here is my post from the Joomla site which details my problem ( I added a few notes notes to clarify some things). --- I am in the process of creating a new template. The Related Items XTD module works perfectly with my current theme. An example of the working module can be found here (all links at the bottom of the main content are created from copies of the module): http://girlscantwhat.com/content/view/10/30/ On my new template, I get this message: Fatal error: Cannot redeclare getlistofminibots() (previously declared in /home/girlcaw6/public_html/modules/mod_relateditems_xtd.php:29) in /home/girlcaw6/public_html/mambots/content/relateditems.php on line 36 but ONLY on pages that are table-content sections or table - category sections - like this one: http://girlscantwhat.com/content/section/6/91/ which screws up loading the rest of the page. On other pages with the new template such as this one: http://girlscantwhat.com/content/view/12/90/ everything displays perfectly. I have only applied the template to a few pages so when looking at the new template, use the test menu in the left column to navigate using the new template. The rest of the site uses the old template (full-screen). The problem is definitely related to either Related Items XTD (no pun intended) because if I disable it the pages all load fine OR it is in the HTML since loading any other template with the module causes the issue to disappear. I am leaning toward the problem being in the HTML or CSS. I have not changed anything in Related Items XTD since setting it up. The only thing I have changed is creating the new template. I have searched these (Joomla) forums and with Google but I can't find any answers. I see others have had the same error message, but no solution has been posted. Is there a solution or do I have to go back to the original related items module? The CSS and HTML (on pages that do load properly) validates so I don't know where else to look to fix this. Thanks for any advice you can provide. I would really like to use this template with the 'jello' layout. - If this is too far off-topic, please let me know. I am just desperate to get this site layout completed so I can move on to other things. Thanks! -- Gretchen Girls Can't WHAT? www.girlscantwhat.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] Basic confusion on syntax
I don't even know how to search this one out, excuse the basic question:
#subNavlist li {
display: inline;
list-style-type: none;
float:left;
}
ul#subNavlist {
margin: 0;
padding: 0;
}
Can someone explain to me the difference in putting the html part you want
before the css name, versus after:
ul.myname
myame.ul
Its not at all making sense to me, I would think I would want to do
li#subNavlist but that does not work.
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
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] Basic confusion on syntax
On Mar 8, 2006, at 1:24 PM, Scott Haneda wrote:
I don't even know how to search this one out, excuse the basic
question:
#subNavlist li {
display: inline;
list-style-type: none;
float:left;
}
ul#subNavlist {
margin: 0;
padding: 0;
}
Bookmark this page
http://gallery.theopalgroup.com/selectoracle/
In your case, the first selector translates as ' a li that is
descendant of any element with an ID attribute of #subNavlist', the
second on means 'an ul with an ID of subNavlist'.
Can someone explain to me the difference in putting the html part
you want
before the css name, versus after:
ul.myname
myame.ul
Those are not the same thing at all
ul.myname -- ul with a class attribute of 'myname'
myame.ul-- an element 'myame' with a class attribute of 'ul'
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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] Baywerks site check please
2006/03/07 Hey All, I'd appreciate a quick check of http://www.baywerks.net/index.html especially using IE 6, and Win2K and WinNT. Also http://www.baywerks.net/bayonetags/tag50118.20060223/B1LLC50118nucleationstudy.html and http://www.baywerks.net/bayonetags/tag50118.20060223/B1PIB50118.html No particular issues, just looking for obvious faults. I was finally asked by my day job to post some of my technical work for our customer's viewing pleasure. Finally, can someone explain why, in http://www.baywerks.net/bayonetags/tag50118.20060223/Photolink.50118filters.121505.html for example, the return to article link in the upper right is not underlined in Opera 8, but is in IE6 and Firefox. Cheers, Peter Fat Paw Design http://www.fatpawdesign.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/
Re: [css-d] Alternative font sizing
On 06/03/07 11:49 Mark Howells apparently typed: I can't imagine that anyone with any sense regularly uses a full- screen browser window at more than 1280; the whole point (for as many people as I've ever talked to about it) of a large screen for browsing purposes is to have multiple apps or windows visible at the same time, not to have a single window open at full screen size. This user's 24/7 browser window is 1160x938, on a 1280 wide screen (and more than 1280 wide on his 1792 wide screen). I reset it that way with Web Developer anytime I find it necessary to temporarily change it to anything else. That's 90.6% of my screen width, and 100% of my available screen height. Not everyone uses a large screen in order to have many non-overlapping windows open simultaneously. Some people, notably people over-40 and low-vision users generally, need things bigger just to see, and often do it precisely as an alternative to printed matter that can't be had with print big enough to read without straining, or at all. Fullscreen isn't necessarily a bad idea even on a large display with high resolution: http://mrmazda.no-ip.com/SS/accessibility.jpg This doesn't seem to be on-topic though. -- Blessed are they whose ways are blameless, who walk according to the law of the Lord.Psalm 119:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ 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] Basic confusion on syntax
Scott Haneda wrote: I don't even know how to search this one out, excuse the basic question: #subNavlist li ul#subNavlist Can someone explain to me the difference in putting the html part you want before the css name, versus after: ul.myname myame.ul No, that last one is incurrect. Its not at all making sense to me, I would think I would want to do li#subNavlist but that does not work. The id or class is always *after* the elements name, as in ul#subNavlist, or you can use it *without* the element's name, as in #subNavlist. When you see an element's name after an id or class, as in '#subNavlist li', there is a space between them, and it means the second element is a child of the first one. Some examples: 'ul#subNavlist li' means a li element, that is a child of a ul element with id=subNavlist. '#subNavlist li' means a li element, that is a child of any element with id=subNavlist. 'ul#subNavlist' means a ul element with id=subNavlist. 'div.foo' means a div element with class=foo. '.foo' means any element with class=foo. '.foo div' means a div element which is a child of any element with class=foo. If you're ever in doubt what a certain string of classes, elements and or id's means, paste it into the Selectoracle for clarification: http://gallery.theopalgroup.com/selectoracle/ HTH -- 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/
Re: [css-d] Basic confusion on syntax
Els wrote:
the second element is a child of the first one.
Some examples:
'ul#subNavlist li' means a li element, that is a child of a
ul element with id=subNavlist.
'#subNavlist li' means a li element, that is a child of any
element with id=subNavlist.
'ul#subNavlist' means a ul element with id=subNavlist.
'div.foo' means a div element with class=foo.
'.foo' means any element with class=foo.
'.foo div' means a div element which is a child of any
element with class=foo.
Ahem - everywhere I said child, I meant descendant.
If you have
div class=foo
ul id=subNavlist
lia href=bla.htmlBla/a/li
lia .. (etc)
you can still address the li element with
.foo li{...}
While li of course isn't a child of the div, but a
grand-child, i.e. descendant.
--
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/
Re: [css-d] Baywerks site check please
Peter Hyde-Smith wrote: I'd appreciate a quick check of http://www.baywerks.net/index.html especially using IE 6, and Win2K and WinNT. Peter, just a quick look at all these pages in Linux (debian) Opera, FF, SeaMonkey (all @ 1280). I also looked at two of them in Konqueror 3.3, and they were fine (if only I could remember which two). Browsercam is down, so could not do IE checks on any of your pages. The above page(index.html), is good to go. Easy to read (except maybe for the sub-head), zooms wellexcept for the head). Good with with image disabled. Also http://www.baywerks.net/bayonetags/tag50118.20060223/B1LLC50118nucleationstudy.html Logo is soft, and filling in-- otherwise fine, although the black is a little deadly IMO. and http://www.baywerks.net/bayonetags/tag50118.20060223/B1PIB50118.html No particular issues, just looking for obvious faults. Logo is soft, and filling in-- header text overlaps and crosses over at extreme zoom. Date looks peculiar as it is half in and half out of the yellow at default.Maybe the black /is/ better than the off-blue. Maybe not. Or maybe, who cares...?(just kidding, of course). I was finally asked by my day job to post some of my technical work for our customer's viewing pleasure. Finally, can someone explain why, in http://www.baywerks.net/bayonetags/tag50118.20060223/Photolink.50118filters.121505.html for example, the return to article link in the upper right is not underlined in Opera 8, but is in IE6 and Firefox. Dunno. I think I'd be more concerned with: 1/ what happens when you disable all images in FF 2/ what happens at 150% in Opera/8.51. 3/ and why that link covers h3 on zoom in the Gecko's. Peter Regards, ~davidLaakso __ 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] Alternative font sizing
On 06/03/07 12:13 Mark Howells apparently typed: Using a commonly used example, 10px Geneva/Verdana is easily legible to people with reasonable vision when using 1600px Just how do you define reasonable vision? I have no problem comfortably reading 16px on 17 at 1024x768, 20px on 19 at 1280x960, 22px on 19 at 1400x1050 or 28px on 19 at 1792x1344, as they're all near exactly the same physical size, 12pt (nominal), which happens to be the size most web users prefer [1]. OTOH, 10px on an the last of those isn't big enough for me to distinguish from a straight line, and much too small for comfort on the first two. on a suitable monitor. Take a look at http://www.jungfrau-zeitung.ch/ artikel/?cq_*5a5b87e9=ivxPU=87988m0d where the main content column is about 450px (I think!). That's easily legible for me on a 20 monitor at 1600x1200 For me to use that page as I find it I estimate I would need at least a 26 display for 1400x1050 resolution. Here's 1400x1050 on the lowly 19 that suits my budget: http://mrmazda.no-ip.com/SS/markho1.jpg http://mrmazda.no-ip.com/tmp/showcasec.html (needs JS off to prevent redirect) This doesn't seem to be on-topic though. [1] http://psychology.wichita.edu/optimalweb/text.htm -- Blessed are they whose ways are blameless, who walk according to the law of the Lord.Psalm 119:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ 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] Alternative font sizing
On 06/03/07 13:00 Jared Stein apparently typed: it seems OSs of the future would better detect the res/screen and adjust the base font size automatically--even if it's just to set a baseline for the default or 'normal' setting. Many Linux systems have already been doing that for quite some time, probably around three years. It simply requires a competent (unbroken) version of X, a proper DDC display, and good video drivers, the latter of which is unfortunately somewhat uncommon if the video hardware is new. X can use the display's DDC output to set DPI accurately, and with it all font sizes that are set in points are accurately sized. Today that means only somewhat short of everything on the X desktop. The main exceptions are Gecko browser defaults (set in px), and web pages that explicitly size things in other than such absolute units as pt, mm, cm, and in. -- Blessed are they whose ways are blameless, who walk according to the law of the Lord.Psalm 119:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ 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/
