8 replies to this topic

[mopacfan]

[Moved to Design and Usability Forum. - Jill]

Now that I've got your attention, here is my pickle. I'm using css in order to make the links as text rather than images for seo. However, ie5.0 apparently does not recognize all of the css formatting tags. (the main links are not getting spaced properly) I'm getting ready to try the css code that was posted here in the forums a few days ago about displaying images but keeping the text links 'hidden' unless someone has images turned off. The button labels would have the exact same text so as not to spam the SE's.

Anyway, rambling on here, what I'm getting at, is if anyone knows of any alternate css code to get the 'buttons' to have a set spacing in between them, I'd appreciate the heads up.

Thanks

Edited by Jill, 10 September 2003 - 05:39 PM.

[air-dog]

line-height: 19px

where 19 can be anything you want, Have you got an example of the page your working on somewhere on the site i.e www.mydomain.com/testarea ?

I'll take a look at for you.

[mopacfan]

Air-Dog,

This is the development site I'm working on: Development.

I've pretty well given up on the image over the text thing. I'm concerned about those that would have images on and css off. Then the scene would get really ugly. I have found that you cannot use <div> tags horizontally. What I was trying to do was to set the padding and spacing between the text buttons. So now I've just resigned to setting the font size and boldness where it fits within the table cell without wrapping.

Thanks

[balz]

Are you using an html package such as Adobe Go Live or Macromedia Dreamweaver to build your site?

b.

[Randy]

Not sure exactly what you're going after mopacfan, but you're correct that div's will in effect create space just like a P tag would.

An alternative is to use <span> </span> in place of your div's. Span's will allow you to keep it all on one line.

A warning... be sure to check your page in Netscape, especially if you're mixing and matching div's and span's. Netscape has been known to flake out if you get too carried away with mixing those in the same page.

I don't think this is what you're looking for, but if you need some (rather sophisticated) CSS code which uses only text but looks like a common javascript-driven mouseover button, complete with the button being depressed illusion... I have that laying around here somewhere. I came up with it for a client some time back who insisted on JS buttons but wanted to be spidered as well. I'll just need to remember which client/site it was in order to find it again.

Randy

[air-dog]

Getting positioning and formating to work for "every user in the world" with "every browser" and "every system ever", Plus, incorporating it in a good design has been the Holy Grail of web designers for years.

You could end up pulling your hair out trying to get it right. and when you get it right some one points out that it doesn't work on their obscure browser when they increase the text size.

I would take up Randys' offer or, something that I've done now and again is to, create an image of a blank button and then cut it up so its hollow in the middle then, with the use of tables, border the text with the bits.

You can set the font-size with CSS in an attempt to stop the user resizing the text.

[webstream]

If I understand you correctly, you could use nested tables for positioning your menu items and transparent gifs for padding and spacing and too avoid possible word wrapping in various browsers or display settings.

If you want to work with CSS in various browsers I highly recommend you go download TopStyle.

Webstream

[leftbrain]

A past Bravenet newsletter had the CSS code for a similar menu. I tried it, and had no trouble adjusting the spacing between buttons. It also seems to degrade well for incompatible browsers, although I have not checked it in IE5. I can't find it on Bravenet's site, but I still have a copy of the newsletter. If you're interested, PM me and I'll forward it to you.

Regards,
Bill Cunningham

[mopacfan]

Are you using an html package such as Adobe Go Live or Macromedia Dreamweaver to build your site?

Nope, I code by hand using Visual Interdev to work with the asp code.

To quickly draw out a table or layout a group of images, I'll use FP to create them and then go back to Interdev to add the rest of the code.

An alternative is to use <span> </span> in place of your div's. Span's will allow you to keep it all on one line.

Indeed, that is what I am using for the horizontal links. The problem is actually not the div or span, but the formatting of the tags. Ie5.0 does not recognize the padding and/or spacing attributes. This is where my code was 'broken'


Thanks for all the suggestions. The final solution is now working, not as 'pretty' as I would like, but it does the job.