[WSG] To float or not to float
Say you want to create this two-column layout:
div id=leftContent for id left Goes Here/div
div id=rightContent for id right Goes Here/div
What, if any, are the advantages and/or disadvantages of (1) floating
neither column compared to (2) floating one column? Sample CSS:
(1) floating neither column:
#left {
position: absolute;
left: 10px;
width: 45%;
border: 1px solid red;
}
#right {
position: absolute;
right: 10px;
width: 45%;
border: 1px solid black;
}
(2) floating one column (say the left):
#left {
float: left;
left: 10px;
width: 45%;
border: 1px solid red;
}
#right {
position: absolute;
right: 10px;
width: 45%;
border: 1px solid black;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] To float or not to float
The biggest drawback of absolute positioning is that it is removed from the normal flow of the document. This means that any other content below will ignore the absolutely positioned content. For example, a footer may slide up under and be obscured by two absolutely positioned containers. Can I suggest two other options: 1. a float left and a normal flow right column with left margin to give the illusion of columns (this should work well but will show the dreaded 3 pixel jog where the left column content butts against the right column content. 2. float both columns - without seeing your particular circumstances, this is my preferred method as it immediately solves the three pixel jog issue. There a probably mean other ways, each with their own strengths and weaknesses. Russ Say you want to create this two-column layout: div id=leftContent for id left Goes Here/div div id=rightContent for id right Goes Here/div What, if any, are the advantages and/or disadvantages of (1) floating neither column compared to (2) floating one column? Sample CSS: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] To float or not to float
On 25/4/05 5:26 PM, russ - maxdesign [EMAIL PROTECTED] wrote:
The biggest drawback of absolute positioning is that it is removed from the
normal flow of the document. This means that any other content below will
ignore the absolutely positioned content. For example, a footer may slide up
under and be obscured by two absolutely positioned containers.
This is good to know.
Can I suggest two other options:
1. a float left and a normal flow right column with left margin to give the
illusion of columns (this should work well but will show the dreaded 3 pixel
jog where the left column content butts against the right column content.
2. float both columns - without seeing your particular circumstances, this
is my preferred method as it immediately solves the three pixel jog issue.
At the moment, I just talking hypothetically -- I'm trying to get a better
understanding of how web standards work.
In my email, I was originally going to have a third option of floating both
columns, but when I tested it in Safari the columns sat on top of one
another instead of side-by-side. What is wrong with my CSS? This is what I
tried:
#right {
float: right
right: 10px;
width: 45%;
border: 1px solid black;
}
#left {
float: left;
left: 10px;
width: 45%;
border: 1px solid red;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] To float or not to float
In my email, I was originally going to have a third option of floating both columns, but when I tested it in Safari the columns sat on top of one another instead of side-by-side. What is wrong with my CSS? This is what I tried: Well, for a start, when added together the amounts equal more than 100% which means they will not fit within the browser window - which is 100%. :) 10 + 45 + 45 + 10 = 110 Also, remember that making the amount exactly 100% is dangerous as percentage rounding can occur. Another problem is making them all add up to 100% then adding a border - even a 1 pixel border on one container may force them over the 100% total and make one container drop below the other. HTH Russ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IMAGE(was Mystical belief etc)
Naah. Foster, if he needs to, would use Opera's zoom feature . . . :-) Bob McClelland, Cornwall (U.K.) www.gwelanmor-internet.co.uk - Original Message - From: Ricci Angela [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Monday, April 25, 2005 9:03 AM Subject: RE: [WSG] IMAGE(was Mystical belief etc) By the photo, Foster seems to be around 70 years old... and I bet he has problems reading he's own site's tiny little letters. Cheers, Angela On 4/20/05, Collin Davis [EMAIL PROTECTED] wrote: I would argue that in a heartbeat - when you're talking about an architectural or otherwise design showcase site - what designer is going to give half a though to blind or visually impaired users? Quite honestly, in a situation like this site... who cares about them? - it's not for people who are blind or visually impaired. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] To float or not to float
Ignore. I misread your 10px as 10% Russ = Idiot Well, for a start, when added together the amounts equal more than 100% which means they will not fit within the browser window - which is 100%. :) 10 + 45 + 45 + 10 = 110 Also, remember that making the amount exactly 100% is dangerous as percentage rounding can occur. Another problem is making them all add up to 100% then adding a border - even a 1 pixel border on one container may force them over the 100% total and make one container drop below the other. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] To float or not to float
Hope Stewart wrote: ... What, if any, are the advantages and/or disadvantages of (1) floating neither column compared to (2) floating one column? Sample CSS: ... Absolute positioning of larger parts of a page, is *not* recommended. Only elements with fixed dimensions, in an environment of fixed dimensions, are somewhat safe for AP. Uncontrolled overlapping is the biggest problem, often causing ugly and inaccessible pages. Absolute positioning are best used only for small parts that don't rely on font-size and amount of content for their dimensions. Floats will interact with, and adjust to, the environment, and the environment will adjust to floats -- as long as there are no AP-elements involved that aren't controlled by the floats themselves (complex matter). Floats can be made to walk in and out of the flow, so floats can often be made to behave like AP-elements, without the negative effects (another complex matter, involving negative margins) A simple combination of floats and non-positioned flow is the safest control-method for layout. A two-column is easy to make stable with 2 floats, and a three-column is easy to make stable with 3 floats or a combination of 2 floats and flow. My preference is to float all major parts of just about any page, and use AP for positioning small parts from within the floats. - Your hypotetical 2-column float has a CSS-flaw. 'left: 10px;' and 'right: 10px;' can't be used for floats. Use 'margin-left' and 'margin-right' instead. Look at this page for ideas: http://www.alistapart.com/articles/negativemargins/ regards Georg -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] help, please!!
Hello all, I've been developing a site based on the Ruthsarian layouts and it's working ok except in IE 6.0, where there's a problem which is leaving me baffled, so I'm hoping that someone will be able to help. The site is http://www.ely.anglican.org/parishes/camgsm/new_site/index.html The css is at http://www.ely.anglican.org/parishes/camgsm/new_site/css/colors.css http://www.ely.anglican.org/parishes/camgsm/new_site/css/complex.css http://www.ely.anglican.org/parishes/camgsm/new_site/css/simple.css The problem is that the header doesn't always display at all on some pages, such as http://www.ely.anglican.org/parishes/camgsm/new_site/activities/music/index.html. There isn't a problem if you set IE's options to refresh on every visit to the page, but that's not going to help most people! I'd be really grateful if anyone could come up with some suggestions as to what's going on. Many thanks Rachel Rachel Campbell ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Styling of legend in Firefox
I am having some difficulties to position the content of legend using CSS in Firefox. Firefox (and IE) default positions the legend so that it overlaps with the border of the fieldset. Which in general is quite nice, but in my particular case I want the content of the legend to be inside the fieldset's border, not overlapping it. IE behaves quite friendly in this case: I give the legend a padding-top and it moves down into the fieldset. But Firefox wrecks things by moving the fieldset at the same time as the padding. Another interesting thing is that I cannot give the legend a background-color that would run the entire length of the fieldset. Even if I give legend a display:block and a set width, these settings are being ignored in Firefox. I'd be interested to hear whether somebody else has found a way to solve this problem? To me it seems that Firefox forces a certain layout on the legend and there's no possibility to move away from that. Thanks for the feedback! Andreas Boehmer User Experience Consultant Phone: (03) 9386 8907 Mobile: (0411) 097 038 http://www.addictiveMedia.com.au Consulting | Accessibility | Usability | Development ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] help, please!!
-Original Message- From: Rachel Campbell [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 7:50 PM To: wsg@webstandardsgroup.org Subject: [WSG] help, please!! Hello all, I've been developing a site based on the Ruthsarian layouts and it's working ok except in IE 6.0, where there's a problem which is leaving me baffled, so I'm hoping that someone will be able to help. Rachel, I couldn't recreate your problem (checked in IE6), but it sounds to me as if you've got a Peekaboo bug. Here is an article that might help you: http://www.positioniseverything.net/explorer/peekaboo.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] To float or not to float
Hope Stewart schrieb:
In my email, I was originally going to have a third option of floating both
columns, but when I tested it in Safari the columns sat on top of one
another instead of side-by-side. ...:
#right {
float: right
right: 10px;
width: 45%;
border: 1px solid black;
}
#left {
float: left;
left: 10px;
width: 45%;
border: 1px solid red;
}
The problem here is the first rule: you forgot the ;, so a parser
could read this:
#right {
width: 45%;
border: 1px solid black;
}
now you might wonder why this does not fit side-by-side in FF, OP, but
in IE.
IE/Win has a buggy float implementation. And an element with a dimension
like #right is layoutet as a rectangular object which indeed sits at
the right side of the preceding float #left.
compare IE and FF/Op/Saf:
#right {
width: 45%;
background: maroon;
}
#left {
float: left;
width: 25%; /* for demonstration */
background: navy;
}
div id=leftContent for id left goes here/div
div id=rightLorem ipsum put in a long text here so we can see
what happens when the line wraps./div
IE6: the maroon block starts next to the navy float with a a width of
45% (overall width: 25% + 45%)
IE5.5: the maroon block starts next to the float, with a width of (45%
of the space beneath the float 75% = 33,75%, overall 25%+33,75% =
smaller than IE6)
Browsers that follow the specs show: the maroon block and the float
display at the same top left of the containing element. The maroon block
is overlapped by the float, and the line boxes float literally. The
overall width of this construct is 45% (smallest).
Another aspect why I'd vote for floats is that recent browsers do have
some problems calculating percentage widths of a. p. blocks with respect
to their containing block (and not to the parent).
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Styling of legend in Firefox
-Original Message- From: Andreas Boehmer [Addictive Media] [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 7:51 PM To: wsg@webstandardsgroup.org Subject: [WSG] Styling of legend in Firefox I am having some difficulties to position the content of legend using CSS in Firefox. Oh, I forgot the URL: http://www.addictivemedia.com.au/clients/gta/home2.html What I am trying to do is to get the legend Login Details to display inside the background image. Thanks! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
Andreas Boehmer [Addictive Media] I am having some difficulties to position the content of legend using CSS in Firefox. Legends are notoriously difficult (impossible?) to style consistently across browsers, and yes...in addition to that, FF seems to put additional roadblocks in the way - see for instance the recent thread about my little frugal google experiment http://www.mail-archive.com/wsg%40webstandardsgroup.org/msg16240.html Now, as far as giving the legend a background as wide as the fieldset: as you found out, FF ignores any width even if you try to force display:block You may have some success using padding on the legend - but that will obviously make for inconsistent results. You may have to experiment with more esoteric solutions such as giving a non-repeating, top positioned background to the fieldset itself (but again, I'd be surprised if it can be made to work reasonably well across browsers) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
Andreas Boehmer [Addictive Media]
Oh, I forgot the URL:
http://www.addictivemedia.com.au/clients/gta/home2.html
If you can live with the weird margin at the top (which shouldn't affect
the form, but it does ?!), you could try something like
#main fieldset {position:relative; border: none; }
#main legend {position: absolute; margin-top: 50px;}
This works for FF only...IE seems to get this one right, for a change,
and makes a mess. *shrug*
Patrick
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Styling of legend in Firefox
Hi
Firefox has this to say about the way it styles forms by default. If
you can override these then it may help..
These default browser styles are found in res/*.css of your firefox install dir.
e.g
/usr/lib/firefox-1.0.2/res/forms.css in my (and this) case
To get around the issue, I style the form not the fieldset tag so that
the legend appears fully enclosed by the form. This still works
semantically as, although the fieldset is invisible, it is linked
structurally to the legend in the underlying markup... therefore
providing the captioning effect outlined in the W3C rec
17.10
The LEGEND element allows authors to assign a caption to a FIELDSET.
The legend improves accessibility when the FIELDSET is rendered
non-visually.
As for which user agent renders it correctly visually -- none of them
do as that part is not outlined in the relevant standards documents.
You could probably style the top of the form tag with a background
image so that the legend appears to stretch all the way across.
HTH
James
---
/**
Styles for old GFX form widgets
**/
@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace
to HTML */
@namespace xul
url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
*|*::-moz-fieldset-content {
display: block;
height: inherit; /* Need this so percentage heights of kids work right */
}
form {
display: block;
margin: 0 0 1em 0;
}
/* miscellaneous form elements */
legend {
padding-left: 2px;
padding-right: 2px;
border: none;
}
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding: 0.35em 0.625em 0.75em;
border: 2px groove ThreeDFace;
}
label {
cursor: default;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Styling of legend in Firefox
-Original Message-
From: Patrick Lauke [mailto:[EMAIL PROTECTED]
Sent: Monday, 25 April 2005 8:51 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Styling of legend in Firefox
If you can live with the weird margin at the top (which
shouldn't affect
the form, but it does ?!), you could try something like
#main fieldset {position:relative; border: none; }
#main legend {position: absolute; margin-top: 50px;}
This works for FF only...IE seems to get this one right, for a change,
and makes a mess. *shrug*
Nasty browser business. :)
I am tempted to double up my legend:
fieldset
legendLogin Details/legend
div class=titleLogin Details/div
[...]
/fieldset
#main legend{display:none}
.title{background-image:url(images/fieldset_small_bg.jpg);
background-repeat:no-repeat;}
This way I get valid HTML (legend inside fieldset) as well as having a title
to position and style however I want. But if somebody views this page
without css they will be wondering what the hell I was thinking. And it's
not really in the idea of web standards...
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Styling of legend in Firefox
-Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 9:01 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox To get around the issue, I style the form not the fieldset tag so that the legend appears fully enclosed by the form. This still works semantically as, although the fieldset is invisible, it is linked structurally to the legend in the underlying markup... therefore providing the captioning effect outlined in the W3C rec I was thinking about that, but it will only work if I have got no more than one fieldset per form. In my case most of the pages of my website will have multiple fieldsets in each form. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of legend in Firefox
Hi Then what about using some relative positioning to offset the legend? position : relative; top : 10px; /* i think that is right - or is it -10px to move it down the required amount ? */ Cheers James On 4/25/05, Andreas Boehmer [Addictive Media] [EMAIL PROTECTED] wrote: I was thinking about that, but it will only work if I have got no more than one fieldset per form. In my case most of the pages of my website will have multiple fieldsets in each form. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] To float or not to float
On 25/4/05 8:09 PM, Ingo Chao [EMAIL PROTECTED] wrote:
The problem here is the first rule: you forgot the ;, so a parser
could read this:
#right {
width: 45%;
border: 1px solid black;
}
D'oh!!
now you might wonder why this does not fit side-by-side in FF, OP, but
in IE.
IE/Win has a buggy float implementation. And an element with a dimension
like #right is layoutet as a rectangular object which indeed sits at
the right side of the preceding float #left.
compare IE and FF/Op/Saf:
#right {
width: 45%;
background: maroon;
}
#left {
float: left;
width: 25%; /* for demonstration */
background: navy;
}
div id=leftContent for id left goes here/div
div id=rightLorem ipsum put in a long text here so we can see
what happens when the line wraps./div
IE6: the maroon block starts next to the navy float with a a width of
45% (overall width: 25% + 45%)
IE5.5: the maroon block starts next to the float, with a width of (45%
of the space beneath the float 75% = 33,75%, overall 25%+33,75% =
smaller than IE6)
Browsers that follow the specs show: the maroon block and the float
display at the same top left of the containing element. The maroon block
is overlapped by the float, and the line boxes float literally. The
overall width of this construct is 45% (smallest).
Another aspect why I'd vote for floats is that recent browsers do have
some problems calculating percentage widths of a. p. blocks with respect
to their containing block (and not to the parent).
Thanks for your advice!
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Styling of legend in Firefox
I did some with legend tag on my website on all those form leilds. check this out,,, http://www.meucarronovo.com.br Andreas Boehmer [Addictive Media] wrote: -Original Message- From: James Ellis [mailto:[EMAIL PROTECTED]] Sent: Monday, 25 April 2005 9:01 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox To get around the issue, I style the form not the fieldset tag so that the legend appears fully enclosed by the form. This still works semantically as, although the fieldset is invisible, it is linked structurally to the legend in the underlying markup... therefore providing the "captioning" effect outlined in the W3C rec I was thinking about that, but it will only work if I have got no more than one fieldset per form. In my case most of the pages of my website will have multiple fieldsets in each form. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** i did -- att, Genau L. Jnior ___ WebDesigner/Media Developer www.meucarronovo.com.br/quemsomos.php +55 (41)342-5757 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] help, please!!
Rachel Campbell wrote: I've been developing a site based on the Ruthsarian layouts and it's working ok except in IE 6.0, where there's a problem which is leaving me baffled, so I'm hoping that someone will be able to help. ... There isn't a problem if you set IE's options to refresh on every visit to the page, but that's not going to help most people! Hi Rachel, I cannot for the life of me replicate the problem - I've tried IE6 on two different PCs, one running WinXP and one Win98. The IE options on both are set to 'check automatically' but I've tried the other settings too without any luck! Perhaps you could try a version of IE6 on another PC - if the pages work on there, you may have at least narrowed the problem down to your machine! Good Luck!! Stuart ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] 4 px gap in Safari and Gecko based browsers
Hi, I have this page that have 4px gap between two divs in Safari and all
Gecko based browsers, amazingly IE 5/6 and Mac IE 5.2 got it right.
Can't think of anything that messes up.
Here are the codes for the and menu. The Flash banner in the pageHeader
is 131 x 780 px exactly.
http://www.clients.lotusseeds.com/catering.html
#pageHeader {
height: 131px;
width: 780px;
margin: 0px;
}
#pageHeader span { display: none;}
#navcontainer
{
height: 27px;
width: 750px;
position: relative;
background: #99;
margin: 0px 15px 0px 13px;
}
Before I inserted the flash banner, I had a background image in #pageHeader
that doesn't have the 4px gap.
http://www.clients.lotusseeds.com/catering.html
Any idea? Thanks!
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] help, please!!
Rachel Campbell schrieb: The problem is that the header doesn't always display at all on some pages, such as http://www.ely.anglican.org/parishes/camgsm/new_site/activities/music/index.html. There isn't a problem if you set IE's options to refresh on every visit to the page, but that's not going to help most people! (Another point: check majestas_cr.gif for inner transparent pixel.) I wasn't able to replicate the problem first, but when I go to http://www.ely.anglican.org/parishes/camgsm/new_site/activities/music/index.html and click on Church diary (which links to itself: href=index.html) yes, I see the header disappearing, but when you hover over the location where the horizontal nav should be, it re-appears, so, as Andreas already mentioned before, that looks like a peek-a-boo, Fix: apply the holly Hack to #pageFrame That peekaboo demo was created mid-2002. The other day, MS has announced that it will be fixed in 2005's IE7beta. Wow! Expected in 2011, when the last IE6 is buried, we can forget this fix! Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
Sorry, realized I got the url wrong. Here is the right one:
http://www.clients.lotusseeds.com/catering_new.html
And the css here:
http://www.clients.lotusseeds.com/css/joaquindeli.css
Thanks!
tee
From: tee [EMAIL PROTECTED]
Reply-To: wsg@webstandardsgroup.org
Date: Mon, 25 Apr 2005 07:00:20 -0700
To: wsg@webstandardsgroup.org
Subject: [WSG] 4 px gap in Safari and Gecko based browsers
Hi, I have this page that have 4px gap between two divs in Safari and all
Gecko based browsers, amazingly IE 5/6 and Mac IE 5.2 got it right.
Can't think of anything that messes up.
Here are the codes for the and menu. The Flash banner in the pageHeader
is 131 x 780 px exactly.
http://www.clients.lotusseeds.com/catering.html
#pageHeader {
height: 131px;
width: 780px;
margin: 0px;
}
#pageHeader span { display: none;}
#navcontainer
{
height: 27px;
width: 750px;
position: relative;
background: #99;
margin: 0px 15px 0px 13px;
}
Before I inserted the flash banner, I had a background image in #pageHeader
that doesn't have the 4px gap.
http://www.clients.lotusseeds.com/catering.html
Any idea? Thanks!
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] killing the object tag
XHTML 2 is going to get rid of the img tag, which I think is good. object is a far better tag mainly because of it's fallback options, but the problem with object is that is has a very messed up history and as a result, it's practically impossible to use it for anything useful as long as your clients are using IE. IE doesn't support object type='image/png' and if you try to do something like object type='image/jpg' it inserts nasty scroll bars. object is also associated with ActiveX so if you have security levels above normal, IE will issue a security warning even if your just trying to display a poor little png. So here is my suggestion: Let's change object to obj for XHTML 2. 1. Standards-compliant browsers can support it very easily because they already have support of object, they can just transfer it. 2. On older versions of IE (or any browser), it will just go to the fallback solution, which is good because object wasn't ever any good in IE anyways. I'm assuming people with other browsers can easily update it. 3. IE will have to redo there object support at some point anyways. This will will allow them to do that without breaking bugwards compatibility. Something they are ever so committed to. 4. It's 4 characters shorter. 5. not as important, but can we change 'data' to 'src'. data is confusing because it isn't consistent with the other elements. What do you guys think of this? Is their somewhere I can submit this too? Alan Trick ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
tee schrieb:
Sorry, realized I got the url wrong. Here is the right one:
http://www.clients.lotusseeds.com/catering_new.html
Thanks for the URL.
#intro object {display: block;} /* do not touch */
should fix it here. :)
Objects are inline replaced elements like images, they sit on the baseline.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] may 1 reboot
Hi All Who is participating in the May 1 CSS reboot? http://www.cssreboot.com/ I have been working on a new design for my blog and need to post the blackout screen tonight. For those working in wordpress, do you have any suggestions for putting up the black screen and still being able to test? I'm thinking of naming index.php to index2.php and adding the blackout screen as index.html. Sorry about this only being vaguely ontopic. Ted http://www.tdrake.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
tee schrieb:
Sorry, realized I got the url wrong. Here is the right one:
http://www.clients.lotusseeds.com/catering_new.html
Thanks for the URL.
#intro object {display: block;} /* do not touch */
should fix it here. :)
Objects are inline replaced elements like images, they sit on the baseline.
Ingo
Thanks Ingo. It fixed but create a new problem for IE 5.2 Mac. It doubles
the space.
http://clients.lotusseeds.com/ie5.jpg
I know DW design view has display problem but this is something unusual as
soon as I inserted your code to my css file:
http://clients.lotusseeds.com/dw.jpg
IE 5.2 Mac has always been a problem to me, but I don't like hacks at all.
tee
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] killing the object tag
What do you guys think of this? Is their somewhere I can submit this too? From http://www.w3.org/TR/2004/WD-xhtml2-20040722/ Public discussion may take place on [EMAIL PROTECTED] (archive). To subscribe send an email to [EMAIL PROTECTED] with the word subscribe in the subject line. hth RI ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
tee schrieb:
Thanks Ingo. It fixed but create a new problem for IE 5.2 Mac. It doubles
the space.
http://clients.lotusseeds.com/ie5.jpg
I know DW design view has display problem but this is something unusual as
soon as I inserted your code to my css file:
http://clients.lotusseeds.com/dw.jpg
Sorry. The mac mini is still on top of my wishlist, but I hope someone
else comes to aid.
for the time being, let me guess it is described somewhere here
http://www.l-c-n.com/IE5tests/misc#gap
What about deleting the line-height? or give a margin-bottom:0; ?
ot forget my code and apply vertical-align: bottom; ?
#intro object{vertical-align: bottom;}
ah, decisions, decisions.
Ingo
(p.s. I don't /like/ hacks too, like surgery.)
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] killing the object tag
Alan Trick wrote: XHTML 2 is going to get rid of the img tag, which I think is good. object [...] it's practically impossible to use it for anything useful as long as your clients are using IE. Alan, XHTML 2 is not meant to be backwards compatible. As IE doesn't officially support XHTML 2 at all (as, to my knowledge, no browser does natively), this discussion is irrelevant, IMHO. XHTML 2 should not be sent to anything other than user agents which (will eventually) support it. Any similarities between XHTML 2 and XHTML 1.x are purely coincidental, if you will. -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] may 1 reboot
how are you going to do this? im rebooting as well and I have no clue, replying to this one of list would probably be better thanks [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] may 1 reboot
I have this setting DirectoryIndex index.phtml index.php default.php index.html index.htm on my server, so I just have to upload index.phtml - it has bigger priority. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
tee wrote:
Sorry, realized I got the url wrong. Here is the right one:
http://www.clients.lotusseeds.com/catering_new.html
Simple fix:
#intro {line-height: 0;}
Note also: LOCATION is too high up in Opera. Some adjustments needed
to top of that list.
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] killing the object tag
Alan Trick wrote: When (if)? IE supports HTML it may still want to be able to support it's old buggy object. Just look at all their CSS bugs they have in the name of 'backwards-compatibily' and 'consistancy'. But that's my point: XHTML 2 as a specification is not meant to be backwards compatible, so there's no excuse or reason for saying our XHTML 2 implements it this way so that older browsers can access it as well. -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Re: IMG and text alignment
Thanks to Leslie and Alan for responding. Leslie, I tried what you were suggesting but to no avail. Alan, the -.25 setting seem to work (even though my wysiwig forces the header underneath the photos, but all is fine on previewing in the browser). Alan, you said, Well personally I would kill the tables, it's much better than it was before, but if you can, it would be nice to get rid of them all together. I'm all for that. I just don't know how to do that. I was operating under Zeldman's suggestion to not worry about light tables. Any suggestions on how to proceed would be greatly appreciated. http://wickedsisterdance.org/who_trial.shtml http://wickedsisterdance.org/css/styles.css Thanks again! White Ash ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] RE: Re: IMG and text alignment
Also, another piece of my post that I have not seen a response to: Next question ~ is there a way to have the items in my navbar automatically stretch from the left margin to the right margin? I currently have a 10px right margin setting for each item in the css, but that doesn't seem very scientific to me and leaves a ragged right margin. Here's my first page and relevant css file: http://wickedsisterdance.org/who_trial.shtml http://wickedsisterdance.org/css/styles.css Any input would be appreciated. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] may 1 reboot
Jan Brasna wrote: I have this setting DirectoryIndex index.phtml index.php default.php index.html index.htm on my server, so I just have to upload index.phtml - it has bigger priority. I thought about joining, but I found out about it too late, and there is no way I could get a new design for my site, but what you could do is put everything in a special directory and maybe password protect it, so you won't have to rename anything, and people won't be able to see it. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] RE: Re: IMG and text alignment
White Ash wrote: is there a way to have the items in my navbar automatically stretch from the left margin to the right margin? I currently have a 10px right margin setting for each item in the css, but that doesn't seem very scientific to me and leaves a ragged right margin. relevant css file: http://wickedsisterdance.org/who_trial.shtml http://wickedsisterdance.org/css/styles.css If the space from left to right margin is 100%, you can put a percentage of padding on the first four nav links equal to 1/5 of the space that isn't taken up by the links' text. Try changing your #nav a margin-right from 10px to 2.76% and you get pretty close. Assigning an id to the last link, making its right margin 0 and increasing the others a little should get it even closer. hth, Carol ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
On 26 Apr 2005, at 1:08 am, tee wrote:
#intro object {display: block;} /* do not touch */
should fix it here. :)
Objects are inline replaced elements like images, they sit on the
baseline.
Ingo
Thanks Ingo. It fixed but create a new problem for IE 5.2 Mac. It
doubles
the space.
http://clients.lotusseeds.com/ie5.jpg
for IE mac, you can try 2 things:
1/ instead of #intro object {display: block;}, use #intro object
{vertical-align:bottom;}
2/ if that fails, just hide the #intro object {display: block;} from IE
mac. The backslash hack will do fine
http://www.l-c-n.com/IE5tests/hiding/#anhid
Philippe
---/---
Philippe Wittenbergh
now live : http://emps.l-c-n.com/
code | design | web projects : http://www.l-c-n.com/
IE5 Mac bugs and oddities : http://www.l-c-n.com/IE5tests/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Re: digest for wsg@webstandardsgroup.org (Out of office)
I will be out of the office from noon on Monday 4/25 through and including Wednesday 4/27. ITS Help Desk, 612-659-6600 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
You have got what I want, but as far as I can see you didn't use legend for it, but used a h4 for the titles of your fieldsets. I want to do the same, but using legends if possible. From: Genau L. Júnior [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 8:44 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox I did some with legend tag on my website on all those form leilds. check this out,,, http://www.meucarronovo.com.br ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling of legend in Firefox
-Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Monday, 25 April 2005 9:47 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling of legend in Firefox Hi Then what about using some relative positioning to offset the legend? position : relative; top : 10px; /* i think that is right - or is it -10px to move it down the required amount ? */ I tried that, but Firefox would pretty much ignore it. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling of legend in Firefox
Yes I have had this problem too. I end up trying to ignore the inconcistency and just live with it. What does look cool is if you put a padding (0.2em) or something small on the legend. Give it a border, the same colour as the fieldset, then a new background colour. add cursor: pointer, and with a little javascript you can have a collapsing form :) I love it, rarely do it, but its a cool application I think. :) Cheers! - Chris Andreas Boehmer [Addictive Media] wrote: I am having some difficulties to position the content of legend using CSS in Firefox. Firefox (and IE) default positions the legend so that it overlaps with the border of the fieldset. Which in general is quite nice, but in my particular case I want the content of the legend to be inside the fieldset's border, not overlapping it. IE behaves quite friendly in this case: I give the legend a padding-top and it moves down into the fieldset. But Firefox wrecks things by moving the fieldset at the same time as the padding. Another interesting thing is that I cannot give the legend a background-color that would run the entire length of the fieldset. Even if I give legend a display:block and a set width, these settings are being ignored in Firefox. I'd be interested to hear whether somebody else has found a way to solve this problem? To me it seems that Firefox forces a certain layout on the legend and there's no possibility to move away from that. Thanks for the feedback! Andreas Boehmer User Experience Consultant Phone: (03) 9386 8907 Mobile: (0411) 097 038 http://www.addictiveMedia.com.au Consulting | Accessibility | Usability | Development ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
