[css-d] img tag, css and xhtml
Hello, I created a stylesheet with styles directly applied to the img tag. The problem is that my page fails the w3c validation test because my img tags are not contained in other parent tags (as far as I understand the problem that is). Do you think I should put my img tags inside p tags and apply my css styles to the p tags instead? This would mean to change all the lines: img src=blabla alt=blabla / to p class=imagesimg src=blabla alt=blabla //p which is not very semantic and awkward IMO... What do you think? Thank you for your help. Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Mixing fixed and flexible widths
Hi All
I recently tried mixing fixed and flexible widths on a site:
#leftcol {
width: 200px;
}
#wrap {
width: 76%;
}
#nav {
width: 200px;
}
#content {
width: 68%;
}
But it didn't work! Surprise, surprise!
Am I allowed to mixed fixed and flexible widths by this method:
#wrap {
width: 25%;
}
#leftcol {
width: 200px;
}
#nav {
width: 200px;
}
#content {
width: 75%;
}
The reason I would like to use a flexible/fixed width method is because
I would like to have three columns:
Left Nav Content
The left and Content columns would be one colour and the Nav column
would split them up with another colour, extending the full length of
the column. Is it possible to have an image that extends the full
length of the column when using a flexible layout please?
Many thanks for the help.
--
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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img tag, css and xhtml
On 14/01/06, tochiromifune [EMAIL PROTECTED] wrote: I created a stylesheet with styles directly applied to the img tag. The problem is that my page fails the w3c validation test because my img tags are not contained in other parent tags (as far as I understand the problem that is). Umm. I think you mean that they are not in the group of elements known as %block, nor are they script elements and thus are not allowed to be children of the body element. Do you think I should put my img tags inside p tags and apply my css styles to the p tags instead? Do the images represent paragraphs? If so, its very likely that an image isn't a good idea in the first place. What is the most apropriate element in %block that can contain img elements? div is most likely. This would mean to change all the lines: img src=blabla alt=blabla / to p class=imagesimg src=blabla alt=blabla //p You don't have to put a class on the block level container. What do you think? That this is a subject best addressed in a different forum. http://css-discuss.incutio.com/?page=OffTopic -- 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] New Member, Help with text resizing:
Hello all, my name is Cory and I am new to the list here! I am looking for some info on text resizing. Currently, if you resize the text on a site that I am working on, the text expands but the site does not expand to accomidate this. Is it because I am using a wrapper div that is a fixed size to contain everything? The fonts are all set to em's for sizing. I noticed that on http://www.simplebits.com/ (for example) that when you resize the text, the site expands to accomidate it. I am trying to achieve that same technique. Any help, tips, ideas, or links would be greatly appreciated! Thanks, Cory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
[EMAIL PROTECTED] wrote:
I have been trying to implement a frameless frame system, so when I saw
this post I decided to base it on the example you linked to at
http://home.comcast.net/~rob.freundlich/css/noFrames.html
My requirements are slightly different though - I need header and
footer frames and a main content frame (with scrolllbar as appropriate).
I have modified your example to make it fit my requirements and it's very
close to working but still a little bit wonky - could you please take a
look at:
http://burieddreams.com/FixedHeaderAndFooter.html (use IE!)
On first loading you can see that the header and footer are there, but the
main content area actually extends right to the bottom (and slightly
below) - start playing with the scrollbar and you'll see what I mean.
If however you resize the window at all, suddenly it fixes itself and the
content area behaves exactly as desired. Any idea why this might be? I
assume this is why there is a window.resizeBy call, but in my IE6 it
tells me Access is denied on that line.
*most* worrying though, is it appears to completely not work in Firefox.
Try it out, it looks awful. What is breaking it? I can't see anything
weird in there that should cause problems like that. I've kept the example
fairly straight forward to hopefully make things clear.
Many thanks in advance for any replies :)
Kevi
Hi Kevi,
In the style there is:
#RegionNavigationLeft { border-right 5px solid black; ... } now (nothing
after will show);
#RegionNavigationLeft { border-right: 5px solid black; ... } could help? ;-)
Also the html-validator has some tips: DOCtype missing and so.
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
On 14/01/06, Cory Perry [EMAIL PROTECTED] wrote: I am looking for some info on text resizing. Currently, if you resize the text on a site that I am working on, the text expands but the site does not expand to accomidate this. Is it because I am using a wrapper div that is a fixed size to contain everything? Probably - you haven't provided a URL to demonstrate the issue though, so its hard to tell. -- 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frameless frames, synchronized scroll, and tableless tables (basically Excel)
Addon:
= = = = = = = = = =
#RegionNavigation {
border-bottom: 5px solid black; height: 5em; width: 100%;}
#RegionNavigationLeft {
float: left; border-right: 5px solid black; padding: 5px; width:
33%; height: 100%;}
#RegionNavigationRight {
float: left; border-left: 5px solid green; padding: 5px; width:
auto; height: 100%;}
#RegionVisualisationWrapper {
clear: both;
width: 100%; height: 100%; margin-top: -5em;
padding-top: 5em; padding-bottom: 8em }
= = = = = = = = = =
allows Firefox performing already some more as wanted, I think.
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
Cory Perry wrote: I am looking for some info on text resizing. Currently, if you resize the text on a site that I am working on, the text expands but the site does not expand to accomidate this. Is it because I am using a wrapper div that is a fixed size to contain everything? The fonts are all set to em's for sizing. Fixed widths generally aren't very friendly to any text size other than whatever the author assumed during construction. I noticed that on http://www.simplebits.com/ (for example) that when you resize the text, the site expands to accomidate it. I am trying to Looks fixed-width to me. :-p achieve that same technique. Any help, tips, ideas, or links would be greatly appreciated! Normally for questions about basic layout type someone would point you to http://css-discuss.incutio.com/?page=CssLayouts but fluid layouts seem to be a missing option on that page. :-( Have a look at these: http://mrmazda.no-ip.com/auth/widths-em-v-px.html http://mrmazda.no-ip.com/auth/fflinelength.html http://mrmazda.no-ip.com/auth/Sites/dlviolin.html http://www.digital-web.com/articles/fluid_thinking/ http://evolt.org/article/Liquid_Design_for_the_Web/20/15177/index.html http://www.gunlaug.no/contents/wd_1_01_02.html http://www.alistapart.com/articles/dao/ http://mrmazda.no-ip.com/auth/accessibility.html -- Blessed is the nation whose God is the Lord.Psalm 33:12 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
Felix Miata wrote: Cory Perry wrote: I noticed that on http://www.simplebits.com/ (for example) that when you resize the text, the site expands to accomidate it. I am trying to Looks fixed-width to me. :-p I missed that one too. I originally replied to Cory, saying the same thing, that simplebits uses a fixed-width layout - however, up in the top-right hand corner, there is an icon that switches the site to a fluid-width (looks like the ALA one, what?). My apologies for the incorrect information that I originally posted. Regards, Rahul. -- . . . . . . . . . . . . . . . . . . . . . . . . Rahul Gonsalves Make PNG, not War. . . . . . . . . . . . . . . . . . . . . . . . . __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mixing fixed and flexible widths
Richard Brown wrote:
Hi All
I recently tried mixing fixed and flexible widths on a site:
#leftcol {
width: 200px;
}
#wrap {
width: 76%;
}
#nav {
width: 200px;
}
#content {
width: 68%;
}
But it didn't work! Surprise, surprise!
Am I allowed to mixed fixed and flexible widths by this method:
#wrap {
width: 25%;
}
#leftcol {
width: 200px;
}
#nav {
width: 200px;
}
#content {
width: 75%;
}
The reason I would like to use a flexible/fixed width method is because
I would like to have three columns:
Left Nav Content
The left and Content columns would be one colour and the Nav column
would split them up with another colour, extending the full length of
the column. Is it possible to have an image that extends the full
length of the column when using a flexible layout please?
Many thanks for the help.
These CSS declarations mean nothing without the HTML. Correctly nested,
they might work, but it is impossible to know without understanding the
layout you are trying to achieve. You mention 3 cols, left, nav,
content. What is wrap, and why 25%. Content is 75% of width in relation
to what? ... the entire viewport, or part of whatever it is inside of?
--
Bob Easton
Accessibility Matters: http://access-matters.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
Hello all, my name is Cory and I am new to the list here! I am looking for some info on text resizing. Currently, if you resize the text on a site that I am working on, the text expands but the site does not expand to accomidate this. Is it because I am using a wrapper div that is a fixed size to contain everything? The fonts are all set to em's for sizing. I noticed that on http://www.simplebits.com/ (for example) that when you resize the text, the site expands to accomidate it. I am trying to achieve that same technique. Any help, tips, ideas, or links would be greatly appreciated! Thanks, Cory Cory: Maybe this explanation will help. Please review: http://www.sperling.com/examples/zoom1/ To expand your site dependant upon zoom levels, you have to tie everything to percentages or em's. tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need suggestions
Thank you all for your suggestions - they have been
very helpful!
One suggestion was made:
site: www.pdrsolution.com/waters/index.html
It seems clear that your box needs to stretch
vertically, especially
since it can't stretch horizontally. Why isn't it
stretching
vertically now? Because of this rule:
#left-box {
position: relative;
Doing this takes it out of the flow, so its parent
container doesn't
stretch to accommodate it.
1. Looking at the parent container (div id=container
class=clearfix) and div id=content, I noticed
that these don't have either an absolute or relative
position ... so how do I know what the flow should
be?
2. As suggested, I omitted the '#left-box' relative
position mentioned above (I tried both an absolute
position and no position at all). The result was that
the menu swung way out of its intended position and
the text still breaks out of the box. I think there is
more I need to do. Or (most likely), I just don't
understand whats going on
3. There must be a css: parameter I can adjust to
allow for the box to stretch vertically to accomidate
the text... I'm just not sure which one.
Any more insite into this would be great.
Thanks-
Patrick
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] right and left justify
Vic Rauch wrote: I have a listing of seminars that are happening on 3 different days and would like to list these with the seminar time right justified, then the seminar title and description left justified just to the right of the seminar time: 9:00AM -- Seminar Title presented by Geo Green and his host of illustrations. 10:00AM -- Second Seminar given by Bob Brown along with his helpers Can this be done with CSS and if so, can you give me a hand getting started? Lars G. Skjellerup responded with: I personally would use a dl list for that kind of data. And get it to look right with a little css on dt and dd. Thank you for the help. I choose to do the dl rather than the table and I'm very happy with the outcome. Even though the dd is one line below the dt (which I fixed with a -17px, -1em was not lined up) The page can be found at: http://www.ggshows.com/DisplayArticle.asp?articlename=Articles/Bakersfield/B AK2006SpringSeminars.txtcityname=Bakersfieldnologo=1 Vic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ADMIN: CSS Guru Wanted for Major Web App Layout
At 6:04 PM -0800 1/13/06, Mark - JForce New Media wrote: Hi again all Goodbye, Mark. I don't mind asking for help on the list, but I do mind flagrant violations of the list policies (http://css-discuss.org/policies.html). To anyone interested in the offer contained in the posting, make sure to reply offlist-- otherwise you'll be joining Mark offlist. I trust I make myself clear. -- 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to define CSS alt/title attributes in stylesheet
Search engines ignore CSS files. Even if they start indexing them, it would be a labour intensive code disaster. Image trying to define alt/title attributes for your catchy header slogan background with your top two/three keywords in mind. And, let's say you have a small web site around 50 pages where you have to nominate different keywords for every page in order to maximise your SEO outcome. See where I am getting? This would be against the core principles of CSS which I believe to generate more with less code in size. Silly me, and I always thought alt attributes are there to provide humans with images turned off or incapable of seeing them with information they need. All we need to think about is search engines! That makes live so much easier! How do I invoice a search robot? I also thought CSS was there to store every information that is purely presentational and that less code is simply a welcome by-product of that logical separation of content and presentation. -- 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ADMIN: Trim quoted material, dagnabit!
Hi again, It's time for another trimming missive from your grumpy neighborhood list chaperone. Which would be me. So: When you respond to a post, TRIM AS MUCH QUOTED MATERIAL AS POSSIBLE! Or you may one day find your participation in the list to be more difficult. No, I'm not going to go around penalty-boxing or unsubscribing people. What I do have in my possession, however, is a procmail recipe that, properly adapted, will be able to detect most excessive quoters. Whether I have it flag the messages for review, auto-reject them, or simply toss them into the bit-bucket... well, that's a matter for another day. I am not putting this recipe into place yet. I still have this vague, idealistic hope that people can actually learn to respect the community and its members, and act accordingly. What do I mean by that? Excessive quoting makes digests harder to read and more frequent, both of which make them less useful. There are well over a thousand list members subscribed to the digests. Every time you quote more than is needed, you're putting your convenience above the convenience of those thousand-plus other people. (Similarly, every time someone posts with I know this is off-topic, but... you can finish that phrase with ...I figured I'm so important that it's okay for me to ignore community policies and clutter the inboxes of almost seven thousand other people.[1] But that too is a topic for another day.) Some may assume I'm singling out top-posters. True, I find top-posting to be only slightly less annoying than a sandpaper massage, and top-posters are far and away the worst abusers when it comes to excessive quoting. Nevertheless, they are NOT the only ones. In fact, it's more annoying to see three screens of quoted text and then two lines of new content than the other way around. This, however, does NOT excuse top-posting. What it means is that excessive quoting is excessive quoting, and that's bad no matter what direction you think time flows. So stop it, please. I've only been asking for four years now, and a similar exhortation has been in the list policies (http://css-discuss.org/policies.html) for as long. I don't think it's all that much to ask. As always, if you have questions or comments about what I have to say, please reply to this message off-list. If enough people say or ask the same thing, I'll post a summary and response to the list. Otherwise, let's not add to the list clutter. Thank you. -- 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
Felix Miata wrote: Cory Perry wrote: I am looking for some info on text resizing. Currently, if you resize the text on a site that I am working on, the text expands but the site does not expand to accomidate this. Is it because I am using a wrapper div that is a fixed size to contain everything? The fonts are all set to em's for sizing. Fixed widths generally aren't very friendly to any text size other than whatever the author assumed during construction. I noticed that on http://www.simplebits.com/ (for example) that when you resize the text, the site expands to accomidate it. I am trying to Looks fixed-width to me. :-p achieve that same technique. Any help, tips, ideas, or links would be greatly appreciated! Normally for questions about basic layout type someone would point you to http://css-discuss.incutio.com/?page=CssLayouts but fluid layouts seem to be a missing option on that page. :-( Have a look at these: http://mrmazda.no-ip.com/auth/widths-em-v-px.html http://mrmazda.no-ip.com/auth/fflinelength.html http://mrmazda.no-ip.com/auth/Sites/dlviolin.html http://www.digital-web.com/articles/fluid_thinking/ http://evolt.org/article/Liquid_Design_for_the_Web/20/15177/index.html http://www.gunlaug.no/contents/wd_1_01_02.html http://www.alistapart.com/articles/dao/ http://mrmazda.no-ip.com/auth/accessibility.html Let me see if I can explain myself a little better and maybe it will help a little. Ok, if you go to http://www.simplebits.com/ and you resize the text in either Firefox or in IE by using the options up in the toolbar to make the text smaller or larger, the entire site expands when you do it. On my project, if you resize the text the same way, the text will get larger but the structure of the site does not stretch to make it still look perfect. Does that make sense? So, I am curious to know how this works. Is it by setting everything as percentages rather than a fixed pixel size? Cory __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] new to list, issues with IE
Hello, New to the list, hoping someone can help here. I have the following layout: http://publicduck.com/ This renders fine in Macintosh FF and Safari, and apparently win FF (although I haven't been able to check personally). However, in mac and win IE, the header layout totally falls apart, which messes up the rest of the page- this all fits in one window in FF/mac. In windows IE, the header loses its line breaks and breaks out of the fixed width page wrapper, which makes everything take up two screens horizontally and vertically (oddly the two column content areas are left intact). Can anyone point me to which IE bug might cause this? The CSS and XHTML both validate (although I know this doesn't mean it will work in IE). Many thanks, Alex __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
On 1/15/06, Cory Perry [EMAIL PROTECTED] wrote: Ok, if you go to http://www.simplebits.com/ and you resize the text in either Firefox or in IE by using the options up in the toolbar to make the text smaller or larger, the entire site expands when you do it. On my project, if you resize the text the same way, the text will get larger but the structure of the site does not stretch to make it still look perfect. Does that make sense? So, I am curious to know how this works. Is it by setting everything as percentages rather than a fixed pixel size? No, percentages for page elements all relate to parent or containing elements, and eventually to the viewport size itself. A layout which expands with the user's text size setting would most likely be expressed in em units. Eric Meyer recently presented papers on this. However, the simplebits site appears to be laid out in px and doesn't scale when I change my font size. I didn't check out the additional IE stylesheet, but I doubt if Dan would have implemented em based layout for one site only. -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
From: Cory Perry [EMAIL PROTECTED] Ok, if you go to http://www.simplebits.com/ and you resize the text in either Firefox or in IE by using the options up in the toolbar to make the text smaller or larger, the entire site expands when you do it. On my project, if you resize the text the same way, the text will get larger but the structure of the site does not stretch to make it still look perfect. Does that make sense? So, I am curious to know how this works. Is it by setting everything as percentages rather than a fixed pixel size? Cory, The simplebits style sheet for the fluid page shows that Dan has used percentages for widths on layout elements. This means that as you adjust your browser width, the size of anything with a percentage width will resize. The page still stays within the viewport, however, if you increase the text size via browser controls. If you want /everything/ to grow or shrink proportionately with text-resizing, you'll need to use ems for widths and heights, among other things, in addition to using them for your text size. Thus, if you set a margin of 1em, it will be relative to the user's text size, and if that text size is increased, the /visual/ effect would be that the margin appears wider. However, it would still equate to 1em based on the newly resized text size. Here's an article that might provide some information about em-based layouts. http://www.communitymx.com/abstract.cfm?cid=DB750 I hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New Member, Help with text resizing:
On 1/15/06, Richard Grevers [EMAIL PROTECTED] wrote: I didn't check out the additional IE stylesheet, but I doubt if Dan would have implemented em based layout for one site only. Doh! make that one browser! Oh and the site does offer an alternative, fluid sylesheet, but that is proportioned according to viewport size, not font size. -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mixing fixed and flexible widths
Hi Bob and All Sorry about that. I have put together a test page at: http://resource.cregy.net/test/ The css is embedded. It doesn't work but can it please? Many thanks Rich On 14 Jan 2006, at 14:35, Bob Easton wrote: These CSS declarations mean nothing without the HTML. Correctly nested, they might work, but it is impossible to know without understanding the layout you are trying to achieve. You mention 3 cols, left, nav, content. What is wrap, and why 25%. Content is 75% of width in relation to what? ... the entire viewport, or part of whatever it is inside of? -- 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 P.S. Sorry Bob - sent this to you only, should have pressed reply all! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mixing fixed and flexible widths
Richard Brown wrote: http://resource.cregy.net/test/ The css is embedded. It doesn't work but can it please? Not sure if I got it, but if both left columns are supposed to stay fixed width - as your styles suggest, then this will work reasonably well: http://www.gunlaug.no/tos/alien/test_9590.html The method is described here: http://www.gunlaug.no/contents/wd_example_01_01.html ...and here: http://www.satzansatz.de/cssd/onhavinglayout.html (A bit more tweaking needed if you also want the left column to be proportional to window-width.) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tweaked p7 menu behind text in IE5.2mac
From: kristin [EMAIL PROTECTED] Except, the dropdowns go behind the heading text in IE5.2 mac The page is here: http://www.kristinlong.com/cssd/cssd.html Hi Kristin, The problem was the complexity of all those absolutely positioned DIVs. IE Mac just does not do well with AP elements, especially when you're hiding and showing elements. Z-index bugs, among others, are very hard to deal with. I took the liberty of making a quick test page for you, rendering the first two rows of your layout, using floated elements - with margins and padding used for fine-tuning positioning. This should work without incident in IE5 Mac. The style rules are all embedded in the document's head for you to review. To make the third row, simply follow the plan ;-) http://www.projectseven.com/testing/customers/kristin/ -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] won't align properly
In FireFox the submit button will not align to the left and in IE First Name will not align to the right, although the rest do and once again the submit button will not align to the left. I am probably leaving something out. Any help is appreciated! Thanks :) http://hailstorm.carranzam.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] stuck on the last bits of validation.
I have validated as much as I am able with this site http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ffrontpage-tips.com%2F I can't understand what is wrong with the margins .. or even where they are for the two errors... The rest are to do with stuff I can't even fathom and are probably not to much of a worry as they are warnings but I can't get rid of those errors I've tried all sorts of things ... I thought they were for the li so I moved that more towards the top ... I'm stuck help. Also I can't figure out what is causing the white over the ezine sign up box ... Thanks for any help Tina __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
On Jan 14, 2006, at 5:19 PM, Tina Clarke wrote: I have validated as much as I am able with this site http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F% 2Ffrontpage-tips.com%2F I can't understand what is wrong with the margins .. or even where they are for the two errors... Tina, The errors are coming from inline CSS, embedded in style attributes within the HTML itself. The offending lines look like this: style=margin-top: 3 The problem with these declarations are that you need to specify the units of the margins, i.e.: style=margin-top: 3px That should do the trick. I'll refrain from the obligatory comment on the irony of using valid CSS with a page that showcases FrontPage tips... Whoops. Good luck! -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE/FF Spacing Problem
Julian Voelcker wrote:
Morning All,
I have been working on a site that has three columns, two of which are
menus (I didn't design it).
Anyway, if I tweak the column widths to get them to work well in IE6,
they leave spaces in FF PC, FF Mac, IE Mac, Safari Mac, etc.
If I tweak the the other way (with the exact correct calculated widths)
it works well in all browsers Except IE!
It is bound to be something really obvious, but I cannot see it.
The site is at http://tinyurl.com/bvo2f
The main layout CSS is at http://tinyurl.com/b9ru6
The main styling CSS is at http://tinyurl.com/bkpwr
The other problems I need to resolve, but cannot see anything obviously
wrong with are:
1. Space appearing under top right image in IE PC.
2. Design should be centred in all browsers, but is only centring in
IE.
3. I want the background colours of both the menu columns on the right
to stretch to the bottom regardless of the content, although am tempted
to cheat with a repeating background image.
Any pointers would be appreciated.
Thanks in advance.
Hi Julian,
@ column things
If the other columns allways have more height, you can unfloat the
middle one and give him no width, perhaps?
@1
* html #bodyblock { margin-top: -3px; } /* hacks the 3px bug in IE ;-) */
@2
#outer{text-align:left;width:760px;margin: 0 20px 0 20px;}
#outer{text-align:left;width:760px;margin: 0 auto; }
And: if #outer{width} = #bodyblock{width}, then everything is exactly
centred (now some more space at right side).
@3
Because it is a fixed width model, a bg-img is indeed the easy way I think.
Hope you can use some,
greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] won't align properly
Manuel A. Carranza wrote: In FireFox the submit button will not align to the left and in IE First Name will not align to the right, although the rest do and once again the submit button will not align to the left. I am probably leaving something out. Any help is appreciated! Thanks :) http://hailstorm.carranzam.com/ Manuel, This has nothing to do with your problem, but you should know that the value of the for attribute of the label element must correspond to the id attribute - *not* to the name attribute - of the form element. To stay on topic, I'd say you could use both elements (label and input) to style your form rather than using a table. Regards, Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flickering and Oozing UL background
Dagmar Noll wrote:
I have this problem where the background of a UL with nesting elements
oozes (and sometimes flickers) outside of its borders in at least IE6.
Can anybody tell me what is going on here?
Hi Dagmar,
In IE6 under Win98SE there is no flickering at all. But in the box you
indicated, the first line has the light blue color of the item-headings.
You coded as:
= = = = =
ul class=navhead
li class=navheadWINCOG
ul class=nav
li class=navfirsta href=index.htmlHome/a
li class=nava href=about_WINCOG.htmlAbout WINCOG/a
...
/ul
li class=navheadInformation Center
ul class=nav
li class=navfirsta href=profiles.htmlCommunity
Profiles/a
li class=nava href=census_data.htmlRegional Data/a
...
li class=nava href=site_map.htmlSite Map/a
/ul
/ul
= = = = =
without any closing /li-tag, so the beginning and ending of a nest is
not indicated. In this case it doesn't matter (no appearing of submenu
items needed at hovering an item). And the /li's are not prescribed, -
but I guess IE is a bit confused by this. Did you try already?
And Off-T: with div#nav a { display: block;} you will get, if desired,
the whole nav-box reacting at hover (and clickable also), not only the
links themselves.
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button text off-center in IE
Iorhael wrote:
... a fix to center button text in IE
... and insert the padding underneath the buttons?
Hi Debbie,
In debscardsimport.css you order: input { text-align: right;}! ;-)
Appearently in IE this overrules the class=center.
But all browsers are centering text in a button automatically, so you
can omit the whole center-thing. Thus:
= = = = =
input, textarea, select {
background-color: #DBC8F5;
text-align: right;
font: 90% Arial, Helvetica, sans-serif;
}
can become:
= = = = =
input, textarea, select {
background-color: #DBC8F5;
font: 90% Arial, Helvetica, sans-serif;
}
You can add:
= = = = =
textarea, select {
text-align: right; /* if you really want people to fill in their
messages from right to left */
}
= = = = =
Padding under the buttons will go with a simple: input { margin-bottom:
10px;}.
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
I'll refrain from the obligatory comment on the irony of using valid CSS with a page that showcases FrontPage tips... Whoops. Good luck! -- Matthew Levine (http://www.infocraft.com/) Thanks for the actual help, It's also led to the writing of another tip satisfied grin I found the offending piece. Ah the schoolboy humour It's the nut behind the wheel that does the job and yes I'm not that good at it .. it's merely my hobby and I'm just a housewife, so who cares? Why is it ,it's always men making the usual 'FrontPage put down'? Oh.. yeah ... 'my car is bigger, sorry better than your car' syndrome ... so THAT'S why you guys do that another lightbulb moment. Please your on a roll.. gimme another one Challenging grin ok ok .. this any better batting eyelashes with grin What am I doing wrong with the ezine sign up box so that it appears in white? http://frontpage-tips.com/ ... I've fiddled and faddled and can't work it out. Thanks for any help, plus if anyone has clues to the final bits of warnings I'd be glad to hear about them, but I'm not going to worry about them. Tina Original Abstract Art in Pen and Ink http://clarke-abstract-art.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Odd div spacing in FF Opera, but not IE?
Hi all, I've got a problem with a site I'm working on, where I'm getting a space between div's that shouldn't be there. Margin attributes seem OK to me, but there's obviously something I'm missing...? The problem is visible in Firefox Opera, but not IE (on Windows). Page is here: http://www2.petrescue.com.au/newindex.htm The spacing that shouldn't be visible is just below the subnav with the blue background. Any advice would be greatly appreciated :) Cheers jb :) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
On Jan 14, 2006, at 8:06 PM, Tina Clarke wrote: Ah the schoolboy humour It's the nut behind the wheel that does the job and yes I'm not that good at it .. it's merely my hobby and I'm just a housewife, so who cares? I hope you didn't read my comment about FrontPage as a judgement on you or users of FrontPage in general -- that's just not the case. Like the forthcoming iWeb, I think these tools are great for the democratization of the web, despite the fact that they produce less- than-admirable HTML and CSS. I would, however, love to see better standards support in the future. Why is it ,it's always men making the usual 'FrontPage put down'? Oh.. yeah ... 'my car is bigger, sorry better than your car' syndrome ... so THAT'S why you guys do that another lightbulb moment. http://www.molly.com/2004/02/06/ms-frontpage-gotcha/ http://www.meryl.net/blog/archives/001464.php#001464 Molly and Meryl are both women: it's not about gender or competitiveness, it's about pride in our craft and the medium we love. And if you're helping people improve their pages, regardless of what tool they're making them with, you're doing a Good Thing too, and you have my support. I'll just have to be better about framing my offhand remarks in the future :) -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
Tina Clarke wrote:
What am I doing wrong with the ezine sign up box so that it appears in
white? http://frontpage-tips.com/ ... I've fiddled and faddled and
can't work it out.
It's your TD.
Try: td {background:red} to see what I'm talking about.
IMHO, you have way too many elements and attributes in there. You could
safely remove most of them.
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd div spacing in FF Opera, but not IE?
John Bishop - alternative it wrote:
Hi all,
I've got a problem with a site I'm working on, where I'm getting a
space between div's that shouldn't be there. Margin attributes seem
OK to me, but there's obviously something I'm missing...?
The problem is visible in Firefox Opera, but not IE (on Windows).
Page is here: http://www2.petrescue.com.au/newindex.htm
The spacing that shouldn't be visible is just below the subnav with
the blue background.
Any advice would be greatly appreciated :)
Hi John,
Add these 2:
#navcontainer {padding-bottom:1px}
#maincontainer {padding-top:1px}
Thierry | www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
Tina Clarke wrote: What am I doing wrong with the ezine sign up box so that it appears in white? http://frontpage-tips.com/ ... I've fiddled and faddled and can't work it out. Hi Tina, I fooddled also somewhat around your codes, and found the page rightmenu.htm http://frontpage-tips.com/rightmenu.htm. See: = = = = = td style=background: #eee; p style=margin-top: 3px align=center input type=text name=user2 value=email address size=13 style=border-style: solid; border-width: 1px; /td td align=center style=background: #eee; = = = = = and there's the happy violin. francky (thinking: it's no m/f point to say that the international html/css standards of w3c and MS-programs as FP (and Word, the easy converting in htm-option!) don't have everything in common...)(and thinking [ THE 3 GOLDEN TIPS ;-) ]: allways validate your FP-pages with the html-validator and the css-validator, and allways check your FP-pages in Firefox to see if they aren't IE-only). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button text off-center in IE easy css-webdeveloper-tools
Iorhael wrote: thanks Francky, I will give that a try! I am curious as to how you were able to view my stylesheet though since I have it linked...I didn't think there was any way to view linked stylesheets. Debbie Hi Debbie, Almost everything what somebody can see through his browser, is public! Also linked stylesheets (or javascripts, or images). It's a bit off-topic to tell how, but when you know the easiest way, you have a marvellous tool for css-designing too. 1. The long way View sorce code, remark in the head: link href=debscardsbasic.css ... and style ... @import debscardsimport.css. Then go to browser, paste http://www.drk-writing.com/debscards/debscardsbasic.css; and http://www.drk-writing.com/debscards/debscardsimport.css;. There they are! Downloaded page + downloaded stylesheets = local changing and testing possible (just pay attention to internal links). 2. The medium way Get Firefox http://www.mozilla.com/ as browser, get Chris Pederick's FF Web Developer Extension https://addons.mozilla.org/extensions/moreinfo.php?application=firefoxcategory=Developer%20Toolsnumpg=10id=60. In the new FF-toolbar, click CSS and then View css. That opens a kind of webpage with a list of all used stylesheets and their content. Plus the links to get them (as above, but straightly clickable). 3. The short and easy use way: magic on screen! Follow step 2, but now click CSS and then Edit CSS. That opens on your left hand a sidebar with directly the content of the stylesheet. If more, they are tabbed. And a little wonder: in the sidebar you can change things! Real time you see the changes in the panel of the openend page (even if it is not your own page!). That makes it very very easy to analyse: change and see if it works! You can combine that with viewing the source code in another opened FF-window: in sourcode you go to the wanted item, you see what the ID, class or container it regards. Go over to the stylesheet-sidebar, and look what is the meaning of the corresponding ID, class, container. Especially since I discovered the last possibilities, I could speed up my page-analyzing and correcting enormously! Can also be combined with the Outline blocklevels in the toolbar: you see immidiately where is what on the page, and where are the anomalies. And of course: can be rapidly combined with the outcome of a css- or html-check with the css-/html-validator. Recommended! francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button text off-center in IE easy css-webdeveloper-tools
3. The short and easy use way: magic on screen! Follow step 2, but now click CSS and then Edit CSS. That opens on your left hand a sidebar with directly the content of the stylesheet. If more, they are tabbed. And a little wonder: in the sidebar you can change things! Real time you see the changes in the panel of the openend page (even if it is not your own page!). That makes it very very easy to analyse: change and see if it works! Francky, this is amazing!! Thank you for telling me about this :):) I realized that my initial question was kind of a duh when I saw your first itembut I'm glad I asked cause I never would have found out about this FF toolbar! This will be extremely helpful! (I tried using the FF DOM Inspector but didn't quite get the hang of it.) I will try your IE fix for the form buttons tomorrowthanks again for your help with both things! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
