29 replies [Last post]
cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Hello,

Having problems clearing a div. Here's what I have:

1.) a column floated left
2.) a main content area that is allowed to span with the screen dimension
3.) three div containers within the main content area, essentially created in a two column format, with the third container displaying below the two (NOTE: THIS IS NOT A PAGE FOOTER).

For some reason, the container (div id="brandAction" ) WITHIN the main content area (div id="contentContainer") is clearing to the bottom of the LEFT HAND COLUMN (div id="leftColumn").

Here's the corresponding HTML and CSS.

*I removed all of the content from inside the divs to show my structure*

<div id="leftColumn"> </div>

<div id="contentContainer">
	<div id="brandImage"> </div>
	<div id="brandText"> </div>
	<div id="brandAction"> </div>
</div>

#leftColumn {
	float: left;
	width: 150px;
}
#contentContainer {
	margin-left: 170px;
}
#brandImage {
	float: left;
	width: 200px;
}
#brandText {
	margin-left: 210px;
}
#brandAction {
clear: both;
}

So far,...I'm pretty stumped. The only thing that seems to work is to set the height of #brandText to the size of the #brandImage container...but that's not the practical way I want to do it (because of different sizes of images and content.

Any ideas?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Clear: Both Problem

Hi cmodonn,
Have you come across this: http://www.csscreator.com/attributes/containedfloat.php

Hope that helps

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 19 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Clear: Both Problem

Hi cmodonn,
I may have been a little too quick with my last post.
Is your problem showing in IE only?
Try adding position: relative; to the floats.

Otherwise provide a link so it is easier to solve.

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Clear: Both Problem

Absolutly...and have been using heavily in this project. However, for some reason, when I tried it on this problem, it didn't seem to help.

Here's how I did it.

<div id="contentContainer">
	<div id="brandContainer" class="clearFix"><!-- "clearFix" is my class name for your floatcontainer" -->    
		<div id="brandImage"> </div>
		<div id="brandText"> </div>
	</div>
	<div id="brandAction"> </div>
</div>

In addition to having the CSS code for the "clearFix", from the old CSS, I removed the "clear:both" from the #brandAction container.

I STILL seem to have the same problem...and I'm not quite sure why. I don't know if I'm overlooking something or what,...but in this case, the clearFix didn't seem to work.

Am I loosing it (it's quite possible....i've been working overtime on this project for two weeks.)

Chad

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Clear: Both Problem

Tony wrote:
Hi cmodonn,
I may have been a little too quick with my last post.
Is your problem showing in IE only?
Try adding position: relative; to the floats.

Otherwise provide a link so it is easier to solve.

No...it occurs in both IE and FF.

I'll try position: relative here and let you know (sorry...no link...working on my company's development site.)

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Clear: Both Problem

OK.....I used the floatContainer fix, and shockingly....it works in IE but NOT FireFox (??????????????????????????????).

Here's my revised code:

<div id="leftColumn">
	<p>Left Column</p>
</div>
<div id="contentContainer">
	<div id="brandContainer" class="clearFix">
		<div id="brandsImage">
			<p>Brands Image</p>
		</div>
		<div id="brandsText">
			<p>Brands Text</p>
		</div>
	</div>
	<div id="brandsAction">
		<p>Brands Action</p>
	</div>
</div>
<div id="footer">
	<p>Footer</p>
</div>

And the CSS:

/* Really goofy looking CSS (in terms of colors), but I'm just using it for the example */

#leftColumn {
	height: 300px;
	background-color: #CCC;
	width: 150px;
	float: left;
}
#contentContainer {
	margin-left: 160px;
	background-color: #9C6;
}
#footer {
	height: 50px;
	background-color:#F00;
	clear: both;
}


#brandsImage {
	width: 250px;
	height: 200px;
	background-color:#999;
	float: left;
	position: relative;
}
#brandsText {
	margin-left: 260px;
	background-color:#03F;
}
#brandsAction {
	background-color: #C93;
}
/*------------------------------*/
/* Clear Float Fix              */
/*------------------------------*/
.clearFix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden; 
}
/* Mark Hadley's fix for IE Mac */ 
.clearFix {
	display: inline-block;
}    
/* Hides from IE Mac \*/
* html .clearFix { 
	height: 1%;
} 
.clearFix {
	display:block;
}
/* End Hack - DO NOT REMOVE OR MOVE THIS COMMENT */

Sooooo.....any thoughts? I tried using position: relative; in the div containers that are floating, but it didn't work. I'm baffled that this works in IE and not in FF....which leads me to ask..."OK....what's wrong?"

Need your help....thanks!!

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 11 years 28 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

Clear: Both Problem

Hi Cmodonn,

I wish I could be more help in this reply, but I am still sort of confused what your desired page looks like. Would you be able to create a quick graphic to show us how you want your layout to look? :roll:

This is my big chance . . . yep, I blew it . . .

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

I've played with your layout extensively and have applied everything I can think of but it contuinues to want to clear the left float column.

I originally thought this was an old bug in FF which was meant to have been corrected, but now am wondering as I have read that the correct behaviour of clear is to clear all previous floats,but whether that should mean a float that is adjacent to a containing block with a floated element cleared I'm not sure.

This is a problem that I have run across before but am not really sure of the fix other than to re-think the layout.

The only other thing that does work is to remove the clearfix from #brandcontainer and replace it with overflow:auto but you will need this for IE:

* html #brandContainer {
height: 1%;
}

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Clear: Both Problem

I think you are confusing the two things, self containment (or expansion to contain floats) and clear effect containment.

A clear will clear all floats within the same display context. To contain the affects of a clear you must create a new display context (float, position:absolute, position:fixed) or use an overflow setting other than visible.

IE, kind of avoids this affect through the wierd behaviour of its hasLayout property, which in this case acts a little like using an overflow setting other than visible.

So the solution is:

html>body #brandContainer {overflow: hidden;}

Note, this will have the side-effect of preventing margins collapsing outside #brandContainer.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

I dont think there is confusion really Chris.

So the clear property does clear all previous floats, It's just not that clear that this in relation to a display context.

Cmodenn you will still need to give IE the height fix, and is the child selector really required on the overflow rule ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

udi
Offline
Regular
London
Last seen: 12 years 4 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

It this what you are trying to achieve

I was not sure, what you are trying to achieve, but from the above posts I assumed you wanted something like this...
[please see attached file... test2.htm]

Hope this helps Wink

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Clear: Both Problem

Hugo wrote:
...and is the child selector really required on the overflow rule ?

Maybe, maybe not. Without it IE will float the third piece of text below the second and adjacent to the first. However, I didn't look too deeply and there could well be some other style change which will correct that behaviour.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Clear: Both Problem

Or, you could simply wrap the two columns in the main area in their own container, and use the overflow rule. The Holly hack should be applied to give IE a layout.

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

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>clearing test</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

#leftColumn {
   float: left;
   width: 150px;
}

#contentContainer {
   margin-left: 170px;
}

#brandImage {
   float: left;
   width: 200px;
}

#brandText {
   margin-left: 210px;
}

#brandAction {} 

.holder {
    overflow: hidden;
    }

/* \*/
* html .holder {
    height: 1px;
    overflow: visible;
    }
/* */

/*]]>*/

</style>
</head>

<body>
  <div id="leftColumn">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
    erat volutpat. Ut wisi enim ad</p>
  </div>

  <div id="contentContainer">
<div class="holder">
    <div id="brandImage">

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
      diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad</p>
    </div>

    <div id="brandText">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
      diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad</p>
    </div>
</div>

    <div id="brandAction">

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
      diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Ut wisi enim ad</p>
    </div>
  </div>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

Gary that's exactly the layout I was working on, there is a container/holder for the two columns in the original layout posted; #brandContainer, and it's why I mentioned that it would require the Holy hack for IE.

I have to admit Chris that I don't see the behavior that you describe if IE reads the overflow rule, but then it can't harm to hide it from IE.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Clear: Both Problem

Ah, I figured someone would have done that, but I got tired head trying to follow all the suggestions.

If you use the Holly Hack and the {overflow: hidden} rule, IE, um, hides the overflow, so you must either hide the rule from IE or remove it with the * html hack. I didn't look at {overflow: auto;}; that may work ok.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Clear: Both Problem

kk5st wrote:
If you use the Holly Hack and the {overflow: hidden} rule, IE, um, hides the overflow, so you must either hide the rule from IE or remove it with the * html hack.

which is what I suggested Wink

html>body #brandContainer {overflow:hidden;}

is the opposite of

#brandContainer {overflow:hidden;}
* html {overflow: visible;}

which I admit is probably preferable as its easier to have hacks only targetted at one browser family where they can be shifted off into their own stylesheet and linked with a conditional comment.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

Laughing out loud I love confused threads; as Gary said "or use overflow auto" as I originally suggested, but maybe I haven't thought that through carefully :roll:

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Clear: Both Problem

Part of the problem is that there are a variety of ways to clear/enclose a float element.

  1. A float element will enclose its own child float.
  2. An overflow value other than the default, 'visible', will cause an element to enclose its content.
  3. An element of {display: table;} will enclose its content.
  4. An explicit 'clear' just prior to closing an element will cause it to enclose its float.
Any of these may have conflicts with other elements or style rules. So you probably need to test if you're at all unsure. On the other hand, it is likely that at least one method will work as advertised.

cheers,

gary

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Clear: Both Problem

kk5st wrote:
Part of the problem is that there are a variety of ways to clear/enclose a float element.

Yes, but (my understanding is) this isn't about enclosing the float. Its about containing the effects of clear. And (d) won't do that.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

No it isn't Chris, it is about containing a float, the clear was a problem due to it's use in the clearfix clearing technique and the problem was in using clear but it was to aid in the containing of the floated element, yes the idea was that the third div cleared the float but that actually was a by product of containg the float in the #brandContainer div.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Clear: Both Problem

Ah! The fog lifts.

Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

Laughing out loud dunno I think it's descended on me then, having re-read my last post; does it make any sense or am I just loosing the plot ?

and where is the OP in all this :roll: have we just scared him off.Laughing out loud

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Clear: Both Problem

Wow.....what happens when you get to busy to come back to the thread you started........

Thanks for all of your responses. I'm under such a time crunch right now I hope I can make this work. Since I haven't had much time, I wasn't able to read everything in the thread but I promise I'll go back and review everthing.

Since it was asked, here are some screen shots of A.) what I'm wanting to achieve B.) what I'm actually getting.

Here's what I'm trying to achieve. [I just did this in photoshop...not actual design I'm using]

And here is the results I'm getting:

Here's the rough HTML and CSS that I'm using:

	<div id="header">Header</div>
	<div id="leftColumn">Left Column
		<p>Ut aliquip ex ea commodo consequat. Velit esse cillum dolore excepteur ......</p>
		<p>Ut enim ad minim veniam, consectetur adipisicing elit, qui officia deserunt........</p>
		<p>Sed do eiusmod tempor incididunt excepteur sint occaecat sunt in culpa..........</p>
	</div>
	<div id="contentContainer">
		<div id="brandContainer" class="clearFix">
			<div id="brandImage">Brand Image</div>
			<div id="brandText">Brand Text
				<p>Ut labore et dolore magna aliqua. Excepteur sint occaecat ut enim .................</p>
				<p>Excepteur sint occaecat ut enim ad minim veniam, sed do eiusmod tempor incididunt.......</p>
			</div>
		</div>
		<div id="brandAction">Brand Action</div>
	</div>
	<div id="footer">Footer</div>

<style>
body {
	background-color: #0D3BD0;
}
#header, #leftColumn, #contentContainer, #footer {
	background-color: #FFF;
}
#brandImage, #brandText, #brandAction {
	background-color: #D5D5D5;
}
#header, #footer {
	height: 50px;
}
#header {
	margin-bottom: 10px;
}
#leftColumn {
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
#contentContainer {
	margin-left: 160px;
	padding: 10px;
}
#brandImage {
	width: 200px;
	height: 200px;
	float: left;
}
#brandText {
	margin-left: 210px;
}
#brandAction {
}
#footer {
	clear: both;
}

/*------------------------------*/
/* Clear Float Fix              */
/*------------------------------*/
.clearFix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden; 
}
/* Mark Hadley's fix for IE Mac */ 
.clearFix {
	display: inline-block;
}    
/* Hides from IE Mac \*/
* html .clearFix { 
	height: 1%;
} 
.clearFix {
	display:block;
}
/* End Hack - DO NOT REMOVE OR MOVE THIS COMMENT */
</style>

I'm basically posting this to clairify what I was initially asking.

I'm off to try some of your fixes. I'll report back and let you know what I end up with. Hugo, Chris, kk5st, Udi....you guys are great, you know that?

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Clear: Both Problem

Yeah.....it works.

Here's what I tried.

/*-- Version #1 --*/

#brandContainer {
	overflow:auto;
}
* html #brandContainer {
height: 1%;
}

/*-- Version #2 --*/

html>body #brandContainer {
overflow: hidden;
}

* html #brandContainer {
height: 1%;
}

/*-- Version #3 --*/
#brandContainer {
    overflow: hidden;
    }

/* \*/
* html #brandContainer {
    height: 1px;
    overflow: visible;
    }
/* */ 

I realize that version 2 and 3 are nearly identical....actually all three are nearly identical. But...all of them work. Is there any advantage/disadvantage to using one method over the other?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

The layout is understood and the problem stems from the clear property and the clearfix rules, dump them. The solution rests (and here there is some dispute on the detail Smile ) on using the overflow property.

Either overflow hidden or auto and also height:1% for IE on the #brandContainer

It may be a case that you need to hide the overflow from IE using
html>body #brandContainer as Chris has suggested.

I found that overflow:auto and * html #brandContainer{ height:1%;}
seemed to work without problem but it's worth checking which method works best, I may well have overlooked something when testing to see if this was stable.

I would read Chris's post carefully and Gary's to determine the best course of action, but the problem is solvable.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Clear: Both Problem

This so odd.

I've mocked up the page and I got the fix to work.

Once I applied it to my main pages (done in XSLT using XML), the fix doesn't work anymore.....make no sense.......

Getting frustrated.....

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

Explain doesn't work any more ? which of those fixes are you using and is the fix failing in all browsers, how is IE coping with XML/XSLT

As to which version to use this was the point of debate, but I would have thought that your version 3 was perhaps using overflow:auto for IE unnecessarily

Don't suppose you have a live link to look at.

Hugo.

P.S sorry my last post missed yours.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

cmodonn
Offline
Enthusiast
Bloomington/Normal, IL
Last seen: 12 years 33 weeks ago
Bloomington/Normal, IL
Joined: 2005-01-12
Posts: 66
Points: 0

Clear: Both Problem

Hugo,

No worries...I actually really like the theoretical discussions about CSS. You'd always hope that it make us better at the craft we do.

Explain doesn't work anymore? Sorry...should have been more descriptive.

Basically, the "fix" didn't seem to apply itself to my brandContainer...I was getting a float clearing problem. It was failing in all browsers.

I have a pretty sizeable style sheet...I'll have to investigate further to see if something is being overwritten. Is there anything special that needs to be done in the style sheet when applying the Holly Hack (because of the escape characters [ /* \*/] )?

Unfortunatly I don't have a link because we are working internally (moreover b/c of the XSL/XML, I just can't "put it out there" for viewing).

Thanks for all of your continued help. I'm glad to see the response to this...I think this has been very vaulable for me.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Clear: Both Problem

If you are using Firefox.

Try using the DOM Inspector or Web Developers/CSS/View Style Information tool to see what styles rules are being applied to what elements.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Clear: Both Problem

To answer the question re: the comment hack; it should be fine as you've written it in the earlier post, I think that your supposition about the rules being somehow negated is probably close to the truth.
As Chris says use the Dom inspector to examine the rules and elements, it's a powerful tool.

Let us know how you progress.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me