CSS - Borders On Linked Images

First off, I'll preface that I'm not a CSS expert by any means. I've done web development for many years, but have slowed down a great deal over the last few, so never got heavily into the aspects of CSS that completely replace HTML (tables, etc.).

At my current place of employment (where my primary duty is not that of a web developer, thank god), I'm being asked to develop a set of 'templates' using primarily CSS.

I've been using the CSS Sculpter plug in for Dreamweaver, and have had decent results from it, but my main issue at this point is this:

When I take the CSS code from the header of the page and put it into a separate stylesheet and then link to that stylesheet, it jacks up the content portion of the site. It seems to be completely disregarding the right margin of the content div and allowing text to simply run off. When the code (without changes) is pasted back into the header of the page rather than linked to it, the issue is resolved.

Here's the CSS:

Code:

<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
background-color: #666;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
/* Commonly used to style section titles. */
h2 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #000;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #000;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
background-color: #fff;
border-left: solid 1 px #666;
border-right: solid 1 px #666;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 650px;
overflow: hidden;
}
#outerWrapper #header {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #topNavigation {
background-color: #ebebeb;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
height: 10px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn1 {
background-color: #ebebeb;
border-left: solid 1px #666; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #ebebeb;
border-right: solid 1px #666; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */

}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}

#footer {
background-color: #ddd;
width: 650px;
border-top: solid 1px #666; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 0px 10px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin: 0 auto 0 auto;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
width: 16em;
}
#outerWrapper #contentWrapper #rightColumn1 {
width: 16em;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->

--------------

And then the page code:

Code:

<body>

<div id="outerWrapper">
<div id="header"><img src="hockley_header.jpg" alt="" width="650" height="150" /></div>
<div id="topNavigation">
<div align="center">Nav </div>
</div>
<div id="contentWrapper">
<div id="rightColumn1"><h2>H2 rightColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div>
<div id="leftColumn1"><h2>H2 leftColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
</div>
<div id="content"><h1>H1 Main Content</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <a href="#">More...</a></p>
<h2>H2 level heading</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
<p>&nbsp;</p>
</div>
<br class="clearFloat" />
</div>
</div>
<div id="footer">Footer</div>
</div>

</body>

--------

Like I said, I'm completely out of my element here - learning bit by bit. CSS isn't difficult coming from a programming background, but my troubleshooting abilities are definitely not up to par.

Any help on this issue is greatly appreciated.

Not sure if this is the right place to ask this but it is sort of a CSS problem.

When I change my linked CSS file and refresh the page I'm working on in the browser, the CSS doesn't automatically get refreshed so the changes I've made don't show up. I can force a refresh by using ctrl+F5 but obviously that's no use for a live setting.

Has anyone else come across this problem and if so, do you know of a solution? Is there a way to force the browser to refresh the style sheet?

Thanks.

Here's a handy tip for you ...

if like me you split your big stylesheet up into smaller ones, put them into a linked stylesheet and import them, like so:

PHP Code:
<link rel="stylesheet" type="text/css" href="main.css"> 





and in the CSS file itself ...

PHP Code:
@import url(css/file1.css);
@import url(css/file2.css);
@import url(css/file3.css);
@import url(css/file4.css); 





some of you no doubt will already do this. here's the crux tho. if you also have some miscellaneous CSS which doesn't fit in any of the extra files and are going to include them in the linking [main] file, then you must include them after the import statements. if you don't Mozilla will ignore the imports and the extra files will not be included in the rendering. code should be like this:

PHP Code:
@import url(css/file1.css);
@import url(css/file2.css);
@import url(css/file3.css);
@import url(css/file4.css);

body
{
   direction: rtl !important;
} 







IE get's this correct regardless of the order.

OK, I have a table I'd like to format with CSS. No problem. I have an external stylesheet that I link to for the rest of my site. I figured I'd add the CSS there and be good to go.

Nope. When I link to the external stylesheet, everything else on my page is formatted correctly, except the table. It's like the table isn't grabbing the CSS information. (Example 1)

When I take the CSS and put it in the header of the page, it works fine (same exact CSS, the only difference is where it's referenced). (Example 2)

Some css tags have inherent "stuff" attached to them. I don't know all the ins and outs (getting closer), and I've run into one I need help with.
Here's the site: http://www.carriagedriving.net/article.php

Here's the div css:

Code:

#logo {
	float:left;
	margin: 0px;
	padding: 0px;
}

.Alogo {
	width:250px;
	height:150px;
	/*border:1px dashed gray;*/
}

The coding in the div is an php include which results in this (banner image and alt text changes each time the page is rebuilt/refreshed):
Code:

<div id='logo' class='Alogo'><p align=center><a href="http://www.vermontel.com/~greenall/" target=_blank><IMG SRC="pageads/greenall.jpg" BORDER=0 alt="Greenall Carriage House"></a>
</div>

I get about 12 pixels of white space over the top of the image in both Firefox AND IE, so it's gotta be an inherent property to the link. Sans the link, there's no whitespace above the image.

How do I "fix" this?

Thanks.

HeadElf

Hi,

Not sure if I'm posting in the right area, but here goes.

I'm trying to learn how to send HTML emails, and as I'm in the process of revamping our website using only CSS (no tables), I wanted to format the emails in the same way.

I've created 2 html pages in Dreamweaver - in one, I linked to my stylesheets, and in the other I copied and pasted the contents of the stylesheets and embedded them in my html page. The incorrect result described below is exactly the same for both.

In Outlook, following instructions I found on Macromedia's website, I created a New email, did Insert -> File, clicked the dropdown arrow beside the Insert button, and clicked Insert As Text.

It inserts the images fine, so obviously it's finding the path I've specified (I have alternated between using an absolute path and using a relative path and a base tag) but the layout is completely wrong, eg. the 'LeftPanel' which I've specified as :

#LeftPanel {
position:absolute;
top: 105px;
left: 5px;
width: 190px;
height: 400px;
border: 1px solid #000033
}

is taking up the full width of the email - basically everywhere I've set a specific width/height are not being displayed as specified at all. I've used a browser to view the work I've done on the revamp of the actual website and everything is exactly right, so the stylesheets are working correctly in that context.

Anyone any ideas what the problem is?

Thanks a lot,
J.

Can you have both inline styles AND a linked style sheet? would this cause confusion?

hi.

I need some formatting help.

I am using niftycorners and the linked list tabs
I am building seem to rest at the bottom, pushing
the bottom of the rounded corners to the right of them.
I have tried clear:left, clear:right, clear:both at the div
and ul levels but that doesnt work.

any ideas?

I have attached a picture of the problem.

Here is the CSS/HTML:

Code:

<style>

body {

margin:20px;

}

#toptabs {
clear:left;
}

#toptabs ul {
    clear:left;
    position:relative;
	width:100%;
	margin-bottom:0;
	list-style:none;
	line-height:1em;
	padding:100px 0px 0px 0px;
}	

#toptabs ul li {
	float:left;
	margin-right:5px;
	padding:0;
}
#toptabs ul li.clear {
	clear:right;
}

#toptabs a {
	display:block;
	color:#444;
	text-decoration:none;
	font-weight:bold;
	background:#ddd;
	margin:0;
	padding:0.25em 1em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	border-right:1px solid #aaa;
}

#toptabs A:hover,
#toptabs A:active,
#toptabs A.he link,
#toptabs A.he visited {
	background:#bbb;
}

#toptabs A.he link,
#toptabs A.he visited {
	position:relative;
	z-index:102;
}
</style>
</HEAD>

<BODY>

  <div id="header">
	  <div id="toptabs">
	    <ul id="venture">
          <li id="current"><a href="#"><span>Profile</span></a></li>
          <li><a href="#"><span>Q&A</span></a></li>
          <li><a href="#"><span>Recommendations</span></a></li>
          <li><a href="#"><span>Connections</span></a></li>
        </ul>
      </div>
    </div>	
</BODY>

Hello All,
I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space (&nbsp;) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer.
Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result.

How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well?

This is how the code is displayed in IE:
http://img407.imageshack.us/img407/2360/pfieeu9.jpg

Firefox/Safari/Chrome:
http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg


You can see the little extra "nubbin" of underline between the icon image and the text.

CSS:
Code:

a.red10ullink:link	     {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:visited    {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:hover     {color: #333333;
		     font-size: 10pt;
		     font-family: arial;}

img.icon    {vertical-align: middle;
               border-width: 0px;
               margin: 0px 5px 0px 0px;}

HTML:
Code:

<a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a>

Thanks!

Hello,
I can't for the life of me figure out how to get these thin white borders like on this website:

http://www.viceland.com/index_us.php

Is this done with a style sheet? I can't find any reference to a border. How is this done?

Can any one suggest a better CSS script for having a border in IE
So far I have the following:
PHP Code:
 border: 1px solid #0099CC; 




The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool.

Can any one help.
Thge URL is
http://pfwd.org.uk/sfd/update_test3.php

Hi guys,

I am using the following css to style a content box:

Code:

/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;

BORDER-RIGHT: #d9ddb9 1px solid; 
BORDER-LEFT: #d9ddb9 1px solid; 
BORDER-BOTTOM: #d9ddb9 1px solid; 
BORDER-TOP: #d9ddb9 1px solid; 

PADDING-TOP: 10px; 
PADDING-RIGHT: 10px; 
PADDING-BOTTOM: 20px; 
PADDING-LEFT: 10px; FLOAT: right; 

BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;  
BACKGROUND-REPEAT: repeat-x; 
BACKGROUND-COLOR: #fafceb;
}


.testimonies-h2 {
	PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}


#testimonies H2 {
	PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}


/*---------------- End of Testimonies Content Box ---------*/

I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above.

I tried using this to cancel it out (placing my inline frame in a span, but it did nothing)

Code:

#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}

HTML CODE:

Code:

<div id="testimonies">
<h2><span class="testimonies-h2">Testimonials</span></h2>

<span class="testimonials">
<!-- ========== V-NewsTicker v2.2 (Freeware)  ============= -->
<script type="text/javascript" src="v_newsticker_1.js"></script>
<!-- ======================= -->
</span>

</div>

Hi All,

I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis.

I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows.

Code:

<!-- This is a Row that is at the top of the table -->
<table width="100%"  border="0" class="fullwidth">
  <tr>
    <td class="head">This is a header </td>
  </tr>
</table>

<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%"  border="0" cellpadding="2" cellspacing="1" class="list">
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Here is the CSS:
Code:

table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}

Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this.

So is it possible to have two or more borders in CSS and if so, how?

While styling table I would like to have black row border all the way, but currently cell borders (grey) overlay them (1px, but still) - like in the image:


Bellow is my css. What do I change? Thanks.

Code:

.list_f  {

	padding: 0px;
	margin: 0px;
	
	border-width: 1px;
	border-style: solid;
	border-color: #F1EFE2;
	border-collapse: collapse;
	empty-cells: show;

	border-top: 0px; 
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	
			
}

.list_f th {
	text-decoration:none;
	font-weight:normal;
	background-color:#F3F3F3;
		
	margin: 0px;
	padding: 2px;
	/*	text-align: left;*/
	vertical-align:middle;
	height:22px;

	border-collapse: collapse;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #CCCCCC;
	border-bottom-color: #000000;
	border-left-color: #CCCCCC;
}

.list_f td {
	margin: 0px;
	padding: 2px;
	border-collapse: collapse;
	vertical-align:middle;
	height:22px;
	

	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #EBEBEB;
	border-bottom-color: #000000;
	border-left-color: #EBEBEB;

}
.list_f tr {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
}