Re: [css-d] :first-word?
Climis, Tim wrote:
...you might just as well introduce b or strong (or some other inline
element, to be styled), and
then you would not need to create an extra line break.
No pure CSS solution (i.e. an approach that does not require any added
markup to separate the first line from the rest of the content) is possible.
That's sort of what I thought. So strong or span it is. I haven't
decided which I like better for semantic purposes yet.
I would not use strong unless that text is intended to convey
additional meaning and/or emphasis. Some screen readers will read
strongtext inside of strong tags/strong with emphasized pitch as if
excited. In this case, I do not think that would be helpful, it's a
simple Q A so no emphasis is really needed for either.
I would use a span - OR - it's a bit of a stretch for a definition
list, but how about:
dl
dtQuestion or name(s) here:/dt
ddAnswer or reply here/dd
dtQuestion or name(s) here:/dt
ddAnswer or reply here/dd
/dl
You could use a CSS background image for Q and A:
dt { font-weight: bold; background-image: url(path/to/Q.gif); }
dd { background-image: url(path/to/A.gif); }
Or, you could simply place the 'Q' and 'A' in the HTML:
dl
dtQ: Question or name(s) here:/dt
ddA: Answer or reply here/dd
dtQ: Question or name(s) here:/dt
ddA: Answer or reply here/dd
/dl
Semantically, it's debatable. Markup-wise, it's much cleaner.
--
*JONO YOUNG*
Designer | Developer | Illustrator
http://www.charlestonwebsolutions.com//
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 flicker bug - can't seem to fix it
Mark Senff wrote: --- On Fri, 10/17/08, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Apart from that, whether it's a bug or a user-setting or a feature or (fill in your own word of preference), there ARE fixes for it so I'm really curious why those don't work for me. mS Not likely to do the trick, but I do recall a fix for flash of unstyled content being to move another linked file ahead of your CSS link - try placing your CSS after the javascript link in your head. Addresses a different bug, but it is worth a shot...even if in the dark. -- *Jono *// __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop down menus/flash
http://www.slrecords.net/test_videos.php
Or do I just have to accept that at the moment you can't get drop down
menus to drop in front of a flash player??
No, the scriupt is the culprit. Even Dreamweaver gets this wrong out of
the box. Use [1]swfObject, as follows:
Include swfobject in the head of your document:
script type=text/javascript language=javascript
src=path/to/swfObject.js/script
In your HTML, for the flash piece:
div id=wrapper
div id=slideshow/div
script type=text/javascript language=javascript
var so = new
SWFObject('path/to/flashFile.swf','slideshow',700,400,8,'#ff');
so.addParam('quality','high');
so.addParam('wmode','transparent');
so.write('Slideshow');
/script
/div
Note:
div id=slideshow/div is where the SWF will appear/be injected. The
ID can be whatever you'd like, but that ID must match up in the code right
after the path.
700 is the width
400 is the height
8 is the version to detect
Also, make srure you set z-index where necessary.
[1] http://code.google.com/p/swfobject/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [OT] IE8 Beta released to developers.
Can someone please confirm if this is stand alone installation or not? Thanks, __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop Downs Appearing Below Flash
Paul Menard wrote: Can you provide a link for your page? On Jan 25, 2008, at 9:32 AM, jono wrote: Recently, it appears that drop-down navigation in FIrefox is falling behind Flash movies, again, and the normal suggested fixes no longer work. Has anyone else experienced this lately? ... And previous fix examples: [2] http://www.communitymx.com/content/source/E5141/wmodeopaque.htm -- Even this one seems to be not working anymore. ... I am curious, are others seeing this problem in Frefox, despite using the suggested fixes? When you view link [2] above, does it work as intended? This appears to be a Firefox Mac vs. Firefox PC issue, or an issue with an Add-On I have installed. I will see if I can share a direct link, but (unfortunately) due to legal restrictions, it may not be possible. The link below is behaving in the same way as my example. http://www.communitymx.com/content/source/E5141/wmodeopaque.htm On my PC, in Firefox, this example displays with the menu behind the Flash content, no matter which of the linked-to examples are clicked. On my Mac, it is perfect. Very strange. I will try some updating, Fx Add-on checking, and a few other things. -- *JONO YOUNG* Designer | Developer | Illustrator http://www.charlestonwebsolutions.com// __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Drop Downs Appearing Below Flash
Recently, it appears that drop-down navigation in FIrefox is falling behind Flash movies, again, and the normal suggested fixes no longer work. Has anyone else experienced this lately? I have read through the previous posts: [1] http://archivist.incutio.com/viewlist/css-discuss/94203 And previous fix examples: [2] http://www.communitymx.com/content/source/E5141/wmodeopaque.htm -- Even this one seems to be not working anymore. I have applied wmode=transparent, set z-index, and even tried implementing an iFrame (as a test) to house the Flash movie below the drop-down and the drop-down menus still go behind the Flash movie, even when the Flash movie is inside of the iFrame. I cannot currently share the iFrame example. I am curious, are others seeing this problem in Frefox, despite using the suggested fixes? When you view link [2] above, does it work as intended? Your feedback is appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A strange Safari bub - related to negative margin?
Matt Dawson wrote:
http://thenestedtest.com/waterworks/ww_d1.html
...in Safari, some combo of the padding and the negative margin causes
the text to jog up and down by one pixel.
Matt,
Remove border-top:1px dashed #D2D3D5; from the UL and replace it with a
background image ( - - -.gif) on the UL. The background image will not
affect the layout of the nav and your borders will appear over top of
the BG image on hover.
#nav ul {
background: #fff url(images/dashed-line.gif) repeat-x 0 0; /* consistent
cross-browser */
...
}
Yes, it is using an image where a border *should* do the trick. The
trouble with border-top:1px dashed #D2D3D5; is that IE will render it
differently than the good browsers. Preview the page in IE 6 and then
preview it in Firefox - see the difference? The background image
approach will be consistent across browser land. That's a quick
solution; you will need to adjust your margins/padding a bit.
Hope that helps.
--
*JONO*//
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Selectors to cover wide range of IDs for Firefox
Philippe Wittenbergh wrote:
Here is a more detailed example of my situation:
div class=parent
table id=LC764_Menu1 class=menu635
tbody
tr
td id=LC764_menuItem000 class=menuItem635Login/td
/tr
tr
td id=LC764_menuItem001 class=menuItem635About Us/td
/tr
tr
td id=LC764_menuItem002 class=menuItem635Contact Us/td
/tr
/tbody
/table
/div
I need to ONLY target the Contact Us menu item which (above) is
td#LC764_menuItem002. I need to make it white with a red background, but
the rest of the menu items need to be black with a yellow background.
Simple, as follows:
/* for all menu items */
.parent td {
color: black;
background: yellow;
}
/* only for Contact Us */
.parent td#LC764_menuItem002 {
color: white;
background: red;
}
The trick is to target a range of IDs; figuratively as follows:
/* account for all possible (within reason) Contact Us id ranges */
.parent td#LC764_menuItem002 - .parent td#LC1099_menuItem002 {
color: white;
background: red;
}
The only sure fire way to do this is to write out a very long list of
possible IDs:
.parent td#LC764_menuItem002,
.parent td#LC765_menuItem002,
.parent td#LC766_menuItem002,
.parent td#LC767_menuItem002,
.parent td#LC768_menuItem002,
.parent td#LC769_menuItem002 {
color: white;
background: red;
}
The more I think about it, the less likely it seems to be reasonably
possible.
I think I am going to call this off. I am on my way to check out the
link you sent though and will poke around with your suggestions to see
if aI can craft something. Thank you very much for your suggestions and
time.
--
*JONO*//
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Safari navigation problem
Vicki Stebbins wrote:
What she sees is here:http://www.seco.com.au/safari.html
Here's the page: http://www.seco.com.au/index.php
CSS:
Navigation menu: http://www.seco.com.au/styles/navigation.css
Page: http://www.seco.com.au/styles/explorer.css
I don't see right off-hand what's going on in Safari. I did notice your
:hover styles were flipped:
#nav li a:hover.why {
...
}
should be
#nav li a.why:hover
{
...
}
--
*JONO YOUNG*
Designer | Developer | Illustrator
Charleston Web Solutions http://www.charlestonwebsolutions.com
/Bringing Higher Standards to the Lowcountry/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Selectors to cover wide range of IDs for Firefox
This is a long shot...in the dark, but here goes: I have a td that has an ID on it, it is part of a Content Management System. Every time a new template is created in the CMS the td's ID changes to a different value. template one: td id=lc110text here/td template two: td id=lc111text here/td template two: td id=lc113text here/td My question is; is it possible to specify a CSS 2.1 or 3.1 selector that can cover a range of values? I only need this to work in Firefox, so compatibility with IE is not an issue. I've poked around on: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ This looks close: Substring matching attribute selector E[att^=val] Matches any E element whose att attribute value begins with val. The only problem is that there are other TDs that have IDs that begin with lc that I do not want to target. Any ideas? This is an attempt at a quick fix solution that only needs to work for Firefox. -- Jono __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] need some help - MAC IE broswer + Safari problems and some text tag help
hiptojive @hotmail.com wrote: here's the link: www.thestudioformovement.com of course any other feedback would also be very helpful and appreciated. It seems you've received help with your layout; here's a good font reference: http://www.w3.org/Style/Examples/007/fonts.html View this page in different browsers to see how the fonts look. -- *JONO YOUNG* Designer | Developer | Illustrator Charleston Web Solutions http://www.charlestonwebsolutions.com /Bringing Higher Standards to the Lowcountry/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 Container Background Image Problems.
Matt Ryan wrote: (As an aside, I just tried to edit the wiki to add a new fave js-based method, Paul Bellow's CSS Balanced Columns[1], to the page, but for some reason my change wasn' sticking. Anyone have any ideas why it might not be taking?) Matt Ryan [1] http://www.paulbellows.com/getsmart/balance_columns/ This method leaves 10px of white space at the bottom of the left and right column in Firefox 1.5 and Safari 2 on my Mac. I tinkered with the CSS for #footer, changing the negative top margin on #footer to -12px (fron -2px) to try and compensate for the 10px gap in my Mac browsers. /* Original CSS */ #footer margin:-2px auto 0 auto; width:760px; height:100px; border:1px solid #333; height:15px; line-height:15px; font-size:.8em; } /* Tinkered CSS */ #footer margin:-12px auto 0 auto; width:760px; height:100px; border:1px solid #333; height:15px; line-height:15px; font-size:.8em; } Changing margin to margin:-12px auto 0 auto; fixes the issue in Firefox - there is no space and the footer's top border border butts right up against the bg color of the left and right columns - but in Safari the top border of #footer gets covered up by the left and right column bg colors. In addition, IE browsers are now thrown off - IE Firefox - by the decreased negative top margin on #footer. View Browsercam shots here - publicly viewable for 24 hours: http://www.browsercam.com/public.aspx?proj_id=312648 - Mac Firefox 1.5, 2.0; Mac Safari 2.0; IE/Win 5.0, 5.5, 6.0, 7.0; Firefox Win View the test page I set up (based on the original example) and directed Browsercam to, here: http://www.charlestonwebsolutions.com/examples/three-column-layouts/JavaScript-Columns/index-short.php - CSS is in head and content has been shortened to allow Browsercam to get a full layout capture. - I placed a link on this page to a screen shot from my version of Firefox 1.5 which looks different than Browsercam's I am not sure what the real problem is here, or how to fix it, but it would be nice if it worked across browser land. -- *JONO YOUNG* Designer | Developer | Illustrator Charleston Web Solutions http://www.charlestonwebsolutions.com /Bringing Higher Standards to the Lowcountry/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Quirks Mode - IE 6 - image + padding + border - extra markup
In Quirks Mode, for IE 6, is it possible to get an image to have padding
of 10px around, and then a border of 1px without using extra markup such
as a div or span around the image?
img src=picture.jpg with=200 height=200 class=img-border
.img-border {
padding: 6px;
border: 1px solid #777;
}
Is it posible to get this to work in IE 6, in Quirks Mode? I Googled a
bit, and most if not all examples required extra markup around the img
with the border applied to it.
David's Post (Nov. 2005)
http://archivist.incutio.com/viewlist/css-discuss/81616
David's Example page:
http://www.chelseacreekstudio.com/ca/cssd/border-test.html
- does not work in IE Quirks Mode as noted
Francky posted a working version:
http://home.tiscali.nl/developerscorner/css-discuss/test_qrk.htm
- this requires the extra span to work, which is not an option for me
I am pretty sure I am out of luck, can anybody confirm or point me to a IE
miracle filter/hack...that doesn't require any extra markup?
Thanks,
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 - Logo Flicker in IE 6.0 ::: update!
francky wrote: Jono wrote: Can everyone please take a quick look at the following site: *http://tinyurl.com/vzmwy [...] Then francky wrote: [testpage 1] to [testpage 3] Now: time for update: also a hoverable logo is possible without flickering of IE. * testpage 4 http://home.tiscali.nl/developerscorner/css-discuss/test-ie-flicker-4.htm francky Thanks Francky, I was on the fence as to whether I would try to work around the IE flicker...feeling somewhat guilty in asking the end user to change their browsing habits - didn't seem fair. I will comb through your examples a bit more and see if I can get the user experience identical for EVERYONE, regardless of their IE settings. Interestingly enough, my cheap testing Dell suffered from the Blue Screen of Death last night, so I've got some Microsoft fixing to do first. Gotta' love Windows...as if IE weren't enough trouble;) Thanks for the extra effort! Jono __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 - Logo Flicker in IE 6.0
Holly Bergevin wrote: The person probably has their temporary internet setting set to check for new versions of the page at Every Visit to the Page and so IE goes and fetches that image every time it's hovered. -path to find this - ToolsInternet OptionsGeneral-Temporary Internet Files-SettingsCheck for newer versions of stored pages: Every visit to the page. ~holly Beautiful, thanks! I will pass this information along, and let them decide what is best for their situation. I would like to find a work around as this person does quite a few presentations during conferences, often times displaying her site for the masses to see. Maybe an alternate IR method would be better; I'll look into that. Thanks again, -- Jono Young ../Designer ../Developer ../Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry www.charlestonwebsolutions.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 - Logo Flicker in IE 6.0
Can everyone please take a quick look at the following site: *http://tinyurl.com/vzmwy *I have received a report that the logo on the site above is flickering on roll over in IE 6, but I cannot reproduce this on any test machines I have access to. At one point I did have a hover-state set on the logo, so I suspect that it is an IE cache issue, but the person reporting the flicker claims to have erased their cache. If anyone can reproduce the flicker, please let me know. If it is individual cache issues on their particular computer, there's really nothing I can do to fix it; I just want to be sure. Thanks, Jono __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] page review :: ~dL
~davidLaakso wrote: A quick check of this simple page http://www.chelseacreekstudio.com/ca/frost/ with what you are running... The page is verry long in IE 5 Mac - I suspect the one True Layout for equal height columns is to blame; I didn't look in depth though. Whether that bothers you or not is up to your site's stats...if there are any yet? I'm not sure off the top of my head how you'd go about fixing that...or if there is a fix for IE Mac...can't remember. Anyhow, that's all I saw in my extremely quick check. Other than the previous comments, everything looks good in the latest Firefox, Safari, and Opera over in Mac land. -- Jono Young ../Designer ../Developer ../Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry www.charlestonwebsolutions.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] optimize css
Hi Neal, If saving the original, you don't have to decompress, and then: * Flumpcakes Style Sheet Optimiser http://flumpcakes.co.uk/css/optimiser/? * Or CSS Optimizer http://www.cssoptimiser.com/? Make sure you have a back up copy of your original unoptimized css file, and be sure to test out the new optimized CSS file before you go live with it. I tested the optimizers (above) a while back and they work well for cutting file size, but they got rid of some important CSS info that broke the layouts I was testing with. Just a word of caution. __ 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] Alternative ways of serving Holly Hack to IE
!--[if lte IE 7]
style
#letterbox {height: 1%;}
/style
![endif]--
I'd stick to the conditional comment method - you're bound to need more than
just this one IE hack as the site progresses. Better yet, create a style
sheet for IE only (ie.css) and add all of your IE hacks to that style sheet,
then add the following to each page:
!--[if lte IE 6]
link href=css/ie.css rel=stylesheet type=text/css
![endif]--
If you put all your IE 'hacks' in ie.css, it will prevent your header from
getting bloated on pages where you need to add more hacks to get IE to
behave. Only IE will pay attention to the CSS - other browser will ignore
it.
Note:
If you are using XHTML, add it to your site's header like this:
!--[if lte IE 6]
link href=css/ie.css rel=stylesheet type=text/css /
![endif]--
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] min-width/masx-width and IE
Can you post an example so we can gt a look at your page? -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] Francky's Corners and accessible tabs
tabs are sliding down, overlapping the div instead of sitting on top. Teh following link illlustrates this... http://www.rollandburn.com/test.html I think the easiest solution would be to wrap the chunk of round corner html code in its own div id=wrap-round-corners and then give that div a top margin equal to the height of the .tabNav as follows: div class=tabNav ul li class=currenta href=index.php?view=dashboard title=DashboardDashboard/a/li lia href=index.php?view=mortgage-add title=Add MortgageAdd Mortgage/a/li lia href=index.php?view=search title=SearchSearch/a/li lia href=index.php?view=reports title=ReportsReports/a/li /ul /div div id=wrap-round-corners !-- START ROUNDCORNERS -- div class=top-left/div div class=top-right/div div class=inside span class=notopgapnbsp;/span pIn a van down by the river/p !-- FINISH ROUNDCORNERS -- span class=nobottomgapnbsp;/span /div div class=bottom-left/div div class=bottom-right/div /div!-- End wrap-round-corners -- /body /html Adjust the top margins on #wrap-round-corners until the tabs are where you would like them in relation to the round corner box. I did not take a close look at your html/css, so there may be a better way...but this should work pretty well cross-browser. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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 input[type=radio] Approaches in IE
Has anyone figured out a neat hack to get IE to render as the other browsers would... without setting a class (hard coded in the output) on the radio buttons? ... Anyone got a slick solution? Definitely not a hack, and not really neat, but a viable option: Often times form elements have name and id attributes...so, if your radio buttons already a specific ID, you could style using the ID...which I am guessing is not going to work in your case...but, it is an option...and not a bad one really. The ID could be used by a backend process giving you a two fro one deal, as follows: form class=colors action= method=post fieldset legendPick your favorite color:/legendbr / input type=radio name=red value=red id=red label for=redRed/labelbr / input type=radio name=blue value=rblue id=blue label for=blueBlue/labelbr / input type=radio name=green value=green id=green label for=greenGreen/labelbr / /fieldset /form I'm pretty sure that the ID option works...but I may be over looking something, and you may not want to add an ID to your radio buttons since it's basically the same as adding a class...from a CSS stand point anyway. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] IE5/Mac
Hi all. I have completed the redesign of www.web-buddha.co.uk. ... The site seems stable in all browsers on a variety of platforms apart from IE5.2/Mac. Your site killed IE Mac 5.2 here too, although it was pretty much dead to begin with really;) Your page does not validate, I would start there. Eliminate validation errors, and then start trouble shooting the problem, if it still exists after validating your code. - - See your results W3C Validation here: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.web-buddha.co.u k%2F There are quite a few big errors that should be fixed. Check other pages, here: http://validator.w3.org/ - - -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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 Printable Pages
xtiandc wrote:
The printer is adhering to my (very) basic layout, but seems to be
ignoring my font declarations. Is there a simple way to control this?
My CSS consists of:
html{
background: #ff;
font: normal 8pt/10pt arial, helvetica, sans-serif;
padding: 5px;
}
body
{
background: #ff;
font: normal 8pt/10pt arial, helvetica, sans-serif;
padding: 5px;
}
Looks like its printing in a standard serif face instead, at a larger
size...
Without seeing the page in question, my suggestion is to try dropping the
short-hand CSS (in your print styles), for the following:
html, body {
background: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
line-height: 10pt; /* might try removing unit pt? */
margin: .6in; /* instead of 5px padding */
}
See if that works.
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] Right Floated Nav Source Order
-Float all the li elements left -Float the ul element right -If the ul was floated left originally, put a div around it and float that left -You might need to put a fixed with on the ul element if the li's collapse for whatever reason Yep, thanks rian and Mark. I tinkered a bit more, and came up with this: http://www.charlestonwebsolutions.com/test_case/nav_order_01b.html Seems to work pretty well. Fearful of loosing flexibility, I gave the UL a em based width - which I am still testing out. So far, it checks out OK in IE 5+, and the usual good browsers. I don't have acecss to IE Mac right now, so if anyone could run it by that stinker that would be awesome! I am pretty sure this will break in IE Mac in some strange way, but I am not 100% on that. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] Centred images, assistance please
I'm playing around with three centred columns each with two vertical images. Can't seem to get it right. How to do? I've put an example up on my dump site, www.qwqwk.com. Mike, Try replacing width: 195px; with width: 33%; on each of the columns - #imgbox1, #imgbox2, #imgbox3 - and see if that does the trick. I recently had a similar problem that I consulted the list on. My situation as slightly different than yours, but the page I put up, might still help you: Center Horizontal List in a Liquid Container http://www.charlestonwebsolutions.com/test_case/tester.html -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] background shadow tiles
Hi all again,
I'm having a small problem now, to create the shadow effect in the
main area, I cut a 1 px image with the shadowed border. When I put
that image as background and set a repeat-y the shadow tiles funny,
it's not a smooth and continue shadow as it should be.
The image you have specified for your background (main_background.jpg) is
not an even gradient from top to bottom.
Try downloading (right-click, save as, save to your images folder) and using
this image instead:
http://www.charlestonwebsolutions.com/examples/main_background.gif
This is a GIF, as opposed to the JPG that you are currently using, so be
sure to change your style sheet rule to make use if this image instead of
your JPG image.
#layout {
width: 850px;
margin: 0 auto;
background-image:url(../images/main_background.gif); /* new GIF */
background-repeat: repeat-y;
}
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] Adjacent Selector for IE6?
I have a definition list where each dt has an id. I'd like to style
each dd depending on the preceeding dt.
Is there a CSS only way to simulate the adjacent selector for IE6? I
haven't been able to find anything on google.
I think your only cross-browser option is to do the following:
dl
dt id=oneOne/dt
ddNot the magic Number/dd
dt id=twoTwo/dt
ddThe second loneliest number/dd
dt id=threeThree/dt
ddIt's the magic number/dd
/dl
dt#one dd {
color: blue;
}
dt#two dd {
color: red;
}
dt#three dd {
color: green;
}
This is pretty much doing the same thing, unless this is what you were
trying to avoid all together. I'm not 101% sure, but I think this is your
only option...until about 2010 or later.
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem in ie 6.x windows with image
Hi all,
I am trying to place a single image in a footer such that it will overlap
the top and bottom of the footer...
url: http://baseballtriviaquiz.com/virgil/history.html
css: is contained within the page (I will remove it later)
I think you might be better off moving the tree image to the footer div as
a background image. You could have the tree, the light green and the
darker green bottom border combined into one very wide (depending on your
layout's width settings) image that would then be applied to the footer
div, positioned to the bottom left of the footer div.
#footer {
margin: 0 17px 1.0em 0;
padding: 0;
background: #c6d28a url(long-footer-bg.gif) no-repeat bottom left;
height: 25px;
}
Attempted diagram of iamge below.
xx
xx xx
xx xx
x
x
xx
xx x
xx this is the no-repeat very long bg image w/ treex
xx x
XX
x
- - OR - -
You could also try positioning the tree absolutely (instead of relative)
so that it is taken out of the document's normal flow, thus, not affecting
the footer's layout. I think the background image option is easier, and
more stable cross-borwser. I'm sure others will have excellent ideas too.
Good luck
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] Adjacent Selector for IE6?
If only dd were a child of dt. Uhh...yeah...good point;) Wishful thinking I guess. -- Jono __ 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 stretch .. just can't get it
is this not possible??? : - 2 columns - they both stretch vertically to fill page and/or content Threatening to use tables won't get you much advice here...I'd be surprised if anyone else replied to a message that starts out that way.[/noise] [signal] There are plenty of suggestions here: http://css-discuss.incutio.com/?page=AnyColumnLongest One True Layout: http://www.positioniseverything.net/articles/onetruelayout/ Faux Columns: http://www.alistapart.com/articles/fauxcolumns/ [/signal] -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] Style Parent Element from Child?
At 09:54 AM 2/1/2006, you wrote: If you (can?) remove the declared width of 250px from customApp and then float both customApp and navigationPortlet the width of customApp will always shrink wrap to the width of it's child div - navigationPortlet By adding padding to the div navigationPortlet you can make it's parent - customApp wider since customApp will expand to cantain the width of navigationPortlet because they are both floated. If you have time, could you please whip out a quick demo of this technique and post it to the list? I'm not sure I follow you on the padding front. Thanks, Paul Default: http://www.charlestonwebsolutions.com/examples/child_parent_default.html Special: http://www.charlestonwebsolutions.com/examples/child_parent_special.html -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] Style Parent Element from Child?
I have an application whose XHTML code is set - i.e. I cannot change any of it. I do have access to the stylesheet and the problem I have run into is that I need to apply a different style to a parent element based upon what/if the child element is. For example, I have the following code ... div class=customApp misc code /div In this general case, I have the customApp class set to have a width of 250px. However, in the following case, I need to have the customApp class set to have a width of 170px. div class=customApp div class=navigationPortlet misc code /div /div So, simply based upon the fact that the second example contains the div with the class navigationPortlet, I need to set a different width for the parent div. Is this possible using somewhat standardized CSS? Jeff, It is not exactly possible (AFAIK) to do what you are looking for - style a parent based on its child - however, there is hope. You need customApp to be 170px instead of 250px which I am assuming is because the navigationPortlet div is smaller than the 250px that you have set on customApp, right? If so, you are (potentially) in luck. If you (can?) remove the declared width of 250px from customApp and then float both customApp and navigationPortlet the width of customApp will always shrink wrap to the width of it's child div - navigationPortlet By adding padding to the div navigationPortlet you can make it's parent - customApp wider since customApp will expand to cantain the width of navigationPortlet because they are both floated. Pretty much, what ever width you set for navigationPortlet would also be the width of its parent customApp plus any padding or borders set on the child div. It's not really styling the parent based on the child, but in this case the child does determine the width of its parent. Would that work? -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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/
Re: [css-d] Style Parent Element from Child?
div class=customApp
misc code
/div
This is the default case where I need the customApp div to be 250px.
Jono: So, in the default situation, use CSS to make the misc code area
250px wide instead of making the customApp div 250px. This way,
customApp will still be 250px because the misc codeis 250px wide.
div class=customApp
div class=navigationPortlet
misc code
/div
/div
This is the special case where I need the customApp div to be 170px
because the navigationPortlet div won't fill the full 250px space. So,
I can't use the child div to force the parent div to be wider ... I
actually need to use the inner div to force the parent div to become
narrower. Thus the problem.
Jono: In the special situation, use CSS to make the navigationPortlet
div 170px wide and customApp will then also be 170px wide since both are
floated causing the previously mentioned shrink wrapping of the two divs.
In your case, if you can, try not to apply a width to customApp at all.
Let the width of customApp be decided by what it contains.
One last idea is to - if you can? - apply an ID to the body tag of each
page, then:
body#default .customApp {
width: 250px;
}
body#special .customApp {
width: 170px;
}
You said you could not change the code, but adding an ID to the body tag
may be allowed if you're lucky?
Aside form these two ideas, you appear to be out of luck as far as finding
a easy solution goes.
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] Finally have to ask for help before I go nuts
but as you can see in IE there's a 3px wide separation between those two. Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ I believe you are experiencing the 3 pixel gap bug in IE: See here: http://www.simplebits.com/notebook/2004/07/30/3pixels.html And here: http://positioniseverything.net/explorer/threepxtest.html -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] Background image duplicated when page is scrolled in IE6/win
Hi Webpage link = http://www.2gee.com/business.html If you visit this page in IE6/win and scroll the page down to the bottom and then scroll back up you should see that the background image located at the top of the LH column has been duplicated. Appears to be fixed, I do not see that happening in my version of IE 6 for XP Home. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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/
Re: [css-d] Centering horizontal list in a liquid container
See my annotations to your CSS below; perhaps it will fix your problem. Please let us know if it does, and if it doesn't, let us know what rendering it does result in so we can go from there. I finally got some time to troubleshoot the entire situation, and I put up a test case page on my server that explains everything in detail: http://www.charlestonwebsolutions.com/test_case/tester.html The page explains how I (with Zoe's help) got the horizontal list of images to stay horizontally centered inside of a fluid container in all of the browsers that I have at my disposal: Firefox 1.5 Safari Opera 8.51 (Mac and PC) IE 6.0 Netscape 8 (PC) IE 5.2.3 IE 5.5 IE 5.0 Note: There is an odd issue in IE 5.0, where the left side of the page's content gets chopped off - as if there were a negative left margin and overflow: hidden; but it is most likely specific to this page, and won't appear in others. IT only occurs in the lower part of the page. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] Centering horizontal list in a liquid container
Greetings,
I am using a list to layout three images horizontally along the bottom of
a content column. The content column is fluid, set to 70%. I would like,
if possible, to have my ul stay centered within the liquid content
column as the window is resized, and at the same time, have each li
contained with in the ul to remain evenly spaced horizontally.
Theoretically, how I though it would work:
Center the ul with margin: 0 auto; and text-align: center; for IE; then
set each li to width: 33%, (there are three images in this example) and
then center the images with in each li through margin: 0 auto; and
text-align: center again.
Here is the basic markup and general styles:
!--HTML--
ul id=content-images
liimg src=i/content-img-polar.jpg width=140 height=140 //li
liimg src=i/content-img-boards.jpg width=140 height=140 //li
liimg src=i/content-img-adidas.jpg width=140 height=140 //li
/ul
/* CSS */
#content-images {
margin: 0 auto;
text-align: center;
padding: 0;
width: 100%;
display: inline;
float: left;
}
#content-images li {
margin: 0 auto;
display: inline;
width: 33%;
padding: 0;
float: left;
}
#content-images li img {
display: block;
margin: 0 auto;
text-align: center
width: 140px;
float: left;
}
Does anyone have an example of centering items horizontally with in a
liquid width column? I read over the Wiki, (and endless Google results)
but the details on centering multiple items in a liquid container were not
too great.
Using a list seemed to make the most sense, but I am open to other
suggestions.
I need this to work in as many browsers as possible, preferably all
flavors of IE 5+ (Mac OS X and PC) and then Mozilla, Gecko, etc.
Thanks,
Jono
__
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] all-css menu elements hover behavior doesn't work in IE
On 1/25/06, Studio Express [EMAIL PROTECTED] wrote: I have an all-css dropdown/flyout menu on my site. The menu works beautifully in Safari FF, but not in IE. I used an htc file to append element hover behavior in IE. I have just encountered the very same problem - menu is great in all but IE. Here is what I discovered when trying to fix the problem: Original HTML CSS Setup: html pages linked to a central style sheet, which I call centeral.css central.css then links to three additional style sheets using @import - one for the overall layout (layout.css) - one for nav (Mr. Meyer's List-Based CSS-Driven Menus) (hdr-nav.css) - one for all my IE hacks and fixes (ie.css) As Follows: @import url(layout.css); /* Clean */ @import url(hdr-nav.css); /* nav menu */ @import url(ie.css); /* IE Fixes */ I could not get the csshover.htc file (that Mr. Meyer used in his example) to work for me no matter how I changed the path to the csshover.htc file in my CSS, no matter what the order of the @import style sheets were in, no matter where the .htc file was located in the site's directory, and no matter which of the three imported style sheets included behavior: url(csshover.htc); - nothing worked. What finally worked is a slight problem, but temporarily OK. I dreadfully copied and pasted all of my separate style sheets into one GINORMOUS style sheet, named it central2.css and then linked to only that file in my html page's header. That fixed the problem - cssover.htc worked for all flavors of IE. I am not sure what to conclude from all of this, BUT if you must have it working, and it must work RIGHT NOW, give the combined style sheet a try and see if that does the trick. You can then, from there, use conditional comments to serve the bloated central2.css to only IE. I am pretty sure I can figure out what is wrong, or what I am doing wrong, but for now I thought I would offer this temporary solution for when all else fails. It still may only work in certain situations, I am not sure? -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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/
Re: [css-d] Browser Check: Mac especially (NTKN)
On 12/21/05 10:46 AM, Reese [EMAIL PROTECTED] wrote: At 19:25 20-12-05, Jono wrote: http://inkworkswell.com/clients/testing/index.html ...IE/Mac is not displaying the 191px x 250px filler image in the center area. That's odd, especially since it is the same image being linked to from three separate locations. The div containing the filler image on the left was copied en toto, renamed, and the left: classifier tweaked for proper offset at center and right. Appears to be working as exp3cted now in IE/Mac. I can see all images. -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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/
Re: [css-d] Compuserve 7.0
On 12/12/05 7:08 PM, Josine Krant [EMAIL PROTECTED] wrote: http://212.203.14.56/ictb/test/pre-coursequestionnaire.htm My American client uses the Compuserve 7.0 browser (very uncommon here in Europe) and doesn't see the left column of the forms. I was informed that Compuserve 7.0 = IE6. ... I cannot find any info about this browser concerning browser compatibility. CompuServe was (is still?) owned by AOL. AOL bought CompuServe and at the same time they [AOL] were promoting Netscape as the browser of choice for CompuServe customers. AOL nearly moved to Netscape, but instead stuck with IE. So, I am not 100% sure, but I think the problem may be with a Netscape browser? As for Mac browser testing: IE 5.2.3/Mac is showing the form area as a single column instead of the two columns displayed by other browsers. Your client may not be seeing the two columns, but he is (I'm guessing) at least seeing all the information...it's just not displaying in two columns. Have a look around this site for some info on IE 5/Mac and CSS: http://www.l-c-n.com/IE5tests/ -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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/
Re: [css-d] Mac Mozilla/Firefox width problems
On 11/30/05 10:00 AM, Garry Heaton [EMAIL PROTECTED] wrote: I've started seeing page width rendering problems with the Mac versions of Firefox and Mozilla recently. These problems do not recur with the Windows versions nor on Safari. Example: http://www.lso.ac.uk/history.html Same set up here, and I do not see a rendering problem. What was the problem exactly? -- Jono Designer | Developer | Illustrator Charleston Web Solutions http://www.charlestonwebsolutions.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/
Re: [css-d] CSS Tabs - Sliding Doors method - can be done upside down?
Check out Project 7 from Mr. Meyer's more Eric Meyer4 on CSS It is exactly hat you are looking for. You have to use your own creative genius to make it the flavor you want but, it gives a nice clean example of how to accomplish the XHTML/CSS aspect. Check it out here: http://more.ericmeyeroncss.com/projects/07/ This chapter of the book covers a variation of Douglas Bowman's sliding door technique, and just happens to make the tabs up-side-down. It's a great book, so I'd recommend you go ahead and buy it, but if you don't want to buy it now, you can still take a look at the source code. You have the benefit of seeing the finished product, but will be missing out a great deal on the chapter's explanations and step by step instruction. Every site is different, so you may have to money around with the code a bit to make t fit your layout, but it should be easy enough to do. Good luck, Jono Designer | Developer | Illustrator Charleston Web Solutions http://www.charlestonwebsolutions.com On 11/19/05 6:09 PM, Tom Dell'Aringa [EMAIL PROTECTED] wrote: Hi folks, I'm needing a set of tabs that fall top-down instead of the normal sticking up. I like the sliding doors method so I figured I would alter that. I have a basic version running, but the problem is expanding/sizing the text opens up the wrong part of the image. I don't quite have the setup right either. Is it possible to do an upside down tab with this method? It seems the part that get's exposed is always top left to bottom right, correct? Here is my test page: http://pixelmech.com/rev/upsidedown.html CSS inline, any tips appreciated. Tom http://www.pixelmech.com/ I was in a convenience store reading a magazine and the clerk came up to me and said This is not a library. so I said, All right, I will talk louder then! __ 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-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] Nested list positioning / Mac IE 5.x
On 11/15/05 3:06 PM, Michael Schwarz [EMAIL PROTECTED] wrote: I'm trying to get a nested list (with links) to be positioned as follows: level one - horizontal level two - vertical Seems to work fine with all browsers but Mac IE 5.2. Here is a testcase (css inside): http://www.michaelschwarz.net/navi-list.html Appears to be working as expected for IE 5.2.3 Mac, on OS 10.4.2. __ 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] Using the title in a text only version
On 11/6/05 8:41 AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to to use the title HTML tag and display it in a text only version?? title This is the text I want /title I could make my own class... but using the title tag that is already there would be a much more elegant efficient solution... What I'd suggest is use header tags in combination with the title tag. The title tag is for the page's title as it appears in the browser's title bar. If your page is loaded in a text browser, such as Lynx, the page's title should still appear in the browser's title bar, just as it does on a regular browser's page. Can someone with Lynx confirm this? Suggestion: Match you page's title tag and the first header tag to got your desired effect. It's semantically correct, good for SEO, and a good idea in general. -- !DOCTYPE ... html head titleSuper-Dooper Web site/title /head body h1Super-Dooper Web site/h1 pBlah, blah, blah...my pages' first paragraph, etc. /body /html -- This way, the text only version will show both the page's title, and the header as the same text. I think this answers your question, unless I misunderstood. __ 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] Using the title in a text only version
On 11/6/05 9:18 AM, Bill Gates [EMAIL PROTECTED] wrote: What I'd suggest is use header tags in combination with the title tag. The title tag is for the page's title as it appears in the browser's title bar. If your page is loaded in a text browser, such as Lynx, the page's title should still appear in the browser's title bar, just as it does on a regular browser's page. Can someone with Lynx confirm this? The title appears as text in the top right corner, using Lynx 2.8.5rel.1 in an xterm. There is no browser's title bar. Thanks Bill. All I have access to is FF's Checky plugin, which shows what your page/should would look like in Lynx, but it can only go so far to match the real thing. I see that Lynx is in beta testing for Mac, I can't wait until it is available. __ 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] One True Layout Centered
On 10/26/05 6:45 PM, anathema [EMAIL PROTECTED] wrote: I discovered Alex Robinson's One True Layout [props bro!] the day it was published and have been trying to make it a fixed width centered design. Obviously it is easy in standard compliant browsers simply by putting a margin: 0 auto; on the wrapper. The next course of action would be to use text-align: center on the body for IE. However, IE 5, 5.5 and 5.2 Mac get it wrong and the wrapper is left aligned. This clearly?? has to do with the float: left. How about feeding the wrapper - margin: 0 12.5% 0 12.5%; - for IE 5/Mac? __ 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] Multiple IR in IE 5.0/Win [Solved]
On 10/11/05 11:35 PM, Thierry Koblentz [EMAIL PROTECTED] wrote:
Jono wrote:
On 10/8/05 2:32 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It appears to be a cascading issue - due to how flip-flopping the h1
and h2 CSS order changes the display - but I cannot pinpoint where
the problem is occuring.
Interference from 'voice-family hack' I think. It isn't needed
anyway.
Any idea how to fix this for IE 5.0?
h2.replace {
font-size: 130%;
padding: 58px 0 0 0;
width: 192px;
background-image: url(images/h2-logo-tag.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 58px;
heigh\t: 0;}
This technique, as well as the negative text indent technique, doesn't
address the issue of styles ON / images OFF. What about people browsing with
images off?
Also, the font-size declaration seems useless since the text is only visible
with CSS *off*...
While I am am concerned about the few who know how to turn off images, I
have not found a better technique (yet) that works cross-browser - Mac\Win
IE 5.0 - 6.0; Safari, FF, maybe even Opera, etc - that doesn't involved JS,
or the DOM, or something more complicated. I'd also like to be able to add
a link to the image that replaces the text.
Anyone have a suggestion...for an IR technique that works as mentioned?
__
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] Multiple IR in IE 5.0/Win [Solved]
On 10/12/05 6:28 AM, jérôme coupé [EMAIL PROTECTED] wrote:
...
This particular technique [2] seems to fulfill you requirements.
Drawbacks: transparent images / massive bump-up of font-size by user
...
[2] http://www.tjkdesign.com/articles/tip.asp
-Original Message-
While I am am concerned about the few who know how to turn
off images, I have not found a better technique (yet) that
works cross-browser - Mac\Win IE 5.0 - 6.0; Safari, FF, maybe
even Opera, etc - that doesn't involved JS, or the DOM, or
something more complicated. I'd also like to be able to add
a link to the image that replaces the text.
Anyone have a suggestion...for an IR technique that works as
mentioned?
This appears to be a good solution, and best of all, it is - like you said -
clean:
[quote]
h1a title=Take me home! href=//aCompany Name/h1
h1 {position:relative}
h1 a {
z-index:1;
position:absolute;
top:0;
left:0;
width:538px;
height:1.7em;
min-height:28px;
background:transparent url(/img/helloworld.gif) no-repeat;
border:1px dotted red;
font-size:1em
}
[/quote]
I like the rollover options too. Great for a logo swap on rollover.
Also, I noticed something very small, that you might want to fix? The
acronym's title attribute has a capital T in Styles:
CSS declarations are identicals, only the selectors change:
acronym title=Cascading STyles SheetsCSS/acronym
Very tiny indeed, it's just something I noticed. Also is it Cascading
Style Sheet or Cascading Styles Sheet as you have it? Never really
thought about it, but I always though it was Cascading Style Sheet with a
singular Style? Maybe two tiny fixes?
Thank you for the links! I'll post back on this issue if anything comes up;
for now, I think this can be considered [Solved]...again.
Jono
__
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] Website check. How does it look?
On 10/12/05 3:59 PM, John Gucheman [EMAIL PROTECTED] wrote:
The site is at http://www.guchdesign.com/pop/
Let me say beforehand that I am using tables for layout... in combination with
a trick I found on csszengarden, attributed to Douglas Bowman at
stopdesign.com:
/* using an image to replace text in an h1. This trick courtesy Douglas
Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
background: transparent url(/001/h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
#pageHeader h1 span {
display:none
}
So, my questions are
1: how does the site look across various platforms?
2: In text-only browsers does the html display OK?
John,
I just finished up a post about Image Replacement titled
Re: [css-d] Multiple IR in IE 5.0/Win [Solved]
You should take a look at the IR technique(s) mentioned here:
http://www.tjkdesign.com/articles/tip.asp
__
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] Multiple IR in IE 5.0/Win
On 10/8/05 2:32 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It appears to be a cascading issue - due to how flip-flopping the h1
and h2 CSS order changes the display - but I cannot pinpoint where
the problem is occuring.
Interference from 'voice-family hack' I think. It isn't needed anyway.
Any idea how to fix this for IE 5.0?
h1.replace {
padding-top: 59px;
width: 252px;
background-image: url(images/h1-header-logo.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 59px;
heigh\t: 0;}
h2.replace {
font-size: 130%;
padding: 58px 0 0 0;
width: 192px;
background-image: url(images/h2-logo-tag.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 58px;
heigh\t: 0;}
Working in IE5.0, IE6, Op, FF, Saf, IE/Mac. Can't check IE5.5.
regards
Georg
Thanks George, I'll give it a shot and see how it goes.
__
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] Multiple IR in IE 5.0/Win [Solved]
On 10/8/05 2:32 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
It appears to be a cascading issue - due to how flip-flopping the h1
and h2 CSS order changes the display - but I cannot pinpoint where
the problem is occuring.
Interference from 'voice-family hack' I think. It isn't needed anyway.
Any idea how to fix this for IE 5.0?
h1.replace {
padding-top: 59px;
width: 252px;
background-image: url(images/h1-header-logo.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 59px;
heigh\t: 0;}
h2.replace {
font-size: 130%;
padding: 58px 0 0 0;
width: 192px;
background-image: url(images/h2-logo-tag.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 58px;
heigh\t: 0;}
Working in IE5.0, IE6, Op, FF, Saf, IE/Mac. Can't check IE5.5.
It was the voice-family hack that was causing the second IR not to work;
replacing it with heigh\t: 0; did the trick.
Works in IE5.0, IE 5.5 IE6, Op, FF, Saf, IE/Mac.
__
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] Multiple IR in IE 5.0/Win
I have a simple layout with a header, content, sidebar, and footer as usual. In the header I have an h1 that I have repalced with an image. In the content, I have an h2 that I have also replaced using a second image. Both the h1 and h2 are displaying as expected in FF, IE 6.0, and 5.5, but in IE 5.0, I cannot get the h2 image replacement to work. I only see the text for the h2, and not the image. If I flip the order of the styles declared for the h1 and h2 in my style sheet the h1 stops working and the h2 starts working. It seems as if which ever style declaration comes first in the CSS is the only one that is applied in IE 5.0. I have set up a simple page with an example of my problem here: http://tinyurl.com/bhfzh CSS is inline. It appears to be a cascading issue - due to how flip-flopping the h1 and h2 CSS order changes the display - but I cannot pinpoint where the problem is occuring. Any idea how to fix this for IE 5.0? Thanks, Jono __ 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] Multiple Image Replacements in IE 5.0
I have a simple layout with a header, content, sidebar, and footer as usual. In the header I have an h1 that I have repalced with an image. In the content, I have an h2 that I have also replaced using a second image. Both the h1 and h2 are displaying as expected in FF, IE 6.0, and 5.5, but in IE 5.0, I cannot get the h2 image replacement to work. I only see the text for the h2, and not the image. If I flip the order of the styles declared for the h1 and h2 in my style sheet the h1 stops working and the h2 starts working. It seems as if which ever style declaration comes first in the CSS is the only one that is applied in IE 5.0. I have set up a simple page with an example of my problem here: http://tinyurl.com/bhfzh CSS is inline. It appears to be a cascading issue - due to how flip-flopping the h1 and h2 CSS order changes the display - but I cannot pinpoint where the problem is occuring. Any idea how to fix this for IE 5.0? Thanks, Jono __ 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] id's and classes in the html.
On 9/25/05 8:48 PM, Tina Clarke [EMAIL PROTECTED] wrote: I'm often asked to convert html table templates .. formatting into a CSS sheet. I use Topstyle pro (which I don't use to it's full advantage) and also work on the sheet itself directly. Is there a method or application that allows one to convert an already made template html ... with classes or id's? I know I'd have to add in the 'commands' to the sheet (sorry my knowledge is all very rough and ready) but I find it hard to work with the tables, tr and td visually...when they are all in it makes sense ... but doing this first bit I find quite hard. If you're asking if there's an application that will take an already made template that was built using tables, and automatically change it to a template that is not table-based, then I think the answer is no, as far as I know. You can create a tableless html page, and then save it as a template in Dreamweaver, though I've never used that feature before. If there was a magic application that could convert a table-based layout into a tableless layout, Macromedia (or Adobe) would have bought them out by now. I'm sure they're working on it somewhere though. It only makes sense. Dreamweaver has come a long way towards elimination unnecessary table tags with options such as Use CSS instead of HTML tags in its preference settings, but it doesn't have a table-to-div conversion...yet. It would make a great extension, but the options it would have to consider are mind boggling. There's just too many ways of doing things to make it that simple. There are some good online tools that let you specify number of columns, headers, color, width, etc and then spit out code you can copy and paste, or files you can download. CSS Creator's Layout Generator: http://www.csscreator.com/index.php?topic=11408 The Noodle Incident: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html Try Googleing for CSS Layout Generator. __ 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] Mozilla hacks?
On 9/25/05 10:40 PM, Shelly @ WDG [EMAIL PROTECTED] wrote: I've googled on the subject, but I can't seem to find anything on it...does anyone here know if there's a way to get Mozilla/Mac to read my Safari changes, or a way I can feed in corrective stylesheets? I do not want to use Javascript or any other sort of scripting language to do so - I've managed to come this far without using such a notion, and I'd prefer to stay away from it. What are you trying to change, or what is it that you are having trouble with exactly? Link/URL would be helpful if you can supply one? I've done plenty of testing on IE 5.0 - 6.0, Opera, and FF for Mac/PC and Safari 2.0, and I can't recall anything different between FF Mac vs. FF PC or FF Mac vs. Safari 2.0. If anything, there may be slight differences in font sizes on Mac vs. PC when it comes to FF? Building sites for Firefox (Mac and/or PC) and then tweaking for IE's many flavors seems to work best. I usually don't need to make any changes to my CSS for Safari if it is working in FF. I guess it all depends on what you are trying to do, which is what we need to know. __ 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] cell spacing - how do you write this in css?
On 9/25/05 11:32 PM, Tina Clarke [EMAIL PROTECTED] wrote:
Please could someone tell me how to put cell spacing in a sheet? How do you
write it out? I've been fiddling around and can't figure it out. I'm trying
to change a html template over to a sheet for the formatting of the tables.
(can't use divs in this instance)
1. Simple table HTML:
-
table
tr
tdstuff here/td
tdmore stuff here/td
/tr
tr
tdimg src=../image.jpg class=photo-style-01/td
tdmore stuff here/td
/tr
/table
2a. Give the table an ID:
table id=style-me
tr
tdstuff here/td
tdmore stuff here/td
/tr
tr
tdimg src=../image.jpg class=photo-style-01/td
tdmore stuff here/td
/tr
/table
2b. Apply styles:
-
/* table styles */
#style-me td {
margin: 4px;
padding: 0;
}
#style-me td.photo-style-01 img {
padding: 0;
margin: 4px;
}
Also, see the Wiki:
http://css-discuss.incutio.com/?page=NicerTables
And here:
http://css-discuss.incutio.com/?page=StylingColumns
__
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] Can I style generated content?
Is it possible to style generated text?
/* Example: CSS */
a {
font-family: arial;
color: red;
text-decoration: none;
}
a.left-arrow:before {
content: ;
}
!-- Example: HTML --
a href=thispage.html class=left-arrowGo to this page/a
The link will appear in all red arial, like this:
Go to this page
Is it possible to make the appear in a different font or color? If
so, how would I make the appear different on :hover?
I have never used generated content b/c IE doesn't support it, but I am
trying something new, so I though I'd ask.
Thanks,
__
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] Can I style generated content?
On 23/09/05, [EMAIL PROTECTED] wrote:
Is it possible to style generated text?
a.left-arrow:before {
content: ;
color: blue;
}
OK, I must have missed a typo earlier, I couldn't get that working, but it
is indeed making the generate the color I want.
I also encountered a problem with the generated content on hover. I tried
to remove the on hover, but I am seeing all of the other links flash
when I hovered over the link with the generarted content.
I cannot seem to figure out how to remove the on hover without making
the rest of the links in my nav flash in Firefox? Here's what I am using:
htmlbody #sidebar-nav li.selected a:before {
content: ;
}
htmlbody #sidebar-nav li.selected a:hover:before {
content: ; /*gets rid of */
}
The above works - the goes away on hover - but at the same time all
of the other links in the navigation now flash when I hover over the link
with the generated content? It appears that the other link's background
images and text color are switching to white for a split second?
Why would hovering over a link with generated content cause a flash?
Below is my HTML and CSS; I cannot currently post a link:
!-- START: sidebar navigation --
div id=sidebar-nav
ul id=navlist
lia href=page1.htmlPage 1/a/li
li class=selecteda href=page2.htmlPage 2/a/li
lia href=page3.htmlPage 3/a/li
li class=exita href=Page 4Page 4/a/li
/ul
/div
!-- END: sidebar navigation --
/* -- sidebar navigation CSS -- */
#sidebar-nav {
padding: 0;
margin: 0 0 1em 1px;
background-color: #e0efff;
color: #035ca0;
font-weight: bold;
}
#sidebar-nav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#sidebar-nav li {
margin: 0;
display: inline;
}
#sidebar-nav li a {
display: block;
padding: 5px;
background: #d9e9fa url(nav_bg.gif) repeat-x bottom left;
color: #035ca0;
text-decoration: none;
border-bottom: 1px solid #90bade;
}
#sidebar-nav li.selected a {
background-color: #035ca0;
background-image: none;
color: #fff;
}
* html #sidebar-nav li a,
* html #sidebar-nav li.selected a {
height: 0.1em;
}
#sidebar-nav li a:hover,
#sidebar-nav li.selected a:hover {
background: #9ec6ef url(nav_bg_hover.gif) repeat-x bottom left;
color: #fff;
}
#sidebar-nav li.selected a:before {
content: ;
}
#sidebar-nav li.selected a:hover:before {
content: ; /* removing this stosp the flashing? */
}
#sidebar-nav li.exit a:hover {
background: #9ec6ef url(nav_bgexit.gif) no-repeat bottom right;
color: #02954f;
}
Is this a known firefox bug?
__
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] Site check please
On 9/17/05 5:32 AM, olly [EMAIL PROTECTED] wrote: Wow, thanks for the feedback - really appreciated. I'm purchasing a Mac in the next few weeks so then I'll be able to cover most browsers... Unless you have not uploaded the revised files, the problems are still occurring in IE 5/Mac. Nothing seems to have changed. Did you repost the revised files? As for the Mac, I think you'll find yourself using it most often, and then using you PC for testing. Once you get your mouse around OS X, you'll wonder why you waited so long... as long as you have the software you need, which is the hardest pill to swallow when switching to any new platform. You can email me off list if you run into OS X snags on your Mac. __ 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] Centering 2 cols layout
The problem:
You've set the margin on the body to be 100px all the way around. That's
fine, BUT, you then absolutely position c1 at left: 150px; which is
relative to the body element; meaning it will be positioned 150 pixels from
the left inner-edge of the browser window - which is 50 pixels more than the
margin set on the body. It would be position relative to the #wrapper div,
which is set to position: relative; BUT you did not put the wrapper div in
your HTML, so it is not being utilized. To make it work with out changing
much adjust the left value on #cl to be 100px, or adjust the margin on your
body to be 150px. Pick your poison.
#c1 {
border: 6px solid #A46B1C;
font-size: 0.9em;
padding: 16px;
position: absolute;
top: 100px;
left: 150px; /* positions left edge appear 50 pixels too far */
width: 320px;
background-color: #F1EBE4;
}
Change to:
#c1 {
border: 6px solid #A46B1C;
font-size: 0.9em;
padding: 16px;
position: absolute;
top: 100px;
left: 100px; /* 100px is the same as the body's margin */
width: 320px;
background-color: #F1EBE4;
}
There are better ways of centering layouts than what you have going on. I'd
suggest Googleing for something like centering layout + CSS
The page in general is poorly put constructed, and does not validate. You
are going to have a lot of cross-browser problems. I suggest you take a
look at some of the two column layout techniques on the CSS-D Wiki.
CSS-D Wiki: Two Column Layouts
http://css-discuss.incutio.com/?page=TwoColumnLayouts
Your validation results should be addressed:
http://validator.w3.org/check?verbose=1uri=http%3A//www.koumbite.com/index1
Good luck.
On 9/16/05 4:43 PM, M Moore-Racine [EMAIL PROTECTED] wrote:
Can anyone please tell me how to center a 2-cols css layout inside the
wrapper. Somehow, the left margin is larger than the right margin. I would
like it to be equal to the right margin, and keep the layout centered in the
wrapper. In case you need to look at the page in order to tell me, here is the
url: http://www.koumbite.com/index1
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] Site check please
On 9/16/05 9:50 PM, olly [EMAIL PROTECTED] wrote: Hi, ... I'm mainly concerned about Macs. http://www.whistlebump.co.uk/test Looks good in Firefox 1.0.6, Safari 2.0, Opera 8.02, and somewhat good in IE 5.2.3 for Mac OS 10.4.2 (Tiger). IE/Mac 5.2.3: Home page: The bottom of the second box - WhistleBump Records - is shifted off to the right by the width of the blue thumbnail image inside the box. About Us: Looks good Releases: The release-content box is appearing way off to the right. I'm not certain, but it looks like the top navigation may be pushing the release-content box out the the right as it is left aligned with the right outer-edge of the navigation. Mixes: Looks superb! Charts: The bottom box - Simon Haggis' September 20 - is shifted to the right by about 100px, which may be intentional. If so, I'd align both of them left. Links: Looks good Contact: Looks good All Pages: Hovering between home and about us causes the underline to appear below contact __ 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] site check please
On 9/11/05 2:17 PM, Keith Burgin [EMAIL PROTECTED] wrote:
Mark Mckee wrote:
site
http://sixfoottwo.gotdns.com/~sixfoottwo/_test/index.html
On my Mac running 10.4.2:
--
Looks good in IE 5.2.3*, Opera 8, Safari 2.0, and Firefox 1.0.6
* In IE 5/Mac, the red first-letter is appearing very small as opposed to
larger. You may want to try changing font-size: larger; to font-size:
125%; for IE5/Mac. It is red, just very small.
h1:first-letter {
color: #f00;
text-decoration: none;
font-size:125%;
}
On my PC, running (more of a slow jog really) XP Home:
--
Looks good in FF 1.06, Opera 8, IE6, IE5.5, and IE5; except that IE5 does
not honor the h1:first-letter; declaration. IE5/Win is handling it better
than IE5/Mac in that it is making the first letter in the h1 the same
size, just not red.
Both IE 5/Mac and PC are as near dead as any browser (except NN4 maybe), so
fixing/hacking to make those browsers happy is a personal, or audience
demand issue, IMO.
__
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] I don't want to casscade
On 9/11/05 10:24 AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
I have the following dropdown, the problem is I do not want the style
(home_button) to cascde down to the other list items. Is there a way of
having sub styles of cascading for example li.1, li.2 which I could define
seperate styles for and not have the rollover image.
An example would be good.
li class=home_buttona href=Sunfishes/a
ul
lia href=Blackbanded»
sunfish/a/li
lia href=Shadow bass/a/li
lia href=Ozark bass/a/li
lia href=White crappie/a/li
/ul
It has to cascade, that's what CSS does. You can easily work around it by
declaring styles for the sub-lists that have a higher level of specificity.
For example, if home_button links are red with a rollover iamge...
li.home_button a:hover {
color: red;
background-image: url(../YourImage.gif) 50% left no-repeat;
}
..and you'd like any sub list links contained by home_button to be green,
and have no background image appear on rollover; you'd do this:
li.home_button ul li a:hover {
color: green;
background-image: none;
}
I think that is what you are looking for. You can declare any styles with
more specificity in order to override what was previously declared.
__
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] MAC OSX problem with background image in hyperlink
On 9/7/05 6:05 AM, Bob Easton [EMAIL PROTECTED] wrote: Two solutions: 1) hide from MAC IE (radpidly declining market share) with this hack: http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html 2) code the image into the html (yes I know, you want to avoid this) 2.5) NOT SURE IF THIS WILL WORK, BUT IT'S AN IDEA. I have an idea that might do the trick? Try making the background image way larger than it needs to be, but keep the small red arrow graphic as small as it needs to be, and place it in the center of the large bg image. Make sure the large graphic is the same color as the background. In your case, you would make a bg image that was 300x300 pixels and then place the small red arrow directly into the center of the large white 300x300 pixel bg image. You then would position the the bg image centered vertically next to your link. My thinking is that if the link goes to two lines, the large bg image will still repeat, but you will only see the top piece - which is plain old white - of the large 300x300 white area on the following repeated image. 300px x 300px bg image with arrow in center | | | | | | Link text appears here. | | | | Hopefully when the large image (above) repeats, there will not be enough padding to reveal the small arrow in the second image that gets repeated (incorrectly) in IE5/Mac? Lemme' know if that works? __ 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] Glitch in IE/Mac Site Check
On 9/6/05 2:47 PM, Juanita [EMAIL PROTECTED] wrote: If there are any Mac users, the site looks as it should in Safari, but is not working in IE - any ideas why the content is shifted and/or how to fix it? The site css links : http://www.kcsm.org/voicesofcsm.htm This site (as well as the links on it) is(are) very helpful in troubleshooting IE5/Mac issues: http://www.l-c-n.com/IE5tests/ __ 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] application question
Photoshop Elements is 95% as good as Photoshop and can be found for less than $80 if you shop around. Not free, but more than worth its price tag. Photoshop Elements: http://www.adobe.com/products/photoshopelwin/main.html For logos, I'd much (much) rather have a pure vector application such as Adobe's Illustrator, which is very expensive. I've never tried the GIMP programs, but they may do the trick? On 8/30/05 12:11 PM, Patrick Roane [EMAIL PROTECTED] wrote: I was wondering if anyone can suggest an affordable solution for designing logos/gifs (for FIR purposes)? ... I know that a lot of professionals use programs like Photoshop ...but I just can't affort the price-tag on such a beast. __ 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] Padding around aligned images
I have a website where I am aligning some images to the left and some to the right (within a paragraph). When I do this, the text sits right up next to the photos, and I'd like a little gap. Ie: I'd like padding on the right hand side of those aligned to the left and padding on the left hand side of those aligned to the right. ... Joanne For left aligned images: margin: 0 5px 5px 0; For right aligned iamges: margin: 0 0 5px 5px; __ 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] CSS Image rollover not working in Mac?
I am running Tiger (Mac OS 10.4.2) and the site works well in Safari 2.0 and FireFox 1.0.6, but in IE (of course), not only are the rollovers not working - the links are not working either. Clicking on the main navigation in IE 5.2.3 Mac does nothing. Not sure about the fix yet, but I tough you would want to know which browser to target. There's a good technique that Dan Cederholm used for Fast Company's site - check that out here: http://tinyurl.com/dgqgb One draw back is that in Firefox (Mac and PC) sometimes the initial images do not load until they are clicked or hovered over, which is not good. I am not sure why it is, or if it is just me that notices it? It might be discussed in the comments below the article? Anyhow, pick your poison. On Aug 9, 2005, at 12:45 PM, Raymond van der Woning wrote: I've heard from a friend that the upper navigation I built for his blog does not work on Mac. My friend is non-technical and so I cannot tell you what browser. (He's away for a week, I promised I'd look at it...) __ 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] vertical distortion in MAC IE 5.2 Safari
As far as I can tell, it only distorts in Safari 2.0 for me, which is weird. I am running Tiger (OS 10.4.2). It looks good in IE/Mac 5.2.3 (BRAVO!!) and in Firefox 1.0.6. The page does not validate, which may have something to do with it? I can't see right off hand why it is distorting. On Aug 5, 2005, at 11:43 AM, Juanita wrote: I thought all was well - hurray! - then happed to look at the site on a MAC, and - yikes! - the pages have been vertically stretched and distorted. ... Here's the site: http://www.kcsm.org/railroadempire.htm __ 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] Link plus background image, plus undereline
Yeah, I just thought of this approach on the way to work yesterday. I think it will work out pretty well, and I'd say it's marginally better than adding extra markup. Thanks, On Jul 30, 2005, at 12:36 PM, Ingo Chao wrote: You can let the colored underline be a part of the bg-image. [ __] __ 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] Link plus background image, plus undereline
Just thinking out loud here, and looking for feedback. Here's what I am curious about: I want to make a link, and give the link a left aligned icon image, and also give the link a bottom border so that the link's underline is a different color than the actual link text. What I do not want is for the underline to also appear below the icon image that will appear to the left of the link. Here's how I'd mark it up: div id=callout h3Callout's Title Goes Here/h3 pThis is a short paragraph that gives a lead in to where the link below goes./p a href=there.htmlGo there now/a /div I could give the a a class and assign a left positioned BG image, no problem, but if I add left padding to the a to allow for the image to show to the left of the link, the border will also appear below the image. So, without adding span/span to the markup, am I out of luck here? I am pretty sure it's a no go, but you all might have a better suggestion... that will work in as many browsers as possible of course - IE/Mac Win 5+, FF, Netscape, Safari, etc. If it's not possible, a simple no will work for an answer, and I'll go on with the span/span approach, but if it is possible, and it satisfies the requirements, I'd really like to see a suggestion. Thanks, __ 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] horizontal tabed css menu - need help
Take a look here... http://www.alistapart.com/articles/slidingdoors/ ...and here for a bunch of examples http://css.maxdesign.com.au/listamatic/ Read the first article, it is all you will need; and then see other possibilities at the second link. On Jul 14, 2005, at 11:46 AM, cappellano wrote: Hi list! I´m trying to make an horizontal tabbed menu. No problems on making the tabs only using lists and css. But I´d like to add images for it to have a better look. The image would be this one: http://www.arcbr.org/imgs/bg_up.png I thought about using it as a background on the lists, but it didnt work properly (the text wasnt well centered). So, any other suggestion? thanks! __ 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/Mac Site check needed
On Jul 6, 2005, at 8:19 AM, Michael Palmer wrote:
I've got a site which I've heard has some trouble in IE / Mac. I'd
really appreciate it if someone could tell me what the problem is
(since I don't have a mac) and if possible, even suggest a solution.
URL: http://www.beng.com.au
Seems to be OK in IE Mac 5.2 for Mac OS 10.4.1 (Tiger), except for
your logo. It appears that IE5 Mac doesn't like your image
replacement technique.
I found this method to work for IE Mac and others - but I haven't
tested it much. I think this is listed on the Wiki too? Some will
frown upon this method because it requires extra markup - span/
span - but it works in a pinch. Also, the replaced text becomes
visible when text size is increased to large sizes.
I plan to change this soon, but for now have a look at the code below
for a quick, easy, temporary fix:
/* The CSS */
#replace {
width: 450px;/* the width of the image that replaces
the text */
height: 124px; /* the height of the image that replaces
the text */
position: relative;
}
#replacer span {
background: url(path/to/your/image.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
!-- the HTML --
h1 id=replacespan/spanText that gets Replaced/h1
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
Then take a look at this article for a better, long-term solution:
http://www.ryznardesign.com/web_coding/image_replacement/
Other solutions on the Wiki:
http://css-discuss.incutio.com/?page=ImageReplacement
Also:
The site does choke my broadband connection in the images area
which is hard to do. I understand that your work needs to be seen in
high resolution, but you might want to reconsider having the large
image on screen. Maybe break it into smaller images, allow users to
navigation to each one instead of loading them all at once.
Here is a list of approximate load times for the images area:
Connection Rate Download Time
14.4K270.33 seconds
28.8K135.26 seconds
33.6K115.97 seconds
56K69.66 seconds - - About 50% of
Internet users
ISDN 128K 21.47 seconds
T1 1.44Mbps2.05 seconds
In my opinion, 70 seconds is too long to wait to see anything on the
net.
__
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] Inline links, background images and MSIE
On Jun 21, 2005, at 8:32 AM, Christian Heilmann wrote:
a friend just asked me about the following problem:
You have CMS driven texts with embedded links and you need to set a
non-repeating background image to the links (indicating external
links). They cannot access the markup to add spans, classes, IDs or
whatever.
Now, all is fine in FireFox with that:
a{
background:url(arrow-selected.gif) top left no-repeat #fff;
padding-left:1em;
}
MSIE does not render the image though when the link breaks into a
new line.
Test Case:
http://icant.co.uk/sandbox/inlinelinks/
You could try adding white-space: nowrap; to your style:
a{
background: url(arrow-selected.gif) top left no-repeat #fff;
padding-left: 1em;
white-space: nowrap;
}
Also, I think the proper way to style the background image is as
follows...
a{
background: #fff url(arrow-selected.gif) left top no-repeat;
}
...putting the hex value (#fff) for your color before the image's
url, and putting the horizontal position of the image before the
vertical position. I believe there is a bug in Netscape 6 where it
will ignore your background positions if they are not in this order?
Try this:
a{
background: #fff; url(arrow-selected.gif) 0 50% no-repeat; /* 0
places image flush left, 50% places it vertically centered */
padding-left: 1em;
white-space: nowrap;
}
I'm not sure, but you may not even need white-space: nowrap; if you
follow the example above. Personally, I try to avoid nowrap if at
all possible.
__
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] Inline links, background images and MSIE
On Jun 21, 2005, at 12:07 PM, Christian Heilmann wrote:
a{
background: #fff; url(arrow-selected.gif) 0 50% no-repeat; /* 0
places
image flush left, 50% places it vertically centered */
padding-left: 1em;
white-space: nowrap;
}
I'm not sure, but you may not even need white-space: nowrap; if
you follow
the example above. Personally, I try to avoid nowrap if at all
possible.
Testing in IE shows no image and when you use white-space will move
the link to the next line. :-(
a {
white-space: nowrap;
}
Will move the entire link to the next line, in one piece, of there
is not enough horizontal room for the link to display on its current
line, that is why I try to avoid it in most circumstances.
Make sure your image path is correct. If your CSS is in the same
directory as your images then your path is currently correct, BUT if
you keep your images in a different directory from your CSS then you
will most likely need to change your image path. For example:
You currently have:
a {
background: #fff; url(arrow-selected.gif) 0 50% no-repeat;
padding-left: 1em;
}
If your images were in a images folder (or directory) this would be
the correct way:
a {
background: #fff; url(images/arrow-selected.gif) 0 50% no-repeat;
padding-left: 1em;
}
- - - O R - - -
a {
background: #fff; url(../images/arrow-selected.gif) 0 50% no-
repeat;
padding-left: 1em;
}
The iamge path depends where your styles are (inline or in an
external css file) and where your images folder is. I often goof on
this problem before I realize that I have an incorrect image file
path in my css.
If you can post an link to an example, it would be much easier to
diagnose.
__
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] Repost: Mac site check
On Jun 14, 2005, at 9:38 PM, Patrick Mannix wrote: Second, I sure would appreciate a page check on Mac browsers. Thanks! http://xps.org/test-fluid.html Looks good in FF 1.03. and Safari 2.0 for Mac OS 10.4. I don't have IE; new Macs no longer ship with IE installed, and I haven't personally installed it yet. __ 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] Vertical Alignment in Columns
On Jun 11, 2005, at 10:55 PM, Roger Roelofs wrote:
I've messed with absolutely positioning the images within their
columns, but that makes wrapping text around them a problem. Is
there a way to accomplish this, or should I just settle for their
being a little off, depending on the length of the preceding text
in their individual columns?
I vote for settling. You need to float them to get the text to
warp around them. You could tweak the margin-top on one of the
images to get them closer, but that means changing the stylesheet
every time the content changes. Also, differing text sizes will
affect where the images float to, so what looks good to you may not
to someone who has different font-size defaults than you.
I am not sure if this would do the trick, but have you tried:
img.calendar {
float: right;
margin: 5px;
position: relative;
top: 6.25em; /* 100 pixels from top of column, adjust to your
needs */
}
This would require a new style for each set of images that your want
to line up, but the first two images in each column should line up.
Not tested, but I'm curious if works or not.
__
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] css box positioning
On Jun 8, 2005, at 9:34 PM, BabaGanush wrote: yikes. I've been trying to redo a form without tables, and I'm really struggling. Again, this is only for IE6. http://www.yomammashouse.com/css_effort_take23.htm I have a container div (eventually will be two, equally sized, one floated left, one right)...anyways, i'll let the code explain. It looks really homemade, but i tried margins and padding uniform, but this is the closest I could get it. It looks good on screen, but when I print, or print preview it, the scale of the boxes are all screwy. Any ideas? Try giving your inputs a width and height and see if that fixes the issues. __ 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] text vertial align problem
Try using a list instead, and then give your list items a background image that is vertically centered and aligned to the left of the list item. This should help you: http://css.maxdesign.com.au/listutorial/master.htm On Jun 9, 2005, at 11:19 AM, Greg Creme wrote: I created a test page where I have created the effect using tables on one side and css on the other. As you can see, it isn't working quite right. http://www.ncsadvantage.com/test/layouts/test1.aspx __ 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] Logo swap help (Dan Cederholm, pg. 212)
Not sure if this will help, but see if changing the border from none to a 1px transparent border and see if that works. I think I remember seeing a hack somewhere if Mozilla/FF that dealt with borders. Just a guess. Maybe try Googling for border hacks and Firefox or Mozilla? On Jun 6, 2005, at 11:19 AM, Brad Sturtevant wrote: In Dan Cederholm's book Web Standards on page 212 a Logo Swap trick is presented that works great in IE 6.0.28, but fails to show image in Firefox 1.0.3. A code snibblet is at end of email. Has anyone got this working in Firefox? Maybe there are some general updates to this Logo Swap design technique? I did slightly modify code from book by referencing div#logo not #logo and by adding border-style: none; , float: left; and margin-top: 25px; Below is code snibblet. The general idea of this technique is to show a different logo when CSS is NOT available, and I also hope to it to print a different logo. __ 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] site check -- kiu-art.com redesign
On May 6, 2005, at 12:06 PM, Jeniffer C. Johnson wrote: http://www.kiu-art.dk/dev3/index9.asp Screen capture here to compare with: http://www.kiu-art.dk/dev3/images/screen.gif Looks like screen shot in Firefox 10./Mac. Safari 1.2.4 (v125.12) has a slight problem with the feather graphic on the left, it is pushed up underneath the left navigation, instead of appearing below the photo's caption in the left column, as it is in your screenshot. IE 5.2.3/Mac has the strangest of problems. The wider I make IE/5.2.3's window, the lower the feather graphic falls. It is pretty odd. If I make the browser window really wide, the feather graphic appears to animate down, right out of view. Shrinking the horizontal size of the window brings the feather graphic back into view. __ 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] Courseware suggestion(s)
Have a look here: http://www.w3schools.com/ Not exactly Courseware, but you may be able to work something out? On May 2, 2005, at 12:33 AM, Michael Grice wrote: I was wondering if anyone had suggestions for Courseware for CSS design, appropriate for a high school level person, possibly college freshman - that age group. Suggestions, please? __ 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/
