Re: [css-d] no background-color with your color warnings
On 16/06/06, David Hucklesby [EMAIL PROTECTED] wrote: The default value for background-color when none is defined is transparent, allowing any background set on an enclosing element to shine through. The reason the validator warns you about having a background-color defined with your (text) color is in case the color shining through may be similar, making your text vanish. The validator checks one rule at a time and can't tell. The validator doesn't have access to all the rules that may be applied (such as those from user and browser default stylesheets). -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List style colour
Just a quick question... Is it possible to colour a list's bullets and not the text? I can get around it by using span or something within each li, but I was hoping I wouldn't need to... Cheers Brendan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Relative positioning and widths
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ed Seehouse Sent: Friday, 16 June 2006 3:08 AM To: Brendan Grossman Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Relative positioning and widths On 6/14/06, Brendan Grossman [EMAIL PROTECTED] wrote: Hi everyone Is it possible to have floating divs side-by-side without the width specified or with just one set explicitly? Yes. For example I have two columns... Left hand side I want to set explicity, ie. 15em Right hand side, I want it to fill up the remaining area of the page. However when doing this, the right drops below the left div. That's because you are floating both columns. You only need to float the left column. For the right column just use the natural flow of your browser's default behaviour. Simply give it a left margin slightly wider than the width of your left column. Presto! A block element such as p or div that isn't floated or positioned takes up the full width of the screen by default, so all you need to do is make room on the left with your margin rule. Works equally well for a right column, just do it the other way around. Either way your floated element should come first in your html code. Generally, you save yourself a whole lot of trouble if you use the default behaviour of your browser for layout as much as possible, then use a smidgin of positioning on a couple of elements to make the effect you want. It's amazing what effects you can attain with very simple means this way. That does just about what I need. However divs within the right containing div don't 'stretch' it down. Is there a way around this? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Minior browser inconsistencies
Hi, I'm working on making a fairly simple css layout and have a couple of small issues that I need to resolve before it works in Explorer, Firefox, Netscape and Opera. I'm pretty confident that theres not much work needed to get it right and I'm hoping to get some pointers on how to fix it. Here is a list of things I've spotted in the various browers Explorer 6.0.2900.2180 - No problems here. Firefox 1.5.0.3 - The 2px high gap between the blue box and the black line has disappeared Netscape 8.1 - Same as firefox since its the same engine Opera 8.54 Build 7730 - Vertically centers the main layout =( - The background for the footer div gets messed up. Also, is there any good cross-brower alternatives to the FooterStickAlt (which I use) method which doesnt suffer from the problem where it could end up hiding contents due to overlapping with the contents in the above layer? Here is the example layout http://www.selfinflicted. org/css/layout_example.html Thank you! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List style colour
Brendan Grossman wrote: Is it possible to colour a list's bullets and not the text? I can get around it by using span or something within each li, but I was hoping I wouldn't need to... Not today. Maybe with CSS3 sometime in the future, but not now. It's a shame to have to use spans. Some developers get around this by using images instead, included via CSS list-style-image: url(...) -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] no background-color with your color warnings
Actually, its the exact opposite.
Um, no its not. The validator doesn't take the cascade into account.
div.test {
background: #FFF;
color: #000;
}
div.test a {
color: #C00;
}
will produce a warning on the div.test a {} rule even though the red
hyperlink will only ever be displayed on a white background.
--
Richard Allsebrook
Futurate Ltd. (http://www.futurate.com)
---
June 2006: Futurate launch a major new website and content
management server for Travel South Yorkshire:
www.travelsouthyorkshire.co.uk.
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List style colour
Is it possible to colour a list's bullets and not the text?
One method is to use a small bullet image as the background for the li:
li {
background: url(my_bullet.gif) no-repeat top left;
padding-left: 20px;
}
The padding pushes the text away from the bullet image.
--
Richard Allsebrook
Futurate Ltd. (http://www.futurate.com)
---
June 2006: Futurate launch a major new website and content
management server for Travel South Yorkshire:
www.travelsouthyorkshire.co.uk.
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a CSS positioned design
On Thu, Jun 15, 2006 at 12:21:04PM +0200, Els wrote: Just make a div with id=container to hold all that's inside body now, give it position:relative, and all that was previously absolute positioned to the viewport, will now be relative to the container. (no need to change any of the absolute values you already set) Then you center the container by giving it a width and margin:auto;. Ok, I've tried that. I've also used the container to give a background colour of white for the content area, where the main body background will be grey. This hasn't been entirely successful; I guess I have to set a fixed height, as not setting one meant the white background wasn't seen, and setting 100% as I have at present isn't really what I want? Another issue, which I really can't get but perhaps this is just because I've been staring at the screen too long... I have a purple triangle, which fits in the right place on my front page. But when you go to the homeseeker page, which I have also amended to work with the new container, the purple triangle leaps to the wrong place... And I think the whole thing is leaping a few pixels when I go from one page to another. Surely, the width should be fixed and therefore the content area should remain in the same place between pages? All areas where widths are set are in the stylesheet, all pages have the same sections in them... so all should be the same width? Sorry to throw this at people on a Friday but I am boggling. Been staring at the screen too long I think :( Site is http://www.wdam.co.uk/clients/dynam/hh/ -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a CSS positioned design
On Fri, Jun 16, 2006 at 12:16:03PM +0100, [EMAIL PROTECTED] wrote: Ok, I've tried that. I've also used the container to give a background colour of white for the content area, where the main body background will be grey. This hasn't been entirely successful; I guess I have to set a fixed height, as not setting one meant the white background wasn't seen, and setting 100% as I have at present isn't really what I want? This is still an issue for me. I could define 4 container classes, one for each page, and set it to the appropriate height for that page, but this isn't really a fix. I've done lots of googling but I must be going wrong somehow because I can't find a way to get the container to be at least the length of the longest bit within it, but no longer. Site is http://www.wdam.co.uk/clients/dynam/hh/ The other issues were caused by me being a complete lemon and forgetting to add a CENTER tag in an important place, so please ignore them! Sorry, I'm not entirely well and it's been a long week! -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Gap in Opera
Developing a simple two column site with header div. Renders ok in FF and IE6, but in Opera there are gaps/whitespace at top and bottom of container. Can't see why this should be. http://www.iyesolutions.co.uk/templates/vensite/test.html Obviously something simple but cannot see what it is. Cheers Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap in Opera
Ian Young [EMAIL PROTECTED] writes Developing a simple two column site with header div. Renders ok in FF and IE6, but in Opera there are gaps/whitespace at top and bottom of container. Whatever the reason, the gaps are there in Opera 8.x, but gone in Opera 9b. -- Chris Hughes Reality is that which, when you cease to believe, continues to exist. http://www.epicure.demon.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a CSS positioned design
Ok, I've tried that. I've also used the container to give a background
colour of white for the content area, where the main body background
will be grey. This hasn't been entirely successful; I guess I have to
set a fixed height, as not setting one meant the white background
wasn't seen, and setting 100% as I have at present isn't really what I
want?
This is still an issue for me. I could define 4 container classes, one
for each page, and set it to the appropriate height for that page, but
this isn't really a fix. I've done lots of googling but I must be going
wrong somehow because I can't find a way to get the container to be at
least the length of the longest bit within it, but no longer.
Site is http://www.wdam.co.uk/clients/dynam/hh/
The other issues were caused by me being a complete lemon and
forgetting to add a CENTER tag in an important place, so please ignore
them! Sorry, I'm not entirely well and it's been a long week!
Hello,
I just caught the end of this thread and wanted to pass on some CSS code
for centering a page. I've tried different techniques and this
particular snippet works everytime:
body
{
margin: 0;
padding: 0;
text-align: center;
}
div#container
{
margin: 1em auto;
width: 80%;
border: 1px solid #000;
padding: 1em;
background-color: #ddd;
text-align: left;
}
Note that you will probably want to change the border and background.
Also, I would recommend removing the deprecated center tag. Re-defining
the body tag and using a wrapper div will be sufficient. You don't have
to set a fixed height because the container wraps around the content of
your page, and the height will adjust to the content, so you should only
need one container div for the site.
***Hope this helps!
--Kim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] New IE7 hack/filter
Given this HTML:
div class=ie7-target-class ... /div
and this CSS:
* div[class^=ie7-target-class] { background: #ff; }
body .ie7-target-class { background: #ff; }
The resulting div shows red in IE7 but shows blue in all other browsers.
This is due to the fuzzy specificity bug which is still present in
IE7 and the ability to prevent other browsers that also suffer from
the fuzzy specificity bug from seeing the rule by using CSS3
selectors.
http://www.fu2k.org/alex/css/hacks/fuzzyspecificity
I've only been able to test this in IE7b2, so if anyone is using the
public beta or later, could they confirm that the results are the
same.
Disclaimer: just because you can hack IE7, doesn't mean you should:
a) the IE7 team will probably fix this (though who can say when); b)
the IE7 team is adamant that you should use conditional comments
instead of hacks.
Disclaimer 2: if you really really do want to hack for IE7, you
should also have a look at Brothercake's XXX method
http://www.brothercake.com/site/resources/reference/xxx/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a CSS positioned design
[EMAIL PROTECTED] wrote: On Fri, Jun 16, 2006 at 12:16:03PM +0100, [EMAIL PROTECTED] wrote: Ok, I've tried that. I've also used the container to give a background colour of white for the content area, where the main body background will be grey. This hasn't been entirely successful; I guess I have to set a fixed height, as not setting one meant the white background wasn't seen, and setting 100% as I have at present isn't really what I want? Indeed. Setting 100% height causes the background to stop when you need to scroll up to see more text (which happens on smaller windows and with enlarged text. This is still an issue for me. How did you colour your page before it was centered? The problem with absolute positioning, is that you are taking the elements out of the normal flow, thus leaving its parent virtually empty. And an empty container doesn't gain any height. I could define 4 container classes, one for each page, and set it to the appropriate height for that page, but this isn't really a fix. Especially since the text will then 'fall out' of the bottom on enlarging the font-size. I've done lots of googling but I must be going wrong somehow because I can't find a way to get the container to be at least the length of the longest bit within it, but no longer. It would do that automagically if it weren't for the absolute positioning. Site is http://www.wdam.co.uk/clients/dynam/hh/ The other issues were caused by me being a complete lemon and forgetting to add a CENTER tag in an important place, so please ignore them! Sorry, I'm not entirely well and it's been a long week! shudderCENTER tags??/shudder (I'll ignore that bit too! ;-) ) -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] no background-color with your color warnings
On 16/06/06, Richard Allsebrook [EMAIL PROTECTED] wrote:
Actually, its the exact opposite.
Um, no its not. The validator doesn't take the cascade into account.
Please read what I said - you have to account for the user style sheet
and browser default stylesheet too.
div.test {
background: #FFF;
color: #000;
}
div.test a {
color: #C00;
}
And in the user stylesheet:
div {
background-color: #C00 !important;
color: white !important;
}
will produce a warning on the div.test a {} rule even though the red
hyperlink will only ever be displayed on a white background.
And the red hyperlink will be displayed on a red background.
--
David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image breakout at bottom Div
Hi All, Brian Cummiskey pointed out to me the other day on this page: http://www.tboult.co.uk/dev/ag/crops/wheat.cfm That the image was breaking out of its div at the bottom. Brian suggested a clear both block element which I have just implemented and its OK in FireFox but not IE (Arrrgh) You will see in IE the div now spans accross the whole page. Any ideas as to how I can get the page to display correctly would be great. Cheers Trevor http://www.tboult.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List style colour
Brendan Grossman wrote:
Just a quick question...
Is it possible to colour a list's bullets and not the text?
I can get around it by using span or something within each li, but I was
hoping I wouldn't need to...
Cheers
Brendan
Yes, I believe so. The ul will hold the second foreground color.
html,body{ background-color: #fff; color: #000;}
ul {background-color: #fff; color: fuchsia; }
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Dynamic CSS bar graph
Hello All, I've developed a simple online bar graph for a client. The page queries a database, tallies the total number of orders coming in from each US state and then draws a series of bar graphs to represent the number of orders. The report works fine expect when the user tries to print it. The bars are created by variably setting the height of an unordered list's list item. The list items have a red background color which allows the graph to be viewed on screen. Of course when the report is printed, if the user does not select print background items somewhere in their print dialogue boxes, they get no graph printed. Anybody know a good light-weight way of solving this? I was thinking of making the bars all divs with a fixed width and variable height and then putting a large foreground img into them. But wouldn't this cause the div to automatically expand to the full height and width of the img? Perhaps I could variably set image height=x within the img tag? Is their a CSS method to force background printing to on for an item? Any help appreciated. - Ben __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a CSS positioned design
On Fri, Jun 16, 2006 at 02:38:00PM +0200, Els wrote: How did you colour your page before it was centered? The problem with absolute positioning, is that you are taking the elements out of the normal flow, thus leaving its parent virtually empty. And an empty container doesn't gain any height. Yep, that seems to be the problem... and I was not colouring it before - I keep having to add bits as the client passes a new requirement. It would do that automagically if it weren't for the absolute positioning. Yep. So is my choice just to reposition everything with relative positioning? And then to go into layers rather than divs? Site is http://www.wdam.co.uk/clients/dynam/hh/ shudderCENTER tags??/shudder (I'll ignore that bit too! ;-) ) Probably best ;) I'll tidy up after I've got it looking right and there are no changes from the client :) Thanks, it's much appreciated! -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Two column IE6 800x600
http://www.iyesolutions.co.uk/templates/vensite/test.html http://www.iyesolutions.co.uk/templates/vensite/includes/styles.css Seems to work reasonably well across browsers with exception of IE6 at 800x600 where right column slips under left column I have used percentages to define columns. would it be better to use -ve margins? Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dynamic CSS bar graph
On 6/16/06, Ben Liu [EMAIL PROTECTED] wrote:
Hello All,
I've developed a simple online bar graph for a client. The page
queries a database, tallies the total number of orders coming in from
each US state and then draws a series of bar graphs to represent the
number of orders. The report works fine expect when the user tries to
print it.
...
Anybody know a good light-weight way of solving this? I was
thinking of making the bars all divs with a fixed width and variable
height and then putting a large foreground img into them. But wouldn't
this cause the div to automatically expand to the full height and
width of the img?
No, of course not... divs are not tables. By default, the img should
overflow the div, and should be visible outside of the boundaries of
the div. If you apply
overflow:hidden;
to the div, then only the parts of the img inside the div will show.
Perhaps I could variably set image height=x within
the img tag?
Why not just set the width and height of the image to be the same as
the div in the CSS? Then again, since this is already a visual driven
output, why not just use img's by themselves? You could do:
img {
display:block;
width:Xpx;
height:Xpx;
...
}
Is their a CSS method to force background printing to
on for an item?
No, and for good reason!
HIH
--
--
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering a CSS positioned design
[EMAIL PROTECTED] wrote: [extend background colour to bottom of page] It would do that automagically if it weren't for the absolute positioning. Yep. So is my choice just to reposition everything with relative positioning? To give an element position:relative, means to give it a position *relative to its own original position*. Say you have an h1 and a paragraph below it. If you would give the h1 position:relative with a top value of 3em, it would be covering the paragraph below it. And then to go into layers rather than divs? I don't know what you mean by that. Aren't divs layers in Dreamweaver speak? (I don't know Dreamweaver, but that's what I heard) Site is http://www.wdam.co.uk/clients/dynam/hh/ shudderCENTER tags??/shudder (I'll ignore that bit too! ;-) ) Probably best ;) I'll tidy up after I've got it looking right and there are no changes from the client :) First get the code done correctly, and then make it look right. The reverse will give you headaches. Thanks, it's much appreciated! You're welcome :-) -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two column IE6 800x600
Ian Well, for one thing you have the table in the left column set to 560 and the image in the right column has a width of 300... That makes it a bit bigger than 800 right there. -Nick Ian Young wrote: http://www.iyesolutions.co.uk/templates/vensite/test.html http://www.iyesolutions.co.uk/templates/vensite/includes/styles.css Seems to work reasonably well across browsers with exception of IE6 at 800x600 where right column slips under left column I have used percentages to define columns. would it be better to use -ve margins? Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dynamic CSS bar graph
Hi Christian,
Thanks for the help. I think I can do away with the containment div
around the bar graph img since I have another containment div already
performing some other functions. Any ideas on what is more correct:
img src=bargraph.gif height=? some variable script here ? /
-OR-
img src=bargraph.gif style=height: ? some variable script here ? /
or in other words, does the image height declaration belong in the html or css?
If it does belong in the CSS, it would have to be in-line because I
don't think there is a way to write it dynamically into an outside
linked style sheet.
- BL
On 6/16/06, Christian Montoya [EMAIL PROTECTED] wrote:
On 6/16/06, Ben Liu [EMAIL PROTECTED] wrote:
Hello All,
I've developed a simple online bar graph for a client. The page
queries a database, tallies the total number of orders coming in from
each US state and then draws a series of bar graphs to represent the
number of orders. The report works fine expect when the user tries to
print it.
...
Anybody know a good light-weight way of solving this? I was
thinking of making the bars all divs with a fixed width and variable
height and then putting a large foreground img into them. But wouldn't
this cause the div to automatically expand to the full height and
width of the img?
No, of course not... divs are not tables. By default, the img should
overflow the div, and should be visible outside of the boundaries of
the div. If you apply
overflow:hidden;
to the div, then only the parts of the img inside the div will show.
Perhaps I could variably set image height=x within
the img tag?
Why not just set the width and height of the image to be the same as
the div in the CSS? Then again, since this is already a visual driven
output, why not just use img's by themselves? You could do:
img {
display:block;
width:Xpx;
height:Xpx;
...
}
Is their a CSS method to force background printing to
on for an item?
No, and for good reason!
HIH
--
--
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Panel layout problems
I've got a home page that has two promo panels on the side of the site and another panel for the content area. I've got each of the panels to display correctly in their own right, but on the page the layout is all over the place. It should be 2 small panels on the left, one on top of the other, and then a content area to the right. The content area should be the same height as the two panels. I've managed to get this working without just plain divs with borders, but now that I've included the graphics for the panels its all gone a bit pear shaped. The two panels do indeed display one above the other, but the image for the bottom right of the top panel doesn't appear in FF and appears over the right somewhere in IE. The content panel is displaying correctly, only its pushed down under the two panels. I'm at my wits end and have started going around in circles and read so many different web sites that my head is spinning. The page in question can be found at http://farcry.dott07.com/ Any and all help would be much appreciated. Regards Stephen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dynamic CSS bar graph
On 6/16/06, Ben Liu [EMAIL PROTECTED] wrote: Hi Christian, Thanks for the help. I think I can do away with the containment div around the bar graph img since I have another containment div already performing some other functions. Any ideas on what is more correct: img src=bargraph.gif height=? some variable script here ? / -OR- img src=bargraph.gif style=height: ? some variable script here ? / or in other words, does the image height declaration belong in the html or css? You are much better off doing it in the HTML. Images should, if possible, always have height and width settings, if they are meant to be a pixel size. They render faster when they have the dimensions in the HTML too. -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two column IE6 800x600
Ian Well, for one thing you have the table in the left column set to 560 and the image in the right column has a width of 300... That makes it a bit bigger than 800 right there. -Nick Yes, just noticed that. That's what I get for copying from client's site. Have changed the table size but the right column slips completely under left column at 800x600. FF, Netscape and Opera are all good at 800x600, 1024x768 and 1280x800 Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Starting over... still have height issues ;(
Sorry for yet another question. I really want to nail this. I have given up trying to make my container work with absolutely positioned items and used relative positioning. Now my container has a nice white background and contains everything nicely. Except it obviously thinks something is larger than it is... for it doesn't stop at the bottom of the items, so the white container goes on too far down the page... And some of my items are in a different place on different pages. Despite being the same size and in fact the same items. Only 2 hours to the end of the day and I really wanted to get this fixed today. I am so confused and going mad! Sorry for all the questions but can anyone see where I'm wrong? http://www.wdam.co.uk/clients/dynam/hh/ Sorry, and thanks... -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Starting over... still have height issues ;(
On Fri, Jun 16, 2006 at 04:06:23PM +0100, [EMAIL PROTECTED] wrote: And some of my items are in a different place on different pages. Despite being the same size and in fact the same items. I would add I am checking in Firefox. IE is showing them in utterly different places, not just one or two pixels out! You see, I thought I'd cracked it by having most items absolutely positioned, but the one which changes length was positioned relatively. That looked better... but the container which created the white background didn't stretch to the end... That's visible at http://www.wdam.co.uk/clients/dynam/hh/test.php as an idea to work with... I used CSS because it's meant to be more elegant than tables, and I was sick of nesting tables... but this is driving me up the wall. What am I missing, something maybe hasn't clicked... (In case I forget to say it, THANK YOU to everyone who has helped, and hope everyone has a great weekend. I'm not usually this demanding or this confused!) -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Starting over... still have height issues ;(
[EMAIL PROTECTED] wrote: Sorry for yet another question. I really want to nail this. I have given up trying to make my container work with absolutely positioned items and used relative positioning. Now my container has a nice white background and contains everything nicely. Except it obviously thinks something is larger than it is... for it doesn't stop at the bottom of the items, so the white container goes on too far down the page... And some of my items are in a different place on different pages. Despite being the same size and in fact the same items. Only 2 hours to the end of the day and I really wanted to get this fixed today. I am so confused and going mad! Sorry for all the questions but can anyone see where I'm wrong? http://www.wdam.co.uk/clients/dynam/hh/ Sorry, and thanks... Your problem is with position:relative... browsers still 'render' the items as if they have no position, then the css 'moves' them into place... -Nick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two column IE6 800x600
Ian Young wrote:
http://www.iyesolutions.co.uk/templates/vensite/test.html
Yes, just noticed that. That's what I get for copying from client's
site. Have changed the table size but the right column slips
completely under left column at 800x600. FF, Netscape and Opera are
all good at 800x600, 1024x768 and 1280x800
IE/win _doesn't_ respect dimensions, and _can't_ overflow containers
properly.
If you want IE/win to act as Firefox other good browsers - simulate
good behavior, then you may add the following, and see if it fits the
bill...
* html #columnRight {overflow: hidden /* makes IE respect width */;}
p.photoack {position: relative /* overflow visible also in IE */;}
* html #columnLeft {margin-right: -100px /* some bug-space for IE */;}
Result: no float-drop at 800 * 600.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] no background-color with your color warnings
On 16/06/06, Richard Allsebrook [EMAIL PROTECTED] wrote: What I said was The validator doesn't take the cascade into account - and that is true. No, it isn't. An author rule (rule 1) sets a colour, but not a background colour. Another author rule (rule 2) sets a background colour that (due to the cascade) applies to the same element. If this was all there was to it, then I might agree with you, but ... There is the possibility that a user stylesheet will set a style that (due to the cascade) also applies to the same element (rule 3). Since the colours specified by rule 3 may take precidence over the colours specified by rule 2, rule 2 cannot be depended upon. Since the validator takes this (the cascade) into account, it issues a warning. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Starting over... still have height issues ;(
Except it obviously thinks something is larger than it is... for it doesn't stop at the bottom of the items, so the white container goes on too far down the page... You set container height to 650px. If you get rid of this you won't have extra space at bottom. -- Joel Goldstick www.columbuswebmakers.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Starting over... still have height issues ;(
On Fri, Jun 16, 2006 at 12:01:01PM -0400, [EMAIL PROTECTED] wrote: You set container height to 650px. If you get rid of this you won't have extra space at bottom. No, I won't have enough halfway down either! I ended up deciding to fix the container height because I couldn't find another solution :( -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two column IE6 800x600
http://www.iyesolutions.co.uk/templates/vensite/test.html
Yes, just noticed that. That's what I get for copying from client's
site. Have changed the table size but the right column slips
completely under left column at 800x600. FF, Netscape and Opera are
all good at 800x600, 1024x768 and 1280x800
IE/win _doesn't_ respect dimensions, and _can't_ overflow containers
properly.
If you want IE/win to act as Firefox other good browsers - simulate
good behavior, then you may add the following, and see if it fits the
bill...
* html #columnRight {overflow: hidden /* makes IE respect width */;}
p.photoack {position: relative /* overflow visible also in IE */;}
* html #columnLeft {margin-right: -100px /* some bug-space for IE */;}
Result: no float-drop at 800 * 600.
regards
Georg
That seems to have done the trick
Thanks
Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/366 - Release Date: 15/06/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Layout
On 6/16/06, Debra Kappmeyer [EMAIL PROTECTED] wrote: http://www.viterbo.edu/proofs/CSSTest/index3.html There's just a couple of problems You have a fair whack of errors in your html code. CSS is intended to work with valid html and errors in your html can really mess things up. You also have one error in your CSS which may or may not screw things up - invalid CSS rules are often ignored by a browser, but sometimes they just screw up the whole page. I suggest you get your html and CSS valid first. I can't guarantee this will fix the problems, but it often does and it's much easier to diagnose a problem when the code is valid. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Layout
Hi Debra,
I might be wrong about this but I think the reason that extra gap
exists between the 4 and the A is because margin is being added twice,
once in the ul and once for the li that contains it. I might be wrong
about this because browsers collapse margins between elements
sometimes. A rule like this might eliminate that extra gap:
il ul {margin: 0;}
or for your page
div#content li ul {margin: 0;}
HTH,
- Ben
On 6/16/06, Debra Kappmeyer [EMAIL PROTECTED] wrote:
So, I took Dave's friendly advice to learn CSS layout! and am trying to
do that and attempting my very first (so keep that in mind) CSS layout.
I think I've got it very close to where I want it for now:
http://www.viterbo.edu/proofs/CSSTest/index3.html
http://www.viterbo.edu/proofs/CSSTest/css/basic3.css
There's just a couple of problems
First when I have the list near the bottom, I'm wondering why there's a
large gap between the 4. And the A. But I don't have that problem in the
unordered list above it.
The other problem is in Windows IE (which I've noticed from my short time on
this list is a pretty big problem). In IE my page does very strange things.
My header and content move down below my navigation. And even before I did
something to make that happen, my content was butted right up against my
navigation background (no space like in the other browsers).
Any help would be greatly appreciated.
Thanks,
Deb
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Layout
Oops, sorry. Now that I look at your html, that CSS rule won't work
because you don't actually have the child UL inside LI tags. Your code
looks like this:
snip
ul
liTo oversee all university academic
policies
liTo review changes in programs or
courses where those changes
affect other schools
liTo approve courses for the general
education program
liTo approve general education course
revisions
ul
limore information
limore information
/ul
liTo assess the students' development
of core abilities
/ul
/snip
For my recommendation to work it would have to be like this:
ul
liTo oversee all university academic
policies
liTo review changes in programs or
courses where those changes
affect other schools
liTo approve courses for the general
education program
liTo approve general education course
revisions
liul
limore information
limore information
/ul/li
liTo assess the students' development
of core abilities
/ul
On 6/16/06, Ben Liu [EMAIL PROTECTED] wrote:
Hi Debra,
I might be wrong about this but I think the reason that extra gap
exists between the 4 and the A is because margin is being added twice,
once in the ul and once for the li that contains it. I might be wrong
about this because browsers collapse margins between elements
sometimes. A rule like this might eliminate that extra gap:
il ul {margin: 0;}
or for your page
div#content li ul {margin: 0;}
HTH,
- Ben
On 6/16/06, Debra Kappmeyer [EMAIL PROTECTED] wrote:
So, I took Dave's friendly advice to learn CSS layout! and am trying to
do that and attempting my very first (so keep that in mind) CSS layout.
I think I've got it very close to where I want it for now:
http://www.viterbo.edu/proofs/CSSTest/index3.html
http://www.viterbo.edu/proofs/CSSTest/css/basic3.css
There's just a couple of problems
First when I have the list near the bottom, I'm wondering why there's a
large gap between the 4. And the A. But I don't have that problem in the
unordered list above it.
The other problem is in Windows IE (which I've noticed from my short time on
this list is a pretty big problem). In IE my page does very strange things.
My header and content move down below my navigation. And even before I did
something to make that happen, my content was butted right up against my
navigation background (no space like in the other browsers).
Any help would be greatly appreciated.
Thanks,
Deb
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Layout
Oh and you are missing a lot of /li tags too, perhaps Ed's
recommendation should be addressed first, you seem to have some html
code to fix first before the CSS can be addressed.
On 6/16/06, Ben Liu [EMAIL PROTECTED] wrote:
Oops, sorry. Now that I look at your html, that CSS rule won't work
because you don't actually have the child UL inside LI tags. Your code
looks like this:
snip
ul
liTo oversee all university
academic policies
liTo review changes in programs or
courses where those changes
affect other schools
liTo approve courses for the
general education program
liTo approve general education
course revisions
ul
limore information
limore information
/ul
liTo assess the students'
development of core abilities
/ul
/snip
For my recommendation to work it would have to be like this:
ul
liTo oversee all university
academic policies
liTo review changes in programs or
courses where those changes
affect other schools
liTo approve courses for the
general education program
liTo approve general education
course revisions
liul
limore information
limore information
/ul/li
liTo assess the students'
development of core abilities
/ul
On 6/16/06, Ben Liu [EMAIL PROTECTED] wrote:
Hi Debra,
I might be wrong about this but I think the reason that extra gap
exists between the 4 and the A is because margin is being added twice,
once in the ul and once for the li that contains it. I might be wrong
about this because browsers collapse margins between elements
sometimes. A rule like this might eliminate that extra gap:
il ul {margin: 0;}
or for your page
div#content li ul {margin: 0;}
HTH,
- Ben
On 6/16/06, Debra Kappmeyer [EMAIL PROTECTED] wrote:
So, I took Dave's friendly advice to learn CSS layout! and am trying
to
do that and attempting my very first (so keep that in mind) CSS layout.
I think I've got it very close to where I want it for now:
http://www.viterbo.edu/proofs/CSSTest/index3.html
http://www.viterbo.edu/proofs/CSSTest/css/basic3.css
There's just a couple of problems
First when I have the list near the bottom, I'm wondering why there's a
large gap between the 4. And the A. But I don't have that problem in the
unordered list above it.
The other problem is in Windows IE (which I've noticed from my short time
on
this list is a pretty big problem). In IE my page does very strange
things.
My header and content move down below my navigation. And even before I did
something to make that happen, my content was butted right up against my
navigation background (no space like in the other browsers).
Any help would be greatly appreciated.
Thanks,
Deb
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Panel layout problems
Stephen Moretti wrote: I've got each of the panels to display correctly in their own right, but on the page the layout is all over the place...] I'm at my wits end Tell me about it :-P . and have started going around in circles and read so many different web sites that my head is spinning. The page in question can be found at http://farcry.dott07.com/ Stephen Stephen, I think like maybe you got a bit overly control happy. Things tend to go better if you just let all the garbage just flow in a natural and unrestrained order. Absolute positioning to layout a page, horizontal padding, and borders on width bearing containers, are always problematic. I find that working in quirks mode (see the XML declaration above the doctype) makes life with the various versions of win/ie a lot easier. This has been trimmed to avoid a scroll bar at 800; and is a basic layout suggestion that /may/ get things back on track-- please see: http://www.dlaakso.com/four-col/2c-a.html HTH Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Layout
Debra Kappmeyer wrote:
So, I took Dave's friendly advice to learn CSS layout! and am
trying to do that and attempting my very first (so keep that in mind)
CSS layout.
It's looking alright :-)
Just the usual IE-bugs in need of fixing... and a couple of human bugs
that should be corrected ;-)
http://www.viterbo.edu/proofs/CSSTest/index3.html
First when I have the list near the bottom, I'm wondering why there's
a large gap between the 4. And the A. But I don't have that problem
in the unordered list above it.
Lack of specificity for some of the combinations in the rule that is
supposed to zero out 'margin-top' on nested lists.
Write it like this:
div#content ol ul, div#content ul ol, div#content ol ol, div#content ul
ul, div#content ol a, div#content ul a
{font-size: 1em;
margin-top: 0;}
...and it will work just fine.
The specificity problem is rooted in this...
div#content ol, ul {font-size .8em;
margin-top: 1em;
margin-left: 1em;
line-height: 1.4;}
...where 'div#content ol' has a much higher specificity than 'ul'.
'div#content' acts as targeting and adds specificity to the rule for
'ol', but *not* for 'ul'.
See: http://www.w3.org/TR/CSS21/cascade.html#specificity for more on
the subject.
The other problem is in Windows IE (which I've noticed from my short
time on this list is a pretty big problem). In IE my page does very
strange things. My header and content move down below my navigation.
And even before I did something to make that happen, my content was
butted right up against my navigation background (no space like in
the other browsers).
IE adds 3px width to...
img src=presentimages/hdbackground.jpg ...
...and...
div id=header/div
...so it runs out of space.
div#header {width: 587px;}
...will fix that element.
For the image...
HTML:
img id=header-background src=presentimages/hdbackground.jpg ...
CSS:
* html #header-background {margin-left: -3px;}
...will give IE6 the space it needs.
Note that this isn't the most solid fix for IE/win, as it relies on a
bug fixing another bug.
Better alternatives involves 'floating' more of your layout, and will
require some additional markup.
---
Looks like 'div#content' isn't spaced correctly in IE6.
Adding...
* html div#content {margin-left: 200px;}
...below existing style, is _one way_ to correct it.
---
*General comments:*
Noticed that you're leaving out optional end-tags. That'll usually work
well in HTML4.01, but may create maintenance-problems later on.
Also, /div isn't optional, and there's one missing for div
id=container.
---
The nav-list in div id=nav looks like a typical nav-list, so it
should probably be marked up as an unordered list.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Font Sizing: Why Is Firefox Different?
Hey Folks,
Am wondering if someone has any info on this for me.
Have been looking to different font sizing methods and decided to go
with a method suggested by Dan Cederholm (as I recall) )where the font
size is defined in the BODY tag and then percentages are used to
increase or decrease the size. EMs are used for line height.
Example of the base setting:
body {
font-family: Arial, sans-serif;
font-size: small;
}
This has worked fine across Safari and IE browsers and should work on
Firefox, but I've noticed that there's a distinct difference in the way
Firefox is rendering text -- both on the Mac and on IE.
Does anyone know why this happens when IE and Safari work so well? It
may be a small issue, but damned if it isn't annoying. Overall, font
sizes seem smaller and line spacing tighter.
Even on a site like the NY Times, this sort of thing seems to be
happening here and there -- particularly in the text of the body of an
article.
Does anyone have a favorite method?
Would love to get something that's accessible and as consistent as
possible.
Thanks,
Anthony
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Base url for image property values?
Hi all,
Suppose a site has the following structure:
www
\things
\stuff
\other
\neat
\cool
In the ideal scenario, I'd like to reference one css file site.css
that sits in the root directory.
This works fine, and it will work if I link it in any page, nested
anywhere in the site but
if one of the styles, has something like:
div.foo{
background-image: url(pic.png);
}
Then it only works, when loaded from the root directory...
So, the question is, outside of defining several duplicate css files
(with different paths), or copying the images (there would likely be a
few), to each and every directory, is there a way around this?
All thoughts and ideas appreciated.
Cheers,
Steve
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Layout
Follow-up...
http://www.viterbo.edu/proofs/CSSTest/index3.html
The following margin-left/padding-left will probably work better and
more consistently across browser-land...
div#content ol, div#content ul {font-size .8em;
margin-top: 1em;
line-height: 1.4;
margin-left: 0;
padding-left: 18px;
}
...since not all browsers have the same margin/padding defaults on lists.
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizing: Why Is Firefox Different?
On 6/16/06, Anthony Baker [EMAIL PROTECTED] wrote:
Have been looking to different font sizing methods and decided to go
with a method suggested by Dan Cederholm (as I recall) )where the font
size is defined in the BODY tag and then percentages are used to
increase or decrease the size. EMs are used for line height.
Example of the base setting:
body {
font-family: Arial, sans-serif;
font-size: small;
}
I'm coming more and more to the view that we should, as much as
reasonable, honor the user's preferences. I'd therefore change your
rule slightly to make the default font-size on the body either 1em,
100%, or medium, all of which I believe are equivalent and display
text at the browser's default font size. Or just leave it out, which
amounts to the same thing.
With Geko based browsers (Netscape, Firefox, and many others) the user
can resize his fonts with a keystroke, so really, what's the point of
fighting? I try to design my your sites so that they look OK in just
about any font size or screen resolution. That means giving up the
idea that I actually have any control over the user's preferences.
Fact is I don't and neither does anybody else. And doing things that
way makes things a lot easier but still leaves a surprising amount of
room for creativity in page design.
Of course what works for me may not work for anybody else.
--
Ed Seedhouse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hyphens in class names
First post to the list ... I've been pulling my hair out trying to get a simple div of menu links to center on a page using class=Adm-Menu. On a lark, I removed the hyphen from the name and poof all was well. I found it odd that a hyphenated class name applied to h1 worked fine, but not for a hyphenated name on a div. While I think it's easier to just avoid hyphens, the team I'm developing with is using them extensively in CSS naming conventions. Does anyone have a resource for which elements are adversely affected by hyphens in the name. Does this apply to id's also? Thanks in advance, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizing: Why Is Firefox Different?
Anthony Baker wrote:
Have been looking to different font sizing methods and decided to go
with a method suggested by Dan Cederholm (as I recall) )where the
font size is defined in the BODY tag and then percentages are used to
increase or decrease the size. EMs are used for line height.
Fine, but avoid that 'font-size: 62.5%' or 'small' on body - unless you
like to have your fonts blown up to a really big size when subjected to
'minimum font size' in Firefox and Opera.
For more on the subject: http://www.gunlaug.no/contents/wd_1_03_04.html
Example of the base setting:
body { font-family: Arial, sans-serif; font-size: small; }
This has worked fine across Safari and IE browsers and should work on
Firefox, but I've noticed that there's a distinct difference in the
way Firefox is rendering text -- both on the Mac and on IE.
1: check 'minimum font size', since Firefox and Safari apply it
differently, as mentioned in my article.
Not much you can do about it if you use small font-size on body, since
that means body has 11pt (14px) font-size at _my_ end.
Does anyone know why this happens when IE and Safari work so well? It
may be a small issue, but damned if it isn't annoying. Overall, font
sizes seem smaller and line spacing tighter.
2: There are slightly different tip-over points for font-sizes in
different browsers. You'll have to figure out the average values that'll
work across browser-land if you want consistency - or else you'll get
+/- 1px variations.
Even on a site like the NY Times, this sort of thing seems to be
happening here and there -- particularly in the text of the body of
an article.
Does anyone have a favorite method?
Yes :-)
- I size fonts based on normal (12pt (16px)) - or not at all.
- I select average font-size values, and test across browser-land.
- I blow everything up in all browsers, and make sure it doesn't break
too badly at twice the normal font-size.
- I leave the rest to the visitor.
Would love to get something that's accessible and as consistent as
possible.
Accessible is what the visitor can access/read at their end. That has
nothing to do with font-size consistency.
Try out IE/win's accessibility mode -- ignore font sizes for size.
That option is all about accessibility and cross-site consistency.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizing: Why Is Firefox Different?
On 6/16/06, Anthony Baker [EMAIL PROTECTED] wrote:
Hey Folks,
Am wondering if someone has any info on this for me.
Have been looking to different font sizing methods
...
Does anyone have a favorite method?
I'll give you my favorite, which seems to work allright.
html { font-size:100.01%; /* fixes some browser bugs */ }
body { font-size:1em; /* always */ }
optional: #container { font-size:.9em; /* if I must */ }
everything thereafter is in em. I avoid hundredths (.95 for example)
because browsers round ems to a pixel size and hundredths can round
differently in different browsers. Tenths are a little more
predictable.
And I guess you could use percents just as well as ems, but I like ems.
and yes, I think I have seen that starting with font-size:small can
have problems in certain browsers, so there you go.
--
--
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizing: Why Is Firefox Different?
Have you ever tried using ems for font-sizing? I've always had very good luck with cross-browser compatability if I set my font sizes in ems. 1em is = 12px font, while .8em is equivalent to 10px. The code is simply: font-size: .8em; __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Base url for image property values?
Stephen Cunliffe wrote:
snip
if one of the styles, has something like:
div.foo{
background-image: url(pic.png);
}
Then it only works, when loaded from the root directory...
So, the question is, outside of defining several duplicate css files
(with different paths), or copying the images (there would likely be a
few), to each and every directory, is there a way around this?
/snip
You could use an absolute position:
div.foo{
background-image: url(/images/pic.png);
}
-Nick
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hyphens in class names
i use hyphens all the time in my css, for headers and divs as well as
everything else. just to make sure i'm not blowing steam, i made a
tiny little test page with a class of test-hyphen on an h1 and a
div and both worked fine in ff/ie/op.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
style type=text/css
.test-hyphen {
color: blue;
}
/style
/head
body
h1 class=test-hypheni should be blue/h1
div class=test-hyphen
i should be blue too
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Layout (Ben Liu)
Hi Ben, Try using borders instead of background color - They print, and if there's no content in your li's, it should work. -Chaim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Extending lines off the edge of the browser
I don't know how many of you are familiar with Wordpress, and more specifically the theme K2, but since I know next to nothing about CSS I built my site starting with those two installed and just customizing the stylesheet. I've been trying to get the two lines in my menu bar (they're 1px borders) to extend off screen on both sides (kind of like they do at the www.wordpress.org homepage). For some reason changing the margin only works in one direction, and changing the width of the segment seems to make the page itslef too wide (I get a scroll bar at the bottom). My site is at www.flickergaming.net. If anyone wants to shoot me a private e-mail I'd be more than happy to send over the stylesheet in case that makes it easier. Any help would be very welcome, Thanks, Jason Preston __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hyphens in class names
Thanks. It may have more to do with the template engine for this CMS. I
hadn't had issues with hyphens before, but thought I ought to check here.
Denise
-Original Message-
From: cj [mailto:[EMAIL PROTECTED]
Sent: Friday, June 16, 2006 3:18 PM
To: Denise
Cc: css-d
Subject: Re: [css-d] Hyphens in class names
i use hyphens all the time in my css, for headers and divs as well as
everything else. just to make sure i'm not blowing steam, i made a
tiny little test page with a class of test-hyphen on an h1 and a
div and both worked fine in ff/ie/op.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
style type=text/css
.test-hyphen {
color: blue;
}
/style
/head
body
h1 class=test-hypheni should be blue/h1
div class=test-hyphen
i should be blue too
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizing: Why Is Firefox Different?
Anthony Baker wrote: Am wondering if someone has any info on this for me. I think you have entered the twilight zone of personal opinion :-P . Not to mention font wars that some of us love, but are a no/no on this list. There are numerous pages on font-sizing in the list wiki. If you want a personal opinion, write *off-list.* Thanks, Anthony Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Extending lines off the edge of the browser
Jason -
Does this work?
#page {
background: white;
text-align: left;
margin: 0 auto;
position: relative;
/* The entire template's width is set in this class. */
border: 0px solid #ddd;
border-top: none;
}
I just removed the padding and the width from the #page
element...you'll need to go back in and add the appropriate padding
in a couple of places, or just change the width of the elements, but
I think it looked ok to me!
--
John Sico
On Jun 16, 2006, at 3:24 PM, Jason Preston wrote:
I don't know how many of you are familiar with Wordpress, and
more specifically the theme K2, but since I know next to nothing
about CSS I built my site starting with those two installed and
just customizing the stylesheet.
I've been trying to get the two lines in my menu bar (they're 1px
borders) to extend off screen on both sides (kind of like they
do at the www.wordpress.org homepage). For some reason changing
the margin only works in one direction, and changing the width of
the segment seems to make the page itslef too wide (I get a
scroll bar at the bottom).
My site is at www.flickergaming.net. If anyone wants to shoot me
a private e-mail I'd be more than happy to send over the
stylesheet in case that makes it easier. Any help would be very
welcome,
Thanks,
Jason Preston
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Extending lines off the edge of the browser
On 6/16/06, Jason Preston [EMAIL PROTECTED] wrote:
I don't know how many of you are familiar with Wordpress, and
more specifically the theme K2, but since I know next to nothing
about CSS I built my site starting with those two installed and
just customizing the stylesheet.
I've been trying to get the two lines in my menu bar (they're 1px
borders) to extend off screen on both sides (kind of like they
do at the www.wordpress.org homepage). For some reason changing
the margin only works in one direction, and changing the width of
the segment seems to make the page itslef too wide (I get a
scroll bar at the bottom).
My site is at www.flickergaming.net.
The easiest way to do it would be to have the header in a separate
container. Currently everything is in #page and #page has a fixed
width and it has auto margins. No way to fight with that. If you moved
the #header out of the #page div and put it on top, by itself, it
could have 100% width. Then you could put another container right
inside #header and give that the same width as #page and the same auto
margins and then you would have a fixed width header inside a 100%
width block, and you could style that 100% width block however you
want sounds complicated huh?
Or you could do what wordpress.org does, which is a total fake
trick... make the text bigger and you will notice that the text falls
out of the lines... because the lines are not borders, but rather a
background image that is repeated on the body. Here's the image:
http://wordpress.org/style/cool-fade.gif
here's the css:
body { background: url(cool-fade.gif) #fff repeat-x; ... }
It's not so good, because the text does fall out, but as you can see,
they get away with a much simpler technique.
Hope it helps.
--
--
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Extending lines off the edge of the browser
The easiest way to do it would be to have the header in a separate container. Currently everything is in #page and #page has a fixed width and it has auto margins. No way to fight with that. If you moved the #header out of the #page div and put it on top, by itself, it could have 100% width. Then you could put another container right inside #header and give that the same width as #page and the same auto margins and then you would have a fixed width header inside a 100% width block, and you could style that 100% width block however you want sounds complicated huh? I followed this concpetually - it makes sense (and thanks!). Is that a handy-dandy tutorial somewhere that would teach me how to lift this out of the #page? (see again: new to CSS, self-taught) - do I need to delve into the php to do this, or is it a matter of re-arranging elements in style.css (i.e. list the #header above the #page)? I'd prefer to do it this way because I'm leery of trying to line up images, etc. in multiple browsers. Also, isn't it lighter on bandwidth? Or you could do what wordpress.org does, which is a total fake trick... make the text bigger and you will notice that the text falls out of the lines... because the lines are not borders, but rather a background image that is repeated on the body. Here's the image: Cheaters! ;) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)
Hello,
I want to position a legend in a form. I've made te fieldset position:
relative, and the legend position: absolute.
It works in IE, but not in FF.
Any idea where is the problem?
Thanks
Here's the code:
**
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=ca
head
meta http-equiv=content-type content=text/html;
charset=utf-8 /
style type=text/css
form {
background: #fff;
border: 1px solid #ff8200;
border-top: 1em solid #ff8200;
margin: 0;
padding: 0;
width: 11em;
margin: auto;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
legend {
position: absolute;
top: -1em;
}
/style
title/title
/head
body
form action=
fieldset
legendLegend/legend
p
label
for=nomNom:/label
input
name=nom id=nom type=text value=Cercar /
/p
/fieldset
p
input
type=submit value=Cercar class=submit /
/p
/form
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Base url for image property values?
Stephen Cunliffe wrote:
Suppose a site has the following structure:
www
\things
\stuff
\other
\neat
\cool
In the ideal scenario, I'd like to reference one css file
site.css that sits in the root directory.
This works fine, and it will work if I link it in any page,
nested anywhere in the site but
if one of the styles, has something like:
div.foo{
background-image: url(pic.png);
}
Then it only works, when loaded from the root directory...
Because that's where the css file is.
So, the question is, outside of defining several duplicate css
files (with different paths), or copying the images (there
would likely be a few), to each and every directory, is there
a way around this?
Not sure if I understand the question correctly.
Images that are defined in the css file, have to be relative to
that css file.
If your CSS file is in /foo/bar, and your images are in
/foo/images, you reference them from your stylesheet as
url(../images/pic.png); or url(/foo/images/pic.png);, regardless
of where the html files are that the stylesheet is applied to.
No need to copy images into various directories, they can all
stay together in one place, just like the CSS file.
--
Els
http://locusmeus.com/
http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hyphens in class names
Denise wrote: First post to the list ... I've been pulling my hair out trying to get a simple div of menu links to center on a page using class=Adm-Menu. On a lark, I removed the hyphen from the name and poof all was well. I found it odd that a hyphenated class name applied to h1 worked fine, but not for a hyphenated name on a div. While I think it's easier to just avoid hyphens, the team I'm developing with is using them extensively in CSS naming conventions. Yup, me too. Work with hyphenated classnames on a daily basis. Does anyone have a resource for which elements are adversely affected by hyphens in the name. Does this apply to id's also? Do you have an example of that problem? I never encountered it. I think it's possible that you had the Adm-Menu styles overridden by accident, or maybe there was another mistake somewhere? -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with heading
Joanne wrote:
I'm putting together a site and am having trouble with the heading looking
right.
In Firefox, it's correct.
In IE, there is a small gap (so it looks like a small white line) to the
right of the #header
Hi Joanne,
This is due to the background-color #FF of the #main-div. Can be
ommited, then in IE it doesn't peep through with 1px or so.
In Opera, the #header is sitting too far down and to the right (ie: there's
a margin or padding for top left)
This can be solved by adding: body { margin: 0; padding: 0; }
Testpage with IE/Opera things changed is here
http://home.tiscali.nl/developerscorner/css-discuss/test-ccs.htm.
www.sparrowdog.com/cc/
(Obviously, the navigation wont' stay that colour!)
Any help would be greatly appreciated. I'm trying ever so hard to lay out
sites without tables :-)
To be encouraged: succes! :-)
francky
btw: the conditional comments for IE shouldn't be in the html, but in
the head, just before the /head.
[because it are comments, the html-validator doesn't give a remark about
this.]
btw-2: the logo-img can be cut of, and the bg-img can have just 1 or 2
px width (with background-repeat: repeat-x) to get some more download speed.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Extending lines off the edge of the browser
This may be the best way to go about it - just substituting this
code in gave me:
http://www.flickergaming.net/testblog/
I need to center the rest of the page and bring the admin tab
back into view. Where specifically do I need to plug in some
padding to get that done?
Thanks,
- Jason
Does this work?
#page {
background: white;
text-align: left;
margin: 0 auto;
position: relative;
/* The entire template's width is set in this class. */
border: 0px solid #ddd;
border-top: none;
}
I just removed the padding and the width from the #page
element...you'll need to go back in and add the appropriate
padding in a couple of places, or just change the width of
the elements, but I think it looked ok to me!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New IE7 hack/filter
Alex Robinson wrote: http://www.fu2k.org/alex/css/hacks/fuzzyspecificity A bit too much back and forth for my taste :-) Would be nice to know if it works though. Disclaimer: just because you can hack IE7, doesn't mean you should: a) the IE7 team will probably fix this (though who can say when); b) the IE7 team is adamant that you should use conditional comments instead of hacks. A 'conditional comment' is also a hack, and a not very nice way to avoid validation of those IE-corrections entirely. Disclaimer 2: if you really really do want to hack for IE7, you should also have a look at Brothercake's XXX method http://www.brothercake.com/site/resources/reference/xxx/ Those who prefer CSS-hacks instead of 'conditional comment'-hacks, should also look at... http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php ...but they are probably not any safer. Seem to work for now though. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image breakout at bottom Div
Trevor Boult wrote: Hi All, Brian Cummiskey pointed out to me the other day on this page: http://www.tboult.co.uk/dev/ag/crops/wheat.cfm That the image was breaking out of its div at the bottom. Brian suggested a clear both block element which I have just implemented and its OK in FireFox but not IE (Arrrgh) You will see in IE the div now spans accross the whole page. Any ideas as to how I can get the page to display correctly would be great. Hi Trevor, Perhaps try the html-validator and delete the 2nd body and correct some double ID's and other things? ;-) Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Absolute positioning of a legend in a form (works in IE but not in FF)
On 6/16/06, Bernat Lleonart [EMAIL PROTECTED] wrote:
Hello,
I want to position a legend in a form. I've made te fieldset position:
relative, and the legend position: absolute.
It works in IE, but not in FF.
Any idea where is the problem?
Did you try:
legend {
position: absolute;
top: -1em;
display:block;
}
?
--
--
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Strange IE Problem (bumping layout down on refresh)
I can't verify this (because I'm on a Mac) but the client says when they go to the site (http://dallasxtreme.com) it works fine the first time, but when they refresh it shows this- http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg Any idea what could be causing this? Again the URL is http://dallasxtreme.com Cheers! Cooper __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange IE Problem (bumping layout down on refresh)
On 6/17/06, Cooper Mor [EMAIL PROTECTED] wrote: I can't verify this (because I'm on a Mac) but the client says when they go to the site (http://dallasxtreme.com) it works fine the first time, but when they refresh it shows this- http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg Any idea what could be causing this? Again the URL is http://dallasxtreme.com I get that on first load in IE 6. Maybe there is a margin that is collapsing in most browsers but not in IE? The gap is about 18 to 20px. -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange IE Problem (bumping layout down on refresh)
Christian Montoya wrote: Again the URL is http://dallasxtreme.com I get that on first load in IE 6. Maybe there is a margin that is collapsing in most browsers but not in IE? The gap is about 18 to 20px. I think you have to set margin:0 on form in IE. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Absolute positioning of a legend in a form (works in IE but not in FF)
Hi,
On 6/17/06, Christian Montoya [EMAIL PROTECTED] wrote:
Did you try:
legend {
position: absolute;
top: -1em;
display:block;
}
?
I've just tried it but it doesn't work.
Thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange IE Problem (bumping layout down on refresh)
Cooper Mor wrote:
I can't verify this (because I'm on a Mac) but the client says when
they go to the site (http://dallasxtreme.com) it works fine the first
time, but when they refresh it shows this-
http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg
Any idea what could be causing this?
Again the URL is http://dallasxtreme.com
Cheers!
Cooper
XP
I did not have the problem you describe here, Cooper.
Might be their file setting?
ToolsInternetOptionsTemporaryInternetFilesSettingsThere are 4 or 5
choices.. mine is set at: automatically.
Aside. Both columns need some padding at the bottom in IE (ff op are
ok I think). You have the fonts set in em's. This triggers a font-bug in
IE that makes them go goofy on zoom.
This should fix it:
html { font-size: 100%;)
body {font-size: 1em;
Regards,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Absolute positioning of a legend in a form (works in IE but not in FF)
Bernat Lleonart wrote:
Hello,
I want to position a legend in a form. I've made te fieldset position:
relative, and the legend position: absolute.
It works in IE, but not in FF.
see the Firefox installation folder,
/res/forms.css
legend {
position: static ! important;
float: none ! important;
}
By design, you cannot position or float it from within an author style
sheet.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange IE Problem (bumping layout down on refresh) - dallasx
On 06/06/16 18:30 (GMT-0400) Cooper Mor apparently typed: I can't verify this (because I'm on a Mac) but the client says when they go to the site (http://dallasxtreme.com) it works fine the first time, but when they refresh it shows this- http://img.photobucket.com/albums/v654/coopermor/scrnsht.jpg Any idea what could be causing this? No, but no matter how many times I refresh it always looks like that in IE. If I didn't see it differently on FF, I'd think it was supposed to be that way. IOW, I don't see the difference as a problem. It's a lot worse at high resolution, normal for fixed width layouts (please note the disclaimer at the bottom of the setup page): http://mrmazda.no-ip.com/SS/coopmo1.jpg hires screenshot on Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050921 Epiphany/1.8.0 (Same look as FF 1.5.0.4) http://mrmazda.no-ip.com/tmp/sc-coopmo.html SS setup -- All have sinned fall short of the glory of God. Romans 3:23 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] minor IE hover problem
I coded this page a while ago and thought I had the small pictures with the borders hovering properly in IE, but checking today I find I am mistaken. http://www.kipke.com/events.html http://www.kipke.com/kipke.css http://www.kipke.com/kipkeIE.css As you may notice, the border color does change on an actual mouse click, but not on a regular mouseover. I also tested things out by removing the a:focus img and a:active img options, leaving only a:hover img with exactly the same results as having all three in place. I figure my usage is not the same as the well documented IE issue regarding applying the hover pseudo-class to non-anchor elements. Shouldn't this work? Thanks, Andy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Sizing: Why Is Firefox Different?
On 06/06/16 14:49 (GMT-0400) Jade Rauenzahn apparently typed:
I've always had very good luck with cross-browser compatability if I set my
font sizes in ems. 1em is = 12px font, while .8em is equivalent to 10px.
In most browsers, 'html, body {font-size: 1em}' produces 12pt text, not
12px text. With the most common browser/system DPI (96), 12pt is 16px.
.8 X 12pt is 9.6pt (12.8px), not 10pt, which different browsers
variously may round either to 12px (truncation) or 13px (mathematical
rounding).
--
All have sinned fall short of the glory of God. Romans 3:23 NIV
Team OS/2 ** Reg. Linux User #211409
Felix Miata *** http://mrmazda.no-ip.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
