CSS - Content Div Bleeding Out Of Container Div Problems.

Hi All,

I'm trying to create some expanding headers using images and background color/images. Everything seems to be working fine except that at the bottom of the heading there is a 1 or 2 pixel showing of the background color!

I assume it is something I'm missing in the CSS rule as the problem occurs in both Mozilla and IE!

Click here to see example

It's not the images as there on a white background and are cropped fine as can be seen from the enlarged left side image.

[html]
<div style="width: 162px; color: white; background: green; margin: 0; padding: 0;"><img src="/RhL.gif" width="25" height="50" border="0"><span>HEADING TEXT</span><img src="/RhR.gif" width="25" height="25"></div>
[/html]

Any help kindly appreciated

PHP Addict

Hello,

I have [almost] successfully added CSS tooltips to a conference agenda and have an issue where links are "bleeding" through the tooltips. I think it has something to do with the way the links and tooltips are positioned.

For example, I have a table cell with 2 links in it like this:

<p><a link>Link1<span>Tooltip1</span></a></p>
<p><a link>Link2</a><span>Tooltip2</span></p>

The spans are hidden until hovered over, using a display:none to display:block switch.

The links are positioned relative and the blocks are positioned absolute.

The behavior I'm seeing is that Link2 will "bleed" through the tooltip block, obscuring the text in the block. I've tried a couple of other positioning strategies and using z-index with no improvement. Can someone have a look and see if you can help?

Visit http://www.tipsweb.com/about/events/conference2007/agenda_new.asp

And mouse over the Brazos 2 session links from 1:00 pm - 2:30 pm on Tuesday April 17th.

Thanks!

Chris

I camped out this weekend and worked all day and night to build one of the more advanced forms that I need. I am really pleased with the results so far, at least in IE. It is not perfect. I am having some problems with how it looks in FireFox.

It looks great in IE. However, in Firefox, you can see the sections are bleeding together. Each is in it's own DIV set as BLOCK.

The sections are

Core
Details
Features
Description
Contact/Shipping/Payment
Promotion

Brief example

<div>
<h2>Core</h2>
content bla bla bla
</div>

<div>
<h2>Details</h2>
content bla bla bla
</div>

The H2 headers, the text is bleeding into the div of the section before it. In IE, it doesn't. in FF, it's all jumbled up.

Here's a link to an .html file of the form. It should open up in any browser since it references CSS by url and graphics by url. Can anybody check and see if it is a quick fix? I'm not sure what the problem is. I don't have any extra cash at the moment so I'm stuck. I've been trying to figure out the problem all weekend to no avail.

http://quotes.cybercon.net/classifiedsform.html

Also, here are two pics. Screenshots from IE and FF. In the IE screenshot, you can see how I outlined each section. The H2 headline tag (core/details/description/feature) is bleeding into the previous section.

http://quotes.cybercon.net/classifiedformIE.jpg
http://quotes.cybercon.net/classifiedformFF.jpg


Thanks!

-Jason

Hi all,
the page i am talking about is...

http://sydneynightowl.com.au/home.php

The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds.

The div and header should be starting after the first 3 divs (which are set to float)

I hope i have explain this correctly, any help is apriciated.

The css code is

Code:

@charset "utf-8";
/* CSS Document */


body {background-color:#000000;
	background-image: url(../images/background.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	color:#FFFFFF;
	font-family:"Lucida Sans Unicode", sans-serif;
	font-weight:100;
	font-size:12px;}


#container {
	position:absolute;
	width: 700px;
	left:50%;
	margin-left:-358px;
}
	
	#header {
	margin-top:0px;
	height: 115px;}
	
		#toolbar {height: 30px;
		line-height:10px;
		padding: 0px 10px;
		font-variant:small-caps;
		}

	#cornerlogo {
	position:fixed;
	top:5px;
	left:5px;
}

	
	#topnavigation {height: 35px;
	line-height:35px;
	text-align:center;}
	
	#content { border-bottom:1px;}

		.3column {width:695px;
		padding-right:5px;
		padding-left:5px;
		margin-top:5px;}
	
	
		#leftcolumngl {float:left;
		width:223px;
		height:370px;
		padding-right:5px;
		padding-left:5px;
		padding-top:5px;
		margin-top:15px;
		margin-right:5px;
		border:#FFFF00 solid thin;}
	
		#middlecolumngl {float:left;
		height:370px;
		width:225px;}
	
		#rightcolumngl {float:left;
		height:370px;
		width:230px;
		padding-left:5px;}
	
		#leftcolumn { float:left;
		width:230px;
		padding-right:5px;}
	
		#middlecolumn {float:left;
		width:230px;}
	
		#rightcolumn {float:left;
		width:230px;
		padding-left:5px;}
		
		#imagecolumn {float:left;
		width:340px;
		padding-left:5px;}
		
		#infocolumn {float:left;
		width:340px;
		padding-left:5px;}
		
	
	#footer {height: 30px;
	border:thin solid #FFFFFF;
	clear:both;
	text-align:center;
	margin-bottom:30px;
	margin-top: 30px;
	line-height:25px;}

#bgfirst {
	position:absolute;
	top:190px;
	left:0px;
	width:90%;
	height:200px;
	margin-bottom:20px;
	background-color:#00CC00;
}

#bgsecond {position:absolute;
	top: 400px;
	right:0px;
	width:90%;
	height:200px;
	background-color:#660066;
}



a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}

a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}

a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}

h1 { text-align:center;
	color:#000000;
	background-color:#fffc00;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:22px;}

h2 {text-align:center;
	color:#fffc00;
	background-color:#333333;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:18px;}

.ourprice {
	display:inline;
	color:#FF0000;
	line-height:20px;
	font-variant:small-caps;
	font-size:14px;}


img {
	border-color:#fffc00;
	border-style:solid;
	border-width:thin;
}

img.noborder { border:none;}

img.venues {float:left;	
	margin:10px;}

	.mainnavimages {
	border-color:#979700;
	border-style:solid;
	border-width:thin;
}

p {line-height:15px;}

strong { color:#fffc00;}

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Thanks for taking the time to read my question.

I have 2 types of html pages. One with 2 colums and one with 3 (my question deals with the 3 column example). If I have only one row, it all works out fine. Add another row, and alignment is off.

What is happening is; if either sub p.contentleft or sub p.contentcenter has more than one line (text is wrapped), and sub p.contentright doesn't (like in my example below), the first column of the next row (sub p.contentleft) aligns left to the second line of the wrapped text in the first row. I think this is a result of the height property being auto.

Is there a way to make the height of all the columns equal to that of the tallest column in the row? If you set the height, and more height is required due to more text, more problems arise. The spacing is really big if the height is too much for the small bit of text entered.

I am trying to create this page using exclusively css. I don't want to use any <table> tags in my html.

Thanks again for looking at my lengthy question.

Brad

CSS

Code:

body {
  text-align:center;
  margin-top: 0px;
  background-color: #d8d8d8;
}

a:visited {
color:#c0c0c0;
}
a:hover {
color:red;
}
a {
color:white;
}

#frame {
width: 640px;
text-align: center;
}

#main {
background-color: #6699cc;
width: 640px;
}

#main p.pagetitle {
color: white;
font-size: 32;
}

#main p.title {
color: white;
font-size: 22;
text-align: left;
text-decoration: underline;
font-weight: bold
}

#sub {
background-color: #6699cc;
width: 640px;
padding-left: 20px;
padding-right: 20px;
}

#sub p.titleleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}

#sub p.titlecenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}

#sub p.titleright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
text-decoration: underline;
}

#sub p.contentleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;

}

#sub p.contentcenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}

#sub p.contentright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
}

#sub p.titlerightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}

#sub p.titleleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}

#sub p.contentrightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}

#sub p.contentleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}

html: 3 colum example.
Code:

<html>
<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 10/15/04 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="bradsonorus@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link rel="StyleSheet" type="text/css" href="test.css">
</head>
<body>
<div id="frame">
<div id="main">
<img src="C:/Lisa/images/topbar.png" width="640" height="30" alt="">
<img src="C:/Lisa/images/highburyschool.jpg" width="166" height="104" alt="Highbury School, Winnipeg, Manitoba, Canada">
<span>&nbsp;</span>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="LisasNavBar" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="C:/Lisa/LisasNavBar.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#6699cc" />
<embed src="C:/Lisa/LisasNavBar.swf" quality="high" bgcolor="#6699cc" width="500" height="100" name="LisasNavBar" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<p class="pagetitle">TESTS</p>
<p class="title">Tests:</p>
</div>
<div id="sub">
<p class="titleleft">Test Topic / Subject</p>
<p class="titlecenter">Test Date</p>
<p class="titleright">Suggestions</p>
<p class="contentleft">Math: Long Division Test</p>
<p class="contentcenter">Tuesday, October 15, 2004</p>
<p class="contentright">Review pages 31 to 40 in Math text.</p>
<p class="contentleft">English: Spelling Test</p>
<p class="contentcenter">Tuesday, October 22, 2004</p>
<p class="contentright">Practice all the 17 syllable words, they will be on the test.</p>
<p class="contentleft">Phys. Ed.</p>
<p class="contentcenter">Tuesday, November 5, 2004</p>
<p class="contentright">Full Marathon. Those that don't make it under the 5 hour limit will fail.</p>
<p><hr width="80%"></p>
<p><a href="C:/Lisa/home.htm">Home</a> | <a href="C:/Lisa/homework.htm">Homework</a> | <a href="C:/Lisa/projects.htm">Projects</a> | <a href="C:/Lisa/specialevents.htm">Special Events</a> | <a href="C:/Lisa/tests.htm">Tests</a> | <a href="C:/Lisa/links.htm">Links</a></p>
</div>
<img src="C:/Lisa/images/bottombar.png" width="640" height="30" alt="">
</div>
</body>
</html>

Hello.
I am trying to solve a float problem. The crux:

One wrapper div around a left (floated) column and right column.

Content in the left is fine:

In the right column I need the image (#logo) to be on the left of a h2 (#name).

The #logo is taller than #name.

Under both of those I need a ul (#basic_list) to essentially clear both #logo and #name.

Please look at my code and diagram of how it should look in my attachment.

Thanks

hi, i have a container div, set at 50% opacity.

i want my content to apear in here, but be 100% opacity.

i thought this would work, but it doesn't... any help?

#transContainer {
background-color: #FFF;
margin-left: auto;
margin-right: auto;
width: 982px;
padding: 7px;
height: 100%;
padding-top: 0;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;


}

#mainContainer {
background-color: #ccc;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
width: 968px;
height: 94%;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;

}

Hi There -

Have a simple container div containing two other divs, top and content.

My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know.

Any help you can give me would be greatly appreciated. Thanks!

Code:

<body>

<div class="colorbox">

  <div class="colorboxtop">
    <h2>title goes here</h2>
  </div><!-- /colorboxtop -->

  <div class="boxcontent">
    <p>You should read this and <a href="#">Click Here</a>.</p>
    <a title="Go Here!" href="#">[button]</a>
  </div><!-- /boxcontent -->

</div><!-- /colorbox -->

</body>

No great complexity there...here's the CSS:

Code:

body {
	color:#666666;
	font-family:Lucida Grande,Verdana,sans;
	font-size:10px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:13px;
}

.colorbox {
	margin-bottom:9px;
	padding-bottom:15px;
	width:300px;
	border:thin solid #CCCCCC;
}

.colorbox h2 {
	color:#FFCC33;
}

.colorbox {
	color:#CC6633;
	padding:0px 20px 15px;
	margin-top:0;
	margin-bottom:10px;
}

.colorboxtop {
	background-color: #dddddd;
	height:50px;
	color:#666666;
	background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
	padding:auto 20px;
}

.colorbox a {
	color:#C5DBE9;
	font-weight:bold;
	text-decoration:none;
}

Hello there, first post, just need a quick fix. Hope you don't mind.

So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix...

(Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.)

Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container.

<!--AK47-->
<div id="imgcont0">
<div id="imgcont1"><img src="images/ak47/1.jpg"></div>
<div id="imgcont2"><img src="images/ak47/info.jpg"></div>
</div>
<!--/AK47-->

imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be.

Stylesheet:

#imgcont0 {
width: 825px;
height: 300px;
margin-left: auto;
margin-right: auto;
}

#imgcont1 {
width: 650px;
}

#imgcont2 {
margin-left: 675px;
width: 150px;
}

As you see the code is simple, yet I can't seem to fix this problem. Ideas?

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

Firefox is giving: http://www.promogift.be/index.php?page=producten&catnr=7

So it shows the content out of his box, after a refresh everything is correct, how can i get it working from first loadtime?

I have the following:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My page </title>
    <style type="text/css">
      #content { width: 100%; float: left; margin-right: -1px }
      .content_container { clear: both; }
      .content_header_even, .content_header_odd { width: 100%; background-color: #69bfde; color: #595441; padding: 0.5em 0; text-indent: 1em; }
      .content_header_odd { background-color: #b4e8fb; }
      .content_graph_container { padding: 1em; }
      .content_graph_container_even { background: #ff0000; }
      .content_graph_container_odd { background: #00ff00; }
      .content_info { width: 20em; float: left; }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="content_container">
        <p class="content_header_even">Header</p>
        <div class="content_graph_container content_graph_container_even">
          <div class="content_info">
            <p>This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. This is column a. </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ideally, this will repeat and alternate colors but the text is not colored only a small section above the text. I thought that by enclosing it in the div, the background would be applied to the entire text. What am I doing incorrectly?

here's my site for reference.
http://www.tobaccosmokeshop.com/temp.htm

here's some code
PHP Code:
#breakfootercontainer{
clear:both;
border:solid 1px red;
background:url(images/navback.gif);
background-repeat: repeat-y;
padding:0px 0px 0px 189px;
width:100%;

}
#footer{
border:solid 1px green;
float:left;
width:562px;
text-align:center;
} 





breakfootercontainer is a div that spans the whole width of my site, but pads over for my navigation bar. The problem is, In IE the container holds the footer, but in Mozilla (PC) and on my mac in safari and Mozilla the container is only like 0 px height and the footer div pops over the bottom border on the container.

Here's my code I'm using.
PHP Code:
<div id='breakfootercontainer'>
  <div id='footer'>
  <a href='' class="mainnav">duplicate nav</a><br>
  <a href='' class="mainnav">duplicate nav</a><br>
  <a href='' class="mainnav">duplicate nav</a><br>
  <a href='' class="mainnav">duplicate nav</a><br>
  </div>
</div> 





What is causing the container to not fill around the info inside the footer?

Also, I have 2 columns(red border around field picture and welcome column and the nav with the blue border) with a container around them (big white border around both), one shorter than the other (the red border column), but I want the shorter one to go the full length of the container (white border) so my column backgrounds line up and part of the page isn't longer than the other. I want to use my footer as a cap all the way across the page. Is there any way to do this without putting <br>'s in the smaller container to fill it out?