a img {border:none;} doesn't remove borders in IE7

You have border-color: none; in your example. Try border: none; instead and then try outline: none; and let me know if either one helps.

border: none; works all of a sudden on all except the events page. border-color: none; was posted accidentally. i have tried border: none; and outline: none; and neither worked on the events page. and why all of a sudden does it work on other pages? ive read so many posts over the past few months and tried that so many times, in the HTML and CSS, and it never worked.

anyways, thank you. neither of your suggestions worked in the events page though. any ideas why? i dont understand why it would work in some of the pages and not others, unless its being over-ridden perhaps???

thanks again for helping me.

here is the css for the events page:

#allcontent {
width: 1024px;
padding: 0px 5px 0px 5px;
margin: 1px auto 1px auto;
color: white;
font-family: sans-serif;

}

body {
background-color: black;

}

h2 {
text-decoration: underline;
}

a img {
outline: none;

}

a:link {
color: white;
font-size: 14px;
border: none;

}

a:hover {
color: black;
background-color: white;
font-size: 16px;
text-decoration: none;
border: none;
}

a:visited {
color: gray;
font-size: 14px;
border: none;

}

h1 {
background-color: transparent;
margin: 30px 30px 15px;
text-align: left;
border-bottom: 1px solid white;
color: white;
}

#links2 {
border-right: white solid 1px;
float: left;
width: 100px;
height: 280px;
padding: 10px;
color: white;
font-family: sans-serif;

}

.navi {
margin-left: -7px;

}

.email {
color: white;
font-size: 14px;

}

h3 {
font-size: 20px;
text-align: center;

}

.venue {
color: red;
font-size: 115%;

}

.dir a:link {
color: #ff9600;
font-size: 12px;

}

.dir a:hover {
color: white;
background-color: #7e4e4e;
font-size: 12px;

}

.dir a:visited {
color: #949398;
font-size: 12px;

}

#nov {
margin: 0px 175px 5px 225px;
border: 1px solid white;
text-align: center;

}

#dec {
margin: 5px 175px 5px 225px;
border: 1px solid white;
padding: 10px;
text-align: center;

}

#nov {
margin: 0px 175px 5px 225px;
border: 1px solid white;
text-align: center;
 
}
 
#dec {
margin: 5px 175px 5px 225px;
border: 1px solid white;
padding: 10px;
text-align: center;
 
}

Using border:none will specify no borders for your website. Unless you add borders to individual items later on. You will notice that for the #nov and #dec divs (on the events page) you still have a 1px white border. Remove this and your problem will be solved

Seems I kinda Missed the point there!

Just add

<img ... border=0>

to all of your image links on the events page

Thanks for the response, Dan. So put that code into the HTML then? I was assuming that styling done in HTML was depricated, or at least frowned upon. I will give it a shot tonight after work.

I still don't understand why the border: none; doesn't work on that page though. I have borders on a few other elements in the other pages and border: none; worked. Could you enlighten me, please?

Thanks again.

It is invalid code. Don't use it.

I don't have IE7 or I'd try to find the issue. Can you post which items are having the issue so that I can view the specific styling?

In the meanwhile, validate your code (I assumed you had already done this).

If you want your site to validate, don't use the code. If you want it to work, use it! It is frowned upon but noones going to shoot you down for using it.

As for the question, I don't have an answer, I can't see any problem with your link coding. You could perhaps point the events page to one of your other style sheets? Say Home.css. You would then need to simply add the events specific css onto Home.css, keeping the link formatting you have on Home.css

Failing that, can we see a copy of one of your other style sheets?

If you want your site to validate, don't use the code. If you want it to work, use it! It is frowned upon but noones going to shoot you down for using it.

As for the question, I don't have an answer, I can't see any problem with your link coding. You could perhaps point the events page to one of your other style sheets? Say Home.css. You would then need to simply add the events specific css onto Home.css, keeping the link formatting you have on Home.css

Failing that, can we see a copy of one of your other style sheets?

If you want your site to validate, don't use the code. If you want it to work, use it! It is frowned upon but noones going to shoot you down for using it.

As for the question, I don't have an answer, I can't see any problem with your link coding. You could perhaps point the events page to one of your other style sheets? Say Home.css. You would then need to simply add the events specific css onto Home.css, keeping the link formatting you have on Home.css

Failing that, can we see a copy of one of your other style sheets?

No, I haven't validated. I planned on it, but have been to lazy...

The items that are having the issue are the gray navigation buttons on the left of the page. In the HTML, it is in the

In the above CSS, they are being styled by links2, but I tried to remove the border by placing border: none; in a:link, a:visited, a:hover. That didn't help, but I didn't remove them yet. I'm starting to realize that I may have some redundant code floating out there.

Thanks for the help Versch.

Chris

You must have redundant code.

Have you not thought about using one master css styling file?

It kinda defeats the objective of using CSS by repeating certain styling elements such as links, especially for a site as small as yours.

PS sorry for the repeated message guys, was having connection problems.

Well, that's always the first step before asking for help. Not only does it help those trying to help you but also CSS depends upon properly structured markup.

For instance on your page you have this:<p><span class="navi"><img src="nine25veimages/nav.gif"></p></span> Now which CSS selector would affect that line of code? Is it  p span {} or span p {youCan'tDoThisAnyway}. The span is in the p but the p is also enclosed by the span. It's a Möbius strip of markup. The tags, not being properly closed, could cause an issue downstream, maybe.

I don't know if it is actually causing this issue but the image tags aren't closed. Maybe validating won't have any effect but it's sure worth a try.

do not use the border attribute on the img in the html - it's deprecated.

compare your events.css with your home.css (why are you using two different stylesheets for essentially the same page?) notice anything? in the events.css you have outline: none, but not border: none; on a img { }

I didn't even notice there were two different stylesheets.

wolves have keen eyesight

Hey guys, to be honest, I have an individual style sheet for all 5 pages. So from your reaction to the 2, I am assuming that multiple style sheets are bad practice. I learned HTML and CSS by reading the book "Headfirst, HTML, CSS & XHTML" just a few months ago. So I don't have very good etiquette I'm guessing. I start school in January for Web Programming, so there is hope for me yet.

I honestly thought that using a single style sheet for multiple pages would be difficult to manage. Should I start transferring my stylings over to a single sheet in your opinion(?

So I changed the outline: none; to border: none; and wala. It's fixed.

I am off to validate all of my pages now. Do you guys have any suggestions for reading material? So far I have the "Headsfirst" book, as well as the CSS and HTML pocket guides. I have also ordered "The CSS Cookbook, 3rd Edition" and am waiting for it to show up at the book store. I was thinking about the definitive guides for CSS and HTML too.

Thanks for the info guys.

How do you figure that? If you're making a stylesheet for every page you may as well go back to presentational markup. Well, that's a bit extreme. Presentational markup is only slightly worse though.

Having all of your styles in one file and with IDs and classes reused on every page makes much more sense, doesn't it?

Yeah, I suppose that was one of the purposes of style sheets. I will bring them over. It should be fun...

Thanks

you've just experienced the best reason why to use as few stylesheets as possible. Making a change site wide is simple with a single stylesheet, while your current way you needed to change every one of them. I'm sure you can see how difficult that would be as the site got larger (more pages and stylesheets) and more changes were made. That and the fact the stylesheets are cached, making them readily available to other pages using the same one.

Four great books for you to consider getting your hands on:

1) Web Standards Solutions ~ The Markup and Style Handbook, by Dan Cederholm
2) Cascading Style Sheets ~ The Designer's Edge, by Molly E. Holzschlag
3) Designing with Web Standards, by Jeffrey Zeldman
4) Cascading Style Sheets ~ Designing for the Web,by Hakon Wium Lie & Bert Bos

I have used the first two a lot, although all four are good books. Best of luck!

The absolute ideal is one stylesheet to rule them all... er sorry lost in fiction then

You can employ multiple stylesheets but do NOT do so until you have some experience under your belt and have determined an emphatic reason for doing so (they do exist, but taking this approach is adding layers of complexity that must be handled very carefully )

hmm, i thought i replied to this last night...

anyways, i transfered, cleaned up and validated my CSS and HTML. none of it took as long or was as tedious as i though it would be. the borders are gone and i learned a lot in this thread. i am going to order a couple of the books on your list this weekend Lamb.

thanks everyone for helping me. im sure i will be back.

chris