CSS - Text Not Flowing Around Floated Image

Does anybody know what the css attributes would look like for the right margin divs like (e.g. #smr-00) found in this tutorial?
(see link)
css.image.text.wrap.tutorial.htm

I use a css class to control my text around an image, but it does not print floated. Instead it prints like they are block elements.
Code:

img.newsthumb{
	float: left;
	clear: left;
	padding-right: 5px;
	border: 0px;
}
img.newsthumb2{
	float: right;
	clear: right; 
	padding-left: 5px;
	border: 0px;
}

Any clue on how to fix this.

Hi there

I am having some trouble with my CSS dropdown menus.

I have a floated div that contains a welcome paragraph and a menu that drops down. What is happening is that the menu is being drawn behind the text of the welcome paragraph (see attached image).

Here are the classes...

This draws the welcome text
Code:

#welcome
{
	float:left;
	z-index:0;
	width : 360px;
	height:160px;
	margin-left:10px;	
	margin-top:30px;
	font-size: 0.8em;
}

And this is the classes for the dropdown

Code:

.dropdownlink a 
{
	display:block;
	width:150px;
	height:19px;
	font-size:0.8em;
	color:#000000;
	background: url(../images/nav_drop_bg.gif) top left no-repeat;
	text-decoration: none;
	padding-left:10px;
	z-index:1000000000;
}

and this is the HTML for the menu...
Code:

<div id="nav_1" style="visibility:hidden; position:absolute; top: 37px; left:28px; height:100px; width:128px;">
						<div class="dropdownlink"><a href="">Pain</a></div>
						<div class="dropdownlink"><a href="">Pain</a></div>
						<div class="dropdownlink"><a href="">Pain</a></div>
						<div class="dropdownlink"><a href="">Pain</a></div>
						<div class="dropdownlink"><a href="">Pain</a></div>	
					</div>

has anyone got any idea why this is ignoring the Z-index? It works in Opera, but in looks crap in IE. Is this a common problem, are there any workarounds.

Please help, I'm pulling my hair out !

Before I state the problem, let me say that I am working towards properly validated html and css. There are a couple tables in my design that I put in just to show the boss something pretty! They will be gone soon.

I have 3 places on the page where I'm using images as links to effect behavior with javascript or forms.

My menu's going down the left side of this template has +/- "buttons" to toggle nested lists on and off. By using margin-top:-14px they are lining up slightly higher then needed in FF, slightly lower then needed in IE and way to high in Safari. If i set the margin-top to 0, then I get it lined up nicely in safari and IE and FF are off. The images inside of the <li>'s

This is the css code I believe to be relevent

css Code:
Original - css Code .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div.redbox img.plusminus { float:right; margin:-16px 3px 0 0; padding:0 0 0 0; height:10px; }

  

 .clearfix:after {


     content: ".";


     display: block;


     height: 0;


     clear: both;


     visibility: hidden;


 }


  


 div.redbox img.plusminus {


   float:right;


   margin:-16px 3px 0 0;


   padding:0 0 0 0;


   height:10px;


 } 

html Code:
Original - html Code <li id="item1" class="border-bottom clearfix"> <a href="/store/category/50">T-SHIRTS</a> </li> <li id="item2" class="border-bottom clearfix"> <a href="/store/category/51">PANTS</a> <a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus" class="plusminus" id="img_item2" /> </a> <ul id="ul_item2" class="closed"> <li class="sidebarsub"> <a href="/store/subcategory/325">PROTECTIVE</a> </li> </ul> </li>

  
<li id="item1" class="border-bottom clearfix">
        <a href="/store/category/50">T-SHIRTS</a>
    </li>

    <li id="item2" class="border-bottom clearfix">
        <a href="/store/category/51">PANTS</a>
        <a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus"  class="plusminus"  id="img_item2" />
</a>
            <ul id="ul_item2" class="closed">
                <li  class="sidebarsub">
                    <a href="/store/subcategory/325">PROTECTIVE</a>
                </li>

            </ul>
    </li>

Is this a common thing in CSS that there might be a tutorial out there on how to fix it?

I've looked at using overflow and that doesn't seem to fix the problem.

the link for the page...
Template
Thanks for having a look

On page - URL address blocked

I have an img floated to the left, with some text floating around the right side. After this image, I have an h2, styled to clear:both, with a top-margin: 3em.

With this floated image preceding, when the image is longer than the paragraph or other text floating around it, and the bottom of the image is "sitting on top of" the h2, the browser ignores the 3em top margin on the h2, unless I include a br, styled to clear:both.

So, I can solve the problem with this clearing break, but it sort of chafes me. This doesn't look like typical collapsing margin. I'm not losing the overlapping margin between the two elements, I'm losing all of the margin!

The page is coded with the breaks in place. I can re-create the "issue" using Firebug to remove the br tag.

Suggestions?

Thanks in advance.

Hello, first post here...

I have an image floated left, with an unordered list (ul) next to it. Problem is, the margin values I set for the list are totally ignored, so the list bullets end up overlapping the image. Seems the only solution is to set margins on the image, but that also pushes away non-overlapping content, like the h3 that is above the list and positioned fine.

Any ideas? Everything works fine if/when I float the list left, but that seems draconian...
Code:
css Code:
Original - css Code img.alignleft { margin-right:0.5em; display:inline; float:left; } ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; }

  

  


 img.alignleft {


 margin-right:0.5em;


 display:inline;


 float:left;


 }


 ul, ol, dl {


 line-height:1.5em;


 margin:0 0 1em 1em;


 } 

HTML4Strict Code:
Original - HTML4Strict Code <p><img src="" width="295" height="400" class="alignleft"/></p> <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3> <ul> <li>An Introduction to Social Media for the Nonprofit</li> <li>An Introduction to Storytelling for the Nonprofit</li> <li>Using Social Media and Digital Storytelling in the Classroom</li> </ul>

  

 <p><img src="" width="295" height="400" class="alignleft"/></p>


 <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3>


 <ul>


 <li>An Introduction to Social Media for the Nonprofit</li>


 <li>An Introduction to Storytelling for the Nonprofit</li>


 <li>Using Social Media and Digital Storytelling in the Classroom</li>


 </ul> 

he http://www.cyclomedia.co.uk/?ie6escape.html

i worked out a much better way to do this layout (no inner tables) but this bug in IE6 still persists in this version. the html and css validate so i doubt it's something i've done. kudos to anyone who can figure it out but as a note, if you add another floated div (just containing enough content to wrap e.g. "...") then it holds the image in!

Hello DevShed CSS Help Forum,

I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag:

(Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL)

http://www.spidersend.com/new_site/newsite4/test6.html

However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before?

I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd.

Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS:
Code:

body
{
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	font-family: "arial";
	background-image: url('images/bottom_slice.png');
	background-repeat: repeat-x;
	background-position: bottom center;
}

div#header
{
	background-image: url('images/header_slice3.png');
	background-repeat: repeat-x;
	height: 198px;
	width: 100%;
}

div#header-content
{
	width: 680px;
	margin: 0px auto;
}

div#top-navigation
{
	width: 680px;
	margin: 0px auto;
	position: relative;
	bottom: 16px;
	color: #FFFFFF;
	font-family: "arial";
	font-size: 16px;
	padding: 0px;
}

div#content
{
	width: 850px;
	float: left;
}

div#content-header
{
	background-image: url('images/content_bg_top.png');
	width: 850px;
	height: 30px;
}

div#content-footer
{
	background-image: url('images/content_bg_bottom.png');
	width:850px;
	height: 32px;
}

div#content-area
{
	background-image: url('images/content_bg_slice.png');
	padding-left: 18px;
	padding-right: 18px;
}

div#adbar
{
width: 157px;
float: right;
}

div#adbar-header
{
	background-image: url('images/sidebar_top.png');
	width: 157px;
	height: 30px;
}

div#adbar-footer
{
	background-image: url('images/sidebar_bottom.png');
	width: 157px;
	height: 26px;
}

div#adbar-area
{
	background-image: url('images/sidebar_slice.png');
	padding-left: 5px;
	padding-right: 5px;
}

div#sidebar
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	color: #0c577a;
}

div#sidebar2
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	margin-top: 20px;
	color: #0c577a;
}

div#content-wrapper
{
	width: 1007px;
	margin: 0px auto;
}

Is there any CSS to make my block of text flow between several table cells? (I know tables are a bit anti-css but I don't really have a choice here).

Hi guys, i have a page of categorised links which i've wrapped using definition lists:

Code:

<dl class="link_category">
 <dt class="category_name">Magazines</dt>
 <dt>XchangeIT</dt>
 <dd>The company through which newsagents obtain electronic magazine invoices.</dd>
</dl>

I would like for each list to flow after the proceeding so I've used float: left, however there's the occasional gap (see attached img). And I cant figure out whats causing this!

Here's my CSS:

Code:

.link_category  {
	float: left;
	width: 200px;
	text-align: left;
	margin: 0 20px 20px 0;
}

.link_category dt {
	font-weight:bold;
}

.link dt.category_name {
	font-size: 14px;
	line-height: 18px;
	margin: 0 0 9px 0;
}

Thanks in advance

In Firefox, I've got a right div that is not repsonding to an auto width in FF.

I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing.

I've included a screen shot of the problem, any help is greatly appreciated.

- K

CSS Code
Code:

#MainContainer
{
	float: 	left;
	width: 	auto; 
}

#Main
{
	margin-right: 0.2em;
}

#MainContent
{
	padding: 0.5em 0.5em 0.5em 0.5em;
}


#SidebarContainer
{
	float: 	right;
	width: 	250px;
	 	
border-top: 1px solid #C0C0C0;
	padding-top: 5px;
	clear: right;

}

#Sidebar
{	
	padding-bottom:	    5px;
	background:     	#ADADAD;
	background-image:   url(../images/SidebarBackground.jpg);
	background-repeat:  no-repeat;
	clear:left;
}

#SidebarContent
{
	margin: 0.2em 0.2em 0.2em 0.2em;
}

Hi

I'm struggeling with the following:

I have some span elements inside a td.

If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td).

Why does that happen and is there a way to make the td to autogrow to fit all the span's inside?

Se example code below

Code:

<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;">
<tr>
<td style="background-color:gray; text-align:center; border:1px solid black;">
<span style="margin-right:20px;">First</span>
<span style="margin-right:20px;">1</span>
<span style="margin-right:20px;">2</span>
<span style="margin-right:20px; background-color:orange; padding:10px;">3</span>
<span style="margin-right:20px;">4</span>
<span style="margin-right:20px;">5</span>
<span style="">Last</span>
</td>
</tr>
</table>

******* UPDATE *******
I found this link today:
http://css-discuss.incutio.com/?page=FormattingContexts

which says (among other things):
*************************
Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up.

Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it.
*************************

So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above?
Is there any working workarounds for this...?

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)