[css-d] trying ot make my page fit on IE
hey all, I have this valid page http://p80.free.fr/testy/testy.html . On gecko and khtml, the page fits the browser, I mean there's no need to scroll. The problem is that in IE I need to horizontally scroll. Any idea how I could fix this? Thanx in advance Pat __ 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] custom bullets for IE Win
Thank you, Christian. That worked out great! Don't bother with list-style-image, instead use background images and padding. Works a trat across browsers. http://css.maxdesign.com.au/listamatic/vertical05.htm __ 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] trying ot make my page fit on IE
Patrick Aljord wrote:
hey all,
I have this valid page http://p80.free.fr/testy/testy.html .
On gecko and khtml, the page fits the browser, I mean there's no need to
scroll. The problem is that in IE I need to horizontally scroll. Any idea
how I could fix this?
Thanx in advance
Pat
Pat, ie does not understand max-width-- just using width 70% should fix it.
.bookmarks {float:left; /*max-*/width : 70%; }
Regards,
~dL
--
http://chelseacreekstudio.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] trying ot make my page fit on IE
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Patrick Aljord Sent: 14 October 2006 15:37 To: CSS list Subject: [css-d] trying ot make my page fit on IE hey all, I have this valid page http://p80.free.fr/testy/testy.html . On gecko and khtml, the page fits the browser, I mean there's no need to scroll. The problem is that in IE I need to horizontally scroll. Any idea how I could fix this? Thanx in advance Pat Pat, you could save yourself a lot of typing by changing your border style to: border:1px solid #88; Cheers Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.408 / Virus Database: 268.13.4/475 - Release Date: 13/10/2006 __ 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] CSS shapes
http://www.css-zibaldone.com/the-css-switch-project/november-2006/shapes/ a little tribute to Tantek and Mark Schenk. enjoy! ps. I've not specified the exact versions of the various browsers. all apologies. the latest versions, of course. otherwise, as specified. This keeps cropping up as an amazing new CSS discovery. Can anyone think of a situation where this would be useful? It is like using a lot of HTML, background colours and spacer GIFs to paint an image. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.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] CSS shapes
Christian Heilmann wrote: http://www.css-zibaldone.com/the-css-switch-project/november-2006/shapes/ a little tribute to Tantek and Mark Schenk. enjoy! ps. I've not specified the exact versions of the various browsers. all apologies. the latest versions, of course. otherwise, as specified. This keeps cropping up as an amazing new CSS discovery. Can anyone think of a situation where this would be useful? It is like using a lot of HTML, background colours and spacer GIFs to paint an image. If you gotta ask, you'll never kow :-D . I forgot who said that. ~dL ** http://www.thereisnocat.com/showme490.html -- http://chelseacreekstudio.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] Double space after a period
couldnt you just set paragraph elements to preserve whitespace? just dont get indent-happy in the source of the paragraphs. __ 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] Double space after a period
Now that I'm not trying to type from my cellphone, I can post an example: http://www.kennygraham.net/wsg_cssd/whitespace.html On 10/14/06, Kenny Graham [EMAIL PROTECTED] wrote: couldnt you just set paragraph elements to preserve whitespace? just dont get indent-happy in the source of the paragraphs. __ 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] Double space after a period
nevermind forgot about it breaking wordwrap. :( On 10/14/06, Kenny Graham [EMAIL PROTECTED] wrote: Now that I'm not trying to type from my cellphone, I can post an example: http://www.kennygraham.net/wsg_cssd/whitespace.html On 10/14/06, Kenny Graham [EMAIL PROTECTED] wrote: couldnt you just set paragraph elements to preserve whitespace? just dont get indent-happy in the source of the paragraphs. __ 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] Image links shifting in FF when clicked
iorhael wrote:
Would someone be able to tell me why when, in Firefox, the thumbnails
floated to the right on this page shift to the right when clicked?
Everything looks fine in IE and Opera.
http://www.drkdesign.com/portfolio.php
Figuring out exactly why Firefox handles an image with a link and a
width-specified paragraph inside a float with no width specified, in a
certain way on click, is beyond me. I have no idea how any browser
should handle such a scenario.
I found the styling a bit too weak in all browsers - breaking badly when
subjected to font resizing and so on, so I looked for a working solution
rather than an answer to your question.
The following addition/override is what I came up with...
.sample1,.sample2,.sample3,.sample4 {width: 49%; margin: 0;}
.sample1 {float: left; clear: both;}
.sample2,.sample3 {float: right; clear: right; margin-top: 40px;}
.sample4 {clear: both;}
.sample1 p,.sample2 p,.sample3 p,.sample4 p { width: 90%;}
.note {clear: both;}
...and that's without making any changes to your existing source-code or
CSS.
You can make it a lot better and cleaner by simply using 2 classes for
what's supposed to stay on which side, and simply float those containers
into place.
Something like...
.sample1 {float: left; width: 49%; clear: both; /* left side */}
.sample2 {float: right; width: 49%; margin-top: 40px; /* right side */}
.sample1 p, .sample2 p {width: 90%; font-size: 70%;/* all paragraphs */}
.sample1 img, .sample2 img {border: 1px solid #000; padding: 3px;}
.note {clear: both;}
...should work fine once the source-code is changed to reflect these
two classes. I haven't tested it in your page, but this is a quite
normal float-construction that'll make containers line up pretty much
the way your page renders on default in IE right now.
Also, no br / needed outside paragraphs in there, and probably not
inside them either.
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] CSS shapes
Hi David, Christian, and Gabriele, Gabriele wrote: http://www.css-zibaldone.com/the-css-switch-project/november-2006/shapes/ a little tribute to Tantek and Mark Schenk. enjoy! ps. I've not specified the exact versions of the various browsers. all apologies. the latest versions, of course. otherwise, as specified. Christian wrote: This keeps cropping up as an amazing new CSS discovery. Can anyone think of a situation where this would be useful? It is like using a lot of HTML, background colours and spacer GIFs to paint an image. David wrote: If you gotta ask, you'll never kow :-D . I forgot who said that. LOL! I have been looking for a better way to handle a problem at work. We have a number of product specification sheets usually written in MS Word--the problem is that many of them have what the boss considers important items highlighted which works fine in the various Word versions in use (including some very old ones on hand-me-down computers) except for a document highlighted in violet. When printed out this is nearly illegible what with the dark shade of purple used in the limited color menu for highlighting. I tried some other ways to put a color behind text but all were poor in some way; currently the document is in use highlighted in pink. I then (yesterday) started, stealing a moment at a time, to try to work out something in HTML and CSS (Back on topic!) but it is slow going. I keep tripping over the defaults for handling printing text and backgrounds; it is possible one of the useful? methods will offer me something. Putting a bottom border on the line above and using relative position to drop it down under the following line has some promise but I can't just type a line in white text on the white background as it shows up in the printed result. Since this is strictly for a local file and we use IE6 at work, I only need it to work one document at a time in IE6 only. I have reservations about trying to get someone who is not too web-oriented to change the default settings to print a few copies of a document and then set them back. Perhaps there are some other uses! -- Regards, Gene Falck [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] Website check - please!!
Gunlaug Sørtun wrote:
Administration wrote:
When testing in FF and Opera . the background would not repeat /
column widths are erratic / column lengths are erratic / top
navigation is not staying within the div id=wrapper
http://www.kenomultimedia.com.au/
I did ask for help on the list and Ingo Chao replied with..
Understanding CSS-concepts like floating is easier if you start
creating your site in FF or Opera. After several attempts I still
haven't managed to get the image to repeat in FF and Opera.
Ingo was perfectly right. IE is pulling tricks on you with all its bugs
and non-standard behavior, so make it work in the standard-compliant
browsers first and fix IE later.
I have since created another main page, this time to suit FF 1.5 and
Opera 9.0 and this time I have used an image and color individually
for the columns.
That's the wrong approach for that layout, so I'll focus on making your
original page cross-browser reliable...
http://www.kenomultimedia.com.au/
To make the background stretch to contain floats in standard-compliant
browsers, you have to feed them some standard properties in the right
places.
I'll choose to establish a new 'block formatting context'[1] by adding...
#page {float: left;}
...which makes that container expand properly, with background and all,
in all browsers.
Then I'll add...
ul#nav {padding: 0;}
...since both Firefox and Opera9 have default paddings on lists - making
that top navigation too wide. IE has default margins on lists, and you
have already taken care of those.
That should be it - unless I have overlooked something.
Just hoping someone on the list could help me out here .. I think I
may have to go back to basics and start again.
No need. Just keep on building on what you've got, and keep on learning.
Is it possible to have on the same website, separate linked or import
style sheets to suit different browsers, as I have never heard of
this before ..
You can use 'conditional comments'[2] to feed separate stylesheets to
IE-win - if you have to.
No such solution for other browsers, and there's rarely a need for
separate styles to make the more standard-compliant browsers get in
line. Try giving them a complete set of styles first, to even out any
major differences.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
[2]http://www.gunlaug.no/contents/wd_1_02_01.html#item2
Thank you Georg for your invaluable help ...
http://www.kenomultimedia.com.au/
http://www.kenomultimedia.com.au/keno.css
I now have a few more problems, not sure what I have done or haven't done here
...
but maybe a fresh pair of eyes can help me sort this mess out :-)
IE6 .. margin/padding problem with the header:
'.. a website business that means business for your website'
FF 1.5 .. margin/padding problem with the header:
'.. a website business that means business for your website'
When navigating 5 of the 7 site pages are skipping to the left..
or is it 2 are skipping to the right (the Home and Accessibility pages)
Opera 9.02 .. margin/padding problem with the header:
'.. a website business that means business for your website'
When navigating 5 of the 7 site pages are skipping to the left..
or is it 2 are skipping to the right (the Home and Accessibility pages)
also there is a 2-3px gap beneath each image in the l-r columns.
l-hand column, vertical spacing/column height erratic.
Font sizing seems to be rendering differently over the 3 browsers
h4 tag . sub headings differing from page to page
Thanks in advance,
Keno ...
__
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] Image links shifting in FF when clicked
On Oct 14, 2006, at 12:54 PM, iorhael wrote:
Would someone be able to tell me why when, in Firefox, the
thumbnails floated to the right on this page shift to the right
when clicked? Everything looks fine in IE and Opera.
http://www.drkdesign.com/portfolio.php
http://www.drkdesign.com/drk_css/drk_import.css
It is one of the bugs related to the outline property. Happens both
when you click on a link in those floated boxes or tab to it from the
keyboard.
to test, try this:
a:focus, a:active {outline none !important;}
But I don't recommend you use this as a fix, though, it removes all
feedback on which is link has focus for the keyboard user.
As Georg mentions, the layout is not very strong, his suggestions
will go a long way to fix the problem.
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/
Re: [css-d] Website check - please!!
Administration wrote: Thank you Georg for your invaluable help ... http://www.kenomultimedia.com.au/ http://www.kenomultimedia.com.au/keno.css Some /silly stuff/ you did not mention: -- change the p text-align from justify to left to dry up the 'rivers.' (think of the text blocks as a piece of tapestry-- squint your eyes at them and you'll see the rivers). -- add a background color on the body declaration (not everyone defaults to #fff) Best, ~dL I now have a few more problems, not sure what I have done or haven't done here ... but maybe a fresh pair of eyes can help me sort this mess out :-) IE6 .. margin/padding problem with the header: '.. a website business that means business for your website' FF 1.5 .. margin/padding problem with the header: '.. a website business that means business for your website' When navigating 5 of the 7 site pages are skipping to the left.. or is it 2 are skipping to the right (the Home and Accessibility pages) Opera 9.02 .. margin/padding problem with the header: '.. a website business that means business for your website' When navigating 5 of the 7 site pages are skipping to the left.. or is it 2 are skipping to the right (the Home and Accessibility pages) also there is a 2-3px gap beneath each image in the l-r columns. l-hand column, vertical spacing/column height erratic. Font sizing seems to be rendering differently over the 3 browsers h4 tag . sub headings differing from page to page Thanks in advance, Keno ... __ 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/ -- http://chelseacreekstudio.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] Website check - please!!
Administration wrote:
http://www.kenomultimedia.com.au/
I now have a few more problems, not sure what I have done or haven't
done here ...
:-D
Well... knowing what you're doing may help quite a bit at times, so
maybe you should study standards and browsers a bit more - just to be on
the safe side ;-)
Now for the problems:
Margin/padding problem with header...
Solution:
#breadcrumbs {
margin-top: 10px; /* delete this margin */
clear: both; /* add this */
padding: 5px 0px 5px 0px; /* adjust padding to taste */
}
---
Skipping to the left (or right)...
That's the normal behavior in Firefox Opera, as there's no need for a
vertical scrollbar on short pages. You should not mess with such normal
browser behavior / differences, but if you must then a simple addition
of...
html {overflow-y: scroll;}
...will put a permanent vertical scrollbar in there in Firefox - for no
good reason at all (IMO :-) ).
---
Font sizing seems to be rendering differently over the 3 browsers
Yes, and you can't expect them to have identical rendering.
I wouldn't know what you're aiming for, since all my browsers overrides
your tiny font sizes anyway - using 'minimum font size' and 'ignore font
size'.
Some weak spots where you have declared line-height in pixels, as that
means overlapping when resizing up some in IE-win and Opera.
---
h4 tag . sub headings differing from page to page
Check inheritance, as all elements' font sizes depends on what's
declared on elements they are wrapped in.
---
One flaw in http://www.kenomultimedia.com.au/ where you have included
'nav' in the 'header' - provoking IE's whitespace bug and creating a
space below the header-image.
Compare with the other pages, and move the end-tag for 'header' to the
right place.
Also some unnecessary pnbsp;/p and br / around. As a general
rule; we use margins and paddings to create space.
---
Advice:
You should use more shorthand...
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/
...and avoid unnecessary repetitions.
Relaxing a bit on identical rendering and pixel perfection, may also help.
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] Website check - please!!
http://www.kenomultimedia.com.au/
http://www.kenomultimedia.com.au/keno.css
I now have a few more problems, not sure what I have done or haven't done
here ...
but maybe a fresh pair of eyes can help me sort this mess out :-)
When navigating 5 of the 7 site pages are skipping to the left..
or is it 2 are skipping to the right (the Home and Accessibility pages)
At higher screen resolutions (in compliant browsers) pages that are not
deep enough will not draw a scroll bar; consequently, the shift when
clicking from a page that is deep enough (or something like that) :-) .
Anyway, this /sometimes/ cures short-page shift:
html { min-height: 100%; margin-bottom: 1px; }
--
http://chelseacreekstudio.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] CSS popup doesn't work in IE
At http://03.infocopa.com/programmes/efficacite.html , you'll find a little
note icon in the second paragraph, right after dans le monde. In
Firefox, hovering over the icon displays a footnote, as a block positioned
right next to the icon. In IE, unfortunately, the hover doesn't work.
I know that IE only supports :hover on links, so I coded as follows:
pLe Projet ESPACE est reconnu [blah blah] dans le monde. a
class=inline-footnote href= onClick=return falsespanLes projets
ESPACE sont établis [blah blah] et lrsquo;Afrique./span/a En tant que
tel, il a été beaucoup étudié./p
The link contains a span with display: none. When hovering, a different rule
changes the span's display to block:
a.inline-footnote {
position : relative; /* set anchor for absolutely-positioned popup */
padding-left : 16px; /* room to display icon as background-image */
}
a.inline-footnote span {
display : none;
}
a.inline-footnote:hover span {
position : absolute;
left : 16px;
top : 0;
display : block;
width : 12em;
padding : 0.5em;
border-width : 1px;
font-size : 0.75em;
line-height : 1.1em;
}
It validates and works fine in Firefox. As I said, in IE the hover has no
effect. Thanks for any suggestions.
__
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] CSS popup doesn't work in IE
Charles Blaquière wrote:
At http://03.infocopa.com/programmes/efficacite.html , you'll find a
little note icon in the second paragraph, right after dans le
monde. In Firefox, hovering over the icon displays a footnote, as a
block positioned right next to the icon. In IE, unfortunately, the
hover doesn't work.
I know that IE only supports :hover on links, so I coded as follows:
a.inline-footnote:hover {background:0 0}
should fix it.
---
Regards,
Thierry | www.TJKDesign.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/
