Re: [css-d] weirdest wrapping issue
Angela French schrieb am 15.06.2013 00:38: I've got the weirdest wrapping issue going on at this page: http://168.156.9.250:8080/academy05-06.aspx . Currently it is rendering fine, but if I swap out the code blocks for Mari and Randy (put Randy in position 5) the last photo in the group will not render in the left most position. The thumbnail-img for Mari Kruger is 1px higher than the others. 91 instead of 90px. You could change the image or force the height via CSS. Or you could try inline-block instead of float for arranging the thunbnails it's usually more robust to such issues. Greetings Susanne -- http://sujag.de - Webentwicklung und -beratung susjae...@sujag.de Christinenstr. 36, 10119 Berlin, Tel: 030 - 443 241 73 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with positioning
Hi Chris, Chris Kavinsky schrieb am 07.12.2012 21:40: I'm working on a new site where I used relative positioning to arrange the logo and nav horizontally. Consequently, there was a huge gap between the site header area and the content area because of the repositioning of the logo, so I moved the content up to fill the space (top:-115px). looks a bit overcomplicated to me. Here's the site in progress: http://associationdatabase.com/aws/OAA/pt/sp/home_page I'd try position: absolute; for the logo removing it from the flow and adding an appropriate padding-top to #subcontent to make room for the logo. Then everything else can stay in place. greetings Susanne -- http://sujag.de - Webentwicklung und -beratung susjae...@sujag.de Christinenstr. 36, 10119 Berlin, Tel: 030 - 443 241 73 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trumping bad proprietary code.
David Hucklesby schrieb am 06.11.2012 18:07: There are other ways of giving old IE layout other than using the proprietary zoom property, of course: http://www.satzansatz.de/cssd/onhavinglayout.html#prop But all other methods have a real effect (and side effects), that may not fit in a special environment. zoom: 1; is wonderful meaningless, it does nothing (beside fixing a stupid old IE bug). The only real problem I see, is that you might miss an important validation error, when you get used to ignoring some. greetings Susanne __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Does anyone recognize this ?
Philippe Wittenbergh wrote:
In a stylesheet that I’ve temporarily inherited I see multiple times the
following code (and the stylesheet is otherwise reasonably well written):
E {
display: inline-block;
float: left;
/* .. more .. */
}
Afaict, those are all applied to inline elements, no width is specified. On the
face of it, that code is completely non-sensical (float will make the element
display: block anyway – CSS 2.1:9.7 [1]).
The question: does anyone recognizes this as some kind of hack for whatever
browser ? I wouldn’t know what the benefit is, though.
perhaps a variation of the display: inline; cure against the
double-margin bug in older IEs.
http://positioniseverything.net/explorer/doubled-margin.html
greetings
Susanne
--
http://sujag.de - Webentwicklung und -beratung
susjae...@sujag.de
Christinenstr. 36, 10119 Berlin, Tel: 030 - 443 241 73
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Using floats for tables
Georg wrote: On 15.05.2012 17:36, Yolanda Aguirre wrote: Aside: I see no point in using divs and other elements to simulate table-layout in your case. The content you have in there can easily be classified as _tabular data_, which calls for a proper _HTML TABLE_. But ... what HTML elements you choose to use is not a CSS problem :-) I'd go a step further and say the pricelists should/must be marked as proper tables. With the current markup there is no connection between one item and it's price in non-visual browsers and looking at it with increased font-size. I find this problem quite often and its pretty annoying. greetings Susanne -- http://sujag.de - Webentwicklung und -beratung susjae...@sujag.de Christinenstr. 36, 10119 Berlin, Tel: 030 - 443 241 73 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Anchor tags and ability of browser window to scroll
Alan Chandler wrote: http://www.hartley-consultants.com/forum/index.php/board,1.0.html where the Go Up and Go Down links at the bottom and top of the list of forum topics are causing problems. The are links (ie a href=#topGo Up/a to anchors of the form a id=top/a When I have jumped via these links, the browser window will no long scroll to the part of the page above these anchors. Also the page wrapper and associated shadow seems to be offset from the page itself. Any ideas? removing overflow: hidden; for #page_wrapper seems to solve the problem (at least in Seamonkey). hth Susanne __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css with js disabled
David Laakso wrote:
uri: http://chelseacreekstudio.com/fa/
css: http://chelseacreekstudio.com/fa/css/sisu.css
In this rough layout -- when viewed with javascript disabled -- digits 2
through 8 ought to be stacked vertically and flush left to the red rule.
What to do?
if I understood you correctly, try:
#container h4 {clear: left;}
greetings
Susanne
--
http://sujag.de - Webentwicklung und -beratung
susjae...@sujag.de
Christinenstr. 36, 10119 Berlin, Tel: 030 - 443 241 73
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera - no css
Colin Mcgarry wrote, On 10.11.2007 17:28: The reason for browser searching is to accommodate browser quirks in the CSS. Well user agent sniffing is IMHO (one of) the most fragile method(s) of doing that. You will never target all good browsers properly - at the moment for example I don't see any CSS on your site, since I'm using a Linux machine. I have to tell my browser to fake the User Agent to see some styles. I couldn't find the perfect Wiki-page on the subject but have a look on Css Hack - css-discuss http://css-discuss.incutio.com/?page=CssHack Susanne -- http://sujag.de - Webentwicklung und -beratung 10119 Berlin, Tel: 030 - 443 24 173 * CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] two variable width divs side by side
Paul Sommer wrote, On 23.05.2007 20:58:
Your solution works only with that simple example. The real thing has a
background image attached
to the right column.
(please look at the extended sample here
http://paul-sommer.de/test/tablefree.html )
Expanding that image to the left side is not a solution as the menu column
grows if the user
enlarges the font size (Ctrl + in firefox).
The menu column must be sized with em (I think). Otherwise the text runs out
of the box
if the user enlarges the text.
Not sure if I got the problem, but perhaps something like that - uses
position instead of float to avoid problems with too wide table
(untested just to give you an idea) assuming a solid background-color
for the menu column.
div id=container
div id=menu/div
table/table
/div
/div
#container {position: relative; border-left: yellow solid 20em;
background-image: ...}
#menu {width: 18em; position: absolute; left: 1em; top: 0;}
anything else you didn't mention? ;-)
Gruß
Susanne
--
http://sujag.de - Webentwicklung und -beratung
10119 Berlin, Tel: 030 - 440 483 47
* CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp
http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 background change on hover and zoom
Hallo Ingo,
Ingo Chao wrote, On 20.12.2006 05:53:
Susanne Jäger wrote:
http://sujag.de/test/hover_problem.html
It's just simple text with some inline links, that are inverted on
:hover, :focus, :active. When the page is zoomed those links get shifted
to the right on :hover.
What about giving zoom to the link against this zoom-bug?
a { zoom:1;}
No. Now the link itself is shifted to the right (but on hover, it keeps
it's position).
position:relative?
a { position:relative;}
No. The link leaves a white hole in the line, strolling around.
a { zoom:1; position:relative;}
No, no. The link is moving out of the line, upwards, and the text wraps
as if the link would not exist.
I think I tried every single combination of these properties on every
single element on this page in each state. ;-( Sometimes I imagine a
script doing this on the fly - problem solved ? press enter otherwise
continue with next element. ;-)
What sometimes (kind of) works is adding word-spacing: 0; for the
block-Element. Kind of, cause it grossly distorts letter-spacing on
pagezoom even in paragraphs that don't contain any links. I tried this
in an second test-case http://sujag.de/test/hover_problem_fixed.html
(It was late and I was too optimistic when naming this one :-) )
Sometimes cause this fix doesn't work if there are more than one
closely adjacent links in a line - like in a breadcrumb-Trail.
Part of the problem is already visible without any dynamic changes. The
clickable area of an inline Link with a background-color doesn't
exactly fit to the position of the text in the zoom-state. Changing the
color on user-Interaction just makes things worse and more visible.
If this will be confirmed, it might have consequences for any
userfriendly way of always defining color - background-color pairs in
order to avoid conflicts with user-Stylesheets.
If only they had tried their zoom feature before launching.
FUll ACK
Susanne
--
http://sujag.de - Webentwicklung und -beratung
10119 Berlin, Tel: 030 - 440 483 47
* CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp
http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 background change on hover and zoom
Am 20.12.2006 13:29 schrieb Susanne Jäger: Part of the problem is already visible without any dynamic changes. The clickable area of an inline Link with a background-color doesn't exactly fit to the position of the text in the zoom-state. Changing the color on user-Interaction just makes things worse and more visible. If this will be confirmed, it might have consequences for any userfriendly way of always defining color - background-color pairs in order to avoid conflicts with user-Stylesheets. Ok. It really seems to be a general problem with the positioning of inline-elements and IE7s page zoom. The position of text-content is not in all cases the same as the element borders. The problem gets visible with quite a few style-properties, there seems to be a very special fix for text-decoration: underline on links. Besides this it's completely screwed up. Little horror show - quite colorful and not very meaningful ;-) - http://sujag.de/test/inline_element_styling_ie7.html Fun for IE7. letter-spacing and word-spacing seem to fix the positioning problems, but are themselves buggy and can't be used as a fix, at least 0 or a very small value result in rather weird spacing. greetings Susanne, hoping for some quick bugfixing. -- http://sujag.de - Webentwicklung und -beratung 10119 Berlin, Tel: 030 - 440 483 47 * CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE7 background change on hover and zoom
Hi, I run into a very annoying problem with the pagezoom in IE7. A very simplistic testcase (ignore the German text, its just a placeholder - styles inline): http://sujag.de/test/hover_problem.html It's just simple text with some inline links, that are inverted on :hover, :focus, :active. When the page is zoomed those links get shifted to the right on :hover. The shift is larger for links that are placed at the end of a line than for those at the beginning. I'm pretty sure this bug must have been noticed before, but couldn't find neither a specific description nor a workaround. I had a couple of similar problems with page-zoom and not layouted inline content - on horizontal list and similar stuff, but those could be fixed with some hasLayout / position: relative combination, when I could address all children of a block element. In this case - in flow inline-content nothing seems to work ... or I'm just looking too long on the same page. Any hints? Susanne -- http://sujag.de - Webentwicklung und -beratung 10119 Berlin, Tel: 030 - 440 483 47 * CSS-Referenz für den Schreibtisch * CSS GE-PACKT - mitp http://mitp.de/vmi/mitp/detail/pWert/1620/titel/CSS%20GE-PACKT __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Konqueror and display:table
Philippe Wittenbergh schrieb, am 05.05.2006 07:09: Anyone has access to Konqueror 3.5.x ? I see some pretty wrong display of elements with display:table adjacent to floated blocks. http://dev.l-c-n.com/IEW/table-formatting-context.php The offending elements slide *under* the left hand floated blocks. That is contrary to anything it should do. The computed width appears correct though. Hint: Gecko displays this correctly. (I am checking with Konqueror 3.5.2; I thought previous versions were handling this correctly). Don't know about newer versions, but at least Konqueror 3.3.2 shows the same problem. Susanne -- http://sujag.de - Webentwicklung und -beratung [EMAIL PROTECTED] Lottumstr. 22, 10119 Berlin, Tel: 030 - 440 483 47 __ 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] Konqueror and display:table
Hi Philippe, Philippe Wittenbergh schrieb, am 05.05.2006 07:09: I see some pretty wrong display of elements with display:table adjacent to floated blocks. http://dev.l-c-n.com/IEW/table-formatting-context.php That's an odd one. In a local copy of your page and Konqueror 3.3.2 the bug is triggered by the existence of a link rel=stylesheet .. - line. This can point to an empty or not existent file and the line may be placed before or after the local style-Element. When importing base1.css instead of linking the page works as intended. Strange. Susanne -- http://sujag.de - Webentwicklung und -beratung [EMAIL PROTECTED] Lottumstr. 22, 10119 Berlin, Tel: 030 - 440 483 47 __ 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] Photo Gallery's -( related question)
Don Hinshaw wrote: I have a question about this that I haven't seen answered: Is there a way to have thumbnails of varying sizes aligned along their bottom margins AND have captions that are top-aligned? (esp. noticeable when the captions are more than one line). Similar to this example using tables: http://66.117.159.181/products_buy_posters3.php I don't think that it will work with completely unknown content, but if you just have to distinguish portrait and landscape images and none or some text, you can do a lot if you set min-width and min-height to the floated (list-)boxes ,give them position relative and play with position: absolute and margins for the caption. Not a gallery, images top-aligned but multiple associated text-boxes http://casaaxarquia.com/forsale/plot.php might give you some ideas. Susanne -- http://sujag.de - Webentwicklung und -beratung [EMAIL PROTECTED] Lottumstr. 22, 10119 Berlin, Tel: 030 - 440 483 47 __ 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/
