CSS - Border-bottom Disappears?not Sure If This Is Css Issue Or Html

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

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

Could someone take a look at this please http://dmumford.bizhat.com/test.htm

You will see that in IE5 the border-bottom is about 2 pixels bigger than in other browsers, I have speciifed border-bottom:1px solid #fff;, but IE5 is making this bigger..........why????

Thanks for any help

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

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

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

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

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?

I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags.

An example is http://www.adaappliances.com/produc...48&cat=0&page=1.

Please do not attempt to order anything! This is not a live site yet.

This is a snippet of the code. I am using inline styles for testing.
Code:

<div style="float:left; padding:5px">
<IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div>
<p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p>

I have not found a way to fix this. Any suggestions?

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

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>

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

heloo geniuses.


please to someone helping me for preventing more of the hair pulling out.

I am trying to figure out how to repeat a border image, basically to repeat the div holding the wood images on this page:
http://greentypeoftube.com/kc/

essentially to have the bottom expand with the user's browser window size.

thanks to you for the thinking and the helping of me with it.

s

oh. also I am hoping for a way to show the scroll buttons only if the text [will be in another div being cropped by the content window}.

is there a way to do this with css?


I am working much very hard to be more with css to design than just designing it.

reflectionstour.com
^ Site I am working on.

So I have these nice little gifs that are curving the corners. In FF3 they work fine and it is XHTML/CSS 2.1 valid. Which of course means that they are not working right in IE 7 (haven't bothered testing 8, as I run Linux and it is hard enough to locate an IE7 to test it on.)

So I have tried a few different searches and don't really know what to even call it. And no webdev tool bar on IE to help tell me.

"vertical-align: bottom IE7 ~padding"
"bottom padding issues IE7"

I would rather not do separate CSS sheets as it is a simple site, there shouldn't be an issue here.

Thanks!
Wil