[css-d] Layout based in em's: different widths FF/IE
Hello,
I have this problem: I am creating a layout based in em's. I define
font-size in the body to be 62.5%, so then I can work as I was using
px. In Firefox/Win everything is correct, but in IE/Win widths are
smaller. I have isolated the problem in the following example: the box
is 100px wide in FF, but it is 99px wide in IE.
Is that a bug? How could I fix it?
Thank you
!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 /
title/title
style type=text/css
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
}
#box {
width: 10em;
background: gray;
}
/style
/head
body
div id=box
phello/p
/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] Layout based in em's: different widths FF/IE
Hi Bernat, Bernat Lleonart wrote: I am creating a layout based in em's the box is 100px wide in FF, but it is 99px wide in IE. Only 1px difference? I'd expect that much from using percentages to do the page width! That could easily be rounding error. Felix might chip in that you shouldn't apply the sizing to the main font declaration: http://archivist.incutio.com/viewlist/css-discuss/73749 I haven't made my mind up about that yet, I've a lot of reading and testing to do first. Layouts based on em's are not often a good idea, unless you can set a max-width on them (including IE if your user based includes that). http://archivist.incutio.com/viewlistcss-discuss/74715 This *might* not apply to your page/site/experiment, but with no URL to see or motive given... Kind regards, -Alastair __ 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] IE lines up correctly, nothing else does
David Laakso wrote:
Liz Rainey wrote:
http://www.ci.killeen.tx.us/Test/index.asp in IE7 looks just the way
it's supposed to look.
#breadcrumb {
...
/*float: left;*/
...
}
#quickmenu-pos {
margin: 0 20px 0 0; /*0px 20px 0px 418px;*/
...
/* clear: left;*/
...
}
#logo {
margin: 15px 0 0 50px; /*15px 450px 0px 0px;*/
float: left; /*right;*/
...
}
#header {
margin: 15px 20px 0 0; /*15px 20px 0px 150px;*/
float: left; /*right;*/
/*clear: left;*/
...
}
If we are asked to fix the rest, you should validate your page first.
A question is if LostFound is supposed to be a child of Animal Control
and Trash Collection a child of Public Services? Or should Animal, Trash
and Recycling build just a sort of column next to the second level?
But what is the meaning of this big gap in the third level?
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] link style interference
Debbie Campbell wrote:
.content-mid-link a, a:link, a:visited {
.content-mid-link a =
Selects any a element that is a descendant of any element with a class
attribute that contains the word content-mid-link.
a:link =
Selects any a element whose target has not been visited.
a:visited =
Selects any a element whose target has been visited.
The commas between these three selectors do not change the meaning.
/Any a element on the page/ is selected in selector 2+3.
If your intention was to select the links inside .content-mid-link only,
then this should be sufficient:
.content-mid-link a {property: value; ...}
Revise your selectors. For example
#navigation li a:hover, a:active { color: fuchsia}
will select /any/ active link on your page.
Probably your intention was
#navigation li a:hover, #navigation li a:active { color: fuchsia}
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] Help with IE discrepancies
On Tue, Jun 13, 2006 at 11:36:15AM -0600, Josh Stephenson wrote: Familiarize yourself with the box model hack: http://css-discuss.incutio.com/?page=BoxModelHack Thanks for this, very helpful! This has worked for things like positioning my boxes so they don't overlap in IE, and they still look right in Firefox. I'm using the tiny hack where quotes are used around the alternative value in the stylesheet, as this seemed easiest to understand and to do. However, it hasn't fixed one problem; the purple navigation bar with the images are you a... etc. and then the purple triangle on the end. The triangle is the correct size, but the navbar is a couple of pixels taller than it should be, which means that the triangle doesn't line up neatly in IE. Can anyone suggest a fix? Or should I stop using a table there, and position the navbar and triangle elements separately in CSS? The site is: http://www.wdam.co.uk/clients/dynam/hh/ Thanks again! -- 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] Image not loading on first load: IE6 CSS problem? [SOLVED]
It appeared to be a problem in the server at the client's end. Thanks everyone for your feedback. Arno __ 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] Background color looks right in IE, nothing else.
Morning!
Okay so the site looks right in IE and I know that IE makes some guesses
as to what you want to see so...how do I make [LINK:
http://pj-chron.com/redesign/] http://pj-chron.com/redesign/ look right in
Netscape, Firefox ect. In other words, how it does in IE.
The code is compliant :
[LINK:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpj-chron.com%2Fredesign%2Fcssfile.cssusermedium=all]
http://jigsaw.w3.org/css-validator/v...usermedium=all
Here is the relevant css code:#container{
width: 760px;
height: auto;
margin:0 auto;
padding:10px 10px 0 10px;
background: #ff url(images/contbg.png) no-repeat;
border: none;
color:#222;
}
Thanks for the help
~Mindy
__
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] Layout based in em's: different widths FF/IE
On 06/06/14 04:29 (GMT-0400) Alastair Campbell apparently typed: Layouts based on em's are not often a good idea, unless you can set a max-width on them (including IE if your user based includes that). http://archivist.incutio.com/viewlistcss-discuss/74715 Is there a typo in that URL? I get 404 on it. :-( -- 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/
Re: [css-d] Layout based in em's: different widths FF/IE
On 06/06/14 04:42 (GMT-0400) Bernat Lleonart apparently typed:
On 6/14/06, Alastair Campbell [EMAIL PROTECTED] wrote:
Bernat Lleonart wrote:
I am creating a layout based in em's the box
is 100px wide in FF, but it is 99px wide in IE.
Only 1px difference? I'd expect that much from using percentages to do
the page width! That could easily be rounding error.
I have found that, as you said, it might be a rounding error, the
problem comes from the text-size declaration in the body. I have tried
setting it to 100%, and then, in order to have a 100px wide box, I do
this:
body {
font-size: 100%;
}
#box {
font-size: 1em;
width: 6.25em; /* 100/16 */
background: gray;
}
That works correctly in both browsers.
Nick Fitzsimons explained why less than a month ago:
http://lists.css-discuss.org/mailman/private/css-d/2006-May/064598.html
No doubt Rutter was unaware of the issue when he wrote his infamous blog
article http://www.clagnut.com/blog/348/ .
--
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] text only parser
Is there such a thing as a text only parser where you can add tags and only create the text only version of the stuff inbetween the tags http://www.its.ex.ac.uk/webmatters/betsie.shtml http://www.bbc.co.uk/cgi-bin/education/betsie/parser.pl The bbc seem to use one called betsie and would like to know if this or any other is available to use/buy. Ta, R. __ 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] Lost in IE
if you go to www.sweetsunshine.com and click on the Our Products button, all the content is blank in IE. It displays fine in firefox. I really have no idea why it is happening. If someone knows of a good tool for finding this type of thing let me know. the page is dynamic a template and some code. I am not sure if the issue is css or html; I am leaning on CSS though. Travis D. Falls * This communication, including attachments, is for the exclusive use of addressee and may contain proprietary, confidential and/or privileged information. If you are not the intended recipient, any use, copying, disclosure, dissemination or distribution is strictly prohibited. If you are not the intended recipient, please notify the sender immediately by return e-mail, delete this communication and destroy all copies. * __ 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] Lost in IE
if you go to www.sweetsunshine.com and click on the Our Products button, all the content is blank in IE. Displays fine in IE6 with me. However, you have 24 mark-up errors. Go sort these as first pass and then check again. See: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sweetsunshine.com%2F Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.8.4/363 - Release Date: 13/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] Background color looks right in IE, nothing else.
mindy wrote:
http://pj-chron.com/redesign/
Here is the relevant css code:#container{
width: 760px;
}
The above width keeps IE/win happy, as it acts as a 'hasLayout'[1] trigger.
Other browsers need a proper 'Block formatting contexts'[2], so adding...
#container {overflow: hidden;}
...will work in most.
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#q15
--
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] Lost in IE
Displays fine in IE6 with me. And in IE5 for 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] Lost in IE
Falls, Travis D (HTSC, CASD) wrote: if you go to www.sweetsunshine.com and click on the Our Products button, all the content is blank in IE. If you mean the Our Flavors button: yes, IE6 and 7 fail to show the Chilis sauces from sweet to hot. This page does not have a doctype. On a local copy, inserting a doctype was all to fix it. Alternatively, adding haslayout like zoom:1 to #mailcol and #centercol fixed it, too. Ian already said you have lots of errors. Fixing these bugs should be your first step in debugging CSS. 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] Problems styling an hr in FF 1.5.0.4
Allison,
I really wish I knew. I'm from the tables as layout school of thought
and have only fairly recently started to deal with the voodoo that is
css extensively. So I really couldn't tell you if that article is out of
date.
However, I can share this approach that I found - haven't tested it
fully yet across browsers. http://www.sovavsiti.cz/css/hr.html I tweaked
their output because I didn't need/want to use a background image.
In the style sheet...
div.hr {
height: 1px;
background-color:#333;
}
div.hr hr {
display: none;
}
Where this displays the thin black rule...
div class=hrhr //div
Will that provide the level of accessibility you are looking for? Of
would the none property on the hr style confuse the reader?
Actually, looking at the result, I may elect to remove the border
approach I was using and go this route instead.
Regards,
Daniel
-Original Message-
From: Allison Bloodworth [mailto:[EMAIL PROTECTED]
Sent: Tuesday, June 13, 2006 5:38 PM
To: Venditelli, Daniel - Web Development Administrator;
css-d@lists.css-discuss.org
Subject: RE: [css-d] Problems styling an hr in FF 1.5.0.4
Thanks very much Daniel--I was actually using borders originally but
decided
I wanted to use an hr for its semantic value. We are a public
university
and I think this could be an accessibility issue for blind users as they
wouldn't see the borders (and the div contains nothing else to tell
them
it's a section break.
Is the article I referenced about how to accomplish this in
Mozilla-based
browsers out of date? I got the link from this thread from only a year
ago:
http://forum.stylegala.com/about1038.htmlhighlight=
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Venditelli,
Daniel
- Web Development Administrator
Sent: Tuesday, June 13, 2006 5:30 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Problems styling an hr in FF 1.5.0.4
Allison,
I had a similar issue earlier today and ended up using this instead:
#subsection {
position: static;
border-width: 1px;
border-top-style: solid;
border-color: #ccc;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
And then this where I wanted the rule:
div id=subsection/div
I'm controlling the width with a parent div but you should be able to
just add width to the above. Also I'm using the margin info for dealing
with text on the same page. You may or may not need that.
Best of luck,
Daniel
---
Daniel E. Venditelli, jr
Web Development Administrator
City of Yuma
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Allison
Bloodworth
Sent: Tuesday, June 13, 2006 5:23 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Problems styling an hr in FF 1.5.0.4
Hi,
I am trying to style an hr and am having trouble applying a color to
it in
Firefox 1.5.0.4/PC. It looks fine in IE 6.0/PC. I'm following these
instructions: http://www.sovavsiti.cz/css/hr.html
And the code is:
div class=AdminTablelessDivider id=input name=inputhr/div
.AdminTablelessDivider hr
{
color: #CC;
background-color: #CC;
height: 1px;
}
I can't show the page because it's a web app that requires log in. Any
idea
what could be wrong? I searched the archives and didn't find anything.
Thanks!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
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] text only parser
The bbc seem to use one called betsie and would like to know if this or any other is available to use/buy. http://sourceforge.net/projects/betsie/ -- Marten Gallagher annerykiln.co.uk Web Design and Management __ 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] Table Question
I am very new to CSS and have a table problem. I think the problem is that I'm not using CSS for layout, only for the type. So, all of my basic content appears in a table cell. The problem comes in when I try to put a table within that cell. I can't figure out how to control the attributes of the type in that table. This is what I want my type to look like: http://www2.viterbo.edu/inservice.aspx?id=1956 This is what my tables look like: http://www2.viterbo.edu/inservice.aspx?id=1952 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/
Re: [css-d] Table Question
On 14/06/06, Debra Kappmeyer [EMAIL PROTECTED] wrote: I am very new to CSS and have a table problem. I think the problem is that I'm not using CSS for layout, only for the type. So, all of my basic content appears in a table cell. The problem comes in when I try to put a table within that cell. I can't figure out how to control the attributes of the type in that table. This is what I want my type to look like: http://www2.viterbo.edu/inservice.aspx?id=1956 This is what my tables look like: http://www2.viterbo.edu/inservice.aspx?id=1952 Thanks, Deb Please, ditch that outmoded way of doing things and learn css layout! -- http://www.web-buddha.co.uk http://www.projectkarma.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] Table Question
I am very new to CSS and have a table problem. I think the problem is that I'm not using CSS for layout, only for the type. So, all of my basic content appears in a table cell. The problem comes in when I try to put a table within that cell. I can't figure out how to control the attributes of the type in that table. This is what I want my type to look like: http://www2.viterbo.edu/inservice.aspx?id=1956 This is what my tables look like: http://www2.viterbo.edu/inservice.aspx?id=1952 Quite simple, the table that holds the inservice schedule is written thus: h3Fall 2006 – August 18–25, 2006/h3 p/p table cellpadding=4 width=100% align=left border=1 Change border to =0 Now go look at Zoe Gillenater's article on faux columns at http://www.communitymx.com/content/article.cfm?cid=AFC58 or the many articles on layout in the archives. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.8.4/363 - Release Date: 13/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] Table Question
On 14-Jun-06, at 2:13 PM, Dave Goodchild wrote: On 14/06/06, Debra Kappmeyer [EMAIL PROTECTED] wrote: I am very new to CSS and have a table problem. I think the problem is that I'm not using CSS for layout, only for the type. So, all of my basic content appears in a table cell. The problem comes in when I try to put a table within that cell. I can't figure out how to control the attributes of the type in that table. This is what I want my type to look like: http://www2.viterbo.edu/inservice.aspx?id=1956 This is what my tables look like: http://www2.viterbo.edu/inservice.aspx?id=1952 Thanks, Deb Please, ditch that outmoded way of doing things and learn css layout! While I'd have worded it a little differently, I agree with Dave. :) That layout shouldn't be terribly difficult to achieve using CSS. Further, what's wrong with using lists as you have? __ 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] Need help with IE float bug (I think)
Hello, I'm new to the list and looking for help with a problem I'm having with my site in Internet Explorer. http://www.patiastephens.com/ I built this version of my site a year or so ago as my first experiment in learning CSS. I found it very difficult but loved the results. Recently I worked up the courage to change a few things -- colors, header sizes, etc. I must've broken something in either the style sheet or template, because the site has stopped displaying properly in IE. It looks fine in Firefox Win/Mac and Safari. I think it's a float bug, but I have been struggling with it for a few days and can't figure out where I'm going wrong. Can anyone help me out? Thank you. Patia __ 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] display: hide / display:visible question.
Ok, here is my problem/scenario: I have a ton of static information... (about 30 pages worth) on a webpage [code] pbla bla bha/p pblah blah blah/p ... ... pblah blah page 15/p ... pblah blah blah page 30/p [/code] What I (think I) want to do is tag only a selected few paragraphs etc.. [code] div class=abrv p blah blah blah page 15/p /div [code] Then I need to have the ability to hide all the content except what was tagged (class=abrv). Essentially I want to have 1 document, but have the ability to show an abbreviated version of it at the push of a button and then also be able to flip back to the full unabbreviated version. The current system is working with 2 separate files... but I'm sure with the power of styles, this could be simplified into 1 document. Am I even on the right track? Could point me in a good direction or give an example of how I'd go about doing this? Chris __ 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] ie float drop
David Laakso wrote: On this test page http://www.dlaakso.com/four-col/4c.html the right column (fuchsia) drops in ie at text-size 'largest' with /ignore font-sizes specified on this Web page checked/. ~odilonRedon Resolved on this end (xp:ie/6.0) at least. The float drop seems to have been caused by a number of very long words in a narrow column. It was a *markup* problem, resolved by hyphenation of those long words with a soft hyphen: shy; or, in my case, numeric entity #173;. Best, ~odilonRedon __ 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] Extra horizonal line I can't get rid of
Hi,
Somewhere, a horizonal line has shown up, and I
have not been able to figure out how to get rid of it. That would be
the line above the text in the footer box of the page.
This appears to be being caused by a global UL definition in the CSS:
ul { /* needs the Holly hack to avoid IE bugs */
border-top: 1px solid #000;
}
Adding a border: 0; to the definition for .footer2 ul removes it.
HTH,
--
Kenny Millington BSc(Hons)
E-Mail: [EMAIL PROTECTED]
Website: http://www.kennynet.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] display: hide / display:visible question.
Chris - that's definitely something you can handle with CSS and a touch
of javascript. My preference for this type of behavior is to have the
text visible in it's CSS definition, then hide it with javascript. That
way if the visitor doesn't have javascript (and thus the mechanism to
make the text displayable) enabled, they're not going to miss out on
your content.
You can do this in a few lines of javascript[1], but be aware that
different browsers have slightly different ways of adjusting the
visibility of page elements.
If you're not afraid of taking on a bit of page-weight (about 55k),
prototype[2]/script.aculo.us[3] have some nice methods for
show/hide/toggle[4] text:
Element.show('ID');
Element.hide('ID');
Element.toggle('ID');
1. http://www.google.com/search?q=javascript+toggle+visibility
2. http://wiki.script.aculo.us/scriptaculous/show/Prototype
3. http://script.aculo.us/
4. http://wiki.script.aculo.us/scriptaculous/show/Element.hide
http://wiki.script.aculo.us/scriptaculous/show/Element.show
http://wiki.script.aculo.us/scriptaculous/show/Element.toggle
--
s:r {
scott reston
http://scott.therestons.com
scott at therestons * com
}
Chris C wrote:
Ok, here is my problem/scenario:
I have a ton of static information... (about 30 pages worth) on a
webpage
[code]
pbla bla bha/p
pblah blah blah/p
...
...
pblah blah page 15/p
...
pblah blah blah page 30/p
[/code]
What I (think I) want to do is tag only a selected few paragraphs etc..
[code]
div class=abrv
p blah blah blah page 15/p
/div
[code]
Then I need to have the ability to hide all the content except what was
tagged (class=abrv).
Essentially I want to have 1 document, but have the ability to show an
abbreviated version of it at the push of a button and then also be able
to flip back to the full unabbreviated version.
The current system is working with 2 separate files... but I'm sure with
the power of styles, this could be simplified into 1 document.
Am I even on the right track? Could point me in a good direction or give
an example of how I'd go about doing this?
Chris
__
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] How do I set a table cell alignment
Hello,
I'm a newbie and have been trying to set a table cell alignment in a
style sheet. I've tried everything I can think of to identify the
table TD correctly as news but it's not working. Any suggestions
as to what I'm doing wrong or how to do it right will be very
appreciated.
My HTML code for the table in question:
center
table id=news width=100% border=0
tr
td id=news align=left width=33%
!--RSS Image and link--
a
href=http://www.leg.state.mn.us/webcontent/lrl/rss/just.xml;Library
News RSS feednbsp;nbsp;IMG
src=/graphics/xml_36x14.gif alt= width=36 height=14
border=0/a/tdtd align=middle
a href=http://www.leg.state.mn.us/lrl/rss/rss.asp;About
RSS/a/td
!--RSS Image end--
td align=right
IMG src=/graphics/wireless3.gif alt=For free wireless Internet
access in the library you need a laptop computer or PDA enabled to
use WiFi 802.11b or 802.11g. border=no
/td
/tr/table/center
My CSS:
TABLE#news
{
TABLE-LAYOUT: auto;
WIDTH: 100%;
COLOR: white;
BORDER-WIDTH: 0;
}
TABLE#news TD
{
BORDER-WIDTH: 1;
VERTICLE-ALIGN: middle
}
I think the problem is with my syntax in the HTML, or where I'm
placing the ID tag. Thank you for any assistance.
Julie Dinger
Reference/Web Services Librarian
Minnesota Legislative Reference Library
www.leg.state.mn.us
__
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] How do I set a table cell alignment
if it was my page and i really had to use a table, i'd do something like:
table id=news
tr
td class=news
[link]
/td
td class=about
[link]
/td
td class=graphic
[graphic]br/[it's a tall one]br/[really tall]
/td
/tr
/table
#news {
border: none;
width: 100%;
vertical-align: middle;
/* you set a color but no background so i'm not sure if i should copy
that part */
}
#news td {
border: 1px solid black;
}
.news {
text-align: left;
width: 33%;
}
.about {
text-align: center;
}
.graphic {
text-align: right;
}
__
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] Need help with IE float bug (I think)
[EMAIL PROTECTED] wrote:
I'm new to the list and looking for help with a problem I'm having
with my site in Internet Explorer.
Welcome to the list.
http://www.patiastephens.com/
I think it's a float bug, but I have been struggling with it for a
few days and can't figure out where I'm going wrong.
No float bug. It is one of those /easy-to-make/ 'code bugs':-)
IE/win is unable to recover from this...
h2{ font-family: Verdana, Arial, Helvetica, sans-serif;
/* - start quote and no end quote - just delete */
...so all following styles are ignored.
The CSS validator does pick up that 'code bug' - as a 'Parse Error'...
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.patiastephens.com%2Fusermedium=all
...so you could have saved some debugging time.
Comment: that HTML 4.01 source-code has too many errors, according to
the validator...
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.patiastephens.com%2F
You should try to clean it up a bit.
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] Site check - if you would be so kind
If anyone has time, I would be grateful to have an eyeball cast over this site - www.bsq.com.au/acstest/index.html www.bsq.com.au/acstest/acs.css The site looks exactly as I would want in FF1.5 and IE6 running on windowsXP with minimal hacking, and although I've seen a few screen captures from browsercam, I haven't really been able to test in other browsers. I am particularly interested in why Safari seems to put the image on the index page BELOW the #content div and not above as it appears in the document flow. Sadly I don't think I'll have time to fix the site for IEMac, but I must admit to being a little curious as to why it looks so bad on browsercam - colours are all wrong, logo doesn't appear correctly, float drop of #content (but incidentally not the top image which is wider?!) etc. Thanks David Sharp __ 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] Site check - if you would be so kind
On 14-Jun-06, at 9:38 PM, David Sharp wrote: If anyone has time, I would be grateful to have an eyeball cast over this site - www.bsq.com.au/acstest/index.html www.bsq.com.au/acstest/acs.css I can confirm: that it is indeed wonky in Safari (2.0.3) looks to be fine in DeerPark (Firefox) and Opera. falls apart in IE 5. Looks like something is pushing all your content down. All OS X 10.4.6 Sorry, don't have time to look at your code. __ 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] Need help with IE float bug (I think)
[EMAIL PROTECTED] wrote: However, I DID attempt to check the style sheet yesterday with Dreamweaver's validator, and it found parsing errors with other bits of code that did not seem to have anything wrong with them. Is the w3 validator more accurate? The W3C validators are definitely more accurate - although not flawless. You're not designing _for_ DW -- only _in_ it, so forget _its_ errors. I'm sorry, I know my code is a mess and needs cleaning up. I'm just a bit intimidated about where to start. Any advice welcome. If you can set up HTMLTidy so it actually works, then it will make wonders cleaning up your source-code. Think Tidy has only really missed 1 error - regarding Microsoft's downlevel 'conditional comment' (which is *not* valid) - for the 3 years I have used it. However, Tidy is most often made useless by default when incorporated in HTML-editors, so you'll have to set it up yourself, for your use and choice of DocType. Also, and *very* important: HTMLTidy can *not* correct what it doesn't understand, and it can *not* make badly designed layouts work. Usually not a problem. Some online versions and sources... http://valet.htmlhelp.com/tidy/ http://infohound.net/tidy/ http://tidy.sourceforge.net/ ...and my own comments on Tidy (and editors)... http://www.gunlaug.no/contents/wd_1_07.html ...that maybe aren't so relevant since I write manually in accordance with XHTML DocTypes. 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] li problems
Here is my site: www.treycopeland.net I'm trying to get the links lined up over the dark bar. In Firefox it shows up, but in IE it doesn't. Can anyone help me get this working? I'm on irc.freenode.net #9rules if you wanna talk there. Thanks, Trey Copeland __ 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] Site check - if you would be so kind
On Jun 15, 2006, at 11:07 AM, Donovan Bond wrote: On 14-Jun-06, at 9:38 PM, David Sharp wrote: If anyone has time, I would be grateful to have an eyeball cast over this site - www.bsq.com.au/acstest/index.html www.bsq.com.au/acstest/acs.css I can confirm: that it is indeed wonky in Safari (2.0.3) Safari (all versions, including WebKit nightly builds). The div #content is set to 'display:table-cell'. That is nicely broken in Safari, causing it to jump to the top of the parent block. IE 5.x Mac doesn't support display:table-cell at all, but when it encounters this, it pushes the content out of (below) the box. Why do you need to set that div to 'display:table-cell' ? From a quick browsing around the site, I see no reason at all. Note: IE 5 Mac also has some problems with your image replacement technique on the h1, and the #wrapper isn't painted at all (lack of clearing, the 'easy clearing' technique isn't fully implemented). Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check - if you would be so kind
Philippe Wittenbergh wrote: Safari (all versions, including WebKit nightly builds). The div #content is set to 'display:table-cell'. That is nicely broken in Safari, causing it to jump to the top of the parent block. IE 5.x Mac doesn't support display:table-cell at all, but when it encounters this, it pushes the content out of (below) the box. Why do you need to set that div to 'display:table-cell' ? From a quick browsing around the site, I see no reason at all. __ 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/ Thanks Phillipe for this extremely helpful information. The 'display:table-cell' was a quick and dirty hack to get around the lack of min-height in IE, because I wanted pages with minimal content to stretch at least as far as the end of the navigation bar at the side. At the time this seemed the quickest and easiest way of doing it, although it did cause problems with my solution for ie's 3px bug on the image at the top. So it looks like I need another solution for min-height... Why can't all the browsers just get along...? Cheers, David __ 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] 2 equal-height columns and onetruelayout (OTL)
I *think* I followed the guidelines and code explicitly in OTL(positioniseverything.net) but my page is still broken in IE 6, Opera 7.11 and Netscape 8.1. I've validated my html but the css doesn't validate because of the browser hacks (and probably my own mistakes, too). I'm trying to teach myself css instead of tables and am trying to replicate this page: http://66.116.129.70/shockney/reunion_table.php The left column is fixed width and the right column fills the rest of the page. Here's the new page and the css http://66.116.129.70/shockney/reunion_css.htm http://66.116.129.70/shockney/cssexpt.css In IE, the left margin for content is wrong, but if I make it work there, then it goes wrong in NS and O and gets hidden under the menu block. And in NS and O, the content of content begins below the end of menu content. I know I still have some other tweaking to do, but I want to get these columns right. TIA, E. __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.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] no background-color with your color warnings
Hello, Sorry if this is a foolish question, but I haven't found the answer elsewhere so far. I have a small site at http://www.bear.net/ - the css is at http://www.bear.net/css/default.css When I run it through the Wc3 css validator at http://jigsaw.w3.org/css-validator/validator?uri=http://bear.net/ it passes, however it gives a bunch of warnings almost all related to background-color or color For example: * Line : 15 (Level : 1) You have no background-color with your color : a:link * Line : 19 (Level : 1) You have no background-color with your color : a:visited * Line : 22 (Level : 1) You have no background-color with your color : a:hover * Line : 26 (Level : 1) You have no background-color with your color : a * Line : 31 (Level : 1) You have no color with your background-color : #header * Line : 76 (Level : 1) You have no background-color with your color : #header-items a * Line : 83 (Level : 1) You have no background-color with your color : #header-search-button:hover * Line : 83 (Level : 1) You have no background-color with your color : #header-search-button:hover * Line : 105 (Level : 1) You have no color with your background-color : #nav * Line : 128 (Level : 1) You have no background-color with your color : #nav a * Line : 133 (Level : 1) You have no background-color with your color : #nav a:hover * Line : 141 (Level : 1) You have no color with your background-color : #member-nav * Line : 167 (Level : 1) Same colors for color and background-color in two contexts #content and #member-nav ul li And many more. I guess I missed where I am supposed to, for example, set a background color for a:link, a:visited and so forth. Thank you for any clarity on this subject. __ 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] Relative positioning and widths
Hi everyone
Is it possible to have floating divs side-by-side without the width
specified or with just one set explicitly?
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.
Here's sample code I'm using...
#left {
float: left;
width: 15em;
}
#right {
float: left;
}
div id=left/div
div id=right/div !-- drops below left div --
Is there a way around what I'm trying to do?
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] Site check - if you would be so kind
Thanks to Phillipe I have now solved my min-height problem in Safari and
IEmac (fingers crossed this hasn't created problems elsewhere!).
I have also learned that earlier versions of IE don't support margin :
auto, and that quote marks on the uris of background images, for example:
background-image : uri('someimage.gif')
(which are incidentally so kindly added to css by front-page), don't
play nicely with IE mac. Isn't css fun!!
I'm sure I have overlooked many other little things on this site - I
really appreciate everyone's comments.
Cheers,
David
__
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] Site check - if you would be so kind
David Sharp wrote: I'm sure I have overlooked many other little things on this site - I really appreciate everyone's comments. Recordings: Without table-cell on #content and with clear:both on h2, the h2 on the recordings pages clear the left navigation. Critical Acclaim: I do not like the combination of italics, bold, and center for quotes. Although its ubiquitous. I like the photography. The photographer nicely picked the green and gray from your page. ;) The site looks friendly. 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] Web Developer Extension for Netscape
Hi all Is there a web developer extension for Netscape? I am after the edit CSS option :-) Thanks Bojana Global Summit 2006: Technology Connected Futures -- 17-19 October, Sydney, Australia. Visit our website http://www.educationau.edu.au/globalsummit2006 for further details. _ IMPORTANT: This e-mail, including any attachments, may contain private or confidential information. If you think you may not be the intended recipient, or if you have received this e-mail in error, please contact the sender immediately and delete all copies of this e-mail. If you are not the intended recipient, you must not reproduce any part of this e-mail or disclose its contents to any other party. This email represents the views of the individual sender, which do not necessarily reflect those of education.au limited except where the sender expressly states otherwise. It is your responsibility to scan this email and any files transmitted with it for viruses or any other defects. education.au limited will not be liable for any loss, damage or consequence caused directly or indirectly by this email. __ 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/
