CSS - Float/border-bottom Overlap Problem

Hi,

I have a list that shows the photo and some personal data of people.

Here it is:

http://www.tiregarfio.byethost17.co...ev.php/miembros

username: fer
password: m

I you load it with FF, you can see clearly I have added a green line that separate each member (border-bottom: solid 1px #A9F16C).

This line in IE6 is not between each member but below the personal data.

Here it is the styles:

Code:

div.miembro {
    overflow: hidden;
    clear: both;
    border-bottom: solid 1px #A9F16C;
}

div.fotografia {
    float:left;
    
}

Any idea?

Javi

This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes:

{padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;}

Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great.


Ehud

I currently have a problem with chrome not displaying a page properly under windows that a user emailed me about.

I have tested on my windows xp install with chrome and i do not see the error:

What he sees:
http://i43.photobucket.com/albums/e397/clericvash/chrome-xp-sp3.gif

What i see:
http://i43.photobucket.com/albums/e397/clericvash/Clipboard01-2.jpg

Just below the logo you have the main links "home, rules" etc but on his install the line below the links is way too far down, same version of chrome and all.

Code:
Code:

.menu_fancy
{
        width: 100%;
}
	
.menu_fancy ul
{
        margin: 0; 
	padding: 0;
        float: left;
	list-style-type: none;
}

.menu_fancy ul li
{
	text-align: center;
	float: left;
	padding: 0px 10px 3px 10px;
	margin-left: 5px;
	border-bottom: 1px solid #0099CC;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	display: block;
}

.menu_fancy ul li a
{
	text-decoration: none;
	padding: 5px;
	display: block;
}

Sitewide, I have a bottom border affect, rather than an underline for links. But it applies itself to linked images as well. I have borders shut off on images, but that doesn't stop it from applying the border.

I've tried img border:none; and a few other tricks, but it only does the trick in Chrome.

CODE:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 2px;
}
img {
border-width: 0px;
}
img a {
border-width: 0px;
}
img a:hover {
border-width: 0px;
}

http://www.brendanclements.com/ups/
http://www.brendanclements.com/ups/styles.css

It's the slideshow swf on the right. The bottom has a sliver but the heights are both at 300 px.

I know I used tables too much but it's been way too long since I've done CSS positioning so I'm doing this for now.

I believe the sliver is caused because the slideshow box has a rowspan of 2 since the slideshow does not require a title but I can not figure out how to get rid of it.

Thank you.

hi there,

i have a local web page that im trying to build.

Its a three column fixed layout. The 3 columns have been floated and are contained by a container div element. I have implemented the bug fix (see http://www.positioniseverything.net/easyclearing.html) to ensure that the containing div wraps around the three floated columns and this works for both FF and IE.

However, i have one remaining problem. I'd like to display a right and left sided border to the "middle" floated div and this needs to stretch down to the bottom of the containing div element. However, i cannot get this to work. Does anyone have any suggestions?

Please see the attachments for the files

Thanks

I have a header where I have two different div's that need to sit opposite each other on the same line (one aligned right and the other left). I used a float since it was the simplest way to get the job done. But in the div floating right I have three hyperlinks that have borders. When I float the div the border on the top and bottom dissappear when I remove the float the border on the top and bototm re-appear. any ideas?

Here's the CSS... It's raw as I'm still developing these sections.

Code:

#headerRight
{
float: right;
}
#headerLeft
{
float: left;
}
#header a:link
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:active
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:hover
{
border: #000 solid 1px;
text-decoration: none;
background-color: #333;
color: #ffffff;
}
#header a:visited
{
border: #000 solid 1px;
text-decoration: none;
}

I've got a div (picright) within a div that has an image with a border. The border works, but for some reason there's a teeny tiny gap between the bottom of the image and the border. (At least on a Mac using FF.)

.picright {
float: right;
border: solid 1px #9F7A47;
margin: .3em .3em .5em .5em;
padding: 0;
}

Then I thought maybe I needed a rule for the img, so I added

.picright img {
margin: 0;
padding: 0;
}

but that didn't fix it.

Any guesses?

Yes........it's me again with more problems.

In trying to solve some other problems I went to using contrasting bg colors so I could see what was going on per Kravvitz suggestion.

So here is what I have

body bg color set at gold

#whiteBorder - set at white

#page bg set at green; border hot pink

and then #topbar and #sideColumn set at powder blue.

The problems is that the 10px whiteBorder shows on the top and left - but not on the right and bottom and I have no clue why.

Here is the css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #FFCC33;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #FF00FF;
	background-color: #339900;
	overflow: hidden;
	margin: auto;
	text-align: left;
}

#whiteBorder {
	border: 10px solid #FFFFFF;
	width: 100%;
	height: 100%;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size:20px;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 16px;
	font-weight: bold;
}

h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

h4 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 14px;
	font-weight: bold;
}

p a:link, a:visited {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

p a:hover, p a:active {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094F9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 100%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;

	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
	margin-left: 185px;
}

Here is the xhtml: Code:

<body>

	<!--begin page -->
	<div id="page">
	
	<!--begin white border -->
	<div id="whiteBorder">
	
	<!--begin header -->	
  	<div id="header"><img src="../images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
  	<span class="tagline">world leaders in spirometry</span>
	</div>
	<!--end of header -->
	
	<!--begin topbar -->
  	<div id="topbar">
  	<ul>
		<li><a href="../index.html">Home</a></li>
		<li><a href="../about_us/about_us.html">About Us</a></li>
		<li><a href="../other_regions.html">Other Regions</a></li>
   	</ul>
  	</div>
  	<!--end topbar -->
  
  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="../products/spirometers.html">Spirometers</a></li>
		<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="../products/asthma_copd.html">Asthma &  COPD</a></li>
		<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
        <li><a href="../resources/customer_support.html">Customer Support</a></li>
	  <li><a href="../resources/training_services.html">Training & Services</a></li>
      <li><a href="../resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="../resources/newsletters.html">Newsletters</a></li>
      <li><a href="../resources/downloads.html">Downloads</a></li>
      <li><a href="../resources/useful_links.html">Useful Links</a></li>
      <li><a href="../resources/industry_information.html">Industry Information</a></li>
	  <li><a href="../resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- TemplateBeginEditable name="Main_Section" -->Main_Section<!-- TemplateEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 
   
  </div>
  <!--end of white border -->
  
  </div>
  <!--end of page -->
  
</body>

Thanks

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>

I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header.

Also I have my unordered list inside of my header div and it's placed directly below my header.

Any help much appreciated, just learning how to layout.

http://imgbin.org/index.php?page=image&id=6637

CSS code
Code:

body { 	
	font-family: "Lucida Sans Unicode", sans-serif, Verdana; 
	
	background-color: #999999; 
}

#header {
	
	height: 75px; 
	width: 100%; 
	
	border: 0px 0px 1px 0px; 
	border-style: solid;  
	border-color: white; 
	background-color: #336699; 
}	

#container {
	margin: 0 auto; 
	width: 900px;
	height: 100%;  
	
	background-color: #666666;  
}

#content {
	width: 75%; 
}

#sidebar {
	width: 25%; 	
	
	background-color: #666666; 	
}

ul {
 
	list-style-type: none; 
	
}

li {
	display: inline;	
}

and

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<title>Jeremy</title>
		<link href="default.css" rel="stylesheet" type="text/css" />	
	</head>
	
	<body>
		<div id="header">
			<h1 class="header">Jeremy</h1>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="forums.html">Forums</a></li>
				<li><a href="contactme.html">Contact Me</a></li>			
			</ul>
		</div>	
		
		<div id="container">
			<div id="sidebar">
			
			</div>		
			
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p>
				<p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p>
			</div>		
		
		</div>
	
	</body>
</html>

ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html?
the only other thing could be my Screen/monitor's refresh rate

I use the following CSS for my links, and use a border-bottom to give them a dashed underline...

Code:

a { 
color: #AC4870; 
border-bottom: 1px dashed #DDDDDD; 
text-decoration: none; 
} 
a:hover { 
color: #DDDDDD; 
border-bottom: 1px dashed #AC4870; 
text-decoration: none; 
} 

This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links?

Thanks

Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often....
----------
Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve.

So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening.

Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome:

Screenshot

The page is just the index page at:
GuyMerritt.net

The CSS files looks like this:


Code:

body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial; 
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
  width: 100%;
  max-width: 250px;
  height: auto;
}
div#slides {
	width: 500px;
	height: 280px;
	overflow: hidden;
}

div#slides div {
	height: 280px;
	width: 500px;
	font-size: 100px;
	line-height: 200px;
	text-align: center;
	color: #fff;
}

ul#ticker {
	height: 1.4em;
	overflow: hidden;
	border: solid 1px #aaa;
	background: #ccc;
}

ul#ticker li {
	padding: 0.2em 0;
}

/* @group global */

p#links {
	padding-top: 50px;
	clear: both;
}

a#avatar {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

a#avatar img {
	border: none;
}

h1 {
	color: #0094d5;
}

a {
	color: #0094d5;
}

a:visited, a:hover {
	color: #00577e;
}

.red {
	background: #e40053;
}

.blue {
	background: #0094d5;
}

.green {
	background: #43aa38;
}

/* @end */

At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)?

Thanks again,

Guy Merritt,
Flint, MI

I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this?