[WSG] Table versus 4 floated divs
Hi all I have a page at: http://www.xert.com.au/workshop/p77ji/ where I have used an isolated table to promote two products. Would it be better to use 4 floated div's here instead? I've not used that many in a row before... My css file is at: http://www.xert.com.au/workshop/p77ji/styles/home.css Thanks Sarah -- XERT Communications email: [EMAIL PROTECTED] office: +61 2 4782 3104 mobile: 0438 017 416 http://www.xert.com.au/ web development : digital imaging : dvd production ** 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] Table versus 4 floated divs
G'day I have a page at: http://www.xert.com.au/workshop/p77ji/ where I have used an isolated table to promote two products. Would it be better to use 4 floated div's here instead? I've not used that many in a row before... If it's not tabular data (and it doesn't look like it), the answer seems pretty clear :-) But you might get away with just having two paragraphs (or divs). If the images are only decoration (they have empty alt attributes so must not have meaning) why not put them in as a (css) background and give the paragraph (or div) some left padding? The only potential pitfall I can see with that is calculating widths - if we have 200px padding on the left, how wide do we make the div to make it 50% of page width. (Yes, easier with tables :-) Incidentally, going along with recent threads, the page doesn't quite fit (horizontally) at 800x600 (on my system). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] Table versus 4 floated divs
should never use tables for layout if possible. Try the following:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleTwo columns using CSS/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
style type=text/css media=screen
#columns {
margin:2em;
border:1px solid #000;
/* This line will size the div around the float right */
float:left;
/* This line will remove the double margin issue with IE */
display:inline;
text-align:center;
}
#columnRight {
float:right;
background-color:#CCC;
width:50%;
}
/style
/head
body
div id=columns
div id=columnRightpSome text goes here/ppSome text goes
here/ppSome text goes here/ppSome text goes here/p/div
pSome text goes here/ppSome text goes here/ppSome text goes
here/ppSome text goes here/p
/div
/body
/html
Two divs should do the 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] Table versus 4 floated divs
yus, the middle div has a width of 750px, but then it also has a left/right margin of 40px = 830px try removing the margins and use padding instead. ** 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] Table versus 4 floated divs
http://www.jomni.com/sandbox/wheatgrass.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] Problem in Firefox on initial page load only
Em 27/jul/2005, às 06:46, Philippe Wittenbergh escreveu: I can't see the problem (latest nightly build, OS X). I suspect some insufficient clearing however, something the 1.0x builds suffer from, at times. At the bottom of the page, you have a p class=clear/p make that p class=clearnbps;/p p class=clearnbsp;/p Note, nbsp; and not nbPS; (adding a non-breaking space in it). Clear your cache, and try again. Philippe -- Atentamente, Jorge Laranjo site http://thetaoofwebdesign.tk/ email [EMAIL PROTECTED] msn [EMAIL PROTECTED] skype jorge.laranjo aim [EMAIL PROTECTED] sapo [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] Things I didn't realise, part 126
Thanks to Rimantas, the problem is solved. For those who wish to know,
it seems that putting:
body {background : #fff url(../graphics/aab3aa_gradient.jpg)
repeat-x fixed left top; }
is fine. Works as it should do. However, putting:
body,html {background : #fff
url(../graphics/aab3aa_gradient.jpg) repeat-x fixed left top; }
throws it into confusion, since the fixed background behaves differently
towards body and html and it gets in a muddle.
Thanks Rimantas, that's brilliant!
Bob McClelland
www.gwelanmor-internet.co.uk
Rimantas Liubertas wrote:
On 7/26/05, designer [EMAIL PROTECTED] wrote:
...
So this means that support for background fixed works in 5.5, but was
dropped in 6, unless it's in quirks. A backward step if ever there was!
Can this be right? Or am I too tired . . .
Works perfectly for me in IE6 'standards' mode.
Can you share code?
Regards,
Rimantas
**
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] link ?
G'day
I'd say your problem is here:
#navwrapper li a:link, a:visited {
See the a:visited? That affects ALL links on the page.
I think you meant to say:
#navwrapper li a:link, #navwrapper li a:visited {
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
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] Pure CSS Pop-ups using images... but as background-images in span
M,
I think the solution is here...
http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp
but I cant get it to work yet in IE.
My set of rules are
div.maincont a {
position: relative;
}
div.maincont a span {
display: none;
}
div.maincont a:hover span {
text-indent: 0;
display:block;
position: absolute;
top: 0;
left: 225px;
width: 320px;
height: 425px;
padding: 0;
margin: 0;
z-index: 10;
background: url(tsunami_9.jpg) left center no-repeat;
}
any advice?
Thanks in advance and excuse my english.
JL
Julián Landerreche wrote:
Hi,
I'm playing with both Pure CSS Popup technics developed by Eric Meyer.
http://www.meyerweb.com/eric/css/edge/popups/demo.html
http://www.meyerweb.com/eric/css/edge/popups/demo2.html
I'm wondering if there is any issue by doing a merging between both
technics.
I want to show popup images, but not by using img tags (the second
technic).
So, my idea is to add an empty (or not) span tag inside the a tag.
Example:
a href=http://www.mydomain.com/; Link text spantext/span/a
Then, in the stylesheet, I add something like this:
a span {
display: none;
background: url(image.jpg) left center no-repeat;
}
a:hover span {
display: block;
position: absolute;
top: 0;
left: 225px;
width: 320px;
height: 425px;
z-index: 10;
background: url(image.jpg) left center no-repeat;
}
I'm testing it and it seems to work flawlessly in Mozilla Firefox 1.0.6
But it doesnt work... guess where... in IE 6!!
Why it doesnt work? What am I doing wrong?
It seems to be exactly the SAME technic used by Eric Meyer in the Pure
CSS Popup technics.
Thanks in advance.
Julián Landerreche
**
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
**
**
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] Site Check: Broadleaf
I also realize that ZenGardens is sorta frozen in space and time and Eric would have done some things differently if he was doing it today - I found that real interesting reading in the csszengardens book. I think you mean Dave [Shae] (not Eric) Cheers Nathan - Original Message - From: Donna Jones [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Tuesday, July 26, 2005 11:51 AM Subject: Re: [WSG] Site Check: Broadleaf Not exactly a clean user experience then. Particularly troublesome when designers rely on the background image and define colour for their text to be readable against it, but fail to provide fallback background colour. Zengarden is an experimental site, showcasing in many cases how one can push the boundaries using CSS. I would not hold it as a model for what should or shouldn't be implemented on a production site. Hi Patrick: In this case there is fallback colour. Its perfectly readable w/out the background image, at least it is when I hide background image w/ the webdev toolbar in Firefox. and from what i've observed when it is loading. okay okay *smile* maybe zengardens is not a good example, I mainly mentioned it because I was familiar with it, of course, and knew that others would be on here, also. I also realize that ZenGardens is sorta frozen in space and time and Eric would have done some things differently if he was doing it today - I found that real interesting reading in the csszengardens book. I think there are issues w/ this design but I can't see how the background image is particularly an issue - if it was embedded in the html, altogether different, obviously. so okay, I'm a newby and can't believe I'm arguing with you experts (maybe because its too hot here in Maine even though its much better than a lot of the U.S.) but nobody has convinced me that the background image here is a problem. cheers Donna ** 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 ** ** 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] ADMIN: Re: Site Check: Broadleaf
Lets try and keep the broadleaf discussion on topic and polite, shall we people? Thank you! Lea -- Lea de Groot Core Member ** 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] help with colour switcher
I think this might be off topic, so please reply to [EMAIL PROTECTED] I am trying to get a simple colour switcher happening and having no luck. Can someone please help me get mine fixed or help with another simple one? Thank you. My main style sheet (ifsmain.css) is in a positive image. My alternate style sheet (ifsmain-reverse.css) is the negative image. I would also entertain any feedback for button placement, button text and colour choices. HTML: http://infoforce-services.com/index.php CSS: http://infoforce-services.com/css/Ifsmain.css Angus MacKinnon MacKinnon Crest Saying Latin - Audentes Fortuna Juvat English - Fortune Assists The Daring Choroideremia Research Foundation Inc. 2nd Vice president Choroideremia Research Foundation Canada Inc. 1st Vice President http://www.choroideremia.org ** 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] link ?
Doh, got beaten to it. :P
I second Bert's opinion.On 7/26/05, Bert Doorn [EMAIL PROTECTED] wrote:
G'dayI'd say your problem is here:#navwrapper li a:link, a:visited {See the a:visited?That affects ALL links on the page.I think you meant to say:#navwrapper li a:link, #navwrapper li a:visited {
Regards--Bert Doorn, Better Web Designhttp://www.betterwebdesign.com.au/Fast-loading, user-friendly websites**
The discussion list forhttp://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help**-- Ben Wonge:
[EMAIL PROTECTED]w: http://blog.onehero.net
Re: [WSG] Site Check: Broadleaf
Donna Jones wrote: Not exactly a clean user experience then. Particularly troublesome when designers rely on the background image and define colour for their text to be readable against it, but fail to provide fallback background colour. Zengarden is an experimental site, showcasing in many cases how one can push the boundaries using CSS. I would not hold it as a model for what should or shouldn't be implemented on a production site. Hi Patrick: In this case there is fallback colour. Its perfectly readable w/out the background image, at least it is when I hide background image w/ the webdev toolbar in Firefox. and from what i've observed when it is loading. A Newb from Maine? Perish the thought. -- °¿° ** 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] Site Check: Broadleaf
Mugur Padurean wrote: Hello, reality check here. Quoting the US and Australian available IT infrastructure, as a good reason for building huge web pages, is wrong for at least three reasons: I surely didn't mean to be doing that, please see below. 1. Over 90% percent of the world population do not live there and do not have dial-up access or other types of network access of such quality. In Romania where I am living dial-up access it's ... frustrating. So it's cable sometimes, ADSL if way too expensive and other means of network access are are inaccessible due to cost or limited area of availability. What about laptops ? Or wireless access? Both are much slower but in wide spread use. Did you know in my country you are charged by the megabyte ? Technology is NOT spread uniformly all over the world, and making your page smaller it's a better, smarter and fair approach than waiting for the world to catch up with you guys. I'm surprised you don't care but that's another story. Hi Mugar: glad to have a reality check, especially from Romania. ah, I care! and I wasn't saying that *I* make big pages, I try to keep mine really small. That's one reason I still have dial-up, so I don't forget what its like for everyone else. In the city (small to moderate) I live in a lot of people have cable. It was a test city early on for their cable I have never used broadband, some for security reasons, but mainly I don't want to lose touch with how fast things load, or not, that I'm designing. That said, I hadn't thought very much about how the IT structure, in general, probably makes a BIG difference in how dial-up works, so glad to have those thoughts in my brain. I generally connect at 53K and I bet that may be better than a lot of people on dial-up. I had known how in most (a lot) of Europe you are charged for download time. BUT, in this particular site we're discussing, the designer thinks they are targeting local businesses and they probably have figured that out, so odds are no one from anywhere else but Australia will even want to visit this site; and they're targetting businesses which, apparently, are on broadband. and their html is under 4K, which you have to admit is pretty slim. and the same graphic is in the background on every page, so its just one download. 2.Is technology evenly spread in your countries ( US and Australia)? Is there no place in those countries where Internet access makes you wanna kill that evil designer that put a 4 Mb flash intro on your favourite site ? I bet you all live in big cities, don't you ? Lucky guys .. well, medium size as I said. But, I do think technology is not spread out evenly, I know its not in Maine (n. U.S.). I think probably most of the major population areas can get broadband but if you're not in a city its pretty spotty. 3. Australia and U.S are two countries where going big with your pages will cost you more, as in bandwidth cost (etc), and in the end will lead to loosing clients. Isn't it ? I think a site has to be really very active for bandwidth costs to kick in. I know with anything I've ever done it hasn't been an issue; of course, its something to keep in mind. maybe the newsletters at Maine Humanities might all of a sudden become wildly popular. :-) Otherwise we will end up with a web full of 10 Mb pages with embedded databases, wallpaper backgrounds, tag soup and proprietary technologies ... oh, wait ... we already have that! Damn ... Cute. So, I agree with everything you say as a general principle. I'm 3/4ths Luddite, after all. its just in this particular case, the separation of the image from the html - is not building big *pages*. at most it is one big page but what feels seems different in this instance is that the image is in the background so the image is not even necessary to see the page and load the page. Of course, the general principle is that that contributes to over-all bloat but some people have already said that e.g. in the case of csszengardens that there are legitimate reasons for breaking that rule - I would just argue the same for this website (other design problems aside). they know their audience, its local, its on broadband. cheers Donna ** 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] Pure CSS Pop-ups using images... but as background-images in span
Hi,
Well,
Now, I have understood the solution.
I need to add a property to the a:hover rule.
a:hover {
border: none;
}
Voilà!
Now it works in IE6...
Weird, weird bug...
Julián
Julián Landerreche wrote:
Hi,
I'm playing with both Pure CSS Popup technics developed by Eric Meyer.
http://www.meyerweb.com/eric/css/edge/popups/demo.html
http://www.meyerweb.com/eric/css/edge/popups/demo2.html
I'm wondering if there is any issue by doing a merging between both
technics.
I want to show popup images, but not by using img tags (the second
technic).
So, my idea is to add an empty (or not) span tag inside the a tag.
Example:
a href=http://www.mydomain.com/; Link text spantext/span/a
Then, in the stylesheet, I add something like this:
a span {
display: none;
background: url(image.jpg) left center no-repeat;
}
a:hover span {
display: block;
position: absolute;
top: 0;
left: 225px;
width: 320px;
height: 425px;
z-index: 10;
background: url(image.jpg) left center no-repeat;
}
I'm testing it and it seems to work flawlessly in Mozilla Firefox 1.0.6
But it doesnt work... guess where... in IE 6!!
Why it doesnt work? What am I doing wrong?
It seems to be exactly the SAME technic used by Eric Meyer in the Pure
CSS Popup technics.
Thanks in advance.
Julián Landerreche
**
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
**
**
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] Problem in Firefox on initial page load only
On 27/7/05 8:00 PM, Jorge Laranjo [EMAIL PROTECTED] wrote: At the bottom of the page, you have a p class=clear/p make that p class=clearnbps;/p p class=clearnbsp;/p Note, nbsp; and not nbPS; When I've needed to clear a floated, I've used: div class=clear/div which seems to work, though I haven't tested it in *every* browser. Are there any advantages of using p class=clearnbsp;/p over div class=clear/div? I've never put a nbsp; inside the div class=clear/div. Should I? Hope Stewart ** 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] Content too large
The setup: Simple 2 column layout. The left column is floated for navigation, the right column is the content. The problem: I sometimes have content that is too wide for the right column. Therefore, in Explorer the content jumps below the floated navigation leaving a huge gap at the top of my right column. Sometimes there is so much navigation that it appears that there is no content because of the gap created. Question: Does anyone see any other technique, fix, layout change, or something, that I could do to make it so Explorer doesn't give me the huge amount of white space at the top of the right column. Code: http://www.toopractical.com/temp/index.htm http://www.toopractical.com/temp/index.css To see the problem, use Explorer and shrink your window's width until the content jumps below the left column. Thanks for your help, Fletcher ** 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] Content too large
Hi Fletcher This is nothing unusual and points out the advantages of a liquid layout. If your content is text, try setting your left and right divs with percentage widths instead of px. For instance: maincontent=65%, navigation:30%. If your wide content is a photograph, you will need to come up with a different solution. Personally, I have hit this wall. I want to use images that are large in my gallery, 500-550px and this does not leave much room for a left nav. The solution? -Ignore 800X600 users -Allow the user to collapse the leftnav -Put the content first in the source code and let the nav drop to the bottom of the screen -? I like the liquid approach on www.simplebits.com . Try his stylesheet widget to see how you can use more of the real-estate. What other solutions are out there? Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Fletcher Chambers Sent: Wednesday, July 27, 2005 8:10 AM To: wsg@webstandardsgroup.org Subject: [WSG] Content too large The setup: Simple 2 column layout. The left column is floated for navigation, the right column is the content. The problem: I sometimes have content that is too wide for the right column. Therefore, in Explorer the content jumps below the floated navigation leaving a huge gap at the top of my right column. Sometimes there is so much navigation that it appears that there is no content because of the gap created. Question: Does anyone see any other technique, fix, layout change, or something, that I could do to make it so Explorer doesn't give me the huge amount of white space at the top of the right column. Code: http://www.toopractical.com/temp/index.htm http://www.toopractical.com/temp/index.css To see the problem, use Explorer and shrink your window's width until the content jumps below the left column. Thanks for your help, Fletcher ** 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] A Fixed Understanding
Hi,
Making sure I have grokked the CSS-P property-fixed, when an element
is fixed it is removed from the normal document flow and positioned
relative to its containing element, and does not scroll when the
document is? In the following example:
div#a would be removed from the normal flow and positioned relative
to the div#container, and would not move when the document is scrolled.
style type=text/css media=screen
div#container{
margin: 0 auto;
width: 500px;
border: 1px dotted black;
}
div#a, div#b, div#c{
width: 100px;
height: 100px;
border: 1px solid black;
}
div#a{
background-color: red;
position: fixed;
}
div#b{
background-color: green;
position: relative;
top: 20px;
right: 50px;
left: 50px;
}
div#c{
background-color: blue;
}
/style
/head
body
div id=container
div id=apThis is DIV a/p/div
div id=bpThis is DIV b/p/div
div id=cpThis is DIV C/p/div
div id=typepLorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diamesent luptatum zzril delenit augue duis dolore te
feugait nulla.
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam era
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
/p
/div
/div
**
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] correct use of BR tag
I tested it with Fangs to see what a screen reader would probably say and The cat isbr /in the kitchen came out as The cat is in the kitchen. Personally I don't leave a space before or after I'd go for no space either side of the tag. According to the HTML spec, the br / tag forces a line break, which is whitespace, so anything that strips it out should replace it as such. Multiple white space is collapsed (user agents should collapse input white space sequences when producing output inter-word space) so both before and after spaces are unnecessary. Anthony -- www.fonant.com - hand-crafted web sites ** 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] A Fixed Understanding
Chris Kennon escribió:
Hi,
Making sure I have grokked the CSS-P property-fixed, when an element is
fixed it is removed from the normal document flow and positioned
relative to its containing element,
Not exactly. It's positioned relative to the viewport. Every other point
is correct.
Regards,
Choan
and does not scroll when the
document is? In the following example:
div#a would be removed from the normal flow and positioned relative to
the div#container, and would not move when the document is scrolled.
style type=text/css media=screen
div#container{
margin: 0 auto;
width: 500px;
border: 1px dotted black;
}
div#a, div#b, div#c{
width: 100px;
height: 100px;
border: 1px solid black;
}
div#a{
background-color: red;
position: fixed;
}
div#b{
background-color: green;
position: relative;
top: 20px;
right: 50px;
left: 50px;
}
div#c{
background-color: blue;
}
/style
/head
body
div id=container
div id=apThis is DIV a/p/div
div id=bpThis is DIV b/p/div
div id=cpThis is DIV C/p/div
div id=typepLorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diamesent luptatum zzril delenit augue duis dolore te feugait
nulla.
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam era
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
/p
/div
/div
**
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] A Fixed Understanding
Hi,
If it is positioned relative to the viewport, why does it stay
confined within the container?
C
On Jul 27, 2005, at 9:08 AM, Choan C. Gálvez wrote:
Chris Kennon escribió:
Hi,
Making sure I have grokked the CSS-P property-fixed, when an
element is fixed it is removed from the normal document flow and
positioned relative to its containing element,
Not exactly. It's positioned relative to the viewport. Every other
point is correct.
Regards,
Choan
and does not scroll when the document is? In the following example:
div#a would be removed from the normal flow and positioned
relative to the div#container, and would not move when the
document is scrolled.
style type=text/css media=screen
div#container{
margin: 0 auto;
width: 500px;
border: 1px dotted black;
}
div#a, div#b, div#c{
width: 100px;
height: 100px;
border: 1px solid black;
}
div#a{
background-color: red;
position: fixed;
}
div#b{
background-color: green;
position: relative;
top: 20px;
right: 50px;
left: 50px;
}
div#c{
background-color: blue;
}
/style
/head
body
div id=container
div id=apThis is DIV a/p/div
div id=bpThis is DIV b/p/div
div id=cpThis is DIV C/p/div
div id=typepLorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diamesent luptatum zzril delenit augue duis
dolore te feugait nulla.
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam era
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat
/p
/div
/div
**
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] Firefox float/clear:both ¿bug?
Hi all, my website (in development) seems to have a circunstancial bug in Mozilla Firefox. I have a floated div, followed by an empty div with clear:both applied. Then, it comes the content. But, the magic of the empty div doesnt seems to work (so, the div float isnt cleared in both sides). The content appears next to the floated div... following the shape of the content div. -screenshot: http://www.efectoscluster.com.ar/images/float_bug_ff/firefox_bug.jpg but.. read this: I have the Web Developer Toolbar for FF installed... and if I hide/show it, my website is suddenly fixed, and the bug dissapears!!! And my website is rendered as it should be. -screenshot (webdeveloper toolbar showed): http://www.efectoscluster.com.ar/images/float_bug_ff/firefox_webdeveloper_showed.jpg but... read this: if I do a total refresh (ctrl + F5) of my site, the bug appears again! AND in IE6/Win, my website is rendered perfectly, as it should be: -screenshot http://www.efectoscluster.com.ar/images/float_bug_ff/iexplorer.jpg If you want to check it in your browser, this is the URL: http://www.efectoscluster.com.ar/index.php Please, can anyone reveal me this mistery? Thanks in advance and excuse my english. Julián Landerreche ** 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] Content too large
Fletcher Chambers wrote:[...] Question: Does anyone see any other technique, fix, layout change, or something, that I could do to make it so Explorer doesn't give me the huge amount of white space at the top of the right column. Code: http://www.toopractical.com/temp/index.htm http://www.toopractical.com/temp/index.css To see the problem, use Explorer and shrink your window's width until the content jumps below the left column. Thanks for your help, Fletcher One method: Start with a stable layout that works cross-browser and clears the floats. This is a good on. http://www.alistapart.com/articles/negativemargins/. Add a division below the header to contain the table. Wrap the whole ball of wax in a giant wrapper with a min-max width of 600/1000 set on it. Use min-max js or or ie 'expressions' to deliver the min-max to IE(if you use expressions you'll need a second giant wrapper for IE that is set to a width of 100%). It will run rail to rail at 800 1024; and be 1000 at 1280. It will fold to 600 without breaking the layout or creating an h-scroll bar at 800. Regards, David Laakso -- David Laakso http://www.dlaakso.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] Content too large
David Laakso wrote: Fletcher Chambers wrote:[...] Question: Does anyone see any other technique, fix, layout change, or something, that I could do to make it so Explorer doesn't give me the huge amount of white space at the top of the right column. Code: http://www.toopractical.com/temp/index.htm http://www.toopractical.com/temp/index.css To see the problem, use Explorer and shrink your window's width until the content jumps below the left column. Thanks for your help, Fletcher One method: Start with a stable layout that works cross-browser and clears the floats. This is a good on. http://www.alistapart.com/articles/negativemargins/. Add a division below the header to contain the table. Wrap the whole ball of wax in a giant wrapper with a min-max width of 600/1000 set on it. Use min-max js or or ie 'expressions' to deliver the min-max to IE(if you use expressions you'll need a second giant wrapper for IE that is set to a width of 100%). It will run rail to rail at 800 1024; and be 1000 at 1280. It will fold to 600 without breaking the layout or creating an h-scroll bar at 800. Regards, David Laakso I guess you would need to set a min-width of 600 on Bryll's #content div as well. (It was a long night). David Laakso -- David Laakso http://www.dlaakso.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] A Fixed Understanding
Chris Kennon escribió:
Hi,
If it is positioned relative to the viewport, why does it stay confined
within the container?
If I understand correctly, your `fixed` div is showing from the top-left
corner of its container. If that's the case, there's one reason: you're
not positioning the block.
Try something like
div#a {
position: fixed;
top: 100px; /* or 0 */
left: 100px; /* or 0 */
}
I've uploaded a little example to
http://dizque.lacalabaza.net/temp/fixed.html.
And please remember: IE doesn't support `position: fixed`.
Regards,
Choan
On Jul 27, 2005, at 9:08 AM, Choan C. Gálvez wrote:
Chris Kennon escribió:
Hi,
Making sure I have grokked the CSS-P property-fixed, when an
element is fixed it is removed from the normal document flow and
positioned relative to its containing element,
Not exactly. It's positioned relative to the viewport. Every other
point is correct.
Regards,
Choan
and does not scroll when the document is? In the following example:
div#a would be removed from the normal flow and positioned relative
to the div#container, and would not move when the document is scrolled.
style type=text/css media=screen
div#container{
margin: 0 auto;
width: 500px;
border: 1px dotted black;
}
div#a, div#b, div#c{
width: 100px;
height: 100px;
border: 1px solid black;
}
div#a{
background-color: red;
position: fixed;
}
div#b{
background-color: green;
position: relative;
top: 20px;
right: 50px;
left: 50px;
}
div#c{
background-color: blue;
}
/style
/head
body
div id=container
div id=apThis is DIV a/p/div
div id=bpThis is DIV b/p/div
div id=cpThis is DIV C/p/div
div id=typepLorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diamesent luptatum zzril delenit augue duis
dolore te feugait nulla.
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
era
/p
pLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat
/p
/div
/div
**
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] Firefox float/clear:both ¿bug?
Mmmm.
I have discovered that it has something to do with some properties in
the class clearboth in the CSS
My CSS:
.clearboth {
clear: both;
}
div.clearboth {
width: 0;
height: 0;
line-height: 0;
font-size: 0px;
}
If I remove the second rule (or remove the set of properties), the page
is displayed correctly.
BUT I still cant understand why swaping the visibility of Web Developer
Toolbar, it gets fixed.
For those that cannot see the bug, please check the screenshots in the
first e-mail of this thread.
Thanks, and any ilumination is appreciated.
JL
Julián Landerreche wrote:
Hi all,
my website (in development) seems to have a circunstancial bug in
Mozilla Firefox.
I have a floated div, followed by an empty div with clear:both
applied. Then, it comes the content.
But, the magic of the empty div doesnt seems to work (so, the div
float isnt cleared in both sides).
The content appears next to the floated div... following the shape of
the content div.
-screenshot:
http://www.efectoscluster.com.ar/images/float_bug_ff/firefox_bug.jpg
but.. read this:
I have the Web Developer Toolbar for FF installed... and if I
hide/show it, my website is suddenly fixed, and the bug
dissapears!!! And my website is rendered as it should be.
-screenshot (webdeveloper toolbar showed):
http://www.efectoscluster.com.ar/images/float_bug_ff/firefox_webdeveloper_showed.jpg
but... read this:
if I do a total refresh (ctrl + F5) of my site, the bug appears again!
AND in IE6/Win, my website is rendered perfectly, as it should be:
-screenshot
http://www.efectoscluster.com.ar/images/float_bug_ff/iexplorer.jpg
If you want to check it in your browser, this is the URL:
http://www.efectoscluster.com.ar/index.php
Please, can anyone reveal me this mistery?
Thanks in advance and excuse my english.
Julián Landerreche
**
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] Firefox float/clear:both ¿bug?
If I remove the second rule (or remove the set of properties), the page is displayed correctly. No, it doesnt display correctly It seems that the empty div must have some content (like .) to clear the floated div. ** 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] A Fixed Understanding
Hi,
Thanks, where I got confused is with the static attribute which
does not take top, right, bottom and left values(http://
www.w3schools.com/css/pr_class_position.asp). So if an item is not
positioned when using fixed, it is fixed relative to its
containing element?
On Jul 27, 2005, at 10:40 AM, Choan C. Gálvez wrote:
div#a {
position: fixed;
top: 100px; /* or 0 */
left: 100px; /* or 0 */
}
**
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] IBM article
Hi all, I got this link from a friend at work and wanted to pass it on ;) Migrate apps from Internet Explorer to Mozilla http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/ ciao, Zulema · · · · · · · · · · · · · · · · Zulema Ortiz Web Designer folio: http://zoblue.com blog: http://blog.zoblue.com browser: http://getfirefox.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] Firefox float/clear:both ¿bug?
Hi
I have been using the following:
/* clear this fix */
.clearThis:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearThis {height: 1%;}
/* End hide from IE-mac */
more information at
http://www.positioniseverything.net/easyclearing.html
odd behavior in safari
Julián Landerreche wrote:
If I remove the second rule (or remove the set of properties), the
page is displayed correctly.
No, it doesnt display correctly
It seems that the empty div must have some content (like .) to clear
the floated div.
**
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] IBM article
Zulema wrote: Hi all, I got this link from a friend at work and wanted to pass it on ;) Migrate apps from Internet Explorer to Mozilla http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/ Funny, I'm always trying to fuge it to work for IE, not the other way around as the article suggests :wink: ** 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] Problem in Firefox on initial page load only
On 27/07/05, Hope Stewart [EMAIL PROTECTED] wrote: On 27/7/05 8:00 PM, Jorge Laranjo [EMAIL PROTECTED] wrote: At the bottom of the page, you have a p class=clear/p make that p class=clearnbps;/p p class=clearnbsp;/p Note, nbsp; and not nbPS; When I've needed to clear a floated, I've used: div class=clear/div which seems to work, though I haven't tested it in *every* browser. Are there any advantages of using p class=clearnbsp;/p over div class=clear/div? I've never put a nbsp; inside the div class=clear/div. Should I? A nicer approach, IMHO, is not to use markup for clearing at all: http://www.positioniseverything.net/easyclearing.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] A Fixed Understanding
On 28/07/05, Chris Kennon [EMAIL PROTECTED] wrote: Hi, Thanks, where I got confused is with the static attribute which does not take top, right, bottom and left values(http:// www.w3schools.com/css/pr_class_position.asp). So if an item is not positioned when using fixed, it is fixed relative to its containing element? here's an excellent introduction to CSS positioning - it will answer your question and many more: http://www.brainjar.com/css/positioning/ ** 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] Problem in Firefox on initial page load only
A nicer approach, IMHO, is not to use markup for clearing at all: http://www.positioniseverything.net/easyclearing.html ** although not 100% solid I have found. I laid out a site once (news site) with the traditional 'more' links after a story. They had bg a:hovers which ended up triggering the IE guillotine bug, which meant using easy clearing method, plus extra markup to fix that for clearing. works for most sites though, and still use on some sites. s. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
