Re: [css-d] Odd div spacing in FF Opera, but not IE?
The problem is visible in Firefox Opera, but not IE (on Windows).
Page is here: http://www2.petrescue.com.au/newindex.htm
The spacing that shouldn't be visible is just below the subnav with
the blue background.
Hi John,
Add these 2:
#navcontainer {padding-bottom:1px}
#maincontainer {padding-top:1px}
Thanks Thierry; fixed the problem beautifully. If you find a spare minute to
explain why that fixed the problem, it would be most appreciated; I always
like to know why things work :)
Cheers,
jb :)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd div spacing in FF Opera, but not IE? liquid-corners
Hi John, Not on-topic, but as well about good css-showing of the page: I saw the text of the #subnav coming out of the green background-box. It happens because I've (clientside) enlarged the font-size: in IE already at the first enlarging step, in FF after 2 steps. Reason behind is that the background-images are in fixed height boxes (and changing that wouldn't stretch the images but repeat them in y-direction). Solution is: make the corners liquid. How to do you can find in the article and examples in my Liquid Round CSS-Corners pages http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. Hope you can use some of it, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] whats your favorite way to test your stylesheets?
I mostly work on my Tecra Notebook running Ubuntu/Linux and I develop my sites with Quanta, BLuefish, Kate, Smarty, PHP, MySQL. I started to use CSS more extensive as I got a book (http://css-praxis.de) and read what is possible with css. I read a lot of browser specific problems and incompatibilities. So my question is how do you test your CSS? Has everyone different OS running (Mac, Windows, Linux)? Do you ask friends to test you website? Whats your favorite way? -- webmaster wlanhacking.de http://mail.wlanhacking.de/cgi-bin/mailman/listinfo/wlanhacking __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button text off-center in IE easy css-webdeveloper-tools
Iorhael wrote: 3. The short and easy use way: magic on screen! Francky, this is amazing!! Thank you for telling me about this :):) ... Yes, I was quite surprised when I saw it working! I see I've forgotten to add two warnings: 1. The changing in the sidebar is just real time - it does not change the real stylesheet. So when you turn it out or give a refresh of the page, all the changes are gone! But as you have discovered an improvement in the sidebar, you can copy and paste it immediately in the real stylesheet and save that to make it definitive. 2. Changing css, you see only the effect for Firefox. If a page is performing good in FF but not in IE, it doesn't work. Therefore you need to open IE and make changes in the real stylesheet. But also in this case the FF css-sidebar is extremely usable: to check if the IE-improvements do attack the presentation in FF (if yes, the IE-improvements have to be placed in an IE-only hack). That's it! francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button text off-center in IE easy css-webdeveloper-tools
1. The changing in the sidebar is just real time - it does not change the real stylesheet. So when you turn it out or give a refresh of the page, all the changes are gone! But as you have discovered an improvement in the sidebar, you can copy and paste it immediately in the real stylesheet and save that to make it definitive. Actually, you can save to your stylesheet directly from the toolbar without having to copy and paste...just click the Save icon above the tabs and navigate to the file :) The outline block feature that you mentioned is extremely helpful as well...I had been putting borders around some of my elements to check their positioning...this feature saves you from having to go that trouble. And its nice to have the View Source button tool barand tons of other features as well. What a useful tool this is! Thanks again! Debbie - Original Message - From: francky [EMAIL PROTECTED] To: Iorhael [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Sunday, January 15, 2006 3:33 AM Subject: Re: [css-d] Button text off-center in IE easy css-webdeveloper-tools Iorhael wrote: 3. The short and easy use way: magic on screen! Francky, this is amazing!! Thank you for telling me about this :):) ... Yes, I was quite surprised when I saw it working! I see I've forgotten to add two warnings: 1. The changing in the sidebar is just real time - it does not change the real stylesheet. So when you turn it out or give a refresh of the page, all the changes are gone! But as you have discovered an improvement in the sidebar, you can copy and paste it immediately in the real stylesheet and save that to make it definitive. 2. Changing css, you see only the effect for Firefox. If a page is performing good in FF but not in IE, it doesn't work. Therefore you need to open IE and make changes in the real stylesheet. But also in this case the FF css-sidebar is extremely usable: to check if the IE-improvements do attack the presentation in FF (if yes, the IE-improvements have to be placed in an IE-only hack). That's it! francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] whats your favorite way to test your stylesheets?
Jochen Kächelin wrote: I started to use CSS more extensive as I got a book (http://css-praxis.de) and read what is possible with css. I started by reading the W3C CSS specs. I still do. I decide what's possible with CSS (can't leave that to books or specs). I read a lot of browser specific problems and incompatibilities. Enough to drive you nuts ;-) Tips: don't hack any browser unless you (really - really) have to. So my question is how do you test your CSS? Against (X)HTML/CSS specs and all available browsers. Has everyone different OS running (Mac, Windows, Linux)? Would be nice to have them all, but I don't think everyone are that lucky. I'm limited to win Mac at the moment. Do you ask friends to test you website? If I can't make it out myself - yes. Usually limited to specific problems in specific browsers. Whats your favorite way? Creating my own support-list[1] (for each project) and work my way around. Making the most out of it in each browser by itself - regardless of capabilities/rendering/bugs in other browsers. regards Georg [1]http://www.gunlaug.no/contents/wd_1_02_02.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE/FF Spacing Problem
Hi Francky, Hope you can use some, Many thanks for those I will take another look at it later to see how I get on. -- Cheers, Julian Voelcker Cirencester, United Kingdom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Very odd IE issue on one machine!
Julian Voelcker wrote: One of the guys I work with has endless problems with IE on his laptop in that any design involving floats or % widths gets thrown out completely - it is as if the browser is reading the screen width as one thing, but in reality it is slightly narrower so layouts with floats end up being stacked. This problem seems unique to his Dell laptop - my desktop has exactly the same latest version of IE and WInXP but never has a problem. Has anyone here come across similar problems with specific machines? Check the windowsXP font-size options, on some weird laptop resolutions with large fonts selected I've seen layouts break because pixel sizing seems to go off... ;o) -- Join me: http://wiki.workalone.co.uk/ Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F Engage me: http://www.boldfish.co.uk/portfolio/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img tag, css and xhtml
On 1/14/06, tochiromifune [EMAIL PROTECTED] wrote: Do you think I should put my img tags inside p tags and apply my css styles to the p tags instead? You can just put all the images inside divs, and since block level elements like p and div are, well, block level, you can just style keep styling the images, unless you are applying floats... then you may or may not have to style the parent. Test and see. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Any suggestions
New to CSS and have two boxes on the front page of my site that are currently on top of each other and wanted them to be side by side, any ideas, Ive been searching for days, hoping its something simple I have just missed out on. Website http://www.earthrepair.com.au css http://www.earthrepair.com.au/text.css Thanks Erica Mueller __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Maintaining proportions of a div when resizing (A solution)
I recently needed a div banner on a liquid width site to keep its height
proportional to its width - however a quick google search didn't find
anything on the subject.
So, I developed my own technique, based on paddings and absolute
positioning.
The full write-up is available here:
http://leszek.swirski.co.uk/proportionaldiv.htm
It's quite a long write-up (my first!), but in summary you have two divs,
#outer and #inner, which are styled as follows:
α = width required
β = height when width is 1 (height/width ratio)
#outer {
height: 0;
width: α;
padding-bottom: α * β;
position: relative;
}
#inner {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 1/α;
}
So for a div width 50%, in which you want to keep a height-width ratio of
1:2, you'd have:
#outer {
height: 0;
width: 50%;
padding-bottom: 25%;
position: relative;
}
#inner {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 200%;
}
I hope this comes in useful for someone.
- Leszek
http://leszek.swirski.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Leszek Swirski wrote:
I recently needed a div banner on a liquid width site to keep its height
proportional to its width ...
http://leszek.swirski.co.uk/proportionaldiv.htm
It's quite a long write-up (my first!), but in summary you have two divs,
#outer and #inner, which are styled as follows:
α = width required
β = height when width is 1 (height/width ratio)
#outer {
height: 0;
width: α;
padding-bottom: α * β;
position: relative;
}
#inner {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 1/α;
}
So for a div width 50%, in which you want to keep a height-width ratio of
1:2, you'd have:
#outer {
height: 0;
width: 50%;
padding-bottom: 25%;
position: relative;
}
#inner {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 200%;
}
Leszek,
thanks for the interesting method.
I think you'll have to hide this IE/Win specific height of #inner from
the others.
/*\*/
* html #inner {height: 200%;}
/**/
Regards,
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] target attribute of anchor
On Jan 15, 2006, at 1:19 PM, Francesco wrote: Has the target attribute of the anchor tag been deprecated? If so, how are we now supposed to specify a target window? Francesco, There are two primary uses for targets: frames and popups. Many people (myself included) are of the opinion that frames are generally unfriendly to your visitors. HTML, CSS and Javascript have evolved to the point that Almost anything that you can do with frames you can also do in a single document. For these solutions, the target attribute just isn't necessary. However, if you absolutely require frames, you can use a FRAMESET doctype declaration, which will still validate with the (deprecated) target attribute. There are some cases in which opening new windows (for which targets are also used) is a good idea. The example that springs to mind is Amazon's now-standards What's This? link, which brings up a helpful explanation in a small popup. For this, a bit of unobtrusive Javascript is almost definitely the best way to go, so target is again unnecessary. -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Standards/Guidelines and making your site ADA friendly
Hi Everyone, I just sent the following email to my web mailing list on campus and I thought that some of the beginner CSS coders on this list might find this helpful. There was an email on this list (I don't know the original author, but thank you!) that sparked this whole email and I doubt very many people saw it so I thought I would do a writeup about it. Hopefully some of you find it interesting and/or helpful. Thanks, Mike Hey Everyone, I've been doing a lot of CSS research lately and I was running into somewhat of a roadblock. I was looking at various websites (commercial, educational, government, etc) and I was noticing two different styles of coding. One way would have markup like this: span class=headerThis is a header/span span class=bodytextBody text goes here/spanbr / and the other would be: h1This is a header/h1 pBody text goes here/p Initially I was leaning heavily towards the first example. I mean, why not? It's very descriptive and makes the code very easy to read. Plus, dealing with the headers is not hierarchical so if you decide you want a new kind of header/subtitle, you just create it. On the other hand, if you decide you want a new header/subtitle between h1 and h2, there isn't a h1.5! That can get annoying. A bit earlier I was through the W3C page regarding Class Selectors and noticed the following at the bottom of the section: Note: CSS gives so much power to the class attribute, that authors could conceivably design their own document language based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the class attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not. That didn't really make much sense to me until I happened to visit a website that was posted to the css-discuss list: http://www.onlinetools.org/articles/cssguides.html ...and in there is a section titled: Do not simulate markup via CSS They cite the following example: wrong: div class=headlineOur new products/div div class=subheadlineProduct 1/div p.../p div class=divider#160;/div div class=subheadlineProduct 2/div p.../p right: h1Our new products/h1 h2Product 1/h2 p.../p hr / p.../p After more research (and reading in the article), there are quite a few reasons to go with the second method. First, Dreamweaver will automatically insert p tags for you when you hit enter, and if you're importing documents from Word and have them styled with proper headings (heading1-6), it will put the correct markup for those headings. That saves quite a bit of tedious reclassing! The other reason, and probably more importantly, is that if you use standard HTML markup (p, h1, strong, etc), and then style those tags with your CSS, your website will degrade nicely when viewed with devices for disabled users. Remember, a screen reader does not know the difference between class=header and class=bodytext so it does not know how to navigate around your document. I'm not sure if this is new to anyone, but it was new to me so I figured there might be other people interested in it as well. I figure this kind of coding will probably become, or already is, mandatory for government sites so it's probably a good thing to talk about it because the campus template does not really enforce this kind of accessibility. It's up to the person coding the website to use good coding practices. Other good topics on the site include proper class and ID naming and also how to use contextual selectors instead of classes (which relates to the above examples). If you're new to CSS, or even if you want to know what's considered good style, take a look and you'll probably find it useful for building accessible and maintainable sites with CSS. enjoy, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] target attribute of anchor
On 15/01/06, Francesco [EMAIL PROTECTED] wrote: Has the target attribute of the anchor tag been deprecated? No, but it doesn't exist in strict DTDs or in the specs presently being developed by the W3C. If so, how are we now supposed to specify a target window? You don't. User's can open new windows when they want them. What does this have to do with CSS? -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Ingo Chao wrote:
Leszek Swirski wrote:
#inner { position: absolute; top: 0; bottom: 0; width: 100%;
height: 200%; }
/*\*/ * html #inner {height: 200%;} /**/
And the crazy reason IE/win needs that height in the first place, is
that IE/win can't handle AP for opposite edges of an element.
IE/win can't make inner fill outer in accordance with specs - without a
push.
Now all that's needed is an 'overflow: auto;' on inner, in case it
becomes too small.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Printing issues, 2-column, in both IE FF
I have been trying to figure out the printing problems with my two-column layout in FireFox and IE. IE has problems printing the call-outs (they print on top of other text) and FireFox has problems dropping lines of the text in the printout. I'm most concerned about the FireFox problem right now since text is actually dropped. That is the one that I've been working on and am plum out of ideas. I'm thinking I might be able to fix IE with a font-size change in the print css (but I haven't gotten to that). Any clues on how to get this to print right would be most appreciated. http://www.tincat-group.com/mewsings Feel free to ignore this suckerfish issue for now, but just in case someone has a clue... In IE the above page has a jump that I'm trying to fix by implementing suckerfish. After several hours of troubleshooting, I don't have it working yet in FireFox when highlighting a dropdown selection as seen at http://www.tincat-group.com/about/menutest.html == Thanks in advance for any suggestions. --dawn -- Dawn M. Wolthuis Tincat Group, Inc. www.tincat-group.com Take and give some delight today! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Gunlaug Sørtun wrote:
Ingo Chao wrote:
Leszek Swirski wrote:
#inner { position: absolute; top: 0; bottom: 0; width: 100%;
height: 200%; }
/*\*/ * html #inner {height: 200%;} /**/
And the crazy reason IE/win needs that height in the first place, is
that IE/win can't handle AP for opposite edges of an element.
IE/win can't make inner fill outer in accordance with specs - without a
push.
Now all that's needed is an 'overflow: auto;' on inner, in case it
becomes too small.
regards
Georg
Thanks, Georg :)
IE5Mac needs twice the padding-bottom, e.g. 50% (padding-bottom: 25%;)
in you css-d mail example, 61.8% in your example on your test page
(padding-bottom: 30.9%;)
/*\*/
* html #inner {height: 200%; overflow:auto;}
/*/
#inner {height: 61.8%; }
/**/
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
#inner { position: absolute; top: 0; bottom: 0; width: 100%;
height: 200%; }
/*\*/ * html #inner {height: 200%;} /**/
And the crazy reason IE/win needs that height in the first place, is
that IE/win can't handle AP for opposite edges of an element.
IE/win can't make inner fill outer in accordance with specs - without a
push.
Now all that's needed is an 'overflow: auto;' on inner, in case it
becomes too small.
IE5Mac needs twice the padding-bottom, e.g. 50% (padding-bottom: 25%;)
in you css-d mail example, 61.8% in your example on your test page
(padding-bottom: 30.9%;)
/*\*/
* html #inner {height: 200%; overflow:auto;}
/*/
#inner {height: 61.8%; }
/**/
Thanks to both of you, I'll update the page. Could you test if it will
always need twice the padding, or if this needs to be multiplied just like
the height did for IE/Win? I'll assume the latter for now.
Like I said with the height though, you don't technically need to hide it
since it'll just calculate 200% of 0, which is still 0. Nevertheless, I
suppose it doesn't hurt to hide it for reasons of clarity.
- Leszek
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Leszek Swirski wrote: Like I said with the height though, you don't technically need to hide it since it'll just calculate 200% of 0, which is still 0. Nevertheless, I suppose it doesn't hurt to hide it for reasons of clarity. Your test case actually covers a lot of my screen when I don't hide the 200% from the others. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Your test case actually covers a lot of my screen when I don't hide the 200% from the others. Ingo And that just goes to prove that IE is a cross-platform pain in the arse. Thanks for the testing, I've updated (again): http://leszek.swirski.co.uk/proportionaldiv.htm - Leszek __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Any suggestions
First suggestion: use a real subject explaining your problem, this will make people answer. We are helpful, but busy and nobody commits to ANY SUGGESTION I don't see any issue on the page in Safari, can you tell us where the issue occurs? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Leszek Swirski wrote: Your test case actually covers a lot of my screen when I don't hide the 200% from the others. Ingo And that just goes to prove that IE is a cross-platform pain in the arse. Thanks for the testing, I've updated (again): http://leszek.swirski.co.uk/proportionaldiv.htm Screenshot offlist. You really need to delete height: 200% and serve it to IE/win only. And IE/Mac needs a /height/ of 68.1%, not a padding-bottom of 68.1% in #inner. Ingo. -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd div spacing in FF Opera, but not IE? liquid-corners
Thanks for this Francky! I'll go through your article in more detail today (Monday here, so back to work time :) If I can use your liquid-corners technique to resolve the subnav problem, that'd be great - not sure how it'll go with the gradient background of the row though? I'll give it a shot and let you know how I go. Cheers again jb :) -Original Message- From: francky [mailto:[EMAIL PROTECTED] Sent: Sunday, 15 January 2006 7:16 PM To: John Bishop - alternative it Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Odd div spacing in FF Opera, but not IE? liquid-corners Hi John, Not on-topic, but as well about good css-showing of the page: I saw the text of the #subnav coming out of the green background-box. It happens because I've (clientside) enlarged the font-size: in IE already at the first enlarging step, in FF after 2 steps. Reason behind is that the background-images are in fixed height boxes (and changing that wouldn't stretch the images but repeat them in y-direction). Solution is: make the corners liquid. How to do you can find in the article and examples in my Liquid Round CSS-Corners pages http://home.tiscali.nl/developerscorner/liquidcorners/liquidc orners.htm. Hope you can use some of it, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Very odd IE issue on one machine!
Hi Tony, Check the windowsXP font-size options, on some weird laptop resolutions with large fonts selected I've seen layouts break because pixel sizing seems to go off... Thanks, that had occurred to me and as far as I can remember I did check that one, but will check again on Tuesday. -- Cheers, Julian Voelcker Cirencester, United Kingdom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] img tag, css and xhtml
tochiromifune wrote: ... styles directly applied to the img tag. The problem is that my page fails the w3c validation test because my img tags are not contained in other parent tags (as far as I understand the problem that is). ... Hi Chris, I made a testpage http://home.tiscali.nl/developerscorner/css-discuss/valid-img-styling.htmwhich validates as html and as css, even without head/head and body/body tags. Are you sure the validator reports that it is the direct styling of the img-tag? Can be also something like no px behind the width or height, or an other reason. Or maybe a DOCtype which doesn't allow it. Perhaps you can send the link to the non-validating page? francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hello people + IE bug
Hello everybody, I'm Martin from France (which could explain some oddities in my english) and this is my first message on css-discuss. Currently working on this webpage, http://minilien.com/?nODqAKMmYi I'm facing what could look like a classic Internet Explorer bug : the header is few-pixels-shifted when compared with the rest of the page (unless the page itself is shifted and the header is OK :-) If you don't have IE you can see the bug here : http://margranger.free.fr/flautre_bug.png BUT what drives me crazy is that so far as I know, the problem only occurs in the index page (the other pages of the site look good) although the stylesheet is the same, and the sourcecode is quite the same. (same div ids and classes, same layout, etc.) Who would be nice enough to help me ? By the way, do you know how to emulate Internet Explorer for linux users ? This would help me fixing the display bugs because so far the only solution I found is ringing or mailing friends and asking them to look at my website with IE... There's aslo browsershots.org but it's dead slow. Thanks for any help, and hello again. M. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hello people + IE bug
the header is few-pixels-shifted when compared with the rest of the page (unless the page itself is shifted and the header is OK :-) For me, removing the background-positions on #conteneur and #top in martin.css seemed to fixed the problem. To run IE in Linux, you might consider running windows in vmware player (http://www.vmware.com/products/player/) or some sort of virtual machine. I've also heard that people have gotten IE to run in wine (http://www.winehq.org/). Ricky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hello people + IE bug
Ricky Zhou wrote: For me, removing the background-positions on #conteneur and #top in martin.css seemed to fixed the problem. I removed them and it makes no difference on my firefox. So I guess they weren't that useful :-) I hope this will fix the bug for IE (but I can't check now cause all my friends running IE are sleeping now : it's 3AM here). Anyway thanks for your help ! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] new to list, issues with IE
Rowan- Many thanks, this solved my issue. Will also be working on fixing issues with absolute widths and the br / problem you mention, which I am assuming might be fixed by forcing my p tags within content to display as inline? A bit confused on this part, when I was using the p element before to mark up my content, it fell apart and didn't validate... Thanks again, Alex On Jan 15, 2006, at 4:02 PM, Rowan Wigginton wrote: alexkillough wrote: http://publicduck.com/ In windows IE, the header loses its line breaks and breaks out of the fixed width page wrapper, which makes everything take up two screens horizontally and vertically (oddly the two column content areas are left intact). First of all try not to abuse the BR tag, if you need to display a paragraph use paragraph p tags, it will make your life a little easier. I noticed you used those asterisks (*) in the CSS, you should really never have to use those sort of hacks, I've never had to anyway. By removing them most of the IE problems will go away. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hello people + IE bug
Martin Granger wrote: I removed them and it makes no difference on my firefox. So I guess they weren't that useful :-) I hope this will fix the bug for IE (but I can't check now cause all my friends running IE are sleeping now : it's 3AM here). Anyway thanks for your help ! Voila: IE under Win98SE is performing fine now. francky ps: I should sleep too: 3:50AM over here ;-) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
Hi Tina, I fooddled also somewhat around your codes, and found the page rightmenu.htm http://frontpage-tips.com/rightmenu.htm. See: = = = = = td style=background: #eee; p style=margin-top: 3px align=center input type=text name=user2 value=email address size=13 style=border-style: solid; border-width: 1px; /td td align=center style=background: #eee; = = = = = and there's the happy violin. No that's not it .. that was me trying to see if the white would go away ... I'm guessing, though I've not tested it yet, that Thierry is right. That colour above is grey not white even i can read that right off:) francky (thinking: it's no m/f point m/f ? don't know what that means to say that the international html/css standards of w3c and MS-programs as FP (and Word, the easy converting in htm-option!) don't have everything in common...)(and thinking [ THE 3 GOLDEN TIPS ;-) ]: allways validate your FP-pages with the html-validator and the css-validator, and allways check your FP-pages in Firefox to see if they aren't IE-only). MMM I appreciate you took the time to look at the code .. (thinking: however you did not test it first (obviously) and gave me a wrong answer, which btw was so obviously wrong because otherwise the colour code would be saying white!... I tell you this for your own elucidation. ) (and thinking perhaps before trying to answer cleverly you first take the time to test the answer) Why you feel the need to point out the obvious to me, re your 'golden tips' and word comments I've no idea really. You were wrong there too, however on one point. the idea that fp03 and international html/css standards of w3c don't have anything in common and further to that . Always check your web editor (which includes np) pages in different browsers (and there are more than two btw) and with the validators, one checks with them no matter what editor one is using. Tina __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] new to list, issues with IE
alexkillough wrote:
Many thanks, this solved my issue. Will also be working on fixing
issues with absolute widths and the br / problem you mention, which I
am assuming might be fixed by forcing my p tags within content to
display as inline?
That doesn't sound right at all, but perhaps it's just inline that we
have different perspectives for...?
Inline is the behavior you get with a span, but has nothing to do with
the margins (well - they disappear because inline elements doesn't have
margins, but it can be done better).
When you want a paragraph of text in your page, you should use a p/p
set to put in. If that makes the distance to the previous block element
(headers or other p's) too big, it can be adjusted with the p-margin
settings:
--stylesheet
p {
margin: .2em 0; /* short form for: margin-top: .2em, margin-bottom:
.2em and margin-left + -right: 0 */
}
--end stylesheet
It should be added to this, that a paragraph following a paragraph does
not add up their adjacent margins, the margin space between them is the
width of the higher margin of the two.
In my opinion your left-column of text should go with a header on
view, submit, subscribe and contact - and everything else in p's.
If that does not validate then come back and ask how to make it
validate, correct semantic markup should validate :-)
By the way - I'm quite sure that you'd please more repliers than me by
replying _below_ the text that you comment on ;-) [1]
Best regards
Jesper Brunholm
[1]: http://www.css-discuss.org/policies.html and in more detail:
http://css-discuss.incutio.com/?page=GmailAndCssDiscuss
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
