#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    44
    Rep Power
    12

    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/mastercla...tion.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!
  2. #2
  3. Insignificant Peon
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Tharsis Ridge (Martian lowlands)
    Posts
    194
    Rep Power
    12
    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/mastercla...tion.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.
    Last edited by Nunzio390; August 19th, 2003 at 06:44 AM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    44
    Rep Power
    12
    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.

IMN logo majestic logo threadwatch logo seochat tools logo