CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old August 19th, 2003, 02:29 AM
jps0 jps0 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2003
Posts: 44 jps0 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 44 m 14 sec
Reputation Power: 5
Exclamation Remove IMG borders in CSS - look at my code for errors

I have a simple layout (http://copperdog.org) but I have one problem with it. If I move the three gifs from the footer to the right-hand nav column there is border around the gifs that is not present when they are in the footer. Additionally, the border changes color if you hover/visit/etc.

I want to be able to put the gifs in the nav column but without *any* borders!

Take a look at the following style sheet and see if you can find my error - I sure cannot (tired eyes on my part):
Code:
/* General elements for the page - all values inherited from here */
/* Format and suggestions taken from http://www.richinstyle.com/mastercl...ction.html#base */
address, blockquote, body, caption, center, dd, dir, div, dl, 
dt, form, h1, h2, h3, h4, h5, h6, menu, ol, p, td, th, ul {
	font: normal normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

a {
	cursor: default;
}

img  {
	border: none;
}

a:link, a:visited {
	color: #FFFFFF;
	background-color: transparent;
	text-decoration: none;
	cursor: default;
}

a:hover, a:active {
	color: #FFFFFF;
	background-color: transparent;
	text-decoration: none;
	cursor: pointer;
	border: none;
}

address {
	margin: 0em 0% 0em 0%;
}
big {
	font-size: 1.15em;
}
blockquote {
	margin: 0em 0% 0em 0%;
}
body {
	margin: 0em 0% 0em 0%;
	background-color: #333333;
	color: #999999;
	cursor: default;
}

br {
	margin: 1.2em 0%;
	line-height: 1.2em;
}

button {
	cursor: auto;
}
caption {
	margin: 0em 0% 0em 0%;
}
code {
	font: 1em monospace;
}
dd {
	margin: 0em 0% 0em 0%;
}
div {
	margin: 0em 0% 0em 0%;
}
dl {
	margin: 0em 0% 0em 0%;
}
dt {
	margin: 0em 0% 0em 0%;
}
h1 {
	margin: 0em 0% 0em 0%;
	font-size: 2.4em;
	font-weight: bold;
	}
	
h2 {
	margin: 0em 0% 0em 0%;
	font-size: 2.1em;
}
h3 {
	margin: 0em 0% 0em 0%;
	font-size: 1.8em;
}
h4 {
	margin: 0em 0% 0em 0%;
	font-size: 1.5em;
}
h5 {
	margin: 0em 0% 0em 0%;
	font-size: 1.2em;
}
h6 {
	margin: 0em 0% 0em 0%;
	font-size: 0.9em;
}

hr {
	margin: 0em 0% 0em 0%;
	}
	
html {
	margin: 0em 0%;
	background-color: #333333;
	color: #999999;
}

input {
	cursor: auto;
}

kbd {
	font: 1em monospace;
}
li {
	margin: 0em 0%;
	line-height: 1;
	vertical-align: middle;
}
ol {
	margin: 0em 0%; /* Specified as a hack for compatibility b/t IE & NS */
	padding-left: 0px; /* Specified as a hack for compatibility b/t IE & NS */
	list-style: decimal;
}
ol ol ol ol {
	list-style: decimal;
}
ol ul ol ol, ol ol ul ol, ul ol ol ol, ol ol ol {
	list-style: lower-roman;
}
ol ul ul ul, ul ol ul ul, ul ul ol ul, ul ul ul {
	list-style: square;
}

p {
	margin: 1.2em 0%;
	line-height: 1.2em;
}

p.text {
	margin: 0em 0% 1.2em 13px;
	}

p.warn {
	margin: 1.2em 0%;
	line-height: 1.2em;
	color: #FF0000;
	background-color: #666666;
	font-weight: bold;
	text-align: center;
	margin: 0em 0% 1.2em 0%;
}

pre {
	margin: 0em 0% 0em 0%;
	font: 1em/1 monospace;
}
samp {
	font: 1em monospace;
}
small, sub, sup {
	font-size: .85em;
}
td {
	line-height: 1;
}
textarea {
	cursor: text;
}
th {
	font: bold 1em/1 sans-serif;
}
tt {
	font: 1em monospace;
}
ul {
	margin: 0em 0%; /* Specified as a hack for compatibility b/t IE & NS */
	padding-left: 0px; /* Specified as a hack for compatibility b/t IE & NS */
	list-style: disc;
}
ul ul ol ol, ul ol ul ol, ol ul ol ol, ol ol ul ol, ol ul ol, ol ol {
	list-style: lower-alpha;
}
ul ul ul ul {
	list-style: disc;
}
ul ul, ol ol ul ul, ol ul ol ul, ul ol ol ul, ol ul ul, ul ol ul {
	list-style: circle;
}

/* Defining the layout properties of the page */
/* Defining primany content (center column) and actions within text */

/*Defining footer section and associated actions */
#footer {
	float: left;
	background-color: #333333;
	color: #FFFFFF;
	text-align: center;
	height: auto;
	padding: 5px 10px;
	width: 640px;
	/* The following hack corrects displays of boxes in different browsers.  Details available here: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html */
	width: 640px; /* Hack for IE5.x/Win so that the box is displayed correctly */
	width/* */:/**/620px; /* Hidden from IE5.x/Mac and IE5.x/Win - recognized by standards compliant browsers.  State correct content width of box here */
	width: /**/620px; /* Hidden from IE5.0/Win and IE5.5/Win.  It is recognized by IE5.x/Mac and other browsers that do not have this particular form of comment bug */
}

#footer a:link, #footer a:visited {
	color: #FFFFFF;
	background-color: #333333;
	text-decoration: none;
	cursor: pointer;
}

#footer a:hover, #footer a:active {
	color: #66FFFF;
	background-color: #333333;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
}

/* Setting width of table */
#frame {
	margin: 25px 50px;
	width: 760px;
	/* The following hack corrects displays of boxes in different browsers.  Details available here: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html */
	width: 760px; /* Hack for IE5.x/Win so that the box is displayed correctly */
	width/* */:/**/760px; /* Hidden from IE5.x/Mac and IE5.x/Win - recognized by standards compliant browsers.  State correct content width of box here */
	width: /**/760px; /* Hidden from IE5.0/Win and IE5.5/Win.  It is recognized by IE5.x/Mac and other browsers that do not have this particular form of comment bug */
}
	
/* Defining header */
#header {
	float: left;	
	background-color: #66FFFF; /* Colors that work: #CCFF66, #FFCC00, #66FFFF */
	text-align: right;
	color: #000000;
	height: auto;
	padding: 15px 20px;
	/* The following hack corrects displays of boxes in different browsers.  Details available here: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html */
	width: 760px; /* Hack for IE5.x/Win so that the box is displayed correctly */
	width/* */:/**/720px; /* Hidden from IE5.x/Mac and IE5.x/Win - recognized by standards compliant browsers.  State correct content width of box here */
	width: /**/720px; /* Hidden from IE5.0/Win and IE5.5/Win.  It is recognized by IE5.x/Mac and other browsers that do not have this particular form of comment bug */
}

#maincol {
	float: left;
	background-color: #666666;
	color: #FFFFFF;
	text-align: left;
	height: auto;
	border-bottom: 1px solid White;
	border-left: 1px solid White;
	border-right: 1px solid White;
	padding: 10px 20px; /* Crude hack to get H3 headers to align vertically */
	/* The following hack corrects displays of boxes in different browsers.  Details available here: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html */
	width: 640px; /* Hack for IE5.x/Win so that the box is displayed correctly */
	width/* */:/**/598px; /* Hidden from IE5.x/Mac and IE5.x/Win - recognized by standards compliant browsers.  State correct content width of box here */
	width: /**/598px; /* Hidden from IE5.0/Win and IE5.5/Win.  It is recognized by IE5.x/Mac and other browsers that do not have this particular form of comment bug */
}
	
#maincol h4 {
	background-color: #666666;
	color: #FFFFFF;
}

#maincol a:link, #maincol a:visited {
	color: #FFFFFF;
	background-color: #666666;
	text-decoration: none;
	cursor: pointer;
}

#maincol a:hover, #maincol a:active {
	color: #66FFFF;
	background: #666666;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
}

#maincol br {
	margin: .25em 0%;
	line-height: .25em;
}

/* Defines attributes of horizontal rule within the center column - goal is a 1px line */
#maincol hr {
	width: 100%;
	height: 1px;
	color: #FFFFFF;
	background-color: #FFFFFF;
	margin: 2.0em 0%;
	outline: none;
	border: none;
	}

#maincol li {
	margin: 1.2em 0%;
	line-height: 1;
	vertical-align: middle;
	}
	
#maincol ol {
	margin: 1.2em 15px; /* Specified as a hack for compatibility b/t IE & NS */
	padding-left: 15px; /* Specified as a hack for compatibility b/t IE & NS */
	list-style: decimal;
	}

#maincol ul {
	margin: 1.2em 15px; /* Specified as a hack for compatibility b/t IE & NS */
	padding-left: 15px; /* Specified as a hack for compatibility b/t IE & NS */
	list-style: disc;
	}



/* Defining left nav column and actions for text within */
#navcol {
	float: right;	
	background: #666666;
	color: #FFFFFF;
	text-align: center;
	height: auto;
	padding: 9px 20px;
	/* The following hack corrects displays of boxes in different browsers.  Details available here: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html */
	width: 120px; /* Hack for IE5.x/Win so that the box is displayed correctly */
	width/* */:/**/80px; /* Hidden from IE5.x/Mac and IE5.x/Win - recognized by standards compliant browsers.  State correct content width of box here */
	width: /**/80px; /* Hidden from IE5.0/Win and IE5.5/Win.  It is recognized by IE5.x/Mac and other browsers that do not have this particular form of comment bug */
}

#navcol a {
	width: 80px;
	padding: 1px 0px;
	display: block;
	text-decoration: none;
	}

#navcol a:link, #navcol a:visited {
	color: #FFFFFF;
	background-color: #000000;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
	}

#navcol a:hover, #navcol a:active {
	color: #000000;
	background-color: #66FFFF;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	}

#navcol hr {
	width: 100%;
	height: 1px;
	color: #FFFFFF;
	background-color: #FFFFFF;
	margin: 2.0em 0%;
	outline: none;
	border: none;
	}


Thanks in advance!

Reply With Quote
  #2  
Old August 19th, 2003, 05:31 AM
Nunzio390's Avatar
Nunzio390 Nunzio390 is offline
Insignificant Peon
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Location: Tharsis Ridge (Martian lowlands)
Posts: 192 Nunzio390 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Normally, I never reply within a thread where I'm forced at 800x600 screen rez to horizontally scroll left-to-right and then back again to read each individual line, but in this case I'm making this one exception. I usually ignore those threads, whether I can answer or not. That is not your fault though. It is the fault of this board when using CODE tags. This is how I display code, to combat that shortcoming of this board, using Courier new font and a color as well...

/* General elements for the page - all values inherited from here */
/* Format and suggestions taken from http://www.richinstyle.com/mastercl...ction.html#base */
address, blockquote, body, caption, center, dd, dir, div, dl,
dt, form, h1, h2, h3, h4, h5, h6, menu, ol, p, td, th, ul {
font: normal normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

a {
cursor: default;
}

etc., etc. ...

Anyway, when the 3 images are placed in your nav column, it appears as if they are inheriting the parent container #navcol actions for text rollover effects defined within your "cdostyle.css" file. You would probably need to define/add another (secondary) style for linked images in your stylesheet and then nest those 3 images within their own DIV calling that new class.

Also (and only a suggestion)...

Your 760px widths coupled with your left margin 50px offset causes me (and millions like me) to be forced to horizontally scroll your pages at 800x600 screen rez. You may want to consider changing those values as well, to accommodate all the millions of people that use that screen rez. I personally cannot view anything over that screen rez without being "blinded" trying to squint to see anything on the net. A suggestion would be to use percentages instead of fixed pixel values, to accommodate all screen resolutions for all your site visitors.
__________________
[ - Random Thoughts - | - Killer Klowns - | - Automated Jukebox - | - Composite Sketch - | - About Nunzio - ]

Last edited by Nunzio390 : August 19th, 2003 at 05:44 AM.

Reply With Quote
  #3  
Old August 19th, 2003, 09:36 AM
jps0 jps0 is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2003
Posts: 44 jps0 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 44 m 14 sec
Reputation Power: 5
Nunzio390

First off - thanks for setting me staright about code. I will try your suggestions next time.

Second, thanks for catching my CSS slipup. I kinda came to the same realization over breakfats this morning, now I just need to fix it.

Third, thanks as well for the screen res observation. According to my logs, the majority of my visitors are using 1024 x 768 (that is what I use and code on), but designing for the smallest common res is a better approach. I will lok into changing that as well as other aspects when I have time today to munge the code somemore.

What I would really like to do is streamline my CSS. I am kinda new to CSS and I know I have built in unnecessaery redundancies - I simply want to make the code as effective and efficient as possible.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > Remove IMG borders in CSS - look at my code for errors


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway