22 replies [Last post]
cozy
Offline
Regular
minneapolis
Last seen: 9 years 47 weeks ago
minneapolis
Timezone: GMT-6
Joined: 2009-11-17
Posts: 19
Points: 22

Hello,

My problem is that I have ugly purple borders around my image links on my site. Every page that I have found has the same CSS to solve the problem. It seems to work for everyone except me.

My site: www.925ve.com
Issues: Purple borders will not go away in IE.
My computers: I write my HTML/CSS on a Mac using TextWrangler. I have a PC as well with IE7.

I know that the CSS code should be
a img{ border: none;}

This hasn't worked for me and it is driving me nuts.

Here is my CSS:

Thanks in advance. If you need anything else, please let me know.

Chris
#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 {
border-color: 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;

}

#intro {
margin-left: 400px;
margin-top: 45px;

}

.navi {
margin-left: -7px;

}

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

}

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 31 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

You have border-color: none;

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.

cozy
Offline
Regular
minneapolis
Last seen: 9 years 47 weeks ago
minneapolis
Timezone: GMT-6
Joined: 2009-11-17
Posts: 19
Points: 22

border: none; works all of a

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;

}

DanielHardy
Offline
Regular
Walsall UK
Last seen: 8 years 19 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

#nov { margin: 0px 175px 5px

#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 Smile

DanielHardy
Offline
Regular
Walsall UK
Last seen: 8 years 19 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

Seems I kinda Missed the

Seems I kinda Missed the point there!

Just add

<img ... border=0>

to all of your image links on the events page

cozy
Offline
Regular
minneapolis
Last seen: 9 years 47 weeks ago
minneapolis
Timezone: GMT-6
Joined: 2009-11-17
Posts: 19
Points: 22

Thanks for the response, Dan.

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 31 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

cozy wrote:Thanks for the

cozy wrote:

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.

It is invalid code. Don't use it.

cozy wrote:

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?

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).

DanielHardy
Offline
Regular
Walsall UK
Last seen: 8 years 19 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

If you want your site to

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?

DanielHardy
Offline
Regular
Walsall UK
Last seen: 8 years 19 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

If you want your site to

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?

DanielHardy
Offline
Regular
Walsall UK
Last seen: 8 years 19 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

If you want your site to

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?

cozy
Offline
Regular
minneapolis
Last seen: 9 years 47 weeks ago
minneapolis
Timezone: GMT-6
Joined: 2009-11-17
Posts: 19
Points: 22

Verschwindende wrote: cozy

Verschwindende wrote:
cozy wrote:

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.

It is invalid code. Don't use it.

cozy wrote:

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?

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).

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

called "links2". They are hyperlinked images.

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

DanielHardy
Offline
Regular
Walsall UK
Last seen: 8 years 19 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

You must have redundant

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 31 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

cozy wrote: ... No, I

cozy wrote:

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

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. Wink 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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 36 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

do not use the border

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 { }

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 31 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

wolfcry911 wrote: compare

wolfcry911 wrote:

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 36 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

wolves have keen eyesight

wolves have keen eyesight Wink

cozy
Offline
Regular
minneapolis
Last seen: 9 years 47 weeks ago
minneapolis
Timezone: GMT-6
Joined: 2009-11-17
Posts: 19
Points: 22

Hey guys, to be honest, I

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. Laughing out loud

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(Drunk?

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 31 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

cozy wrote: ... I honestly

cozy wrote:

... I honestly thought that using a single style sheet for multiple pages would be difficult to manage. ...

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?

cozy
Offline
Regular
minneapolis
Last seen: 9 years 47 weeks ago
minneapolis
Timezone: GMT-6
Joined: 2009-11-17
Posts: 19
Points: 22

Verschwindende wrote: cozy

Verschwindende wrote:
cozy wrote:

... I honestly thought that using a single style sheet for multiple pages would be difficult to manage. ...

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 36 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you've just experienced the

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.

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 4 years 25 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

book suggestions

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! Smile

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

The absolute ideal is one

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 )

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

cozy
Offline
Regular
minneapolis
Last seen: 9 years 47 weeks ago
minneapolis
Timezone: GMT-6
Joined: 2009-11-17
Posts: 19
Points: 22

hmm, i thought i replied to

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