[css-d] homogeneous horizontal arrangement of images
I'd like to know how to get a homogeneous horizontal arrangement of
images. The number of images is sometimes 3, sometimes 4.
First I thought of display:table-cell, but that would require a
inline-block-solution for IE lte 7 anyway. And it would force a
table-row, a one-liner.
Here, I'm trying to solve with text-align:justify. Since any last line
of justified text isn't justified, I had to insert a span to emulate a
last line.
But I have the feeling there must be something much simpler. Did not
test if it is stable.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
title/title
meta http-equiv=content-type content=text/html; charset=utf-8 /
meta name=author content=Ingo Chao /
style type=text/css
#wrapper {
text-align: justify;
width: 100%;
overflow-x: hidden; /* IE hor. scrollbar */
}
img {
border: 1px solid red;
padding: 5px;
vertical-align: middle;
}
#wrapper span {
display: inline;
display: inline-block; /*Opera*/
padding-left: 100%; /*force a new line*/
}
/style
/head
body
div id=wrapper
img src=# alt=image /
img src=# alt=image /
img src=# alt=image /
img src=# alt=image /
span!/span
/div
/body
/html
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Endnotes in CSS with alternate stylesheets and font-size: 0pt. Looking for a better way.
Dear List,
Endnotes are one of the main hurdles to weaning academics away from MS
Word to the freedom of open standards markup. I have worked out a way
with xslt, but its really overkill, and I would like to find a simple
way to do notes with just CSS, and help encourage friends to do things
the right way.
The following is one rather clumsy technique, which works in Firefox
2.0.0.6/Linux. I hope someone else has a better way.
Endnotes need to be auto-numbered, so you can add and delete them at
will, and easy to enter and update. The following shows one easy way to
mark them up (inside the n element):
htmlhead
link href=main.css rel=stylesheet type=text/css /
link href=endnotes.css title=endnotes rel=alternate stylesheet
type=text/css /
titleEndnotes with CSS/title
/headbodyh2CSS Comments/h2
pCSS is useful for many things, but applying it to academic writing is
an exercise in frustrations.nBut see Eric Meyer, iCSS the Definitive
Guide/i for a superb analysis of what can be done with CSS./n One of
the practical problems is the difficulty of remembering the syntax of
both CSS and XML at the same time.nI recommend the O'Reilly iPocket
Reference/i series./n/p
/body/html
To display them with the main text, the main.css erases the note text
with font-size 0pt, and adds a calculated number as the endnote number.
file main.css:
* { font-size: 13pt; font-family: Freeserif; }
body {counter-reset: n-num;}
n, n i { font-size: 0pt;}
n:before {vertical-align: 50%; font-size: 10pt;
counter-increment: n-num; content: counter(n-num) ;}
To display just all the notes together, open another window, load the
text and select View/Page Style/endnotes (which is put in your browser
pull down by the second link... line above.)
file endnotes.css
body {counter-reset: n-num;}
* { font-size: 0pt; font-family: Freeserif; }
n { font-size:14pt; display: block;}
n i {font-size: inherit;}
n:before {font-size:10pt; vertical-align: 50%;
counter-increment: n-num; content: counter(n-num) ) }
This technique has the advantage that you can look at the endnotes all
at one time. If you want to see just one as you are reading the main
text, you can alt-F4 to the other browser window. The common technique
of href'ing to the note means that you have to jump around, and also it
is not so easy to have automatic number. Seeing the notes all at once is
crucial: I often start reading an article by going through the notes.
I used the font-size: 0pt; because the seemingly more appropriate
display:none and visibility: hidden will not work here for various reasons.
So, thats what I have. Isn't there a better way than hacking around with
font-size: 0pt? And I cannot find a way of embedding alternate style
sheets in the main file itself. The usual xslt hack of href'ing to an
id (href=#mycss1) results in a garbled cascade, not a true alternate
stylesheet.
Thanks,
David
Oberlin
__
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] vertical-align property examples/info
Thanks for that link Ernie, After reading through I realize two things. First, that there are limits to using it similar to table cells, because it only applies to inline elements. Second, that to get it to behave like table cells, requires some amount of CSS hacks. While I do believe that tables should be used for tabular data, or very minimal layout aspects. At the point I am having to employ CSS hacks to avoid using a table (or using indeterminant top/bottom padding, my preference is to use a table. Afterall, hacks are less-likely to be future proof than a basic table construct (or even falling back on top/bottom paddings to achieve a similar result). ...Rob Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com _ From: Ernie Finlay [mailto:[EMAIL PROTECTED] Sent: Sunday, January 20, 2008 12:16 PM To: Rob Emenecker; 'CSS Discussion' Subject: RE: [css-d] vertical-align property examples/info Hi Bob,have a look at http://www.ibloomstudios.com/articles/vertical-align_misuse/ Ernie :) _ From: [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Date: Sun, 20 Jan 2008 10:16:36 -0500 Subject: [css-d] vertical-align property examples/info Hi all, Can anyone point me to good sources of info and simply examples for uses of the vertical-align property other than TD elements? I've looked at the CCS 2.1 spec at http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align, but don't quite understand what is considered a inline-level element for applying vertical-align properties. So, I still end up falling back on table constructs in certain cases where I am trying to apply a vertical-align. This usually happens in forms, and I'm trying to get away from using tables for drop back and punt layout control. Best, Rob __ 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/ _ Connect and share in new ways with Windows Live. Get it now! http://www.windowslive.com/share.html?ocid=TXT_TAGHM_Wave2_sharelife_012008 __ 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] Please help me fix a DIV's position vertically but not horizontally.
Hi all, Thank you, Georg, for having taken time to answer me. It's a pity that what I desired is not possible, whereas I started to think that CSS makes everything possible :-) I decided to place my left-side menu with absolute position and put the right-side of the page into an iframe. Thus the menu is always visible when the user scrolls down, but also when he scrolls left, which makes him unable to benefit from the full width of his browser window to read the true content... unfortunately. I would like to get rid of that iframe, though, but keeping the same effects. I read of overflow: auto; to make a scrollable div. This would be ideal for me if only I was able to set the dimensions of that div as follows: height: height of the viewport; width: width of the viewport - width of the left-side menu; If I use height: 100%; then my scrollable div (which has the longest content on the page) is taken as the reference for the total height of the page. And then, the left-side menu disappears when I scroll down... I could use position: fixed; for the menu, but then we are back to the original problem: when horizontal scrolling is performed, then the menu overlaps the content... I have googled quite extensively (but not enough ?) about viewport dimensions, but I did not find any solution. Has anyone any idea of how I could achieve with CSS stuff only the same effects as with my iframe ? (I would really appreciate to avoid this iframe, because the content needs already two files, plus the - cached - images...) I would like to avoid tables too for pure CSS, but that is another matter, and I guess I should post with another subject... Thanks in advance, Philippe PS: The test page can be found at http://graal.ens-lyon.fr/~pcombes/MUMPS_test/test.html It is emacs-made and fully commented because it is ought to be maintained by people who do not know CSS (but with good experience of programming...) So if anyone have time to have a look at it and give some comments, they would be very welcome. __ 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] Endnotes in CSS with alternate stylesheets and font-size: 0pt. Looking for a better way.
david riggs wrote:
¨
Endnotes are one of the main hurdles to weaning academics away from MS
Word to the freedom of open standards markup. I have worked out a way
with xslt, but its really overkill, and I would like to find a simple
way to do notes with just CSS, and help encourage friends to do things
the right way.
Just CSS isn't enough for anything, since CSS needs a marked-up
document to attach to. But there are several approaches to footnotes and
endnotes even when using just HTML and CSS; see
http://www.cs.tut.fi/~jkorpela/www/fn.html
The crucial question is the intended use: would it be on screen, on
paper, or both? The second question is whether a particular presentation
style should be used, as often dictated by publishers or academic
institutions. If the
Endnotes need to be auto-numbered, so you can add and delete them at
will, and easy to enter and update.
Using just HTML or XML together with CSS, this restricts you to use on
minority browsers, since IE doesn't support auto-numbering. If
auto-numbering is essential, it could be handled using a preprocessor or
using server-side techniques such as PHP. We don't need to do
_everything_ in CSS.
pCSS is useful for many things, but applying it to academic writing
is an exercise in frustrations.nBut see Eric Meyer, iCSS the
Definitive Guide/i for a superb analysis of what can be done with
CSS./n One of the practical problems is the difficulty of
You seem to use HTML markup with a custom n element. This may work
in a restricted environment, but you need not resort to custom markup
if you accept some verbosity, such as span class=fn.../span
instead of n.../n.
On the other hand, either approaches results in the footnote appearing
in the midst of text, with no indication of its being meant as a
footnote, when your style sheet is not used. If it is important to
degrade gracefully, you would need added verbosity, at least something
like
span class=fp(/spanspan class=fn.../spanspan
class=fp)/span
with
.fp { display: none; }
(more or less in the spirit of Ruby markup). This shouldn't be an
obstacle, if the markup is programmatically generated anyway, in order
to generate the numbering.
To display them with the main text, the main.css erases the note
text with font-size 0pt,
That's a _bad_ idea for several reasons. Among other things, it fails on
browsers with a minimum font size setting, as well as when using a user
style sheet that forces some specific font size. I can see why you are
not using the obvious display: none here, and I don't see an obvious
better alternative.
But I'm not convinced at all that this approach is adequate. Why would
you scatter the footnote texts into the text, instead of putting them at
the end of a document and inserting just footnote references (as links)
into the text?
n:before {vertical-align: 50%; font-size: 10pt;
counter-increment: n-num; content: counter(n-num) ;}
For a footnote reference, especially for screen use, something like
[42] is better for usability than reduced-size superscript-position
number alone. Try clicking on a digit in 10pt font size.
Moreover, vertical-align: 50% may have unexpected effects on line
spacing, even when a reduced font size is used: a line containing such
an element may get larger height than other lines. I think you should at
least consider setting line-height.
This technique has the advantage that you can look at the endnotes all
at one time. If you want to see just one as you are reading the main
text, you can alt-F4 to the other browser window. The common technique
of href'ing to the note means that you have to jump around,
You can just put the footnotes in a separate HTML document and make the
endnote references refer to it. You might even consider using frames,
since this is one of the rare cases where frames would be useful, but
few if any people seem to use frames for footnotes or endnotes.
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
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/
[css-d] a couple of questions: dif style sheets and min height??
Hello again everyone.. Just a couple of questions... I have built a little site which uses png's. These images sit slightly off the wrapper div. The image have a drop shadow which all works in the latest browsers. Now, if I want to keep the shadow in explorer 6 and below I have to use a alpha filter, which I need to look into. Has anyone used this filter for older browsers? and does the it validate properly? Or, could you use different images without shadows but only display these for IE browsers 6 and below...Is this possible? also, Because the my sites type renders different on certain screens resolutions, where the image on the right has an absolute position, the contents section's height gets very small, almost allowing the png file to touch the footer. Is there a way I can set a Min size height to the content div? I dont want set a total height if possible.. It needs to stay validated in all browsers..?? URL: http://www.precociouscollective.com/testfolder/ Thanks for all your help..this is a great list..! -- Rob Freeman [EMAIL PROTECTED] __ 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/
[css-d] February 12th, 2008 - a Glorious day for web designers / developers
Microsoft is pushing an update on February 12th, 2008 that will force-upgrade Internet Explorer to IE7. http://support.microsoft.com/kb/946202 has the details. Thank You, - Jon Hughes Phazm.com/notes __ 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] CSS validates, but still can't get columns to work in IE
Thanks David, I have got it working better but still not correctly.
It seems that there is a bigger margin-left under IE6 than FF, and that
although I say 100% for the contentframe in my CSS, it doesn't fill the
parent container.
If you get chance to have another look, that would be great.
Regards
Pete
-Original Message-
From: David Laakso [mailto:[EMAIL PROTECTED]
Sent: 19 January 2008 03:12
To: Pete Harrison
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] CSS validates, but still can't get columns to work in
IE
Pete Harrison wrote:
My page works fin in FF but fails to put the 4th column next to the
3rd in IE.
The page is at www.biofuels-maritime.com/dev and the css is at
www.biofuels-maritime.com/bio.css
Any ideas why this is?
I know there are 4 lines of CSS that do not validate, but they are for
another page.
Regards
Pete
No guarantees. Holds to a window of approximately 630px width in IE6.0
(local) no XP/Mac before float drop with these modifications:
th {
font-size:/*1.2em*/0.85em; --- reduce font-size tweak
}
Delete these three selectors:
#c4 img {
max-width:98%;
}
#c3 img {
width:98%;
}
#c4 img {
max-width:98%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top:2em;
}
Add these selectors and tweak:
#c4 img, #c3 img {max-width: 95%; display: block; margin: 10px auto;}
* html #c4 img, * html #c4 img {width: 95%; margin: 2em 1%;}
Change the width of the table in the markup from 100% to around 90%.
Best,
~dL
--
http://chelseacreekstudio.com/
__
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] February 12th, 2008 - a Glorious day for web designers / developers
On 21/01/2008, Jon Hughes [EMAIL PROTECTED] wrote: Microsoft is pushing an update on February 12th, 2008 that will force-upgrade Internet Explorer to IE7. Sadly, it only applies to users of WSUS on XP or newer, and can be overridden. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] February 12th, 2008 - a Glorious day for web designers / developers
Microsoft is pushing an update on February 12th, 2008 that will force-upgrade Internet Explorer to IE7. http://support.microsoft.com/kb/946202 has the details. --- Forgive my ignorance on server matters, but does this mean that all machines running IE6 will be forced to upgrade to IE7? Thanks James __ 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] February 12th, 2008 - a Glorious day for web designers / developers
Microsoft is pushing an update on February 12th, 2008 that will force-upgrade Internet Explorer to IE7. http://support.microsoft.com/kb/946202 has the details. --- Forgive my ignorance on server matters, but does this mean that all machines running IE6 will be forced to upgrade to IE7? Thanks James __ That was my understanding, James, but it looks like it is just limited to business-class customers. Basically, the update is being pushed through a microsoft server software that is for pushing updates to an array of computers (so the IT dept. can install office on all computers on the network in one fell swoop) At least that's what I gather - I may be wrong (again) - Jon __ 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] beginner's issues with spacing
Stuart Walsh wrote: David Laakso wrote: I've got a homepage with a header which is a jpg. I'm using HTML Kit to write the code and in that, and in IE there is no space above and below the header jpg. But in Firefox and Opera there is space above and below. I'm doing something wrong but I can't think what it is. Many thanks. I've implemented your suggestions. The page now works in Firefox and Opera. This is in reference to uri: http://www.revise-now.co.uk/A2Comms/ Good... on to bringing IE6 on board. Please see revision of CSS and markup-- too many changes to note individually. http://www.chelseacreekstudio.com/ca/cssd/temp.html Cursory tested in compliant browsers at +2 font-scaling, and text-size largest in IE6 7. G, I love to nit-pick. Best, ~dL PS Please hit reply all when replying so it goes to the list, too. O-- http://chelseacreekstudio.com/ __ 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/
[css-d] Text rendering in FF
Dear List, This may be old hat, sorry if it is in the archives, but I have been unable to find anything on it so far. Basically I always use ems to specify font-size, and was re-doing a site where the sizes had been specified in %s, out of force of habit i swapped the measures to ems so I could better understand them. I discovered a vast drop in quality in the rendering of the font in FF... Is it a known fact that FF renders fonts defined in % better than ems? I have never picked up on this before. Has anybody noticed this or know of any documentation on it? TIA, Mark __ 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] CSS validates, but still can't get columns to work in IE
Pete Harrison wrote:
Thanks David, I have got it working better but still not correctly.
It seems that there is a bigger margin-left under IE6 than FF, and that
although I say 100% for the contentframe in my CSS, it doesn't fill the
parent container.
If you get chance to have another look, that would be great.
Regards
Pete
re: www.biofuels-maritime.com/dev and the css is at
Dunno, Pete.
If IE6 is doubling the margins then adding display: inline; to the
containers /may/ correct it (and not adversely effect other browsers).
Try adding this to your style sheet:
#c4, #c3, #c2, #c1 {
display: inline
}
Short of that (and a need to validate your markup and css files), I am
afraid I have run out of suggestions.
Best,
~dL
--
http://chelseacreekstudio.com/
__
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] a couple of questions: dif style sheets and min height??
On Mon, 21 Jan 2008 15:47:13 + Rob freeman wrote: Hello again everyone.. Just a couple of questions... I have built a little site which uses png's. These images sit slightly off the wrapper div. The image have a drop shadow which all works in the latest browsers. Now, if I want to keep the shadow in explorer 6 and below I have to use a alpha filter, which I need to look into. Has anyone used this filter for older browsers? and does the it validate properly? Or, could you use different images without shadows but only display these for IE browsers 6 and below...Is this possible? Have you considered making the shadow a part of the original image. The KISS rule applies here. Given it's position you could take a screen snapshot including the edge of the background and resave it as a jpg. 24/32 bit PNG's are not really web friendly (very slow on dialup). Because the my sites type renders different on certain screens resolutions, where the image on the right has an absolute position, the contents section's height gets very small, almost allowing the png file to touch the footer. Is there a way I can set a Min size height to the content div? I dont want set a total height if possible.. It needs to stay validated in all browsers..?? min-height: is a valid css property but IE7 does not recognise it. If you set your body font as a percentage then use EM's to scale it (where 1em = 100%) you will resolve many font issues. Using percentages throughout can result in trouble with nested font scaling (you get 90% of 90%). To be honest i haven't taken the time to check if this is your issue. Work beckons... URL: http://www.precociouscollective.com/testfolder/ Thanks for all your help..this is a great list..! Hope i have helped. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ 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] a couple of questions: dif style sheets and min height??
I'll have another look at 8bit png files. I'll check out the min height css style too. I thought I had seen it somewhere but wasn't too sure if ie understood it. As for the navigation across the whole browser, well, I'm a little bit restricted to the small amount of content, so i based the site on a fixed width to contain what I had. I'm still a novice when it comes to font styling using ems, though I understand the upside of using them... thanks for all your help so far,, rob On 21/01/2008, Michael Adams [EMAIL PROTECTED] wrote: On Mon, 21 Jan 2008 15:47:13 + Rob freeman wrote: Hello again everyone.. Just a couple of questions... I have built a little site which uses png's. These images sit slightly off the wrapper div. The image have a drop shadow which all works in the latest browsers. Now, if I want to keep the shadow in explorer 6 and below I have to use a alpha filter, which I need to look into. Has anyone used this filter for older browsers? and does the it validate properly? Or, could you use different images without shadows but only display these for IE browsers 6 and below...Is this possible? Have you considered making the shadow a part of the original image. The KISS rule applies here. Given it's position you could take a screen snapshot including the edge of the background and resave it as a jpg. 24/32 bit PNG's are not really web friendly (very slow on dialup). Because the my sites type renders different on certain screens resolutions, where the image on the right has an absolute position, the contents section's height gets very small, almost allowing the png file to touch the footer. Is there a way I can set a Min size height to the content div? I dont want set a total height if possible.. It needs to stay validated in all browsers..?? min-height: is a valid css property but IE7 does not recognise it. If you set your body font as a percentage then use EM's to scale it (where 1em = 100%) you will resolve many font issues. Using percentages throughout can result in trouble with nested font scaling (you get 90% of 90%). To be honest i haven't taken the time to check if this is your issue. Work beckons... URL: http://www.precociouscollective.com/testfolder/ Thanks for all your help..this is a great list..! Hope i have helped. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ 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/ -- Rob Freeman [EMAIL PROTECTED] __ 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/
[css-d] IE issues with element width
www.captureintegration.com I apologize for making this my first post. I hope I can make contributions to this community after I have a little more experience, but for now I am a lost newbie. I have managed to style a Wordpress website to my liking after many months of experimentation (I am a photographer, not a web designer). The website renders as I want it to in firefox and safari (both win and mac versions). In IE7 the main element is rendered too wide and is forced below the sidebar. I've honestly tried googling to get an answer since I'm sure it is not complicated, but all I could find was references to quirks mode and I relatively sure I am not in quirks mode. Like I said, I am a photographer, and find it difficult to decode the gobbly-gook of cross-platform compatibility. Could someone give me a hand in figuring out why this element is wider in IE7 than firefox/safari. I would really appreciate it! Doug _ Climb to the top of the charts! Play the word scramble challenge with star power. http://club.live.com/star_shuffle.aspx?icid=starshuffle_wlmailtextlink_jan __ 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/
[css-d] Position image at bottom of cell containing text
Hi, With our company being between designers at the moment, some of the day to day tasks of our site have fallen into my lap (hey, you're in IT, you fix the web site). What I'm trying to accomplish seems like it should be pretty simple, but the solution has escaped me. If you look at this page here: http://www.kegworks.com/product.php?productid=18754 you will notice that the Add to cart buttons under If You Like This, You May Also Like... do not line-up across the page. I've been trying to force these input images to line up with the bottom of the table cell containing them, but nothing I've done seems to have worked. I have tried using an 'inline style', tried creating a new style, etc. I've used things like align=bottom, vertical-align: bottom|baseline|absbottom, etc. However, the images stay in their current position. Can anyone give this old sysadmin some pointers, or point me to some documentation which will explain this to me (even if it cannot be done)? Thanks. -- John C. Nichel IV System Administrator KegWorks http://www.kegworks.com __ 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/
[css-d] menu box that floats with scrolling
Hello lists.css-discuss.org I have seen the effect on at least two sites, one of which is http://www.quirksmode.org/css/display.html For PPK's example, I saved the page in which show site navigation, show page contents stay visible as I scroll down the view. Disabling the *.js file stops those menus from opening, but not from scrolling, suggesting control is by the CSS. His structure uses DIV to nested depth four. Simple copy and paste into a new file did not work. Please explain. Thanks, brane [EMAIL PROTECTED] __ 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] a couple of questions: dif style sheets and min height??
I'll have another look at 8bit png files. I'll check out the min height css style too. I thought I had seen it somewhere but wasn't too sure if ie understood it. There is a lot of continuous tone in that image. It should really be a jpg. I experimented with your picture of the paint pots. Turned it into a 90% JPG and it was 30kb rather than the 132kb png you have got there. -- Marten Gallagher annerykiln.co.uk Web Design and Management __ 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] beginner's issues with spacing
David Laakso wrote: Stuart Walsh wrote: I've got a homepage with a header which is a jpg. I'm using HTML Kit to write the code and in that, and in IE there is no space above and below the header jpg. But in Firefox and Opera there is space above and below. I'm doing something wrong but I can't think what it is. Many thanks. I've implemented your suggestions. The page now works in Firefox and Opera. This is in reference to uri: http://www.revise-now.co.uk/A2Comms/ Good... on to bringing IE6 on board. Please see revision of CSS and markup-- too many changes to note individually. http://www.chelseacreekstudio.com/ca/cssd/temp.html Cursory tested in compliant browsers at +2 font-scaling, and text-size largest in IE6 7. G, I love to nit-pick. Right!! I've got a lot to chew on here. I could learn a lot form all this. Very many thanks for this very detailed scrutiny. Stuart Walsh Best, ~dL PS Please hit reply all when replying so it goes to the list, too. O-- http://chelseacreekstudio.com/ __ 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] Site check please :Arun Dixit:
Jehangir Larry wrote: David Laakso wrote: Jehangir Larry wrote: Re: www.arundixit.com Firefox displays as intended. IE6 and IE7 do not display header background. Additionally, IE6 does not center content.s of #inner. Appreciate advice/ suggestions for above. Also, a general site check please. Thanks. Thanks, as usual. I have implemented the suggestions (including border: fuchsia ;-)), but as yet, no go in both IE6 IE7. Maintaining status quo...till I hear further? Seems to work (more or less) in IE/6.0 and IE/7.0 on this end: xp/ie on mac os x 10.4.11. Please see: http://chelseacreekstudio.com/ca/cssd/lj.html Regards, ~dL -- http://chelseacreekstudio.com/ __ 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] Site check please :Arun Dixit:
David Laakso wrote: Jehangir Larry wrote: David Laakso wrote: Jehangir Larry wrote: Re: www.arundixit.com Firefox displays as intended. IE6 and IE7 do not display header background. Additionally, IE6 does not center content.s of #inner. Appreciate advice/ suggestions for above. Also, a general site check please. Thanks. Thanks, as usual. I have implemented the suggestions (including border: fuchsia ;-)), but as yet, no go in both IE6 IE7. Maintaining status quo...till I hear further? Seems to work (more or less) in IE/6.0 and IE/7.0 on this end: xp/ie on mac os x 10.4.11. Please see: http://chelseacreekstudio.com/ca/cssd/lj.html Regards, ~dL ...certainly does on IE/Win XP too. Let me recheck /compare the CSS on your file with mine. A million thanks, kind Sir. -- Best, JL Jehangir Larry __ 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/
[css-d] Netscape/mozilla hacks?
I'm not sure why this is the first time I'm having grief with netscape, but
on this page http://www.language-works.com/NSTMF/home.php in XP/PC it is (a)
not showing the background image in the main content region, (b) shoving the
logo graphic (labelled #hpGraphic) up and under the navbar. Also the top
yellow 26px border is not showing no matter how I adjust the placement of
this graphic. And yet strangely enough I've gotten this border to work on
this page http://www.language-works.com/NSTMF/internal.php.
Note: Acc. to browsercam, this same problem is occurring on Mozilla 1.7.12
on Win2000 and Mozilla 1.7.12 on XP. Now I'm really confused - I should
think Mozilla and Firefox would yield similar results.
This is the CSS code for the hpGraphic:
#hpGraphic {
height: 79px;
width: 1008px;
background-color:#2F201B;
background-image: url(../images/hpGraphic.gif);
background-repeat:no-repeat;
background-position:70px;
padding: 20px 0 0 0;
border-top: 26px solid #E9A713;
}
TIA,
anne
__
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/
