CSS Pros! Can we all work together I need your help.

Okay so I need to finish this that I started working on in January but due to a lack of freaking time with all the print work I never got back to it till, TODAY.

What I need to know specifically is why the link rendering is not working cause I know I'm attaching the style sheet correctly. Maybe I got the formatting wrong but when I checked it I thought it was correct.

So can you guys look over this and help me I'm going to check out the CSS referance at the w3schools site.

HTML Page:
www.cbcamerica.com/test/index.htm (http://www.cbcamerica.com/test/index.htm)

CSS Style sheet:
www.cbcamerica.com/test/css/ganz.css (http://www.cbcamerica.com/test/css/ganz.css)

I'm completely determined to finish this and unless my boss yanks me out of my chair I'm going to work on the website for the next two months.

Also since I know Ryan is going to help, I was wondering if you know any PHP or ASP Ryan? If you do PM me cause I wanted to disscuss something with you.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[axoi]

What exactly are the links supposed to do?

When I cursor over the links they have a grey bar highlight...

I know both PHP and ASP BTW.


You need to put the text-decoration: none in the anchor tag like so:

#GanzNav a {
text-decoration: none;
}

- Bill

Post Edited (axoi) : 4/2/2004 8:20:57 PM GMT

[Ryan8720]

Like Bill said, you have to add the a after #GanzNav. Right now you are applying the styles to the GanzNav div instead of the links in side. Using #GanzNav a {} tells it to apply the styles to all anchor tags inside of #GanzNav.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Thanks guys!


This is what I ended up doing:

a:link{
color: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
text-decoration : none;

}

a:hover{
color: #FF9900;
text-decoration : none;
}

a:visited{
color: #666666;

But I was wondering if I can add all these attrabutes to the '#GanzNav' section with out loosing the formatting.

Also I added a new nav section to the upper right hand side called '#corpNav' But the problem is that it's breaking after each link I need it to go across the screen horizontally not verticaly.

Like this:
Home About Us Divisions Contact Us Worldwide

Not this:
Home
About Us
Divisions
Contact Us
Worldwide

Also since you both now PHP and ASP. I wanted to add a database to this site to fetch info so I can update the site easily. Right now the site is over 200 pages. It was originally designed in Frontpage and when I started working here I got the MX suite and I do so much print work that I haven't gotten a chance to work on this. I have an ASP development book that I'll be reading but I want to finish the skeleton of the site being that I'm a designer then go and add the dynamic content.

I appreciate all your help so far guys and hopefully you can assit me in getting this thing up to par.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[axoi]

Benjo,

If you have the tags bare like this:

a:link { ... }
a:hover {...}

it applies to EVERY anchor (a) tag. But if you add just the id you want like so:

#GanzNav a:link { ....}
#GanzNav a:hover {...}

Then it only applies to those anchors inside the div ( or whatever you put the id on ) tag. So anchor tags
in the rest of the body would not get the styling.

Oh for the left to right styling I'm assuming your using a block level tag around the anchor:

#corpNav <whatever tag you surround the anchors with> { display: inline; }

This will cause those tags to appear left to right.

- Bill

axoi thanks man. Now the problem all CSS codes faces is that it's not working in Safari but it works great in IE. I've made a bunch of improvement to the code but I'll upload it once I finish off all the sections. I was doing some codeing on the weekend on my own site (which is down for the meantime).

I'm using alot of CSS sites to accomplish this cause I'm still a noob. I just don't want to bog you guys down unless it's something that is killing me.

I have another question. I want to build a custom search option for the site. Right now I'm using the atomz search feature extension for Dreamweaver but I wanted to build my own. What do you think I should use to get this thing done.

Also I'll probably post an update cause I have to get this done and I'm going to actually work instead of spending my day here. LOL! Yea sometimes you have to do it.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

Personally, I would use Google. http://www.google.com/searchcode.html

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[Ryan8720]

Also, I noticed that you aren't using a doctype on the page. That could be one of your safari problems.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Thanks Ryan on both of those tips.

I'm using:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
'http://www.w3.org/TR/html4/loose.dtd'>

But does this support CSS?

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

Yep, that will work, just make sure you put it at the top of all your pages.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Actually it broke my { display: inline; } tags.

Now it looks like the Ganz menu

You know what I'm going to upload it once I get off of lunch. I'll let you know and I'm going to view it on the PC to see if it still breaks.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

That doctype won't break display: inline. it must be something else. I'll just look at it once you upload.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Okay Ryan.

Also I noticed that the {overflow: auto;} tag (is tag the right word for this) doesn't work in safari.

Hold on I'm going to check on the PC...

Okay on the PC the {display: inline;} works but the {overflow: auto;} doesn't.

Style sheets can't live with them and can't live without them.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

Tag is the wrong word. In CSS its

selector {property: value;}

or

selector: psuedo-class {property: value}

That overflow thing sounds weird. Do you have it uploaded yet.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Post Edited (Ryan8720) : 4/5/2004 6:06:14 PM GMT

Thanks!

Also yea I have it up

Page is : www.cbcamerica.com/test/index.htm (http://www.cbcamerica.com/test/index.htm)

CSS is : www.cbcamerica.com/test/css/ganz.css (http://www.cbcamerica.com/test/css/ganz.css)

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

There are a lot of things that need to be fixed. Not sure which part you want to work on first.

Two things right off the top are that you are missing a } at the a:visited which is screwing things up. Also, you spelled downloads as downlaods on your nav.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Man I was going crazy looking for the Downloads code, when I noticed it was the navagation bar. LOL

I didn't notice the a:visted missing a clossing '{' or an Opening '}'

Also does the menu for #corpNav display inline for you?

This CSS is pissing me off. I'm about to switch to tables.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

Yes, it displays inline, but the last link hangs over the edge.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[axoi]

benjo,

I dreamweaver you can see what the enclosing brace is if you type ctrl-'. This will highlight the block of code that the brace is enclosing. Whew that was a tounge twister. Ugh I can't type today.

Tables...NO!!!! You'll be banished.....hehehe just kidding. Sometimes tables are much easier to understand than CSS.

- Bill

Alright I have an idea.

Now the main problem I'm facing with CSS is the positioning of my items are getting cut off but about 1/8' or maybe about 6-8 px. I was thinking and maybe this doesn't even make sense but what if I made the demensions in tabels.

What I mean is make a tabel that is like my header:
width: 700px;
height: 59px;

And then I take that and position it. What do you guys think? You think it would still overlap.

Man CSS has so much potential but browsers don't support it and the Mac version of IE is a piece of SH!T. Safari is better but doesn't have full support for CSS. Now my target audience calls from time to time asking how to download a PDF from the web site. Do you really think they are in the cutting edge?

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

Okay so I made the dam table and now I think I know why this thing is giving me a headache. The Padding on the GanzNav is messing everything up.

Check it out:

http://www.cbcamerica.com/images/webshots/webQuestion.jpg

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

Padding is probably it.

Basically all browsers support it. IE Mac is actually more standards compliant than the Win version. I think your main problem is trying to absolutely position every little piece. It is usually best to have an outer element to hold every thing and then only absolutely position when necessary.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Thanks guys for all your help. I know what I'm going to do.

I'm going to create tables with padding (that can be done right?) then position them. I think this absolute positioning is very buggy cause the padding should pad inside not outside. What it's doing is padding inside and then adding pixels around the actuall demensions.

Dam I wish CSS worked better there is a really big potential for Graphic Artist there. But I think that will work for now. I'll hit you guys with an update after lunch so look out for it.

Thanks!

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[axoi]

The padding/margin issue is discussed and can be worked around. Have a look at http://alistapart.com in the CSS section.

IE is very bad about the padding issue.

Also your CSS font-color {} does not exist ( thats why its underlined in dreamweaver ) color {} is what you are looking for.

- Bill

I can't go to those sites axoi... no, no ,no I end up reading to many articles and before I know it new ideas spark up and my original intentions get lost.

I went there and ended up printing at leat 7 articles. LOL!

Thanks on the font-color property update.

I have to do some print work but I ashore you my web work won't take back seat anylonger.

I'll be back, I already have everything in tables postitioned in CSS I just have to make some updates before I give you guys the goods. =)

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

Here (http://tantek.com/CSS/Examples/boxmodelhack.html) is the explanation and solution to the box model problem (the padding you discovered). This problem basically just effects IE/Win 5.x. The guy that came up with the above solution is also the same guy who made IE/Mac CSS standards compatible.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[Ryan8720]

FYI, it's sure and assure, not shore and ashore. Shore is where water meets land.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Thanks for the link Ryan. Unfortunetly I don't get all that he is saying. From what I understand padding adds to the size of the box expanding it? Is that right? So if I add 30px as the top padding then the box becomes 30px bigger so if I want an exact size I need to make it 30px smaller and then add the padding so it compensates for the missing space?

Okay I think I got it. Now I'll upload this thing in a few minutes and look at the differance using tables layed out with CSS.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

No, it is saying that IE 5.x puts the borders and padding inside the div. Borders are supposed to added to the outside of the div (and therefore make it wider).

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Oh so then it's actually working right for me.

But I like the results I'm getting with the tables.

Check it out: www.cbcamerica.com/test/ (http://www.cbcamerica.com/test/)

I fixed alot of the CSS thanks to you guys. Also the overflow option works with tables. Do you think it's over kill though?

www.cbcamerica.com/test/css/ganz.css (http://www.cbcamerica.com/test/css/ganz.css)

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'

[Ryan8720]

It looks messed up. Is the text supposed to be in a little box like that? Do you want it centered.

Here (http://www.edgewebdesign.org/images/misc/benjo_iewin_ss.jpg) is a (low quality) screen shot.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

Yea that was the overflow property I was talking to you about. I thought it would look cool but I guess it looks bad.

I'm going to finish the layout and drow photos and content in there today then we'll see once it's final.

http://www.cbcamerica.com/images/webshots/banner-design.jpg
'Adventure, Excitement, A Jedi craves not these things.'
'Anger...fear...aggression. The dark side of the Force are they.'