Any CSS experts around?

I'm creating a simple web page for a friend. I'm just using godaddy's Website Tonight, and I'm just getting started on figuring this stuff out. I'm actually pretty proud of myself for being able to change the colors and borders and stuff through the css.

Anyhoo, I'm wanting to remove the underlines from the navigation menu links and I'm not doing so well at figuring it out. Here's what I have:

/*-------------------------------- Navigation Color ---------------------------------*/ .sf_navigation { color:#c01ec6; background-color:#9eae79; background-image:url(); background-repeat:repeat-y; } .sf_navigation ul { background-image:url(); background-repeat:no-repeat; } .sf_navigation ul li a { color:#c01ec6; } .sf_navigation ul li a:visited { color:#000000; } .sf_navigation ul li a:hover{ color:#FFFFFF; } /*-------------------------------- Navigation ---------------------------------*/ .sf_navigation { width:220px; float:right; display:inline; margin:10px 0px; min-height: 400px; height: auto !important; height: 400px; font-weight:bold; } .sf_navigation:after { content: " "; display: block; clear: both; visibility: hidden; font-height: 1px; margin:0px; padding:0px; } .sf_navigation ul { margin:0px; width:220px; padding:40px 0px 20px; list-style-type:none; } .sf_navigation ul:after { content: "."; display: block; visibility: hidden; height: 0; font-size: 1px; clear: both; } .sf_navigation ul li { padding:4px 10px; width:200px; float: left; } .sf_navigation ul li.sf_last_nav_item { } .sf_navigation ul li.sf_first_nav_item { } .sf_navigation ul li a { } .sf_navigation ul li a:visited { } .sf_navigation ul li a:hover{ } /*------------------------------------ Flyout - right Aligned Menu ------------------------------------*/ #Nav1 iframe { position: absolute; /* account for the border */ left: -0.25em; top: -0.25em; z-index: 0; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); margin-left: 3px; } #Nav1 li ul a { display: block; } #Nav1 li ul { position:absolute; left: -999em; margin:-15px 0 0 -200px; padding:0px; width:200px; background:#9eae79; z-index:1000; } #Nav1 li ul li { margin:0; padding:0px; width:200px; } #Nav1 li ul li a { display: block; padding:5px; white-space:normal; width:190px; } #Nav1 li ul li a:hover { background:#676767; } #Nav1 li:hover ul, #Nav1 li.sfhover ul { left: auto; } /*-------------------------------- End Navigation ---------------------------------*/

Of course I've tried removing the "ul" instances, but that screws everything up. Any help would be appreciated!

It's helpful to actually have the page - then it's easy to pinpoint the exact elements to style.

At a guess though, this will suffice:

.sf_navigation a { text-decoration: none; }

Underline is a text decoration, so yeah... what Pirate Bob said.

Yep, that worked. Thanks!

The site is here but it is very early in construction right now, with some graphics in place just to show my friend and all that jazz.

OK, 'nother question:

I'm adding little flourishes and crap to the graphics. I added a picture in the sidebar, the navigation bar. I used the same colors. I saved it as a png file. But when I uploaded it, it appears there's a different color behind the menu than my picture. Is there a way to make the background of the menu transparent?
IMAGE(http://img854.imageshack.us/img854/7549/unledzxs.png)

I tried background-color:transparent; but that doesn't do anything.

Oh hey dumbass, why not just make the image transparent except the little swirly part. Duh. Nevermind :).

You're learning fast. I've got a graphic designer on staff who hasn't figured that out yet.

Note: "background-color: transparent" should in fact work, as well. If it's not, then something else might be colored than you think is colored.

Yeah, the technical term for that is 'alpha channel'. The alpha channel is a fourth layer, like red/green/blue. I don't remember whether larger values in the alpha channel make the rest of the pixels more or less transparent, but one end is fully visible, the other end is fully invisible, and you have 254 values in between.

Paint programs, when you set transparency like that, usually set the alpha channel to transparent wherever you have background, and fully visible wherever you paint. But you can do some pretty cool stuff with semitransparency if you edit that layer manually.

Hypatian wrote:

Note: "background-color: transparent" should in fact work, as well. If it's not, then something else might be colored than you think is colored.

Oh yeah this is definitely the problem. Transparent does work, but somehow that navigation menu is colored and I cannot figure out where.

Get Firebug for Firefox if you haven't already. Open the Firebug console and use the pointer ("Click an element in the page to inspect") to click around on the relevant parts of the page. You'll see the styles, including those that are overridden by others, the layout and everything else you need to know and you can edit it right there to see what happens when you turn them on/off etc.

Can't live without it.

Ah ha! Found it. It was in Website Tonight's color thingie, which apparently overrides the css.

Edit - Ooh, I'll definitely check out Firebug. Thanks!

cheeba wrote:
Hypatian wrote:

Note: "background-color: transparent" should in fact work, as well. If it's not, then something else might be colored than you think is colored.

Oh yeah this is definitely the problem. Transparent does work, but somehow that navigation menu is colored and I cannot figure out where.

Checking this morning, the green is in the file WstUserAdvancedStyles.css?1347857862, and the rule .sf_navigation

.sf_navigation { color: #9EAE79; background-color: #9EAE79; background-image: url(http://app4.websitetonight.com/proje...); background-repeat: repeat-y; }

The image sidebar2.png gives a 404 error - not found.

Also found that color here:

.sf_navigation ul li { background-color: #9EAE79; }

Firefox's Firebug addon is tremendously valuable. It's easy to inspect elements and see all the cascaded styles and work back up the dom tree to see where they're coming from. I prefer Firebug to Chrome's built-in dev tool (hit F12 to open it). IE 9's isn't bad, pretty much a clone of Firebug.

Malor wrote:

Yeah, the technical term for that is 'alpha channel'. The alpha channel is a fourth layer, like red/green/blue. I don't remember whether larger values in the alpha channel make the rest of the pixels more or less transparent, but one end is fully visible, the other end is fully invisible, and you have 254 values in between.

Paint programs, when you set transparency like that, usually set the alpha channel to transparent wherever you have background, and fully visible wherever you paint. But you can do some pretty cool stuff with semitransparency if you edit that layer manually.

Technically, 256 values, 2^8 = 256. 0 in an alpha channel would be transparent, 255 full opaque. PNG's offer palette colors similar to gif, 24bit RGB and 32bit RGBA plus a number of other options generally not used for web.

  • Gif and PNG-8 both subset the colors and transparency into a set palette. This is useful for logos and small blocks of text - excellent compression with minimal loss. Transparency however can appear very aliased since neither supports partial transparency in the palette (ie, jagged edges)
  • PNG-24 and PNG-32 are both full-color. The full 32-bit option gives a full 8 bits in the alpha channel, enabling partial transparency for shadows and anti-aliasing. These files can get big pretty quick though, so be careful.

What I like to do a lot is generic gradients with PNGs. You can creating a simple, small white-to-transparent gradient and set that as the background image in a div. Then just change the background color as you wish without having to recreate an image. Works well for things like menu roll-overs.

Pirate Bob wrote:

The image sidebar2.png gives a 404 error - not found.

That was likely because I was constantly updating it just a bit ago, deleting and replacing the file.

I had made all the colors you listed transparent, but the block was still there. It came from Website Tonight overriding it.

Thanks for the graphic tips. I'm having a bit of fun with gradients, as I'm sure you noticed ;). Been using GIMP and this is the first time I've really used a more complex program than Paint, heh.

Technically, 256 values, 2^8 = 256.

Yes, I said that. You have 0, 255, and 254 values in between.

What I said was precisely correct, although not as informative as the rest of your post.

Malor wrote:
Technically, 256 values, 2^8 = 256.

Yes, I said that. You have 0, 255, and 254 values in between.

What I said was precisely correct, although not as informative as the rest of your post. :)

Hehe, true. If there ever was a place for pedantic semantics, GWJ would probably be it

Hey, you glossed past what I wrote without really reading it. That doesn't make it pedantic semantics, it means you misunderstood.

Not to make this the "cheeba's a web design noob who needs help with everything" thread, but I got another question :).

I want to include a google map of her store on the site, but I can't get the damn marker to show up. Here's what I'm using:
?img src="http://maps.googleapis.com/maps/api/staticmap?center=45.070261,-85.264186&zoom=16&markers=color:purple&size=200x200&sensor=false" /?
When I enter that into the html on the page in GoDaddy's Website Tonight, it's changed to:
?img alt="" src="http://maps.googleapis.com/maps/api/staticmap?center=45.070261,-85.264186&zoom=16&markers=color:purple&size=200x200&sensor=false" /?
I think the &amp change is just godaddy's thing because & is reserved, so I don't think it affects anything. But that stupid marker isn't showing up.

Edit - OK for some reason the code isn't posting in well, so I changed the <> to ?

Google does this stuff all the time. It has to do with their editing tools and platforms.

You have to make sure whatever you're using to cut and paste the code with doesn't do any SmartQuote replacements (like that &amp). Notepad is the safest one for that. Steps look like:

1. Copy code out of Google
2. Paste it into Notepad.
3. Inspect closely, looking for anomalies like that &amp and fix any that are there.
4. Copy code out of Notepad.
5. Paste into GoDaddy.

That should do it. If not, let me know and we can try to chase this some more.

Remember this trick when you need to put Google Analytics code or if they decide to put AdSense into the site.

I won $400 winning a tournament once...

Pirate Bob wrote:
  • Gif and PNG-8 both subset the colors and transparency into a set palette. This is useful for logos and small blocks of text - excellent compression with minimal loss. Transparency however can appear very aliased since neither supports partial transparency in the palette (ie, jagged edges)
  • PNG-24 and PNG-32 are both full-color. The full 32-bit option gives a full 8 bits in the alpha channel, enabling partial transparency for shadows and anti-aliasing. These files can get big pretty quick though, so be careful.

It should be noted that png transparency doesn't really work in IE 6 and earlier (although I have read that it worked in IE5.5 for Mac).

There's some javascript stuff that will fix that for you in most cases, though: IE PNG Fix. This is a good solution if you have to support those browsers, because it's basically a "drop this one thing in, never have to worry about it again" sort of thing.

Honestly: IE<7 should die the death at this point. Hell. IE<8 should die the death, too, but, well, I'm willing to accept IE7 still being around. But IE5 and IE6? *shudder*

On PNG-8: The transparency in PNG-8 actually does support a full alpha palette--but dithering alpha does not work very wel in most circumstancesl. (Basically, 256 colors will cover most reasonable combinations of colors in a non-photographic image with decent fidelity. But when you throw transparency into the mix, it gets hairy. If you have 64 different colors around the edge of something you want to have be anti-aliased, that only leaves 4 levels of transparency per color. 32 colors around the edge, 8 levels of transparency per color... Potentially very messy.) If you're managing the palette by hand, it's workable.

If not, and the image is simple (as the background above is, honestly), PNG-32 is a good choice. You can also look into a tool like pngcrush to squeeze a little extra out of things. (It basically tests all possible compression methods aggressively to see if any perform better, and strips out some meta info.)

momgamer wrote:

Google does this stuff all the time. It has to do with their editing tools and platforms.

You have to make sure whatever you're using to cut and paste the code with doesn't do any SmartQuote replacements (like that &amp). Notepad is the safest one for that. Steps look like:

1. Copy code out of Google
2. Paste it into Notepad.
3. Inspect closely, looking for anomalies like that &amp and fix any that are there.
4. Copy code out of Notepad.
5. Paste into GoDaddy.

That should do it. If not, let me know and we can try to chase this some more.

Remember this trick when you need to put Google Analytics code or if they decide to put AdSense into the site.

Yeah I actually did paste that into Notepad and edited the address in there. It's GoDaddy that makes those changes. Someone on another site said he tried it without the SmartQuote stuff and still didn't have a marker, so I'm not sure what's going on there.

I actually don't see anything in the URL that would give a marker. You've got info about where the map should be centered, but not where a marker should be. Looking at the API, I see the following:

Each marker descriptor must contain a set of one or more locations defining where to place the marker on the map. These locations may be either specified as latitude/longitude values or as addresses. These locations are separated using the pipe character (|).

So your URL doesn't have this, and that would be why no markers show up. If the URL had "markers=color:purple%7C{something}", where the something was an address or the like, it would show a marker there.

Whatever editor GoDaddy has for you is double-encoding. Is there a way to edit the HTML directly? I've never used their website tonight stuff so not sure what the tools are like.

As for the PNG and IE 6 stuff, don't even bother trying to support IE 6. We (15,000+ student university) officially dropped all support for it years ago. Looking at the IE 6 Countdown, the US is under 2% now - to us that's not worth the amount of effort involved.

Pirate Bob wrote:

As for the PNG and IE 6 stuff, don't even bother trying to support IE 6. We (15,000+ student university) officially dropped all support for it years ago. Looking at the IE 6 Countdown, the US is under 2% now - to us that's not worth the amount of effort involved.

While that'd be nice, it depends on what you user base is. There are some companies that stick with IE6 because they have in-house custom apps that depend on it and they can't be bothered to update all of those. This is not uncommon, for instance, in banking. So if your users are primarily bank employees, for example, IE6 can account for a great deal more than 2%.

juv3nal wrote:
Pirate Bob wrote:

As for the PNG and IE 6 stuff, don't even bother trying to support IE 6. We (15,000+ student university) officially dropped all support for it years ago. Looking at the IE 6 Countdown, the US is under 2% now - to us that's not worth the amount of effort involved.

While that'd be nice, it depends on what you user base is. There are some companies that stick with IE6 because they have in-house custom apps that depend on it and they can't be bothered to update all of those. This is not uncommon, for instance, in banking. So if your users are primarily bank employees, for example, IE6 can account for a great deal more than 2%.

That's true. Lots of large companies with a lot of IT infrastructure are like that, since it takes a long time to upgrade the whole network, so they don't do it very often. In my experience, the apps are usually installed in the customer environment also, rather than hosted by the dev. I don't think it applies to cheeba's case though, since the site is for a friend, not a large company, and probably internet facing. I get the impression that cheeba is fairly new to web dev, so while he should be aware of it, it's not something to worry about right now.

I'm one of the "more than 2% IE6 crowd", and it is a complete PITA. We have a lot of government contracts, and you wouldn't believe some of the museum pieces still running. We just got one of our largest customers to retire their Windows NT server. I have to support everything from Netscape 4.8 to IE9 and some oddballs like NetCommander (proprietary version of Netscape 6 used in-house by a very large law firm).

You have to plan the site so it degrades as gracefully as you can. If your design is reasonably flexible in layout, and doesn't rely on that PNG for actual functionality, then it should be okay. It may not be pretty but the IE6 gang should still be able to function.