[css-d] CSS for custom fonts
I'm having a problem concerning a site that needs a custom font that's not standard in peoples pc's. I've searched the whole web to find this, finally got here and thought, these smart people will help me =). So please do help me, I know it is browser specific but I'll take it anyway ;-) It would be a great help to get that CSS code, the file is named Dirtyego.eot and comes from dafont.com (dorry for spam) Thank you for your time Cheers, Flupke -- ___ The coolest e-mail address on the web and its FREE! Sign-up today for Beer Mail @ beer.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] CSS for custom fonts
.I'm having a problem concerning a site that needs a custom font that's not standard in peoples pc's. I've searched the whole web to find this, finally got here and thought, these smart people will help me =). So please do help me, I know it is browser specific but I'll take it anyway ;-) It would be a great help to get that CSS code, the file is named Dirtyego.eot and comes from dafont.com (dorry for spam) Thank you for your time You can do it, however it is Internet Explorer-only. Have a look at http://www.cssplay.co.uk/ie/weft.html for how it's done. An alternative, might be http://www.shauninman.com/plete/2004/04/ifr-revisited-and-revised if you don't mind using a hint of Flash and JavaScript. __ 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] simple box model question - I think
Don Hinshaw wrote: Hello list, I am trying to present a photo with a border around it that is 4px away from the image and I am struggling with why IE 5x does not respect the padding on the image that creates the 4px buffer in IE6, FF, Safari etc. As usual, I suspect the answer is staring me in the face, but I am stumped. Here is a sample URL stripped down for easier debugging with the style inline. http://72.29.65.35/~somedom/css/image_border_test.html Don, There is no answer. IE5x just won't do it, because it's old and terribly buggy. If you really must have that gap, you'll have to wrap the image in a div and apply the padding and border to it instead. But this is probably not worth it for such a small cosmetic issue in such an old browser. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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 for custom fonts
It would be a great help to get that CSS code, the file is named
Dirtyego.eot and comes from dafont.com (dorry for spam)
EOT (stands for Embedded Object Type) was an attempt to define a
standard font format back in the era of v.4 browsers. I had to dig
across long forgotten code to retrieve these snippets:
@font-face { font-family: myfont; font-style: normal; font-weight:
normal; src: url(fontname.eot); }
body { font-family: myfont, Times, Times New Roman, serif; }
It only worked in IE. You had to use Microsoft's WEFT to convert a font
into .eot (using a sample page, because it always wanted to rewrite all
your files itself). No matter what the webpage at
http://www.microsoft.com/typography/web/embedding/weft3/ says, the
latest version of WEFT was 5.3.2 and you had to register into
Microsoft's VOLT Community to obtain it.
A word of caution: when converting to .eot you had to explicitly list
the web adresses where the font was to be used (kind of rudimentary
DRM), so your downloaded .eot might work fine when testing from disk
(because the original developer would have listed 'file:///c:\' as a
valid source for testing) but fail to embed when called from your
webserver. As far as I can remember there was no way to put * into the
domain list...
At the same time there was a (commercial) tool to do the same in NN4, I
believe it was called Webfont Master by Bitstream. This software has
vanished from Bitstream's website long ago. The produced format (can't
remember what it was called) was purportedly compatible with IE(4) too.
sIFR really seems as a more sensible solution overall (if only I could
make it work with ems...)
djn
--
Dejan Kozina
Dolina 346 (TS) - I-34018 Italy
tel./fax: +39 040 228 436 - cell.: +39 348 7355 225
http://www.kozina.com/ - e-mail: [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dynamic div heights
Diona Kidd wrote: I have a design at http://www.modernflow.com/client_data/test/ that needs a little help regarding div heights and accessibility. snip This doesn't seem to be related to the 100% height divs as mentioned in some tutorials on the web. I did try that approach without any luck. I also tried a 'faux column' approach. I've been staring at this for a while and could really use a fresh perspective. Faux columns is perfect for this design. What didn't work? Can you show us what you tried? There are a couple other equal height column techniques: http://www.positioniseverything.net/articles/onetruelayout/equalheight http://www.projectseven.com/tutorials/css/pvii_columns/index.htm http://www.sitepoint.com/article/exploring-limits-css-layout Lots of info and links at: http://css-discuss.incutio.com/?page=AnyColumnLongest Also, regarding text enlargement...how can I approach this design so when the text grows, the design doesn't completely blow up in the user's face? ;) This is a generalization, but it's true 98% of the time: never set heights. Don't do it. Let content determine height. This not only protects your design from larger text sizes, but also from when your client comes back and wants to add a page more of text to your little fixed box. Also, don't lay real text over images unless that text can overflow off the image without looking bad or the image can grow. In your case, you could make the header image three times larger than it is now but only show a piece of it at the initial font size. Then as the text grows, the header could grow too, revealing more of the background image. Make sure to assign a matching background color so that when the background image eventually runs out, the white text could still sit on top of the color and be readable. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background image not appearing in Windows 98
Just fired up and old computer with Windows 98 on it and background image doesn't appear on site below www.salesexecs-online.co.uk Works fine on Xp across Opera, FF and IE6 Any idea why? Cheers Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.385 / Virus Database: 268.2.6/288 - Release Date: 22/03/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] Site check request please
Webmaster wrote: http://www.deselectdesign.com/test/ Suggestion: - Try setting 'minimum font size = 32px' in Opera. A bit extreme, but that option is supposed to make text very readable. It doesn't. - Try resizing fonts in IE6. Since that won't work; try 'ignore font size' in IE6. Doesn't work to well either, I'm afraid. Conclusion: - Try *not to* set font-sizes/line-heights in pixels. More... http://www.gunlaug.no/contents/wd_1_03_02.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site check please...
OK! It's done. I've checked it in Safari (developed on OSX), on FireFox and in Linux, but not on Win IE, so please be kind if you find a problem. This is a 100% CSS site with just enough .PHP to switch pages, a complete rewrite from a very table oriented web page. This is a completely volunteer project and I've spent hundreds of hours over the years keeping this site up to date and rel event, so help me out by taking a look and giving me some feedback. http://kaiserklan.com/roundtable Thanks in advance... -- YIS/YIV Keith D Kaiser -- Venturing Roundtable Commissioner kaiserklan.com kaiserklan.com/roundtable kaiserklan.com/wa0tjt [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] polygon in CSS
Thanks for the links and ideas.
I'm sorry I wasn't more clear. I'll paste in an example of my code
and restate my question. The technique is documented at this link:
http://www.frankmanno.com/ideas/css-imagemap/
To create the image map, a definition list is used. As you hover over
the image, a little transparent window shows the active region for
the hover area and then a description pops up at the same time. The
active area for the hover is defined in the first two lines below,
where the position and height and width produce the active area for
the hover.
My question is, can you define a polygon shape in the CSS
definition? Can the active area for a hover be any other shape than
a rectangle in CSS?
dd#slidersDef{top:0px; left:4px;}
dd#slidersDef a{position:absolute; width:112px; height:64px; text-
decoration:none; border:none; background:transparent;}
dd#slidersDef a span{display: none;}
dd#slidersDef a:hover{background:transparent url(graphics/
graypix.png) repeat; border:1px solid #d2d2d2;}
dd#slidersDef a:hover span{
display:block;
text-indent:0;
vertical-align:top;
color:#3a92de;
background-image:url(graphics/blackpix.png);
background-repeat:repeat;
font-weight:normal;
position:absolute;
border:none;
top:100%;
left:-8%
margin:0px;
padding:5px;
width:287%;
}
Here's the matching html that goes with this CSS:
dt id=sliders1./dt
dd id=slidersDefa href=#spanDescription goes here./
span/a/dd
On Mar 22, 2006, at 8:19 PM, Christian Heilmann wrote:
Hello Everyone,
I'm new and I hope you don't mind me jumping right in and asking a
question.
I've adapted this slick image map method.
http://www.frankmanno.com/ideas/css-imagemap/
... Is there any way to define the
area for a polygon in CSS?
Tantek Celik has done some work on polygons.
http://tantek.com/CSS/Examples/polygons.html
Slants are a different thing than image maps though...
http://www.alistapart.com/articles/sprites has some examples in the
irregular shapes section.
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] h2 with border/floating div right
I have a site where I am using a border on a H2, which is used as the heading in the main content area of the page. On some pages, I am wanting to put a box of nav links on the right side of the main content area, with the content wrapping around it. Problem is that the border on the H2 extends under the floated div. What is the best way to avoid that? It doesn't extend under the floated div in IE, only in FF/NS. -- Jim Wright Wright Business Solutions [EMAIL PROTECTED] 919-417-2257 -- Jim Wright Wright Business Solutions [EMAIL PROTECTED] 919-417-2257 __ 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] Vertical Centering
Listers, I recall someone posting a very easy method of vertical centering a block in a viewport a while back. Seemed straight forward - positioning with percentages and a little negative margin nudging. Googled but came up empty. Can anyone point me to this? How cross-browser is it? Thanks a bunch. -- Tom Livingston __ 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..http://open-sites.net
how can be applied on css in this site? thank you for all http://www.open-sites.net - Blab-away for as little as 1¢/min. Make PC-to-Phone Calls using Yahoo! Messenger with Voice. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please...
Mike Davies wrote:
www.integra-server.co.uk/essie/
The page appears correctly in Opera 7.54 and nearly correct in
IE5.0/Windows. There are a couple of things with Firefox :
Comment: those browsers are a bit old now. If Firefox is just as old
then that's probably the reason for those things, as I can't see
anything wrong in Firefox 1.5.0.1.
Advice: upgrade all browsers to the latest, stable, versions. Keep some
older versions for testing - if you can - and have to.
IE5 has a narrow gap above the nav bar which I think might be a
margin error somewhere.
No. IE/win has 'inline' as default-style on images - creating a gap
below the header-image.
#headimage {display: block;}
I would also like to add a colour bar at top and bottom of #pagewidth
but have tried both margin-top/margin-top-color and
border-top/border-top-color but neither work in any browser.
You have just not spelled it out correctly. Also; margins don't take
colors. A border will do.
Try this...
#pagewidth { border: solid 5px #694105; border-width: 5px 1px 0 1px ;}
...which is a 'shorthand' version followed by specific border-width.
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] Vertical Centering
Tom Livingston wrote:
I recall someone posting a very easy method of vertical centering a
block in a viewport a while back. ...]
Tom Livingston
Three replies to the same question a couple of days ago:
1/ #body {margin: 2px 0px 0px 0px;text-align: center;background-image:
url(images/background.png); }
#container {margin: 0 auto;width: 763px;background-image:
url(images/back.png);background-repeat: no-repeat;background-color:
#ff;display: table;}
Set the container width and min-height in %. and add html, body {
height: 100%; } IE doesn't know 'display: table;' or min-height, so it
is already being left out of the vertical centering party. Most of the
time, vertical centering turns out to be useless because web pages tend
to get longer over time. As soon as you have to scroll the vertical
centering effect is gone (and if you do it wrong, content disappears
out the top of the viewport). In short I wouldn't worry about it too
much.
Roger Roelofs
2/ Possible, but difficult-- and not user friendly. To stay centered
vertically at 800 the height needs to be around 380px or less. Centering
vertically, at any screen resolution, is dependent on user top and
bottom window chrome. The height of the window varies wildly on my
browsers. Compensating for probable font zoom is really tough(zoom the
fonts on your current layout). Mostly one is better off taking advantage
of the vertical fluidity of the Web, and the vertical canvas, by /not/
restricting height. That being said, this is one method for centering
vertically and horizontally: http://dlaakso.com/center-stuff.html.
~davidLaakso
3/ Note that if the window is shortened enough the top of the centered
box gets cut off and cannot be scrolled to. I agree with David and Roger
-- don't bother with vertical centering.
Zoe
Regards,
~davidLaakso
--
Typography exists to honor content.
--Robert Bringhurst
http://www.dlaakso.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] css..http://open-sites.net
At 06:46 -0800 23/3/06, durmus cosar wrote: how can be applied on css in this site? thank you for all http://www.open-sites.net Durmus, If you want to get a satisfactory answer you're going to have to ask a more specific question than that. CSS can be applied to any HTML, so the short and unhelpful answer to your question as it stands would be Using the CSS editor of your choice. If you meant that you don't know where to start finding out about CSS, then check here: http://css-discuss.incutio.com/?page=UsefulResources and by the way the css-d wiki is a great resource in itself: http://css-discuss.incutio.com/ If you meant that you want to get rid of tables for your layout, look here for ideas: http://css-discuss.incutio.com/?page=CssLayouts Best wishes Alex Robinson css-d moderator __ 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] IE6 problem - content div jogging down
I am not seeing this problem in the other browsers on either platform. In IE6, the content column is jogging down below the navigation. I haven't checked 5.5. How do I fix this? http://mdh-test.com/egs_new http://mdh-test.com/egs.css Thanks in advance! -- Theresa Mesa, http://mesadesignhouse.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] some progress, more questions...IE(mac) scroll missing, IE(win) jumping
First my thanks to Georg and davidLaakso for helping me along with my first try. This is how far I have gotten after another six days: http://www.sandsmuseum.com/test/tutor10.html (the image is there to show hidden behavior) http://www.sandsmuseum.com/test/newstyle/ site4.csstext appearance http://www.sandsmuseum.com/test/newstyle/columns9.css layout http://www.sandsmuseum.com/test/newstyle/ rightnav.css right nav appearance both html and CSS validate except for the zoom... 1. IE (mac) I lost the horizontal scroll bar before. Now I am missing the vertical! I thought I found the solution in a search but I could not figure out where to put the Holly 1% height because of the relative inside an absolute. 2. FireFox (win) Resizing (dragging) the window vertically causes the right column to jump in, perhaps to the minimum size? Resizing it horizontally is ok and suddenly fixes the problem. Careful movement can freeze it wrong. 3. IE (win) The right column overflows the footer and the window flickers on resizing. I suspect many of my problems are caused by my attempt to make the grey on the right column extend down to the footer. Any suggestions on how I might find these problems on my own, such as a testing strategy or away to think of the code, would be appreciated. I add and then check for any breaks. Perhaps I should keep my CSS inline with the page until I get it to work and then move it external? Comments on code and even color always appreciated... Thank you for looking, Michael Michael Sands 1652 Kennewick Drive Sunnyvale, CA 94087 +1 408-773-1170 The Sands Mechanical Museum www.sandsmuseum.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] Front-page search box: Room for CSS improvement?
Hi folks,
Below is HTML/CSS for a home page search box... I want the label,
input, and search button graphic to align all on one line.
Example via Safari: http://www.ambiguism.com/CSSD/form.gif
How could I improve-upon this code (basically I want it to be as
cross-browser/platform compatible as possible, so far it works perfect
in Safari - I did not include my code for fieldset/legend, but feel
free to post bullet-proof code for that too):
form { margin: 0; padding: 0; }
form * { vertical-align: middle; }
label {
font-size: .7em;
font-weight: bold;
letter-spacing: .1em;
text-align: right;
color: #fff;
width: 5em;
float: left; /* -- Worried about this and IE/PC */
}
input.searchBox {
border-width: 1px;
border-style: solid;
border-color: #555 #ccc;
padding: 1px;
width: 125px;
height: 14px;
}
input.imgGo {
width: 16px;
height: 16px;
}
input:focus {
background: #efefef;
color: #000;
}
fieldset
legendSearch our site:/legend
label for=searchSearch:nbsp;/labelinput
class=searchBox
type=text value= name=search id=search maxlength=100 /
input class=imgGo type=image name=btnSearch
id=btnSearch
src=/images/template/go.gif onclick=document.form1.submit(); /
/fieldset
Links, tuts, examps, suggestions?
Many many many TIA,
Cheers,
Micky
__
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] IE fieldset width
Hello Everyone, on http://www.frankfurter-tennisclub.de/cms/front_content.php?idcat=4 i tried to build a form without using tables for layout. In Firefox it works fine but in IE6 the fieldset seems to be too wide. If anyone can help with a solution it would be much appreciated. Best Regards Carsten Peters -- Carsten Peters Kurfürstenstr. 17 50678 Köln Tel.: 0221. 120 98 41 Mobil: 0178. 845 12 04 http://carsten-peters.net __ 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] Scrolling Table Problems...
Yall, I am a newbie to both the list and advanced CSS...I am familiar with the basics of CSS but am trying to incorporate what (to me anyway) is a very complex CSS feature and am having a slight problem or two with it. Basically, I am trying to use the scrolling table style that Terence Ordona (sp?) put together (which is just awesome!) and have hit a couple of snags. Originally, I was trying to use the fixed column (Big 4?) version and after pulling out a lot of hair, switched to the Big 3 version...which is working for the most part. Here is the page (look at the bottom): http://localhost/WilliamsGenWeb/results_page.php When looking at it in IE, it is a work of art...everything lines up and functions beautifully. However, Firefox gets weird in a couple of ways. First, when loading the page in FF, the table sprawls to the right and half of it is off the screen. The only thing I have been able to do to deal with it is change the page style from basic to none then back to basic again...which fixes the problem. So, first question: what the heck causes this and how do I fix it? The second problem is with the last column on my header in FF. It is labeled 438. I cannot figure out how to get the padding setup correctly so that it is the same 17px width as the rest. Finally, the last column of the scrollable area is, for lack of a better word, fat. Every one of the DYS columns should be 17px wide...is there something I am doing wrong here?? My overall CSS sheet is at http://localhost/WilliamsGenWeb/includes/williamsv2.css I really appreciate any help anyone can give me...I have been working on this for over a two weeks, trying to fix it on my own without any luck. Kind regards, Adrian Adrian Williams Williams DNA Project Administrator Williams Source Documentation Repository http://williams.genealogy.fm/ __ 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] Vertical Centering
I recall someone posting a very easy method of vertical centering a block in a viewport a while back. Seemed straight forward - positioning with percentages and a little negative margin nudging. Googled but came up empty. Can anyone point me to this? How cross-browser is it? Here's another for the record: http://www.wpdfd.com/editorial/thebox/deadcentre4.html I tried it in a bunch of browsers a few weeks ago. It worked in more than I expected. As far as I remember, it worked in IE 5+, Opera 8+, and Firefox. No NN4 though. Not sure about Mac browsers. Kudos. -- Michael Clayton www.twilighted.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] Rounded corners and Transparent GIFs
For my next trick, I'll need a div with rounded corners on top of a textured background. Any volunteers from the audience? My launch pad was this ALA article: http://www.alistapart.com/articles/customcorners/ I was skeptical about this being possible at all, but here is my stubborn progress: http://www.twilighted.com/tx/giftest.html The div must be elastic horizontally and vertically. The problem is that the when the corner images overlap, the transparent corners are blocked out, leaving a rectangular corner. Try shrinking the text and watching what happens to the bottom left corner. Here is a shortcut to the ALA article's explanation of how the images are sliced: http://www.alistapart.com/d/customcorners/step1.1.html This would be very easy to arrange with tables, but that would be embarassing. I've been trying to place one horizontal and one veritcal box with white backgrounds behind the main div, but have been so far unsuccessful. Here's a quick mockup: http://www.twilighted.com/tx/theory_example.jpg I just want a nice clean box with rounded, transparent corners. All that I have found so far has been pain! -- Michael Clayton www.twilighted.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] Vertical Centering
Tom Livingston wrote: http://dlaakso.com/center-stuff.html I love you. -- Tom Livingston You'll be sorry. Vertical center positioning is /not/ a good idea. Re-read the thread regarding same. ~davidLaakso -- Typography exists to honor content. --Robert Bringhurst http://www.dlaakso.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] Rounded corners and Transparent GIFs
See this site for a css + js solution to rounded corners with transparent capability. http://pro.html.it/niftycube/ Jim On 3/23/06, Michael Clayton [EMAIL PROTECTED] wrote: For my next trick, I'll need a div with rounded corners on top of a textured background. Any volunteers from the audience? __ 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] some progress, more questions...IE(mac) scroll missing, IE(win) jumping
Michael wrote:
http://www.sandsmuseum.com/test/tutor10.html
1. IE (mac) I lost the horizontal scroll bar before. Now I am
missing the vertical! I thought I found the solution in a search but
I could not figure out where to put the Holly 1% height because of
the relative inside an absolute.
a: do not apply the 'Holly hack' to IE/Mac. It doesn't need it and it
doesn't interpret it well.
b: IE/Mac is pretty lost with that kind of stretched column layout.
For now it seems like...
/*\*//*/
body {overflow: auto;}
.column {margin-bottom: 0; padding-bottom: 0;}
/**/
...is the best option - even with those scroll-bars. Put the entire
IE/Mac hack last of all styles, and keep on looking for suitable
re-styling and corrections for IE/Mac only.
2. FireFox (win) Resizing (dragging) the window vertically causes
the right column to jump in, perhaps to the minimum size? Resizing
it horizontally is ok and suddenly fixes the problem. Careful
movement can freeze it wrong.
Probably the usual, old, FF-bug that is messing up that layout method.
Seems ok in Firefox 1.5.0.1
3. IE (win) The right column overflows the footer and the window
flickers on resizing.
Same footer-problem in Opera 9tp2.
Can't see anything but the flickering caused by the usual slowness in
IE/win.
#footer {position: relative; background: #fff;}
...looks like an alright fix for IE and Opera.
I suspect many of my problems are caused by my attempt to make the
grey on the right column extend down to the footer.
Most of them, I think :-)
OTOH: the stretched column layout will probably work well in most new
browsers. It's the slightly older browsers/versions that may cause
problems - for obvious reasons, so if you need to support those then a
more ordinary 'faux-column' layout will be easier to work with.
'Faux-columns' will always stretch as far as needed - and no further.
Any suggestions on how I might find these problems on my own, such as
a testing strategy or away to think of the code, would be
appreciated. I add and then check for any breaks.
No problem... as long as you keep track of what causes each break -
browser-bugs or weaknesses, or bad code. Not always easy to sort out.
Perhaps I should keep my CSS inline with the page until I get it to
work and then move it external?
Well, maybe you are splitting it up a bit too much at the moment, but
external CSS is ok at this, and any, stage.
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] Vertical Centering
On 3/23/06 1:24 PM, ~davidLaakso [EMAIL PROTECTED] wrote: You'll be sorry. I'm not sorry (well, maybe about the 'Love you' comment...), but the bit about the content being off screen on short windows was correct. Of course, in my case the window had to be _very_ short, but none the less, it wasn't ideal. My content has a fixed width and height, so the other issues didn't apply. We used a table. CSS 3, where are you... Thanks anyway all. -- Tom Livingston __ 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] Rounded corners and Transparent GIFs
Chris: Thanks, I will investigate that book next time I'm near a book store. Jim: The javascript option is interesting, but I tend to shy away from anything that requires javascript to navigate or display correctly. Just use these methods and skip the images entirely: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Your page is badly broken in ff even in it's current form. There are gaps all over the place in your background and no lower right corner rounding. Thanks Don, I think that is exactly what I was looking for. I had seen that site before, but couldn't locate it again. You saved the day. I know the page is broken, though, that's what my post was about. -- Michael Clayton www.twilighted.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] Rounded corners and Transparent GIFs
For my next trick, I'll need a div with rounded corners on top of a textured background. Any volunteers from the audience? My launch pad was this ALA article: http://www.alistapart.com/articles/customcorners/ I was skeptical about this being possible at all, but here is my stubborn progress: http://www.twilighted.com/tx/giftest.html The div must be elastic horizontally and vertically. The problem is that the when the corner images overlap, the transparent corners are blocked out, leaving a rectangular corner. Try shrinking the text and watching what happens to the bottom left corner. Here is a shortcut to the ALA article's explanation of how the images are sliced: http://www.alistapart.com/d/customcorners/step1.1.html This would be very easy to arrange with tables, but that would be embarassing. I've been trying to place one horizontal and one veritcal box with white backgrounds behind the main div, but have been so far unsuccessful. Here's a quick mockup: http://www.twilighted.com/tx/theory_example.jpg I just want a nice clean box with rounded, transparent corners. All that I have found so far has been pain! -- Michael Clayton Michael: Transparent corners are fine, but it's the background that's the problem. I know you'll say Hey it's transparent!, but I'm talking about the pixels that are the closest to the transparency, which to do it right, should be anti-aliased to *some* background. If you want simple rounded corners, try this: http://www.sperling.com/examples/box/ tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please...
OK! It's done. I've checked it in Safari (developed on OSX), on FireFox and in Linux, but not on Win IE, so please be kind if you find a problem. This is a 100% CSS site with just enough .PHP to switch pages, a complete rewrite from a very table oriented web page. This is a completely volunteer project and I've spent hundreds of hours over the years keeping this site up to date and rel event, so help me out by taking a look and giving me some feedback. http://kaiserklan.com/roundtable Thanks in advance... -- YIS/YIV Keith D Kaiser -- Venturing Roundtable Commissioner kaiserklan.com kaiserklan.com/roundtable kaiserklan.com/wa0tjt [EMAIL PROTECTED] Hello Keith, Well, before I can really help answer how it works (or my opinions of said link) I would really need to know what it really is you are trying to achieve with the site? For instance, before you can verify that all the CSS is valid, you must first correct the XHTML coding. First page alone returned Failed validation, 13 errors. That being said, the CSS seems to work properly in my FireFox on Wintel PC, but in IE your CSS drop downs cause problems (border lines from the Be A Star content box are cutting through it, etc.) Also, just wanted to let you know that it all seems to scale properly when adjusting the text size in both browsers. If you were looking for any opinions on the layout, accessability, etc. I have other suggestions, but that is something that was not pointed out in the request and as such will only comment on the IE performance. Cheers, 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/
[css-d] linking lists into multiple pages
I have created a horizontal list for tabbed browsing on my site, but currently have the code for the list appearing on every page; when I want to make a change to one of the tabs, I have to input this change on every page/subpage of my site. Does anyone know of a way to link a list like this to multiple pages. That way I can make a change on the master list and have it applied to every page on which it is linked? Thanks, Laura __ 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..http://open-sites.net
on 3/23/2006 7:46 AM durmus cosar said the following: how can be applied on css in this site? thank you for all http://www.open-sites.net you might want to read the excellent article How To Ask Questions The Smart Way http://www.catb.org/~esr/faqs/smart-questions.html It's not a short read, but very pertinent. ;-) -- Brian Funk __ 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] newbie: navigation to a division
I'm just learning CSS and open source, I have been for only a few weeks and do not yet have a site. I am wondering if anyone out there might help me, or know where I might look to link images, forms, and text; to a div on my index page. I think I'm looking to do something I've seen people use frames for, but I'd really like to do the whole thing in CSS. I currently have two navigation bars 'alpha' and 'beta'; 'alpha' is inline on the top and 'beta' is on the right. 'beta' is a scroll navigation of images(thumbs) and 'alpha' lists my 'contact' form, 'bio', 'links'. I would like to have all of links from both of the navigations link to a div which is central and large in the page, between the two navigation bars 'alpha' and 'beta'. Thanks for all of your help. __ 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] IE6 problem - content div jogging down
How about if you reduce the resolution? My 15 screen is set to 800x600. On 3/23/06 11:41 AM, Brian Funk [EMAIL PROTECTED] wrote: on 3/23/2006 8:21 AM Theresa Mesa said the following: IE6, the content column is jogging down below the navigation. http://mdh-test.com/egs_new http://mdh-test.com/egs.css I didn't see that here. see screenshot http://www.stoneladder.ca/sandbox/temp/enviroguardscreenshot.jpg win2k IE6 __ 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] IE6 problem - content div jogging down
...And my client is seeing the same thing I am with the content jogging down. I tried changing the resolution to see if it would help. Nope. WinXP IE6. Theresa On 3/23/06 11:41 AM, Brian Funk [EMAIL PROTECTED] wrote: I didn't see that here. see screenshot http://www.stoneladder.ca/sandbox/temp/enviroguardscreenshot.jpg win2k IE6 __ 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] [ADMIN - OFF TOPIC] Re: linking lists into multiple pages
Does anyone know of a way to link a list like this to multiple pages. That way I can make a change on the master list and have it applied to every page on which it is linked? Yes, use server-side includes or a scripting language such as php or perl, or whatever in-built tools come with your editor if you're using something like Dreamweaver. However, this question has nothing to do with CSS, and I'd ask list members to address any answers/comments they might have to Laura directly off list. Laura, you would have better luck sending your question to a list like theList or Webdesign-L. See http://css-discuss.incutio.com/?page=OffTopic for details. Alex Robinson css-d moderator __ 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] newbie: navigation to a division
I would like to have all of links from both of the navigations link to a div which is central and large in the page, between the two navigation bars 'alpha' and 'beta'. The following page here from the css-d wiki will get you started on the road to recreating the look of frames with CSS. http://css-discuss.incutio.com/?page=EmulatingFrames However, you should take note of the fact that recreating the look of frames is not the same as recreating the functionality of frames. You should understand that you can't link to a div. That's not how HTML or CSS works. You can link to an iframe but that's a different type of beast entirely and brings with it accessibilty and validation issues. And if you're just starting out I would seriously recommend that you get a thorough understanding of CSS and HTML first before embarking on what amounts to a much more ambitious project. __ 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] IE6 problem - content div jogging down
Theresa Mesa wrote:
I am not seeing this problem in the other browsers on either
platform. In IE6, the content column is jogging down below the
navigation. I haven't checked 5.5. How do I fix this?
http://mdh-test.com/egs_new
Think I caught it.
It looks like the 'italic bug', but I can only make it appear if I
'ignore font-family...' in IE6' accessibility options and get my own
default.
A fix might be to make div#content a few pixels narrower in IE, as the
'italic bug' usually adds some 3px to the width of its container - and
only when the italic text seems to touch the container-edge.
Another fix is to add...
* html #content {overflow-x: hidden;}
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] IE6 problem - content div jogging down
on 3/23/2006 12:45 PM Theresa Mesa said the following: How about if you reduce the resolution? My 15 screen is set to 800x600. IE6, the content column is jogging down below the navigation. http://mdh-test.com/egs_new http://mdh-test.com/egs.css I didn't see that here. see screenshot http://www.stoneladder.ca/sandbox/temp/enviroguardscreenshot.jpg win2k IE6 Yes, I tried that and it held it's place just fine. See here: http://www.stoneladder.ca/sandbox/temp/small.jpg -- Brian Funk __ 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] h2 with border/floating div right
on 3/23/2006 7:29 AM Jim Wright said the following: I have a site... Can you post a link so we can see? -- Brian Funk __ 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] Rounded corners and Transparent GIFs
Michael Clayton wrote: Just use these methods and skip the images entirely: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Thanks Don, I think that is exactly what I was looking for. I had seen that site before, but couldn't locate it again. You saved the day. [...] Hi Michael, I was too late to suggest the same location. ;-) In case you have a div as last part of the rounded corner box (with the ArticleFooter-class), I think you'll need a slightly different end of the box to get not too much vertical white space between the bottom of the div and the bottom of the corner box. You could add a last line paragraph with 1px height to avoid the gap, and then give the ArticleFooter-div some negative margin-bottom. See testpage http://home.tiscali.nl/developerscorner/liquidcorners/twilighted-liquidcorners.htm. Dragons = -1, I hope. 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/
Re: [css-d] Scrolling Table Problems...
OK, incredible brain fart on my end...I gave the localhost addy vs. the web addy on the sitehere is the addy for my troublesome page with the scrolling CSS table... http://williams.genealogy.fm/results_page.php And for the style sheet http://williams.genealogy.fm/includes/williamsv2.css As always, Adrian Adrian Williams Williams DNA Project Administrator Williams Source Documentation Repository http://williams.genealogy.fm/ -Original Message- From: Kat Lindsey [mailto:[EMAIL PROTECTED] Sent: Thursday, March 23, 2006 11:58 AM To: [EMAIL PROTECTED] Subject: Re: [css-d] Scrolling Table Problems... I cant see your pages - it says local host are they on a server? Kat Lindsey Student Health Care Center - University of Florida 352-392-1161 ext. 4300 Adrian Williams wrote: Y'all, I am a newbie to both the list and advanced CSS...I am familiar with the basics of CSS but am trying to incorporate what (to me anyway) is a very complex CSS feature and am having a slight problem or two with it. Basically, I am trying to use the scrolling table style that Terence Ordona (sp?) put together (which is just awesome!) and have hit a couple of snags. Originally, I was trying to use the fixed column (Big 4?) version and after pulling out a lot of hair, switched to the Big 3 version...which is working for the most part. Here is the page (look at the bottom): http://localhost/WilliamsGenWeb/results_page.php When looking at it in IE, it is a work of art...everything lines up and functions beautifully. However, Firefox gets weird in a couple of ways. First, when loading the page in FF, the table sprawls to the right and half of it is off the screen. The only thing I have been able to do to deal with it is change the page style from basic to none then back to basic again...which fixes the problem. So, first question: what the heck causes this and how do I fix it? The second problem is with the last column on my header in FF. It is labeled 438. I cannot figure out how to get the padding setup correctly so that it is the same 17px width as the rest. Finally, the last column of the scrollable area is, for lack of a better word, fat. Every one of the DYS columns should be 17px wide...is there something I am doing wrong here?? My overall CSS sheet is at http://localhost/WilliamsGenWeb/includes/williamsv2.css I really appreciate any help anyone can give me...I have been working on this for over a two weeks, trying to fix it on my own without any luck. Kind regards, Adrian Adrian Williams Williams DNA Project Administrator Williams Source Documentation Repository http://williams.genealogy.fm/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation woes
Richard Brown wrote:
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/WordpressRooms/
style.css
I have some recollection that this is a WinIE bug. i.e that it doesn't
display text under a box but alongside it whatever the quoted width.
Some problems with IE in this menu.
- Remove all rules related with .header, .box, .box-width,
and replace them with:
.header {
float: left; /* contains the floating boxes */
width: 100%; /* prevents shrink-wrapping */
background-color: #fff;
}
.box, .box-wide {
margin: 9px 9px 0 9px;
padding: 5px;
font-size: 85%;
font-weight: 600;
}
.box {
float: right;
width: 100px;
text-align: center;
background-color: #FBFBF1;
}
.box-wide {
float: left;
width: 185px;
text-align: left;
}
/* clickable link area */
.box a, .box-wide a {
display: block;
}
/* line-break after img, or keep the br */
.box a img, .box-wide a img {
display: block;
}
- Insert a Conditional Comment at the end of the head section
!--[if IE]
style
/* IE6 fixes */
.box, .box-wide {
display: inline; /* doubled float margin bug */
overflow: hidden; /* stops expanding of the box */
}
/* IE6-7 */
.box a, .box-wide a {
position: relative; /* allows for leaving the overflown box */
}
/style
![endif]--
/head
- Remove the br after the images (optional).
Hope that helps.
Is click to enlarge meant to sit next to the image?
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] Site check please...
Keith Kaiser wrote: OK! It's done. help me out by taking a look and giving me some feedback. http://kaiserklan.com/roundtable on WinXP IE6: Your menu is being obscured by the starWrap content below. http://www.stoneladder.ca/sandbox/temp/rt01.jpg http://www.stoneladder.ca/sandbox/temp/rt02.jpg Something is causing the menu to disappear when I try to move my curser to the links that are over the div id=starWrap It looks like there is a gap produced in the menu where it intersects this div cutting it off from further exploring. I don't know the fix. sorry. Brian __ 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] Taking lowercase rule and running with it
I know that XHTML tags and attributes are supposed to be written in lowercase
(i.e., head) when they are actually being used as tags within an XHTML
document (meaning between the 'less than' and 'greater than' symbols [or
whatever those symbols more technical names are]) but it seems that the
majority of XHTML coders have taken that rule and run with it by putting every
mention of XHTML tags in lowercase, such as in style sheet declarations or in
off-handed mentions in every day conversational writing. I know the following
is wrong within an XHTML document:
IMG SRC=picture.gif WIDTH=20 HEIGHT=20 ALT=Picture /
HR /
but it seems to me the following is perfectly acceptable in a style sheet
declaration:
IMG { border: none; }
HR { padding-top: 15px; }
It also helps me when reading a style sheet when mentions of X/HTML tags are in
uppercase while id and class names are lowercase, like so:
H2 #alternate { color: #0066FF; }
I, of course, know it's also fine to put:
h2 #alternate { color: #0066FF; }
but I have seen that type of formatting so often now that it looks like people
think they are holding tight to the 'no uppercase in XHTML' rule as though they
are fending off the XHTML police, when really it's not even relevant to style
sheets or in conversational writing, such as in, We need to have that header
wrapped in an H3 tag rather than in an H2 tag. Or is there really some
official prohibition against uppercase in CSS declarations that I just don't
know about?
Christian
___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.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] Scrolling Table Problems...
OK, incredible brain fart on my end...I gave the localhost addy vs. the
web
addy on the sitehere is the addy for my troublesome page with the
scrolling CSS table...
http://williams.genealogy.fm/results_page.php
And for the style sheet
http://williams.genealogy.fm/includes/williamsv2.css
Adrian,
You'll need to account for spacing for the scollbars in other browsers
apart from WinIE.
Since you've used code straight from example, you have part of it there.
However, since your table is very complex (looks good though, nice job), a
slight modification and a new rule would help.
tbody.scrollContent td:last-child { padding-right: 19px; }
thead.fixedHeader th:last-child { padding-right: 19px; }
Typical scrollbars are about 16px in width and height. The extra 3px is
from padding. Also, add 16px to the tbody height and that should hide the
horizontal scrollbar in Firefox. You can tinker with that value to your
preference.
htmlbody tbody.scrollContent { height: 426px; }
HTH
- Terence
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please...
Brian Funk wrote: Keith Kaiser wrote: OK! It's done. help me out by taking a look and giving me some feedback. http://kaiserklan.com/roundtable on WinXP IE6: Your menu is being obscured by the starWrap content below. http://www.stoneladder.ca/sandbox/temp/rt01.jpg http://www.stoneladder.ca/sandbox/temp/rt02.jpg Something is causing the menu to disappear when I try to move my curser to the links that are over the div id=starWrap It looks like there is a gap produced in the menu where it intersects this div cutting it off from further exploring. I don't know the fix. sorry. Brian Hi Keith, First feedback: compliments for all the work you put in! 1. In IE6 under Win98SE it's the same as Brian noticed... I don't know the fix either, but as I remember well, this problem has passed this list between now and 1 or 1.5 week ago. - It has to do with the background of the submenu's in relation to other backgrounds or something like that. I think it was Georg (Gunlaug Sørtun) who had explicated the reason why, and also had a solution / hack / workaround for IE. Perhaps you can do a search in the list, or maybe Georg can help to point to the right place. ;-) 2. The html-validator reports some errors. I'm not sure, but maybe changing to an other DOCtype can solve the lt; problem earlier in this thread. 3. The css-validator cannot work because of the html-error, so checking the css is somewhat difficult. 4. It will depend of the monitor, but in the BLOG (sidebar) section I allmost cannot see a difference in color between the red link (head) and the red subtitle. The head/link is even some more blurring and has the same intensity (on greyscale) as the blue background; with my monitor/eyes I can hardly see it. - Also it is not immediately clear that the link is a link (no underline), you have to hover over the link to see the pointer change in the hand. - A more contrasting color for the link + underline can solve this. See screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/north-star-blog.gif. 5. In general, be carefull with colored words on colored backgrounds. There has to be enough contrast and also enough difference in color. For example, some colorblind people don't see anything of the blog-items as they are now, reports the Colorblindfilter http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=kaiserklan.com/roundtable;t=p. 6. Checking the many-many links with the WebDesignGroup link-checker http://www.htmlhelp.com/tools/valet/linktest.cgi?url=http%3A%2F%2Fkaiserklan.com%2Froundtable%2Fdate=type=Full shows there are only a few not working. Congratulations again! :-) 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/
Re: [css-d] Scrolling Table Problems...Terence, you Rock!!
Terence,
Man, you rockyour additions were exactly what was neededthat even
fixed the styling problem I was having with FF...AWESOME!!!
Now, the page looks great in both IE and FF...awaiting some input to how
Safari handles it, but I have checked Opera and there is no scroll bar...not
really sure I'm overly concerned about it...but if you know of a quick
solution...I'd be glad to implement it.
Now, as if that wasn't challenging enough (for me!) I have to figure out
how to add another major chunk to this table. Essentially, I need to add an
additional 22 columns (more DYS numbers) to the table...but I don't want to
expand the visible size of the table width. I know, initial gut says,
ok...bring out horizontal scroll bar, which is fine, but there is a twist.
Here is the catch...the only portions of the table that I want to scroll
to the right are the DYS columns, including the header columns...but
everything left of the solid black line (Haplo Group and those to the left)
I would like to keep in place...basically so the user can still see whose
numbers they are looking at.
Is this even possible??
And again...thanks so dog-gone-much for the help and putting the work
into figuring out such an excellent scrolling table solution.
As always,
Adrian
Adrian Williams
Williams DNA Project Administrator
Williams Source Documentation Repository
http://williams.genealogy.fm/
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Terence Ordona
Sent: Thursday, March 23, 2006 7:06 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Scrolling Table Problems...
OK, incredible brain fart on my end...I gave the localhost addy vs. the
web
addy on the sitehere is the addy for my troublesome page with the
scrolling CSS table...
http://williams.genealogy.fm/results_page.php
And for the style sheet
http://williams.genealogy.fm/includes/williamsv2.css
Adrian,
You'll need to account for spacing for the scollbars in other browsers
apart from WinIE.
Since you've used code straight from example, you have part of it there.
However, since your table is very complex (looks good though, nice job), a
slight modification and a new rule would help.
tbody.scrollContent td:last-child { padding-right: 19px; }
thead.fixedHeader th:last-child { padding-right: 19px; }
Typical scrollbars are about 16px in width and height. The extra 3px is
from padding. Also, add 16px to the tbody height and that should hide the
horizontal scrollbar in Firefox. You can tinker with that value to your
preference.
htmlbody tbody.scrollContent { height: 426px; }
HTH
- Terence
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Taking lowercase rule and running with it
I know that XHTML tags and attributes are supposed to be written in lowercase
...
but it seems to me the following is perfectly acceptable in a style sheet
declaration:
IMG { border: none; }
...
Or is there really some official prohibition against uppercase in CSS
declarations that I just don't know about?
...
In case of XHTML (serverd as application/xhtml+xml) names of elements
and attributes are case sensative in CSS rules too. That means if you
specify your rules with uppercase
element names they won't apply.
I'd reccomend to read:
http://www.456bereastreet.com/archive/200501/the_perils_of_using_xhtml_properly/
http://lachy.id.au/log/2005/12/xhtml-beginners
Regards,
Rimantas
--
http://rimantas.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-weight problems
On 06/03/13 10:44 [EMAIL PROTECTED] apparently typed: My client has a logo kFA in which she has the body of the k as tall as the FA part. This is in some font which naturally achieves this. She wants the same effect throughout her website. So first I tried simply putting a BIG tag around the k, which worked fine for the sizing but it was heavier and in larger text sizes it displayed as bold. So I created a class and put a SPAN around the k, which has font-size: 1.3em and font-weight: 100 (although I have also tried font-weight: lighter). It doesn't seem any different! Please have a look and tell me if you see the same thing, especially in larger browser text sizes, and if you can help me make it right! http://www.wdam.co.uk/clients/kfa/index.shtml Any and all clues gladly accepted! Did you ever resolve this? If not, maybe playing with this might be helpful: http://mrmazda.no-ip.com/auth/Font/fonts-face-commonweight.html -- Blessed are they whose ways are blameless, who walk according to the law of the Lord.Psalm 119:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ 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/
