[css-d] excess margin in list items - firefox
I seem to have extra margins on my horizontal list in the page navigation.
It only happens in firefox. There's nothing much to the page or the
stylesheet so I thought it would be easy to spot but I'm lost.
http://robbo.someofmystuff.co.uk/ETHOS/about/index.htm
The css is as follows:
/* ** subNav ** */
#pageNav{
margin:2px 30px 0px 30px;
padding:5px 0px 5px 0px;
clear:both;
}
#pageNav li{
list-style-type:none;
display:inline;
margin:0px 1px 0px 0px;
padding:5px;
font-weight:bold;
color:#663366;
background:#663366;
}
Am I missing something stupid?
Thanks!!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] excess margin in list items - firefox
On Mon, 16 Apr 2007, Emma Roberts wrote: I seem to have extra margins on my horizontal list in the page navigation. It only happens in firefox. There's nothing much to the page or the stylesheet so I thought it would be easy to spot but I'm lost. http://robbo.someofmystuff.co.uk/ETHOS/about/index.htm There are several small differences in rendering between IE 7 and Firefox 2, and the most striking to me is that on IE 7, the thick bar above the navigation Background Objective... extends to the left. But I guess you mean the gaps between items in that navigation menu. I don't know why this happens for that menu only, but it seems to be a variant of the old nasty White Space bugplex, i.e. the problem that browsers treat white space (like spaces and line breaks) as significant when they shouldn't (or at least some other browsers don't). In your HTML source you have ul li class=activeBackground/li lia href=objectives.htmObjectives/a/li lia href=methods.htmMethods/a/li lia href=input.htmInput/a/li /ul Thus, there is white space between the li elements. If you remove it, i.e. make /li immediately followed by li or /ul, the gaps vanish. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Semi-transparent PNGs as background images in IE6
On Friday, April 13, 2007 5:12 pm, Roger Gordon wrote: Therefore my question is: can anyone point me to a page that explains the use of semi-transparent PNGs as background images in IE6 and lower through the MS-proprietary filter:progid:DXImageTransform.Microsoft .AlphaImageLoader declaration? That doesn't work with background images, only foreground images. -- 73, AC7ZZ http://counter.li.org/ Linux User #246504 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem - background showing above/below footer div
On April 15, 2007, Robert wrote:
http://tinyurl.com/2264jb I am getting a gray background from the body
background color showing through above and below my footer div (well
below in IE7 but not in FF) It is about 12 px of gray at the top and
about 5 px in IE7 at bottom. I want the footer to sit flush to the
maincontent box and to the bottom of the browser window. I have been
fussing with this and can't see what would be producing the gaps. Can
anyone here help me out? Thanks!
Hello Robert
To make the content drop down completely to meet the footer, alter the
widermast.css from
#maincontent {padding-bottom:0;} to #maincontent {padding-bottom:1px;}
And adjust the padding in the below selector (in your primary.css) to remove the
background from below the footer.
p.copy { padding: 20px 0 15px; margin:0 auto; }
Both your primary.css and widermast.css have similar selectors. I
would recommend that you remove the widermast.css for the time been.
Kind Regards, Alan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] formatting of autonumbers in OLs
I'm new to CSS, and I'm looking for a way to use the stylesheet to apply the
following formats to autonumbers (prepended digits) in declared ordered lists:
* bolding the digits (while other text is normal)
* removing the periods
Possible? Perhaps not.
Here's a bolding solution I received from the HATT yahoo group
(http://tech.groups.yahoo.com/group/HATT/), which requires you to make each
list item paragraph a P element nested within the LI element:
ol li { font-weight: bold; }
ol li p { font-weight: normal; }
I'm looking for a solution I can implement from the stylesheet, without
requiring a code change within the individual list item paragraphs.
For context, I'm using CSS in Madcap Flare to mimic print styles originated in
Adobe FrameMaker. The output I want to create right now is a PDF. We plan to
maintain the content in Flare to facilitate output-independent reuse.
Thanks,
Pamela
Pamela Denchfield
Sr. Technical Writer, Onyx
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] TOC for Image Gallery using Ordered List CSS
ibn Ezra wrote:
What I would really like to do is to take the text inside the anchor
and force it to drop below the background image (with appropriate
padding), but it doesn't look like there is a way to 'grab onto' just
the text and do that without adverse side effects. Is this possible?
If I understand what you are trying to do, you could just add
padding-top to:
#content #portfolios li a {
display: block;
height: 91px;
width: 147px;
background: transparent url(../_images/vellum.png) repeat;
padding-top: 95px;
}
nat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Calling different img tags
Hi On this site: http://test.uzellacourtantiques.co.uk/ http://test.uzellacourtantiques.co.uk/wp-content/themes/uzella/style.css I have a style on the content img. This works fine for calling either the page or single posts (it is a wordpress site). However, when I call the index.php which will list all the posts about ceramics I want the img call to a different class. This is one of the pages I mean: http://test.uzellacourtantiques.co.uk/category/ceramics/ As you can see it is still calling the original #content img and making the image to large. I did put in a different class for index.php called storycontentblog and have called this via .storycontentblog img and told it to float images to the left and 75px wide. But it doesn't seem to respect what I have asked. I put the class at the bottom of the css because I thought this would ensure that it would override the #content img. Any ideas why it isn't please? Thanks. -- 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Calling different img tags
On 16/04/07, Richard Brown [EMAIL PROTECTED] wrote: As you can see it is still calling the original #content img and making the image to large. I did put in a different class for index.php called storycontentblog and have called this via .storycontentblog img #content img is more specific than .storycontentblog img and so takes priority. http://www.w3.org/TR/CSS2/cascade.html#specificity -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Calling different img tags
Hi David On 16/04/07, David Dorward [EMAIL PROTECTED] wrote: On 16/04/07, Richard Brown [EMAIL PROTECTED] wrote: As you can see it is still calling the original #content img and making the image to large. I did put in a different class for index.php called storycontentblog and have called this via .storycontentblog img #content img is more specific than .storycontentblog img and so takes priority. http://www.w3.org/TR/CSS2/cascade.html#specificity Thanks for that. I actually discovered it after I had sent the question and was about to email and say I had sorted it out. The link is useful though. Many thanks one again. -- 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] sorting a list into blocks
I have a list of 10 items ul li li li li li li li li li __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] lists in blocks
I have an unordered list of 10 items 1 2 3 4 5 6 7 8 9 10 but I want to diaply it in block of 3 14710 258 369 Is this possible with css or any other method? R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Height difficulty
Hi All On this site: http://test.uzellacourtantiques.co.uk/category/ceramics/ http://test.uzellacourtantiques.co.uk/wp-content/themes/uzella/style.css I am trying to get the products to sit nicely! I have added a height declaration in order to force the boxes to float properly but as soon as I do this breaks when you increase text size. Is there anyway around this please? The site is a wordpress site. Many thanks. -- 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 IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Best method to have containers wrap around floats in ALL browsers.
Hi all, http://www.3pointdesign.com/index2.html http://www.3pointdesign.com/styles/two.css I was looking at the list yesterday and found many different ways to have containers fit around any elements inside i.e. clear the bottom of an image. The solution that I thought I found is not working in i.e.6. All I had to do was add overflow:auto to the containing div. This was way too easy an answer and I knew that there would be a problem somewhere. Because I can only test on; Safari 2.0.4 Firefox mozilla 1.5.0.9 Webkit (safari) Netscape 7.2 Opera 9.10 Internet explorer 5.2 all mac browsers. I don't know whether things are working or not. I do not want to add java to get over this problem, the empty clear both div doesn't seem to work for me so I am running out of options. Does anyone know a proven method of achieving the result that I want that works across all browsers. If so please ca you link me to it. Best wishes, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] formatting of autonumbers in OLs
On Fri, 13 Apr 2007, Pamela Denchfield wrote:
I'm new to CSS, and I'm looking for a way to use the stylesheet to apply the
following formats to autonumbers (prepended digits) in declared ordered lists:
* bolding the digits (while other text is normal)
* removing the periods
Possible? Perhaps not.
Unfortunately, there seems to be no way of doing that without adding
artificial extra markup. In theory, you could use generated content, but
it does not work on IE.
The problem is that browsers treat the numbers as anonymous elements
inside the li elements, so anything you set for a li element applies
to the number as well, but you can't specify rules for the number
specifically. Using extra markup, though, you can wrap the content proper
of a li element in an element that can be styled separately, so that
what you set for li has an effect on the number only.
ol li { font-weight: bold; }
ol li p { font-weight: normal; }
That's one way of using artificial extra markup, requiring the items to be
coded as lip.../p/li (or at least lip...). It's more natural
to use div markup instead of p markup, since the item content is not
necessarily a paragraph, and using p markup typically causes some
default spacing. So I'd use
lidiv.../div/li
with
ol li { font-weight: bold; }
ol li div { font-weight: normal; }
together with some margins specifically set for the li elements (or
div elements inside them) if desired. As a rule of thumb, no extra
spacing is needed if the items are short (typically less than one line)
but some extra spacing (e.g. li { margin-bottom: 0.5em; }) is useful if
the items are long.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best method to have containers wrap around floats in ALLbrowsers.
I have found that overflow:auto produces scroll bars in unwanted places at unexpected (for me!) times; perhaps I'm not doing it right. However, the clearing div DOES work, I've used it on several sites and I just tried it in your code and tested it in IE6. Here is the code: H1hello/H1IMG alt=dye in water src=3 Point_files/inks.gif PLorem ipsum dolor sit amet.../P div style=clear:both; height:1px; line-height:1px; margin:0; padding:0;nbsp;/div You have to be sure to put the non-breaking space inside the div. Teressa Graphic Web Designer Opactive *-Original Message- *From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On *Behalf Of Christopher Blake *Sent: Monday, April 16, 2007 9:45 AM *To: css-d *Subject: [css-d] Best method to have containers wrap around floats in ALLbrowsers. * *Hi all, * *http://www.3pointdesign.com/index2.html * *http://www.3pointdesign.com/styles/two.css * *I was looking at the list yesterday and found many different ways to *have containers fit around any elements inside i.e. clear the bottom *of an image. The solution that I thought I found is not working in *i.e.6. All I had to do was add overflow:auto to the containing div. *This was way too easy an answer and I knew that there would be a *problem somewhere. Because I can only test on; * *Safari 2.0.4 *Firefox mozilla 1.5.0.9 *Webkit (safari) *Netscape 7.2 *Opera 9.10 *Internet explorer 5.2 * *all mac browsers. * * *I don't know whether things are working or not. I do not want to add *java to get over this problem, the empty clear both div doesn't *seem to work for me so I am running out of options. * *Does anyone know a proven method of achieving the result that I want *that works across all browsers. If so please ca you link me to it. * *Best wishes, Chris * * *Christopher Blake [EMAIL PROTECTED] *07816163420 * * * *__ *css-discuss [EMAIL PROTECTED] *http://www.css-discuss.org/mailman/listinfo/css-d *IE7 information -- http://css-discuss.incutio.com/?page=IE7 *List wiki/FAQ -- http://css-discuss.incutio.com/ *Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Semi-transparent PNGs as background images in IE6 - documentation wanted
Therefore my question is: can anyone point me to a page that explains the use of semi-transparent PNGs as background images in IE6 and lower through the MS-proprietary filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration? Has anyone yet taken the logical step of writing a behavior.htc that incorporates this solution? Maybe [2]. It would be nice to have a script that allows for tiling backgrounds, as suggested by Paul [3]. You most probably have already looked into the IE7 code by Dean [4], this links to another behavior [5] Thanks, that's clear. This method has been documented. The only slight downside I see is that all these people talk about images, and not about background-images; but maybe I missed something. In any case further research does not seem to be necessary; thank God, because I've got quite enough on my plate as it is. Ingo [1] http://www.satzansatz.de/cssd/tmp/alphatransparency.html [2] http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ [3] http://archivist.incutio.com/viewlist/css-discuss/86620 [4] http://dean.edwards.name/IE7/notes/#PNG [5] http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html -- http://www.satzansatz.de/css.html -- --- ppk, freelance web developer http://www.quirksmode.org/ -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best method to have containers wrap around floats - RESOLVED
Thanks Teressa!! That has worked brilliantly! best wishes, Chris Christopher Blake [EMAIL PROTECTED] 07816163420 On 16 Apr 2007, at 19:03, Teressa Terry wrote: H1hello/H1IMG alt=dye in water src=3 Point_files/inks.gif PLorem ipsum dolor sit amet.../P div style=clear:both; height:1px; line-height:1px; margin:0; padding:0;nbsp;/div __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lists in blocks
On April 17, 2007, Ross wrote: I have an unordered list of 10 items 1 2 3 4 5 6 7 8 9 10 but I want to diaply it in block of 3 1 4 7 10 2 5 8 3 6 9 Is this possible with css or any other method? R. Hello Ross Well that was fun. You didn't state how the list was to be styled so here my test of a menu with columns. It works in IE7 and FF1.5 at least. http://contueor.com/x/list3blocks.htm Unfortunately Opera8 does not get it so I have the same menu but this time the CSS has a hack to target Opera8. This causes the CSS to not validate. http://contueor.com/x/list3blocks-h.htm The menu is completely scalable. I don't know what other browsers the test menu work in. Kind Regards, Alan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @import vs link for stylesheets
On Sun, 15 Apr 2007 10:05:55 -0700, Robert Lane wrote: Sorry if this has been asked before. I just discovered that the CSS editor I am using doesn't preview background images properly when I use a link connection to the css file - whereas with the @import connection it works perfectly. Hi Robert, Unhelpfully, I'll reply with a question - why are you previewing in an editor? There's probably no-one on earth who will look at your site in an HTML editor, so it seems to me a waste of time. So I am just curious as to the pros and cons of one method versus the other. I know the old browsers like NS4.7 didn't recognize the @import - but I am not interested in supporting for that browser (assuming it is in use anywhere) I have heard fairly recently that some schools still use it. Your use of @import to present them with an unstyled page is good, assuming you use semantic markup. Are the two methods pretty much interchangeable these days, or are there some considerations for using one over the other that I should be aware of? If this has been covered somewhere in detail, would appreciate a link. Like everything else CSS, it all depends on what you are trying to achieve. If you have specific issues you'd like to address, we could give it a shot to address those issues. I don't think a general discussion about this would be useful, as we all have our own way of organizing style sheets, scripting, file directories, etc.. More a matter of taste, really. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lists in blocks
Gee looks like a table, walks like a table, quacks like a duck! :-) Actually I had a similar question but not for menus. I have a document that client wants added to web page. They laid it out in a 2 column bulleted list format. Of course it has an odd number of bullets, and the text per item is all different. So what would be the most stable way to handle this. My initial thought was just split the UL into two lists and then put in a two column table to hold them. But would it work as a div around each of the two ul's and then float them? If I did that, do I float one left and one right and set the width's to = 50% or do I float them both left? If the ul div's are contained within a wrapper div, do I position them relative? Or is there a better way that is supported by all the usual browsers? Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @import vs link for stylesheets
Unhelpfully, I'll reply with a question - why are you previewing in an editor? It is actually my CSS editor = Topstyle, which does a great job of working with CSS and displaying changes as you type them. But I just discovered this quirk that it isn't showing the tiling of a background image in the preview pane when the style sheet is linked. It does display it when it is connected using @import. Thus my question about the downside of using @import vs link. I have no personal preference so am thinking I should just use the @import for my stylesheets (especially any using background images). But I wondered if there was some can of worms out there that I was opening up by doing that. I am aware of the NS4.7 issues. And I just recently saw a post that third (or fourth?) style sheet brought in with @import isn't being rendered in IE6 (or 7?) Are there other issues or reasons not to use @import? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Border on just the text, not the full width of the element
I want to have a border-bottom on an h2 that's centered, but not have the border fill the whole width of the containing element. The content is dynamically generated, so I don't know exactly how wide to make it, so that's not an option. Essentially, WHILE IT HAS NOTHING AT ALL TO DO WITH A LINK, 'CAUSE ITS NOT ONE, imagine what a center-aligned link would look like, and that's what I want. I'm working from a comp and that's what's specified. Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] jumping menu bar
Hi Everyone This menu bar jumps upwards in IE6 but is fine in FF and IE7 from memory...What am I missing? Thanks Bryan http://www.sixvillages.co.uk/sixvillages.html http://www.sixvillages.co.uk/sixvillages.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jumping menu bar
Just at a glance, I see you have two border-right settings. Could that be causing the problem? border-top: 1px solid #fff; border-right: 1px solid #fff; border-right: 1px solid #aaa; border-left: 1px solid #fff; border-bottom: 1px solid #585858; Teressa Graphic Web Designer Opactive *-Original Message- *From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On *Behalf Of Bryan Hepworth *Sent: Monday, April 16, 2007 2:49 PM *To: CSS-Discuss *Subject: [css-d] jumping menu bar * *Hi Everyone * *This menu bar jumps upwards in IE6 but is fine in FF and IE7 from *memory...What am I missing? * *Thanks *Bryan * *http://www.sixvillages.co.uk/sixvillages.html *http://www.sixvillages.co.uk/sixvillages.css *__ *css-discuss [EMAIL PROTECTED] *http://www.css-discuss.org/mailman/listinfo/css-d *IE7 information -- http://css-discuss.incutio.com/?page=IE7 *List wiki/FAQ -- http://css-discuss.incutio.com/ *Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Border on just the text, not the full width of the element
Lorin Rivers wrote:
I want to have a border-bottom on an h2 that's centered, but not have
the border fill the whole width of the containing element. The content
is dynamically generated, so I don't know exactly how wide to make it,
so that's not an option.
Wouldn't...
h2 {text-align: center; text-decoration: underline;}
...be ok?
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [css-d ADMIN] Any CSS GURUs?
Gigaboy20 wrote: I'm looking to hire an insanely smart css wizard who can hack theri way into doing almost anything with css. Gigaboy20 has been unsubscribed - blatant violation of list policies. -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lists in blocks
put a float: left on the li element. then set the width of each of those such that they break into 3 columns. On 4/16/07, Ross Hulford [EMAIL PROTECTED] wrote: I have an unordered list of 10 items 1 2 3 4 5 6 7 8 9 10 but I want to diaply it in block of 3 14710 258 369 Is this possible with css or any other method? R. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- .ernie | ryptide [ Peripheral Fission ][ Mayavada ][ Squirrels ][ http://ryptide.com ] [ Music is the vernacular of the human soul. ~ Geoffrey Latham ] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] formatting of autonumbers in OLs
I just realized that you wouldn't have ascending selectors if you were to do
my aforementioned method. So:
What you could do is give each li a class or id=list_one list_two , etc.
And then in your css set this:
ul {list-style: none;}
ul li {padding-left: 25px; }/* Padding is based on the width of the .gif
+ the distance from the number you want */
ul li.list_one {background: url(big_one.gif) center left;}
ul li.list_two {background: url(big_two.gif) center left;}
etc...
This way you don't have to put a div or a p in your li.
If you want to get real fancy, you could dynamically create this using
javascript for all lists (but I don't have the time to write that down for
you here).
Hope this helps :)
-Andy
On 4/16/07, Andy Vaughn [EMAIL PROTECTED] wrote:
Or you could just use the list-style-image CSS property:
ol
{
list-style-image: url(blueball.gif);
list-style-type: circle
}
(W3C Reference)
http://w3schools.com/css/pr_list-style-image.asp
Supported throughout.
-Andy
On 4/16/07, Jukka K. Korpela [EMAIL PROTECTED] wrote:
On Fri, 13 Apr 2007, Pamela Denchfield wrote:
I'm new to CSS, and I'm looking for a way to use the stylesheet to
apply the following formats to autonumbers (prepended digits) in declared
ordered lists:
* bolding the digits (while other text is normal)
* removing the periods
Possible? Perhaps not.
Unfortunately, there seems to be no way of doing that without adding
artificial extra markup. In theory, you could use generated content, but
it does not work on IE.
The problem is that browsers treat the numbers as anonymous elements
inside the li elements, so anything you set for a li element applies
to the number as well, but you can't specify rules for the number
specifically. Using extra markup, though, you can wrap the content
proper
of a li element in an element that can be styled separately, so that
what you set for li has an effect on the number only.
ol li { font-weight: bold; }
ol li p { font-weight: normal; }
That's one way of using artificial extra markup, requiring the items to
be
coded as lip.../p/li (or at least lip...). It's more natural
to use div markup instead of p markup, since the item content is not
necessarily a paragraph, and using p markup typically causes some
default spacing. So I'd use
lidiv.../div/li
with
ol li { font-weight: bold; }
ol li div { font-weight: normal; }
together with some margins specifically set for the li elements (or
div elements inside them) if desired. As a rule of thumb, no extra
spacing is needed if the items are short (typically less than one line)
but some extra spacing (e.g. li { margin-bottom: 0.5em; }) is useful if
the items are long.
--
Jukka Yucca Korpela,
http://www.cs.tut.fi/~jkorpela/http://www.cs.tut.fi/%7Ejkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS hBox, vBox challenge
OK, here's one for the GURUS. 1. I am building custom tags (server side tags in ColdFusion) that generate HTML to send back to the browser. 2. I prototype HTML before creating code the tags output. 3. FF supports CSS better than IE. 4. How can I do this without tables? (Well... obviously, outside of FF.) !-- This would be the outer hBox generated tags. (horizontal arrangement of sub-elements) -- div style=display:table !-- internal element -- div style=display:table-captionOne/div !-- internal element -- div style=display:table-rowTwo/div !-- nested vBox (vertical arrangement of sub-elements) -- div style=background-color:#CC00FF;display:table-row; div style=display:table-cell001/div div style=display:table-cell002/div !-- another nested element to make sure it works in any order. -- div style=display:table-cell;background-color:#CCFF00; div style=display:inline-blockabc/div divdef/div /div /div div style=display:table-rowfooter/div /div Thanks for someone who can see the answer. John P.S. This is for a upcoming Open Source project called COOP. This should revolutionize how people write CF! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6 spacing, clear div
I have 2 issues. First the spacing in my sidebar1 div under the menu (the Flash movies) is way off in IE6 but great in IE7 and Firefox. The second issue is I don't know how to get the left sidebar (sidebar1) to touch the footer regardless of content amount. The URL is http://digiknow.info Thanks, Joyce J. Evans Erb http://www.JoyceJEvans.com http://www.IdeaDesignWebsites.com Web Page in a Day! CD training now available at http://www.joycejevans.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Border on just the text, not the full width of the element
I'm experimenting, but I think display: inline; or some variation will
do what I want. I want the border to be a different color...
On 4/16/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Lorin Rivers wrote:
I want to have a border-bottom on an h2 that's centered, but not have
the border fill the whole width of the containing element. The content
is dynamically generated, so I don't know exactly how wide to make it,
so that's not an option.
Wouldn't...
h2 {text-align: center; text-decoration: underline;}
...be ok?
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @import vs link for stylesheets
On Mon, 16 Apr 2007 12:43:50 -0700, Robert Lane wrote: It is actually my CSS editor = Topstyle, which does a great job of working with CSS and displaying changes as you type them. But I just discovered this quirk that it isn't showing the tiling of a background image in the preview pane when the style sheet is linked. It does display it when it is connected using @import. Hi Robert, I didn't mean to be quite so dismissive. But you may like to consider this technique for viewing coding results in several real browsers every time you press save: http://tinyurl.com/y98bx7 Are there other issues or reasons not to use @import? Some use @imported style sheets to feed advanced CSS rules to modern browsers while hiding from version 4 NS and IE, and earlier. That might be considered a plus. No other issues as far as I know, except for the situation you noted that an @import within an @import within ... fails on reaching the fourth nested @import. Of course, you can @import from the top of a linked style sheet as well. Linking and @importing can thus work together. Hope this helps. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lists in blocks
On Mon, 16 Apr 2007 16:20:40 +0100, Ross Hulford wrote: I have an unordered list of 10 items [...] but I want to diaply it in block of 3 14710 258 369 Is this possible with css or any other method? Did you mean an ORDERED list? Anyway, check out the Wiki: http://css-discuss.incutio.com/?page=MultipleColumnLists Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Best method to have containers wrap around floats in ALL browsers.
On Mon, 16 Apr 2007 17:44:47 +0100, Christopher Blake wrote: I don't know whether things are working or not. I do not want to add java to get over this problem, the empty clear both div doesn't seem to work for me so I am running out of options. Does anyone know a proven method of achieving the result that I want that works across all browsers. You have options. The one Teressa gave is a good one. This entry at P.I.E. has been updated for IE7, and explains all: http://www.positioniseverything.net/easyclearing.html Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] jumping menu bar
On Mon, 16 Apr 2007 22:49:10 +0100, Bryan Hepworth wrote: Hi Everyone This menu bar jumps upwards in IE6 but is fine in FF and IE7 from memory...What am I missing? Hi Brian, IE6 is collapsing the margin-bottom on your image. Try using padding-bottom instead. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] yet another CSS menus howto
Hi all, I've posted a new article on my site explaining CSS menus: http://www.sunburnt.com.au/publications/design/css_menus I guess this is pretty archaic stuff really, but I'd be interested if anybody has some feedback or can spot some bugs. It's been 4 years since I first wrote about CSS menus, and I think I've got them pixel-perfect now :) Roger -- Ninth Avenue Software p: +61 7 3137 1351 (UTC +10) f: +61 7 3102 9141 w: http://www.ninthavenue.com.au e: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
