[css-d] solved dotted bottom border hovering gap Safari but not IE7
Hello list, some dear member of this list mailed me, helped me. The problem for Safari was a doctype one! (I needed to apply a strict doctype to my pages) nevertheless some other offset appeared at other positions in my ul li navigation. I solved this by setting some assumed px fontsize and lineheight for my non-displaying text ... (same fontsize as the bg height of my images shown for my li ids are.) IE 7 Problem still there: the bottom border (2px dotted) at hovering does not appear at the thumbnails (bottom of the page) Same sample page for my problem is below: (the mailserver somehow breaks the URL in two lines though I put it into tags which results in an 'object not found', in case it happens again, please delete the %20 within the URL) http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html stylesheets: http://www.fabian-helmich.de/css/fabian_base.css http://www.fabian-helmich.de/css/fabian_p1.css bye, beate __ 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] dotted bottom border hovering gap Safari/IE7
Dear list, Sample page for my problem is here: (the last time the email broke the URL in two lines, which resulted in an 'object not found', in case it happens again, please delete the %20 from the URL) http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html stylesheets: http://www.fabian-helmich.de/css/fabian_base.css http://www.fabian-helmich.de/css/fabian_p1.css hovering over the thumbnails at the bottom of the page should show a dotted line below the thumbnail with some pixel distance. In Safari this line shows without gap right below the thumbs. in IE7 it doesn't show at all, in IE6 and others (Firefox, Camino) it's fine. a 2px dotted line with appr. 2 px distance. I have tried all sorts of settings but can't figure out how to achieve this line appearing in the same way as it does in other browsers. Can you help me? bye, beate __ 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] navigation jumps some pixel down in IE6 when hovering over it
Dear list, I have another problem, sample page is here: (the last time the email broke the URL in two lines, which resulted in an 'object not found', in case it happens again, please delete the %20 from the URL) http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html stylesheets: http://www.fabian-helmich.de/css/fabian_base.css http://www.fabian-helmich.de/css/fabian_p1.css In Internet Explorer 6 when you hover over the top navigation bar the two other lines below jump some pixels down ... this should not happen! how can I prevent this, what in my settings do I have to change? bye, beate __ 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] SOLVED navigation jumps some pixel down in IE6 when hovering over it
I have solved that problem ... Am 05.01.2007 um 04:33 schrieb Beate De Nijs: . __ 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] hovering line gaps Safari/IE7 / jumping navigation in IE6
Dear list, I have two problems, sample page is here: http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html stylesheets: http://www.fabian-helmich.de/css/fabian_base.css http://www.fabian-helmich.de/css/fabian_p1.css 1. hovering over the thumbnails at the bottom of the page should show a dotted line below the thumbnail with some pixel distance. In Safari this line shows without gap right below the thumbs. in IE7 it doesn't show at all, in IE6 and others (Safari, Camino) it's fine. a 2px dotted line with appr. 2 px distance. I have tried all sorts of settings but can't figure out how to achieve this line appearing in the same way as it does in other browsers. Can you help me? 2. in Internet Explorer 6 when you hover over the top navigation bar the two other lines below jump some pixels down ... this should not happen! how can I prevent this, what in my settings do I have to change? bye, beate __ 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] menu li id bg images disappear in firefox / different li id width in browsers
Am 05.12.2006 um 12:38 schrieb Ingo Chao: Beate De Nijs wrote: Hello, I do encounter some strange probs with my navigation... testpage URL http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html css URLs:http://www.fabian-helmich.de/css/fabian_base.css plus for each subsection I needed an further tiny one for just the subsection li setting: http://www.fabian-helmich.de/css/ fabian_p1.css 1. in firefox (I have only tested on mac yet) the navigational menu background images appear for a short moment and then disappear. you can move the mouse over the empty areas and click, but they cannot be seen. (same for little arrows aside the thumbnailrows and aside the large images http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html Have you fixed it? I can see the pale, light little arrows and the menu in Fx, like in Opera and Safari. no, I haven't. but others I asked also see the menues/arrows in FF. but why not me?? I have deleted all caches, even tried with different named (but same) stylesheet) etc., have the latest version installed, but somehow get the bg images not displayed... I don't like these uncertainties ... but thanks for checking, at least some relief! bye, tschüß, beate Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0 Ingo -- http://www.satzansatz.de/css.html __ 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] menu li id bg images disappear in firefox / different li id width in browsers
Hello, I do encounter some strange probs with my navigation... testpage URL http://www.fabian-helmich.de/seiten/portrait_1/ p1_1_sun_angelika_1.html css URLs:http://www.fabian-helmich.de/css/fabian_base.css plus for each subsection I needed an further tiny one for just the subsection li setting: http://www.fabian-helmich.de/css/fabian_p1.css 1. in firefox (I have only tested on mac yet) the navigational menu background images appear for a short moment and then disappear. you can move the mouse over the empty areas and click, but they cannot be seen. (same for little arrows aside the thumbnailrows and aside the large images 2. in some browsers the submenu numbers are closer to each other than in others (in IE7 and camino and FF closer than in IE6 or Safari) though I gave each li id a certain width (which might not be the same like the background number image width, but that shouldn't be the matter) does this have to do with font size of the invisible/none displayed span text? or some inherited margins. I've tried so many options now but cannot track the weirdnesses. can somebody help me, please? 3. Question the clients insists on thumbnails at bottom (testpages at one menusubsection here http://www.fabian-helmich.de/ seiten/portrait_thumbs_unten/th_p1_1_sun_angelika_1.html) for navigational reasons (short mouse ways) and logic page loading/ appearance without scrolling and for the possibility of varying bodytext and textzoom a thumbnail navigation at top is my preferred one what is your opinion? bye, beate __ 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] how to prevent 'stuttering' browser rendering with e.g. images
Hello, when images (and probably also some div id s) don't get width/height set on the page, the rendering in the browser can look 'stuttering'. divs and texts appear earlier, images start to appear and push the content further down or the side. another behaviour is that at short pages the scrollbar disappears, making a centered content jump offset to the right a bit. e.g. I have short pages with few textlines and with one either vertical or horiziontal pic. when one clicks through the pages, this offset jumping is annoying. what do you do in such cases? - provide a large empty div box in the background with a minimum height that makes sure a scrollbar (area) will always appear? - set the margin of a footer div id very high? - ... bye, beate de nijs __ 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] row of images (varying heights) should align at bottom of div
Thanks Philippe,
this would work.
but it would mean to set up an id for each image in that row and
define it's size?
before your reply arrived I had tried a different - still no ascetic,
so rather a lousy workaround:
I set up a class .topmarginforbottomalign class and apply it to an
image to achieve the height of the thumbnailrow ...
(as I've reduced the thumbnail heigths to three different ones, I
have to set up 3 of such classes)
the only other - also lousy - possibilities I could think of would be:
- to create - ikk! - a one-cell-table with bottom alignment where
all images would go into
(which I want to avoid, of course. but wouldn't this be somewhat more
logical/cleaner than setting up certain marging-classes and bunches
of codelines for img id's?)
- to put a transparent gif of width 1px and the height of the
thumbnailrow at the start and/or end of the thumbnailrow.
(those could be removed easily via findreplace throughout the site
in case there will be a nice working css definition for this issue.
(like: align: bottom, or content-align: bottom, )
bye,
beate
Am 20.10.2006 um 13:51 schrieb Philippe Wittenbergh:
Beate De Nijs wrote:
I've got several thumbnail images of different height (and widths) in
a horizontal row.
they should all align at the bottom of their thumbnailcontainer which
has a fixed height.
I've put them in a div id #thumbnailrow and tried with these
settings:
#thumbnailrow { text-align: center; width: 828px; height: 88px;
margin: 2px auto 0; }
#thumbnailrow img { bottom: 0; margin-right: 4px; margin-bottom: 0;
margin-left: 4px; }
#thumbnailrow a:hover { border-bottom: 2px dotted #cacaca; }
Knowing what you usually do, something like this ?
http://dev.l-c-n.com/_temp/bottom-img.php
Works in all browsers, I think, although I can't check IE 6 atm.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
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] row of images (varying heights) should align at bottom of div
Hello,
I've got several thumbnail images of different height (and widths) in
a horizontal row.
they should all align at the bottom of their thumbnailcontainer which
has a fixed height.
I've put them in a div id #thumbnailrow and tried with these settings:
#thumbnailrow { text-align: center; width: 828px; height: 88px;
margin: 2px auto 0; }
#thumbnailrow img { bottom: 0; margin-right: 4px; margin-bottom: 0;
margin-left: 4px; }
#thumbnailrow a:hover { border-bottom: 2px dotted #cacaca; }
but this doesn't do the job...
nor did this addtion (neither at thumbnailrow or img): vertical-
align: bottom;
can you please help me with css definitions/settings to achieve this?
kind regards,
beate
__
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/
