[css-d] IE5.0/Win issue with position:absolute anchor
Hi all,
I'm sorry, I don't have an external link where I can provide a sample.
Here's a html page though (you will need an image with a file name of
a.gif for this to work)
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html lang=en
head
titledamn you ie 5!/title
style type=text/css
!--
#appheader
{
}
.makemeabsolute
{
position: absolute;
}
--
/style
/head
body
div id=appheadera href=# class=makemeabsolute
title=blehimg src=a.gif alt=bleh width=400px height=40px
//a /div
/body
/html
The issue I have is in IE 5.01SP2.
The issue does not appear in IE5.5+
The image is absolutely positioned, but I cannot left-click on it to
activate the link. I can right-click and open or open in new window,
however.
The only styling applied to it is position:absolute, so I imagine some
of you might have seen this before, and hopefully know a 'fix'.
thanks
jack
__
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] adding list style navigation to site from separate page
Hello, I tried searching the archives, but maybe I didn't have the right terms. I would like to have the list-style navigation I'm building in a separate page, and import it into all the pages in the site to make management easier. The navigation is going to be a horizontal row of css based flyouts. I'm imagining this gets done all the time, but I haven't come across a tutorial for it anywhere. On the ones I've seen, the nav goes directly in the page, which seems silly for a site larger than 3 pages! Thanks in advance, Rose __ 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] Pure CSS popup
Hello again list, Well I have had a go at this again and got my popup to work in Firefox, see here: http://wuongean.com/popup/index2.htm. But it's not working in IE! So my next question is: is it possible to make it work in IE? If yes, how? And I realise I gave the wrong link for the css *again*, they are in fact here: http://wuongean.com/popup/wr_typo.css http://wuongean.com/popup/wr_layout.css Sorry about that! Thanks in advance for your replies. Christine On 5/21/06, Christine Ce [EMAIL PROTECTED] wrote: Sorry wrong links it seems! So, what I want is here: http://www.wuongean.com and the css is here: http://www.wuongean.com/wr_typo.css and http://www.wuongean.com/wr_layout.csshttp://www.wuongean.com/wr_typo.css What I've managed to do so far is here: http://www.wuongean.com/popup/index2.htm and the css is here: http://www.wuongean.com/popup/wr_typo.css and http://www.wuongean.com/popup/wr_layout.css . Sorry about that! Christine On 5/21/06, Christine Ce [EMAIL PROTECTED] wrote: Hello all, I have this page that needs to look exactly like that: http://www.wuongean.com/ The CSS for this is here: http://www.wuongean.com/wg_layout.css and http://www.wuongean.com/wg_typo.css I want the span in div#kanji to be displayed when hovering over the image kanji_small.jpg, and I am trying to achieve this with a pure css popup. So far I've got to this: http://www.wuongean.com/beta/popup/index2.htmhttp://www.wuongean.com/with the css for this here: http://www.wuongean.com/beta/popup/wg_layout.css and http://www.wuongean.com/beta/popuphttp://www.wuongean.com/beta/popup/wg_layout.css Can I absolutely position the span? I'd like it to either cover the kanji_small image, or to appear on top of the main content. I don't want a horizontal scroll bar. I've been looking at this for too long now and am stuck, I need a rest :-) Any ideas or suggestions welcome! Thanks in advance Christine __ 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 layout.
Im new to css and im looking for help in coding a simple layout. Can someone direct me to some resources of generate a simple example page for me? Im wanting to make my site have this layout: http:/2advent.com:81/CSSLayout1.gif I would start reading from here ;) http://css-discuss.incutio.com/ -- Cem Meric | http://www.kalkadoon.net/ Kalkadoon Corporate Solutions __ 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] IE5.0/Win issue with position:absolute anchor
On May 23, 2006, at 4:00 PM, jack fredricks wrote: The image is absolutely positioned, but I cannot left-click on it to activate the link. I can right-click and open or open in new window, however. The only styling applied to it is position:absolute, so I imagine some of you might have seen this before, and hopefully know a 'fix'. Your link is absolute positioned, and therefore 'hasLayout' [1]; this is what makes the image not registering the mouse-click. Some tests and a workaround: http://www.brunildo.org/test/IEaL.html http://www.brunildo.org/test/IEABlock1.html [1] http://www.satzansatz.de/cssd/onhavinglayout.html 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] Pure CSS popup
Hello again list, And I realise I gave the wrong link for the css *again*, they are in fact here: http://wuongean.com/popup/wr_typo.css http://wuongean.com/popup/wr_layout.css Christine Links still wrong. However, I guess you haven't included the script that enables IE to use the drop down. See http://www.mywebstuff.com/02_css/css_07.html and look at alistapart.com etc for great examples. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.6.1/344 - Release Date: 19/05/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] Pure CSS popup
On 5/23/06, Ian Young [EMAIL PROTECTED] wrote:
Links still wrong.
aargh... Ok will post the CSS here then. So that's the CSS for the popup:
#kanji a, kanji a:link, kanji a:visited {
display: inline;
text-decoration: none;
border: none;
background-color: white;
}
#kanji a:hover, kanji a:active {
display: inline;
text-decoration: none;
border: none;
}
#kanji a span {
display: none;
}
#kanji a:hover span {
display:block;
position: absolute;
top: 0;
right: 0;
}
However, I guess you haven't included the script that enables IE to use the
drop down.
See http://www.mywebstuff.com/02_css/css_07.html and look at
alistapart.com
etc for great examples.
Ah no you're right, I haven't included a script. Thanks for that, I guess
that's what I need!
Christine
__
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] Holy grail and left column jumping
Ian Young wrote:
Been developing the Holy Grail code from ALA. Added drop down menu to it
which I never had any problem with.
In IE, the left column jumps into centre on hovering over the menu
Stripped out version is at
http://www.iyesolutions.co.uk/templates/new-dol/dol-test.html
I would be interested in your thoughts on this one.
This is the holy grail example 4, only a link with a background change
on hover is added:
http://www.satzansatz.de/cssd/tmp/holy4-wrong.html
In IE6, when you hover over the link, the left column jumps to the
right. This should be similar to your situation.
The ALA article by Matthew Levine says:
The negative margin pulls the left column too far to the left in
IE6... We need to push it back to the right ...
* html #left {
left: 150px; /* RC width */
}
The reason we need to use the width of the right column involves a bit
of algebra. I won’t bore you with the details; ...
[1]
Whenever an author needs a paragraph which reads he don't want to bore
me with the details he should better use the words for one sentence that
explains it. I do not understand it.
At the risk of boring you: I think the bug you've encountered is partly
related to the quirky percentages bug [2], but I think that's not all.
And IE7 adds new problems.
Percentages on margins skip one generation in IE: the margin-left:-100%
is calculated with respect to the padding edge of html, not body. So
initially, this margin becomes too wide. See the holy4 without his fix:
http://www.satzansatz.de/cssd/tmp/holy4-without.html
The left column is thrown out of the window (you may have to shrink the
window a little to see the effect on reload).
And when you hover over the link, the left column is reflown to the
correct position.
This is why this kind of static fix is awkward: the quirky percentages
bug is dynamic. You cannot correct it with a fixed offset, since the bug
corrects itself on hover-reflow, causing an overshooting compensation by
the left:150px.
Another fix to the problem requires an additional wrapper of body
#innerwrapper {
zoom:1; /* haslayout, width:100% would be the same */
position: relative;
}
The position:relative is only needed if you want to prevent the new
flip-side bug in IE7beta. I don't know if this IE7 is so feature
complete that it will deliver with this bug or not.
See
http://www.satzansatz.de/cssd/tmp/holy4-corrected.html
for a quick attempt. Let me know if it fixes the problem at your side.
I'd like to say that the quirky percentages does not explain why we see
what we see. For example, one could ask why the percentage margin of the
right column is not affected. I simply do not know.
Ingo
[1] http://www.alistapart.com/articles/holygrail/
[2] http://positioniseverything.net/explorer/percentages.html
--
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 layout.
Cem Meric wrote: Im new to css and im looking for help in coding a simple layout. Can someone direct me to some resources of generate a simple example page for me? Im wanting to make my site have this layout: http:/2advent.com:81/CSSLayout1.gif In the examples on this pagehttp://blog.html.it/layoutgala/ , you'll find a fixed width 2 column layout in the bottom row (number 38). If you modified it, by eliminating his header and footer, it may meet your need. If you do not understand how to proceed, or if someone else does not provide a better workable solution, write me off-list. Regards, ~davidLaakso -- http://www.dlaakso.com/gustave/ __ 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 layout.
Cem Meric wrote: Im new to css and im looking for help in coding a simple layout. Can someone direct me to some resources of generate a simple example page for me? Im wanting to make my site have this layout: http:/2advent.com:81/CSSLayout1.gif Float the logo left and the right hand section right. The header can sit in normal flow and you can create a div class to hold the section items, each one floated left and right. To center the page you can use auto margins (requires IE hack) or positioning and a negative margin (doesn't). There are a million resources out there which you can google. Then try it and return to the list with any issues - there is nothing like independent experimentation to consolidate knowledge. __ 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/ -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ 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] making of a nice login page
Hi everybody, I'm trying to make my login page match this one: http://donvitobiz.campfirenow.com/login I'm experimenting problems : - when I float left labels and inputs (clear that one also so e-mail and password won't be on same line) it doesn't work. So I removed it - I'm also trying to bottom align the texts and the input boxes but when I modify line-height it doesn't work Any help would be great :D __ 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] adding list style navigation to site from separate page
This *can* be done in CSS using the :after Psuedo-element (http://www.w3schools.com/css/css_pseudo_elements.asp) but the cross browser support for this is very poor and can't be relied upon. This *can* be done with Javascript, but not all your uses will/can have javascript enabled so this can't be relied upon either. This *can* be done with frames, but there are accessibility/SEO problems with frames. The winning solution is to use server side scripting to insert the navigation markup into a document, for example, here's how it could be done in PHP. html head titlemy page/title /head body ?php include navigation.html ? rest of content goes here... /body /html GypsiiRose Baptiste wrote: Hello, I tried searching the archives, but maybe I didn't have the right terms. I would like to have the list-style navigation I'm building in a separate page, and import it into all the pages in the site to make management easier. The navigation is going to be a horizontal row of css based flyouts. I'm imagining this gets done all the time, but I haven't come across a tutorial for it anywhere. On the ones I've seen, the nav goes directly in the page, which seems silly for a site larger than 3 pages! Thanks in advance, Rose __ 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/ -- Futurate's site for the Their Reading Futures project has been nominated for a prestigious Jodi Mattes accessibility award. This is our second award nomination this year. See: http://www.futurate.com/?p=132 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.7.0/345 - Release Date: 22/05/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] floats making rows, not columns.
nooluyo? wrote: understood, it's working right now. but the problem is: how can i tell the width should be 100%-250px. :) because left column should be 250 px. and right column should be whatever there's left screen space. Don't float the right column, just give it a margin-left of 250px. -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] making of a nice login page
Hi everybody, I'm trying to make my login page match this one: http://donvitobiz.campfirenow.com/login I'm experimenting problems : - when I float left labels and inputs (clear that one also so e-mail and password won't be on same line) it doesn't work. So I removed it - I'm also trying to bottom align the texts and the input boxes but when I modify line-height it doesn't work Any help would be great :D http://www.surprises.tg/newsletter/identification.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] making of a nice login page
Hi Victor, On May 23, 2006, at 5:41 AM, victor NOAGBODJI wrote: I'm experimenting problems : - when I float left labels and inputs (clear that one also so e-mail and password won't be on same line) it doesn't work. So I removed it - I'm also trying to bottom align the texts and the input boxes but when I modify line-height it doesn't work Can you give us a url to your page? We can't debug what we can't see. -- Roger Roelofs __ 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] Menu buttons visual glitch
I have noticed a slight visual glitch in the menu buttons on my
layout. I can't figure out what is causing it, and would appreciate
any pointers the list might be able to suggest as to what I've done
wrong here. I tried making the right-most button a element slightly
narrower:
ul#mainNav .ltblue a {
background-color: #A5BDE2;
width: 187px;
}
(width of ul#mainNav a is 189px) but although it looks OK in FF and
Safari it is still wrong in IE: the right edge of the menu button
background steps out over the background.
http://www.tellura.co.uk/soundsteps/
Ian.
--
Dr Ian M Piper
[EMAIL PROTECTED]
skype: ianmpiper
--
Where is the wisdom we have lost in knowledge?
Where is the knowledge we have lost in information?
__
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] adding list style navigation to site from separate, page
I tried searching the archives, but maybe I didn't have the right terms. I would like to have the list-style navigation I'm building in a separate page [snip] You need to search for php include or server side include. But that's unrelated to css, so you won't find it on the css-d wiki. Good luck, bj --- avast! Antivirus: Outbound says I'm squeaky clean. Virus Database (VPS): 0620-3, 05/19/2006 Tested on: 5/23/2006 8:28:09 AM __ 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] Menu buttons visual glitch
Hi Ian,
Try adding the following rule:
* html ul#mainNav {
margin-right:-5px;
}
This will be read only by IE and although an arbitrary value should
solve the problem.
K
__
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] Menu buttons visual glitch
Hi Ian,
Try adding the following rule:
* html ul#mainNav {
margin-right:-5px;
}
This will be read only by IE and although an arbitrary value should
solve the problem.
K
__
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] Drop-down menu Safari wackiness
Bingo. Thanks so much!
And, for those keeping score at home, the text overflow issue that was
brought up (if you increase font size, the nav items wrap, which breaks the
nav) is also solved: use em for the height attributes of the 2nd-level nav
items and the top margin of the 3rd-level instead of px.
Still learning...
-benjy
On 5/22/06 11:25 AM, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
http://www.gmvoices.com/new/screen.css
There is this #nav li float with a fixed width of 10em, it is overflown
by its descendant link of 171px width + padding.
This exceeding part keeps visible when the absolute positioned ul collapses.
I think floating the li on the second level is not needed.
#nav li li {float: none;}
seems to fix it here for Safari. Did not test it in the other browsers.
Don't know if this is the kind of answer you was looking for.
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with Firefox
Hi Andrew and Philippe, Thanks for the tips, they solved my problem, and better than that, I've learned what the problem was about About using a table for doing that, well I was trying to develop even futher my ability with css, and it was a simple table. There will be some other people work on top of my code, that don't know much of html and stuff, and I thought that doing it with html + css it will make it easier for him to work with. Thanks again for the help. []´s Grillo On 5/23/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On May 23, 2006, at 5:30 AM, Marcelo Wolfgang wrote: The page in questions is this one: http://work.grillo.tk/vilarigno/ produtos.html I have a gap at the foot of the table on the left that I don't know how to solve. Can anyone help me here ? Have you considered using a real html table for building this? That would make *much* more sense... The problem of that 'gap' is coming from the font-size on that div, which has a computed value of 16px; add the line-height to that, and that box has a real height much larger that the 4px you assigned. Gap is visible in Gecko, Safari, Opera, iCab. 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] Problem with Firefox
On 22/05/06, Marcelo Wolfgang [EMAIL PROTECTED] wrote: Hi list, I've made a website and I'm having an issue with firefox that I can't solve. The page in questions is this one: http://work.grillo.tk/vilarigno/produtos.html I have a gap at the foot of the table on the left that I don't know how to solve. Can anyone help me here ? ...what gap? could you be more specific? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Form Layout Problem
With regards to: http://nyslittreedata.advantex.net/new/default/sampleForm.htm http://nyslittreedata.advantex.net/new/default/default.css 1. How can I get the two columns for the form to lay out properly? I've floated the labels left, but right now, the labels and their fields just spread out based on the width of the fieldset. But I don't want to set a hard width value for fieldset, as some forms on the site will be wider or narrower than others. 2. In IE, the white background does not extend all the way to the bottom of the layout... What is missing from my stylesheet to make it do so? Thanks, m __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] font sizing
I came across this while trolling through someone's css file:
body {
font: 62.5%/1.6em Lucida Grande, Arial, Verdana, sans-serif;
color: #000;
background-color: #FFF;
}
what is the intent of the size calculation 62.5%/1.6em?
-nick
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
font-size / line-height http://www.w3schools.com/css/pr_font_font.asp Shawn what is the intent of the size calculation 62.5%/1.6em? -nick __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS and Email
I'm having issues with CSS in an email. I have read quite a few articles on it and have done quite a bit of testing with it. My biggest issue right now is with styling a h1. Looking at it in clients that should render it correctly (Thunderbird, Hotmail, and Yahoo), the font-family and the font-size change and go to Arial / 22px. Is there a reason why this is happening and is there a way to fix it? -- Chad Calhoun Overit Media e] [EMAIL PROTECTED] p] 518.465.8829 ext. 203 w] www.overit.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
On 06/05/23 11:15 (GMT-0400) Nick Lehman apparently typed:
I came across this while trolling through someone's css file:
body {
font: 62.5%/1.6em ...}
what is the intent of the size calculation 62.5%/1.6em?
That 62.5% hocus pocus CSS is for designers who think px are more
important than visitor respect and content fluidity. It originated and
is explained here: http://www.clagnut.com/blog/348/
See also re the line-height:
http://mrmazda.no-ip.com/auth/line-height-inherit.html
http://www.w3.org/TR/CSS21/fonts.html#font-size-props
--
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] font sizing
On 5/23/06, Shawn Lawler [EMAIL PROTECTED] wrote: what is the intent of the size calculation 62.5%/1.6em? Felix? :-) -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
ahh...it's not math it's a separator. Thanks On May 23, 2006, at 11:25 AM, Shawn Lawler wrote: font-size / line-height http://www.w3schools.com/css/pr_font_font.asp Shawn what is the intent of the size calculation 62.5%/1.6em? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
what is the intent of the size calculation 62.5%/1.6em? -nick Basically the general browser default size is 16px so 62.5% gives a text size of 10px. That means 1em = 10 pixels so pixel dimensions can be converted into ems so the layout will scale according to text sixe. The em measurement after the slash refers to line-height. -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS and Email
reason why this is happening and is there a way to fix it? Without seeing code, I can only offer a tip. We have had great sucess with CSS in HTML emails as long as all styles are inline. i.e: li style=padding:47em;Foo/li HTH -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
Just to clarify Nick, the 62.5%/1.6em isn't a calculation as in 62.5% divided by 1.6em. It is shorthand for font-size/line-height. In this case, the 62.5% sets the font-size to a percentage of the browser's default font-size. The 1.6em does something similar but uses the em unit which like percentage is used for relative sizing rather than px, pt and pc units. Hope this helps. K __ 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] Readonly textarea backround color ignored in firefox
I have a textarea that is set to readonly=readonly and no matter what I try, Firefox 1.5.0.3 shows the background as a brownish color. IE shows the background as white which is what I want. If I inspect the element using Firebug, it says the background color of the textarea is white, yet it's obviously not. http://www.botsko.net/Test/readonly_textarea.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] Readonly textarea backround color ignored in firefox
Apparently, it's only white that doesn't work. If you set it to any other color it works fine. On 23/05/06, Mike Botsko [EMAIL PROTECTED] wrote: I have a textarea that is set to readonly=readonly and no matter what I try, Firefox 1.5.0.3 shows the background as a brownish color. IE shows the background as white which is what I want. If I inspect the element using Firebug, it says the background color of the textarea is white, yet it's obviously not. http://www.botsko.net/Test/readonly_textarea.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS and Email
There is a lot of good advice here: http://www.campaignmonitor.com/blog/archives/2006/03/ a_guide_to_css_1.html and follow some of the links on that page to more good tips using CSS in email. Nick McNeill Intellistrand On May 23, 2006, at 11:37 AM, Tom Livingston wrote: reason why this is happening and is there a way to fix it? Without seeing code, I can only offer a tip. We have had great sucess with CSS in HTML emails as long as all styles are inline. i.e: li style=padding:47em;Foo/li HTH -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.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/ SPAM and virus protection provided by Intellistrand __ 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 is this done ?
I've noticed a number of website , where graphics hang below or through various elements. As an example: http://www.missiondata.com/ where the logo is below the header into the content area. Hope this isn't a stupid question but wondering how it's accomplished. My first thought is maybe it's an inline , in the xhtml source itself. Hope this is an okay question to ask. TIA Mark __ 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] Readonly textarea backround color ignored in firefox
-Original Message- I have a textarea that is set to readonly=readonly and no matter what I try, Firefox 1.5.0.3 shows the background as a brownish color. IE shows the background as white which is what I want. If I inspect the element using Firebug, it says the background color of the textarea is white, yet it's obviously not. http://www.botsko.net/Test/readonly_textarea.html -Original Message- Mike, it shows up white in both IE6 and Firefox 1.5.0.3 running on Win2K here. This issue appears to be a Windows only thing... maybe even only Windows XP. I've tested it here and IE/Safari/Firefox Mac are working fine. However, I've verified that on two Windows XP Pro machines, using Firefox 1.5.0.3, textareas cannot be assigned a background-color of white if they're set to readonly. Someone mentioned that this doesn't happen in Windows 2k, so maybe it's a bug relating to FF and Windows XP. Can anyone else verify on various Windows machines? __ 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] Readonly textarea backround color ignored in firefox
This issue appears to be a Windows only thing... maybe even only Windows XP. I've tested it here and IE/Safari/Firefox Mac are working fine. However, I've verified that on two Windows XP Pro machines, using Firefox 1.5.0.3, textareas cannot be assigned a background-color of white if they're set to readonly. Someone mentioned that this doesn't happen in Windows 2k, so maybe it's a bug relating to FF and Windows XP. Can anyone else verify on various Windows machines? __ I am on Windows XP with FF 1.5.03 and it is an issue... -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ 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] Fluid main column
Hello Group, I'm working on a new site at http://picturethis4u.com/mikesoutherland/index.htm. The css is at: http://picturethis4u.com/mikesoutherland/css-mike-southerland.htm. It's coming together pretty well, except...ahhh, I knew you were waiting for the except! In the #main, the text is fluid when I resize the browser window, BUT, when the browser window is at 1024 x 768, the text is too far from the #navcol, and when the browser window is at 800 x 600, the text is a tiny bit closer than I'd like it to be. I'd really like the text to be stationary on the left, fluid on the right. Does that make sense? Is that possible? It's probably something simple but I just can't seem to figure out what it needs. I'm still learning CSS, and also learning a lot from this group. It's great to know there are so many people at hand with such vast css knowledge, and that there is someplace to go when one is in need of css help. Thanks, Helen Email: [EMAIL PROTECTED] Phone:360-275-9433 Fax: 360-275-9433 Website: http://www.picturethis4u.com/ Keep your business at the world's fingertips 365 days of the year! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
Felix Miata wrote: That 62.5% hocus pocus CSS is for designers who think px are more important than visitor respect and content fluidity. It originated and is explained here: http://www.clagnut.com/blog/348/ It's also broken on IE-Win, which ignores the decimal fraction of percentages on the font-size. Thus it treats the above as font-size: 62%; giving a font-size of 9.92px. If you then try to specify the dimensions of something in ems, it comes out smaller on IE than everything else. For example, width: 40em; will give a width of 400px on FF, Opera, Safari etc. (assuming default font size settings), but of 396px on IE. This can be the cause of much frustration when creating em-based layouts. I'm planning to write this up in detail (as workarounds can fall foul of a user's minimum font size if one doesn't take them into account) but for the moment I've got a demo here: http://www.nickfitz.co.uk/bugs/browsers/css/IE-Win/ie_percent_test.html HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.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/
[css-d] Difference between IE6 on different machines???
http://www.babyandbridalshowerboutique.com/favors1.asp This is a site I did some coding for (but did not design). On my home monitor, as well as on my client's home monitor, no white gap appears in the green body section. Nor does it appear on her lap top. On our machines at our office, however, one does appear. In all five machines, the browsers used was the latest version of IE6. The problem also appears in Firefox, but they aren't so concerned about that right now. The difference is that the home OSs are WinXP and the work ones, Win2K, *but* the laptop is Win2K also. The only other difference is the monitors, and that should have anything to do with it. While I think fixing the white gap would be easy enough, I'm worried that on the monitors where it works now, it will be borked. What is causing this to happen anyway? How could the same browser appear different? -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ 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] Styling the form textarea scrolling-bars
Hi everybody, please send me an advice how to colorize the form textarea scrolling-barrs and arrows, with css or without css, within one form? Thanks a lot in advance, sincerely, Igor P.S. What would be the best image gallery for presenting the real-estate pictures? __ 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] Difference between IE6 on different machines???
First check for extra spaces and then for an extra ./div tag. Don - Original Message - From: [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Tuesday, May 23, 2006 10:11 AM Subject: [css-d] Difference between IE6 on different machines??? | http://www.babyandbridalshowerboutique.com/favors1.asp | | This is a site I did some coding for (but did not design). On my home | monitor, as well as on my client's home monitor, no white gap appears in | the green body section. Nor does it appear on her lap top. On our machines | at our office, however, one does appear. In all five machines, the | browsers used was the latest version of IE6. The problem also appears in | Firefox, but they aren't so concerned about that right now. | | The difference is that the home OSs are WinXP and the work ones, Win2K, | *but* the laptop is Win2K also. The only other difference is the monitors, | and that should have anything to do with it. | | While I think fixing the white gap would be easy enough, I'm worried that | on the monitors where it works now, it will be borked. What is causing | this to happen anyway? How could the same browser appear different? | | | -- | Marc Luzietti | Flagship Project | Bayview Financial, L.P. | (305) 341-5624 | __ | 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/ | | | | -- | No virus found in this incoming message. | Checked by AVG Free Edition. | Version: 7.1.394 / Virus Database: 268.7.0/345 - Release Date: 5/22/2006 | | -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.7.0/345 - Release Date: 5/22/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] Readonly textarea backround color ignored in firefox
ff 1.5 winxp pro i see white, white, grey. i'm not sure what other info to include since i seem to be one of the rare winxp people who see it white, but if you want to know something else, just ask. __ 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] Menu buttons visual glitch
On 23 May 2006, at 2:12 pm, Kieron McIntyre wrote:
Hi Ian,
Try adding the following rule:
* html ul#mainNav {
margin-right:-5px;
}
This will be read only by IE and although an arbitrary value should
solve the problem.
Thanks for that - worked beautifully.
I've had a huge amount of help from the good folks here on this
project - can I just say an equally huge thank you to all of you. I
have learned a lot from you and appreciate the selfless contributions
you have made.
Regards,
Ian.
--
Dr Ian M Piper
[EMAIL PROTECTED]
skype: ianmpiper
--
Where is the wisdom we have lost in knowledge?
Where is the knowledge we have lost in information?
__
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] Readonly textarea backround color ignored in firefox
Morning Mike You wrote http://www.botsko.net/Test/readonly_textarea.html Ron Wrote Mike, it shows up white in both IE6 and Firefox 1.5.0.3 running on Win2K here. This issue appears to be a Windows only thing... maybe even only Windows XP. I've tested it here and IE/Safari/Firefox Mac are working fine. However, I've verified that on two Windows XP Pro machines, using Firefox 1.5.0.3, textareas cannot be assigned a background-color of white if they're set to readonly. Someone mentioned that this doesn't happen in Windows 2k, so maybe it's a bug relating to FF and Windows XP. Can anyone else verify on various Windows machines? I'm running Win Xp Pro SP2 and in Firefox 1.5.0.3 I see the first and second test textarea boxes with white backgrounds and the third box with a light gray IE 6.0 is the same.. This sounds like a Google tool bar auto-fill type issue.. Screen capture available offline if you want it... hth Jim Nannery owner - www.redfernenterprises.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
Nick Lehman wrote:
I came across this while trolling through someone's css file:
body {
font: 62.5%/1.6em Lucida Grande, Arial, Verdana, sans-serif;
color: #000;
background-color: #FFF;
}
what is the intent of the size calculation 62.5%/1.6em?
-nick
It is the font and line-height specification, /some/ might say, by an
author who is a control freak: 62.5% is the authors font-size
preference(in other words, the author is specifying her desire to reset
the users font-size preference 37.5% /smaller/ than the user prefers).
And 1.6em is the authors line-height(leading) preference(in other words,
the author is specifying her desire to reset the users line-height
preference .3em or .4em /greater/ than the user prefers). Default is
font: 100%/1.2 (or 1.1) sans-serif; (line-height is expressed as a raw
number, and does not carry a unit of measure such as px, em, or percent).
HTH
~davidLaakso
PS The above is my personal opinion and it not shared by all on this or
any other list.
--
http://www.dlaakso.com/gustave/
__
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] Difference between IE6 on different machines???
http://www.babyandbridalshowerboutique.com/favors1.asp
This is a site I did some coding for (but did not design). On
my home monitor, as well as on my client's home monitor, no
white gap appears in the green body section. Nor does it
appear on her lap top. On our machines at our office,
however, one does appear. In all five machines, the browsers
used was the latest version of IE6. The problem also appears
in Firefox, but they aren't so concerned about that right now.
In IE, I see a 9-pixel gap on one machine which has Windows XP set to 120DPI
(Large Fonts) in Display/Settings/Advanced, and a 3-pixel gap on another
machine which has the default 96DPI (Small Fonts) setting.
In Firefox, I see an 8-pixel gap on both machines, which according to the
FireBug extension is caused by line 548 of bbsb.css, which specifies
#product { margin-top:8px; }.
Perhaps fixing it in Firefox would help point toward a clue for the IE
variations?
-Mike
__
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] Readonly textarea backround color ignored in firefox
On 5/23/06, Jim Nannery [EMAIL PROTECTED] wrote: I'm running Win Xp Pro SP2 and in Firefox 1.5.0.3 I see the first and second test textarea boxes with white backgrounds and the third box with a light gray IE 6.0 is the same.. This sounds like a Google tool bar auto-fill type issue.. fwiw i don't have the google toolbar installed. [in my previous post i stated didn't have a problem seeing the white background] __ 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] Readonly textarea backround color ignored in firefox
XP Home SP2: -Fx1.5.0.3 The first and second box are not white. -Netscape8 -Mozilla1.76 The first and second box are not white. No toolbar or whatever installed. 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] Fluid main column
Fixed it myself after reading a recent post and figuring out what to do with it! =) Thanks, anyway. Helen Email: [EMAIL PROTECTED] Phone:360-275-9433 Fax: 360-275-9433 Website: http://www.picturethis4u.com/ Keep your business at the world's fingertips 365 days of the year! __ 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] Readonly textarea backround color ignored in firefox
-Original Message- http://www.botsko.net/Test/readonly_textarea.html FYI - Many of you confirm that this tends to happen on Win XP. I have no idea why this happens and there did not appear to be a bug filed for it yet. I have filed https://bugzilla.mozilla.org/show_bug.cgi?id=339016. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font sizing
On 06/05/23 13:07 (GMT-0400) Nick Fitzsimons apparently typed: It's also broken on IE-Win, which ignores the decimal fraction of percentages on the font-size. Thus it treats [62.5%] as font-size: 62%; giving a font-size of 9.92px. If you then try to specify the dimensions of something in ems, it comes out smaller on IE than everything else. For example, width: 40em; will give a width of 400px on FF, Opera, Safari etc. (assuming default font size settings), but of 396px on IE. This can be the cause of much frustration when creating em-based layouts. I'm planning to write this up in detail (as workarounds can fall foul of a user's minimum font size if one doesn't take them into account) but for the moment I've got a demo here: http://www.nickfitz.co.uk/bugs/browsers/css/IE-Win/ie_percent_test.html Look at http://mrmazda.no-ip.com/auth/Font/font-rounding.html and see Opera 9, KHTML, IE, and Gecko all match to 3 decimal places for pt sizes, but there's a dichotomy between Gecko/KHTML and IE/Opera on fractional px. If limited to M$, check KHTML at: http://www.snugtech.com/safaritest/ -- 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] print stylesheet--can't see image
On this page http://www.cofc.edu/~hml/index2.html I am trying to set up my print stylesheet http://www.cofc.edu/~hml/style/print.css so that there is an image http://www.cofc.edu/~hml/images/printheader.jpg at the top. On the print preview, there is sufficient space for the image, but nothing is showing up. Any suggestions? Thanks in advance, Courtney __ 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] which one do i position?
good morning list! i want to position:absolute an img that's inside an a that's inside a li that's inside a ul that's inside a . . . here is the markup: ul lia href=img src=/li lia href=img src=/li lia href=img src=/li /ul which one do i position: absolute the img, a, or the li? each list item will visually be in a different part of the document and i'm curious as to what is the better practice. thank you. William __ 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] 100% Viewport Height
Hey all, I've been working on a layout for a web app for the past few days, and am running into some major cross-browser issues. What I'm trying to achieve is a 100%-height layout (similar to the new Yahoo Mail Beta), which allows the application to expand to 100% of the browser height, with no overflow. The problem I'm running into is achieving the effect across IE, FF, and Safari... Neither produce identical results (though FF and Safari seem to be the closest). Does anyone know of any samples/tutorials that show how to get the effect similar to Yahoo's Mail? Any pointers would be greatly appreciated... If you need any more info, please don't hesitate to ask. TIA! Frank __ 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] which one do i position?
Off the top of my head --
Assuming:
1. There are other lists on your page.
[we'll identify the list you want postioned elements in]
2. You want your images positioned relative to your links.
[we apply position:relative; to your image's parent element]
3. You want your images positioned in the same way for each link in your
list.
[we can use the list hook to apply the styles]
.listastic a {position:relative;}
.listastic img {position:absolute; left:5px; top:5px; border:none;}
ul class=listastic
lia href=img src=I'm a link, mate!/a/li
lia href=img src=I'm a link, mate!/a/li
lia href=img src=I'm a link, mate!/a/li
/ul
Shawn
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of William Lawrence
Sent: Tuesday, May 23, 2006 3:42 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] which one do i position?
good morning list!
i want to position:absolute an img that's inside an a that's
inside a li that's inside a ul that's inside a . . . here is the
markup:
__
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] which one do i position?
[i think i'm having a heck of a time figureing out which email client
to use with this list. nevertheless...]
Thanks Shawn.
So
1. Yes. There are other lists.
2. I want the links positioned relative to the lists container.
3. Irregardless, I think.
So, what you're saying is to position: absolute the img, yea?
This is what I'm currently working with:
#contain {position: relative}
div ul li a img {position: absolute}
#you {top: 5em; right: 0;}
#me {top: 10em; right: 5em;}
#he {top: 15em; right: 0;}
#she {top: 20em; right: 5em;}
div id=contain
ul id=who
lia href=youimg src= id=you alt= //a/li
lia href=meimg src= id=me alt= //a/li
lia href=heimg src= id=he alt= //a/li
lia href=sheimg src= id=she alt= //a/li
/ul
/div
On 5/23/06, Shawn Lawler [EMAIL PROTECTED] wrote:
Assuming:
1. There are other lists on your page.
[we'll identify the list you want postioned elements in]
2. You want your images positioned relative to your links.
[we apply position:relative; to your image's parent element]
3. You want your images positioned in the same way for each link in your
list.
[we can use the list hook to apply the styles]
.listastic a {position:relative;}
.listastic img {position:absolute; left:5px; top:5px; border:none;}
ul class=listastic
lia href=img src=I'm a link, mate!/a/li
lia href=img src=I'm a link, mate!/a/li
lia href=img src=I'm a link, mate!/a/li
/ul
Shawn
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of William Lawrence
Sent: Tuesday, May 23, 2006 3:42 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] which one do i position?
good morning list!
i want to position:absolute an img that's inside an a that's
inside a li that's inside a ul that's inside a . . . here is the
markup:
__
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 is this done ?
Mark Fellowes wrote: I've noticed a number of website , where graphics hang below or through various elements. It's achieved through 'layering' or overlapping. One can use floating images with or without negative margins applied, or absolute positioning of the images and/or surrounding containers. Combining foreground and background images on overlapping containers makes for plenty of variations. As an example: http://www.missiondata.com/ where the logo is below the header into the content area. Hope this isn't a stupid question but wondering how it's accomplished. In that example-case the header is actually full height of the graphics, but the main-area container below it is absolute positioned a bit higher than the natural flow - on top of the lower part of that header. The background on one of the overlapping containers in main-area creates the rest of the illusion. 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] firefox display problem
I am using a shading image in a div under each box element. I looks fine in IE, but in Firefox and Netscape there is a gap between the box and the shade bar. Can someone please tell me, what do I need to do to get the proper display in Firefox and Netscape? http://www.mimbee.net/test/index.htm __ 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] IE5.0/Win issue with position:absolute anchor
On 5/23/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote:
On May 23, 2006, at 4:00 PM, jack fredricks wrote:
The image is absolutely positioned, but I cannot left-click on it to
activate the link. I can right-click and open or open in new window,
however.
The only styling applied to it is position:absolute, so I imagine some
of you might have seen this before, and hopefully know a 'fix'.
Your link is absolute positioned, and therefore 'hasLayout' [1]; this
is what makes the image not registering the mouse-click.
Some tests and a workaround:
http://www.brunildo.org/test/IEaL.html
http://www.brunildo.org/test/IEABlock1.html
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
Philippe
Thanks Philippe,
I'd already tried to give it layout. But after your email I tried
again...with no luck.
I also took the samples from brunildo.org and made the a absolutely
positioned, to the same effect.
Here's my latest sample. Again, I'm sorry I've no publically viewable samples.
Lastly, according to [1] making an element position:abs gives it layout.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html lang=en
head
titleIE5 no click/title
style type=text/css
!--
#appheader
{
border:3px solid green;
height:60px;
position: relative;
}
a
{
position: absolute;
height:1%;
z-index:2;
}
img
{
z-index:2;
height:40px;
display:block;
position:absolute;
}
--
/style
/head
body
div id=appheader
a href=# title=bleh
img src=a.gif alt=bleh width=400px height=40px
/
/a
/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] print stylesheet--can't see image
Courtney Burge wrote: http://www.cofc.edu/~hml/index2.html On the print preview, there is sufficient space for the image, but nothing is showing up. Any suggestions? I can see it because I have 'print page background' turned on. Since printing/not-printing of background is up to each user, you should not rely on a background-image to display any kind of information for print. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] font-stretch / CSS2
[EMAIL PROTECTED] wrote:
I found this as an example on one of the font specification pages
referenced via the font thread email. This would be useful, but appears
to be only implemented in CSS2. As a designer or user how do you
access/force CSS2? Is it even viable at this time?
h2 { font-stretch: expanded; }
The w3c site says:
* It is indeed a css2 property:
css2 recomm. page
http://www.w3.org/TR/REC-CSS2/fonts.html#font-styling
* But it doesn't exist in the css2.1 (CSS 2.1 is derived from and
is intended to replace CSS2.)
css2.1 page http://www.w3.org/TR/CSS21/fonts.html
* See also:
Changes css2 - css2.1 page
http://www.w3.org/TR/CSS21/changes.html#q22
* It will be back in css3: (but a long way to go )
css3 fonts module page http://www.w3.org/TR/css3-fonts/#font-styling
I am afraid you cannot force a browser to support a non-supported
property. And the most don't:
* according to css-creator.com:
browser support
http://www.csscreator.com/attributes/properties/font-stretch
* I tried the Eric Meyer's testpage: no results in IE6, FF1.07,
Opera8.01, ...
font-stretch in the test suite
http://www.meyerweb.com/eric/css/tests/css2/sec15-02-03d.htm
But sometimes with lettter-spacing the effect can be almost the same:
testpage letter-spacing
http://home.tiscali.nl/developerscorner/css-discuss/test-font_stretch_alternative.htm.
:-)
Maybe also word-spacing, or a combination, can help in some cases.
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] making rows line up - tables or css?
I love CSS, and I try do to everything with CSS, but I'm wondering if tables are a better way to achieve my goal. I am trying to create a page that isn't going to have the same height content in each row, but needs to line up like this: A B A C D D E F G H G H Is there a reasonably easy way to do this with CSS. Is this better suited to tables? Thanks! Mike __ 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 is this done ?
Mark Fellowes wrote: I've noticed a number of website , where graphics hang below or through various elements. As an example: http://www.missiondata.com/ where the logo is below the header into the content area. Hope this isn't a stupid question but wondering how it's accomplished. My first thought is maybe it's an inline , in the xhtml source itself. Hope this is an okay question to ask. I think your first thought was a good one. In the source code we can read: img src=/images/logo_left.jpg alt= width=41 height=264/a href=index.shtmlimg src=/images/logo_mid.jpg alt=Mission Data width=137 height=264//aimg src=/images/logo_right.jpg alt= width=47 height=264/ so there are simply 3 plain images (without transparency) in the normal flow (layer above the background image in the body). No special css was used. You can see it clearly if you turn off the bg-image with the FF Webdeveloper extension [1]: screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/painting-over.gif. Greetings, francky [1] Extremely useful for all kinds of quick (css and other) analysis and trouble shooting. If not yet on your hard disk: hurry-hurry to Chris Pederick http://chrispederick.com/work/webdeveloper/! ;-) __ 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 to flow layout conversion
skye,
On May 20, 2006, at 3:12 PM, skye estes wrote:
right now, i'm working on the dvd page:
http://www.pacifictao.com/index.php:and i have this so far:
http://heli.cx/clients/pacifictao/dvds.html
with the css at http://heli.cx/clients/pacifictao/main.css
if the text-align: justify property actually worked, i'd be set, but
you
guys know how that is.
specifically, i need help getting the pictures to stay in rows when the
window is resized, and i still haven't come up with a good way to hang
the
text under them.
I haven't seen any responses to this, so I'll have a go.
First, think about the html markup. You're showing a list of dvds for
your customer to browse. Why not mark it up as a list.
ul
li class=imgwide
a href=DVD/tao001.htmlimg width=150 height=213
src=images/tn_cover001.jpg alt=Cosmic Inner Smile - Love, Joy, and
Gratitude for your Internal Organs //a
h4Cosmic Inner Smile/h4
pLove, Joy, and Gratitude for your Internal Organs/p
/li
/ul
Second, You must choose how to arrange them. Do you want always 4
across? if so:
li.imgwide { float: left; width 25%; min-width: 160px; text-align:
center; }
li.imgwide img { display: block; margin: 0 auto; }
Or, you can allow them to arrange themselves based on the width of the
user's browser window
li.imgwide { float: left; width 15em; min-width: 160px; text-align:
center; }
There is a lot of data about creating photo galleries that should give
you some ideas. Check the wiki and google.
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] making rows line up - tables or css?
On 5/23/06, Mike Soultanian [EMAIL PROTECTED] wrote: I am trying to create a page that isn't going to have the same height content in each row, but needs to line up like this: A B A C D D E F G H G H Is there a reasonably easy way to do this with CSS. Is this better suited to tables? It's quite easy to do with CSS if you understand floats and clearing floats. Basicly you just have a two column page repeated several times. But if you are used to tables you might find it more than you can easily handle. It requires thinking in a whole different way and that's not easy. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making rows line up - tables or css?
Mike,
On May 23, 2006, at 9:00 PM, Mike Soultanian wrote:
I am trying to create a page that isn't going to have the same height
content in each row, but
needs to line up like this:
A B
A
C D
D
E F
G H
G H
Off the top of my head, I'd do something like this. Since I don't know
what the content is, I'm using generic elements
-- html
div id=row1
div class=c1/div
div class=c2B/div
/div
div id=row2
div class=dcC/div
divDD/div
/div
div id=row3
div class=c1E/div
div class=c2F/div
/div
div id=row4
div class=c1GG/div
div class=c2HH/div
/div
--- css --
.c1 { float: left; width: 49%; margin-right: 1%; }
.c2 { float: left; width: 49%; margin-left: 1%; }
.dc { float: left; }
#row2, #row3, #row4 { clear: left; }
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
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] Marquee xhtml and css3
Hi, Is there a way to achieve a valid marquee effect with css and xhtml ? I tried a marquee tag in xhtml page and css rules. It is working fine in most browsers but not validate in xhtml validator. I reed the Bert Bos article at W3C Working Draft http://www.w3.org/TR/css3-box/#marquee I tried some testing with marquee css3 rules proposed by Bert Bos like marquee-style: slide; marquee-direction: left; marquee-speed: fast Without success. Is anybody knows how to achieve a valid sliding mechanism like this ? Thanks, GJ __ 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] IE5.0/Win issue with position:absolute anchor
jack fredricks wrote: The image is absolutely positioned, but I cannot left-click on it to activate the link. [...] I'd already tried to give it layout. But after your email I tried again...with no luck. As Phillipe mentioned, the problem in IE5.0 is caused by the fact that the anchor already has 'layout', caused by position:absolute. What you could try is to /avoid/ layout on the anchor: add a div (or another element) around the anchor, give position:absolute to this new element, and remove it from the anchor (as well as any other layout trigger like height:1% that you have now.) Don't know if this works in your real case. The only other workaround that I know is not a CSS one: use javascript to add (for IE5.0 only) an onclick event handler that emulates the normal anchor behaviour. hth, Bruno __ 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/
