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/
