9 replies [Last post]
perconi
Offline
newbie
Last seen: 16 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-10-05
Posts: 4
Points: 0

Would you please have a look at : http://cafedesire.com please note the css navigation buttons.
The words in the buttons are "underlined". I dont want this. They don't appear that way on my local copy of the website. Only after I FTP'ed the site to the server do I notice this. Why is it showing up correctly on my local copy of the website, but not after I send it up? Is it my FTP client changing the code? Being a CSS newbie (also an HTML newbie) maybe someone could send me the corrected code after viewing the source code. Thanks much for any help.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Css navigation button display problem

You are telling the browser to underline visited links! Look here...

A:visited {
Color : #555555;
Font-Weight : Bold;
text-decoration : underline;
}

Life's a b*tch and then you die!

perconi
Offline
newbie
Last seen: 16 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-10-05
Posts: 4
Points: 0

I am not finding that.......

Hello Roy,

Can you tell me if you found that code looking at my source code? I see where it should say that, but here is the actual snippet of code from my website:

.Navlink {COLOR: #FFFFFF; TEXT-DECORATION: none; font-family: arial; font-size: 8pt; font-weight: bold;}
a:link.Navlink {color : #FFFFFF;}
a:visited.Navlink {color : #FFFFFF;}
a:active.Navlink {text-decoration: none;}
a:hover.Navlink {text-decoration: none;}

Notice, it says "none" :?:

I'm really confused. Again, on my local machine, (offline) the website does not have the underline. Only when I am at the website on the Web , it has the underline.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Css navigation button display problem

Okay, sorry, I missed that as I am working at the same time as trying to help. To be blunt, there is so much wrong with your code that I don't know where to start. It's a mess. Maybe someone else will have the time to help you. Sorry!

To get you started though: learn about DOCTYPES and then use them; try to move away from table layouts to CSS layouts (allow plenty of time to learn); if you must use tables then use the table tags as part of your selectors; and code in lowercase only - don't keep mixing and matching as you feel like it.

PS: the code I found is in the stylesheet that you are linking to on your server (main.css).

Life's a b*tch and then you die!

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 49 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Css navigation button display problem

They are not underlined for me... until I visit a link and come back.. then they are underlined...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Css navigation button display problem

The intial anchor declarations at the top of the sheet are overidding put a text-decoration:none in the a:link.navlink dec you don't need it in the a:hover/a:active and change the order around hover should come before active!
Sorry but I have to echo Roytheboy's sentiments regarding the coding it would help to start to read up on coding to standards and to move away from tables to a css based layout also start to pay attention to little things like mixing case i.e <A> </a> try to stick to lower case for everything it's more standards compliant and obligatory when you use certain document type declarations which brings me to the lack of a DTD it's best to have one then browsers will start to render your pages along the same guidelines rather than as they see fit, also remove all instances of <font> and declare your sizing in the css it's what css is for and <font>is a deprecated tag anyway; this will help to reduce the size of your page allowing faster download esp if your going to use slowloading table layouts. Most of this was covered by Roytheboy and it is good advise.
Sorry for the lecture.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

perconi
Offline
newbie
Last seen: 16 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-10-05
Posts: 4
Points: 0

Few more questions......

Thanks Hugo and Roy.

I did some of what you both suggested, ( put a text-decoration:none in the a:link.navlink dec you don't need it in the a:hover/a:active and change the order around hover should come before active!) wasn't sure about the rest. I am using "Namo" a WYSIWYG html editor similar to Frontpage, but they say doesnt change the code like Fpage . Namo does mention as one of its options using "css borders". Could I use that in place of "tables"?

Also, Roy mentioned:
PS: the code I found is in the stylesheet that you are linking to on your server (main.css).
I am not sure why I needed to know that.....please forgive my "newbieness".

Hugo mentioned: lack of a DTD, not sure what a DTD is.

If all else fails, would going back to the old fasioned "button gifs" solve my problem? I really do like the look of css though.

Thanks again Gents...

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 8 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Re: Few more questions......

perconi wrote:
Also, Roy mentioned:
PS: the code I found is in the stylesheet that you are linking to on your server (main.css). I am not sure why I needed to know that...

Perconi - I really hate to say this, but the help you need is beyond the time available from most of the people that use this forum. Compare it to people discussing the front-end geometry of a race-car and you ask which bit the wheels are!

You need to make an important discission and either stick with WYSIWYG editors (in which case use something like Dreamweaver), or take the plunge and learn to code sites by hand. Obviously, most people on this forum would recommend the later (I would expect).

Your mission; should you choose to accept it...
Start from the begining (HTML, or better still XHTML) and move swiftly into CSS. There are plenty of tutorials on the web but this one looks like a very good place to start > http://academ.hvcc.edu/~kantopet/index.php

Good luck Cool

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Css navigation button display problem

All html editors seem to mess up code in one way or another, use them by all means if it helps you on the learning curve but bear in mind that they are not needed to produce code, it's important to understand their limitations and to slowly learn to hand code. css is just a set of text commands I use notepad, nothing fancy, I keep a browser window open then any changes to the css are a refresh away .
Coding to standards and css is not so much a choice as a requirement the days of browsers rendering tag soup code need to come to an end it is an attempt to have everyone singing from the same hymn sheet if a set of standards had not been put in place there would come a time when browsers would not be able to read certain pages; coding to standards ensures that any pages written now will be able to be read regardless of the changes that may have occured.
Stick with css it does have a lot of problems but is the right way forward and can be rewarding and fun Smile
CSS borders are just the borders CSS is able to draw around an element they are not a layout tool.
If you wish to use a gif image as link you can, that is not going against CSS or standards, you can define the image in the CSS file.
You will need to read up on some layout guides and other basic CSS guides. I'll give you some links to start you off as well as a link to a DTD explanation.

http://www.yourhtmlsource.com/accessibility/xhtmlexplained.htm

http://www.alistapart.com/articles/practicalcss/

http://www.mako4css.com/Tutorial.htm

http://www.websitetips.com/css/index.shtml

http://www.positioniseverything.net/articles/flow-pos.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

perconi
Offline
newbie
Last seen: 16 years 50 weeks ago
Timezone: GMT-7
Joined: 2004-10-05
Posts: 4
Points: 0

A final comment and a question or two.........

Thank you for help in this matter, Roy and Hugo.

I am off to study css. I have been to a few of the links you gave me Hugo and I am already finding interest there. Does this mean the end of "good ole fasioned" tables? Or will there always be a use for them? Is it the tables that are slowing down the loading of my site? One last question if I may. How do you both feel about the flash on my main page. Is that something you would suggest I keep, or should I go back to just a plain banner for the top of my website? Just your general thoughts on flash would be interesting.
Anyway, as for css, its time I learn it, because I think its here to stay for awhile.
Thanks again, both of you, for all your help.