10 replies [Last post]
seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

What's going wrong here then:

IE:

FireFox:

HTML:

	<div id="content" style="height:300px;margin:20px;background:url(/images/dm_bckgrnd.jpg) no-repeat 400px 0px;"> 
		<div id="sidebar">
			<h1>Development Managers' Area</h1>
	
			<p>This area is for registered users only.&nbsp; Please log in using your email and password.</p>
			
			<p>You can register <a href="/dm/register.asp">here</a>.  It will only take a few minutes and you will receive an email confirming your application to register has been received.  Please note all applications have to be approved before access is given and you will receive a second email notifying you that your application has been successfully processed.</p>
		</div>
		
		<p><strong>Please login here</strong></p>
		
		<div class="error"><p><%=session("sError")%></p></div>
		
		<form method="post" action="/dm/checklogin.asp">
			<table>
				<tr>
					<th><label for="sEmail">Email</label></th>
					<td><input type="text" id="sEmail" name="sEmail" /></td>
				</tr>
				<tr>
					<th><label for="sPassword">Password</label></th>
					<td><input type="password" id="sPassword" name="sPassword" /></td>
				</tr>
			</table>
			
			<p><input type="submit" name="submit" value="Log on" /></p>
		</form>

CSS:

		#sidebar
		{	float:			left;
			background:		#ccc;
			margin-right:	20px;
			
			padding:		15px;
			width:			200px;
			w\idth:			170px;}
		
		#sidebar h1
		{	font:			bold 14px/20px Arial;}
		
		input, textarea, select
		{	background:		#f9f9f9;
			border:			1px solid #666;}

div.error
{	font-weight:		bold;
	padding:			10px;
	width:				50%;
	color:				#900;
	border:				1px solid #333;
	background:			#ffa;
	filter:				progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-moz-opacity:		0.5;

	opacity:			0.5;}
	
div.error *
{	position:			relative;}
[/code]

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Div overlaying floated element?

Primarily I'm concerned about why the div is floating over the float:left sidebar, but I'd also like to know a consistent way to apply opacity filters to a background but not the text in the element.

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Div overlaying floated element?

I take it no one can help me then? Can anyone at least tell me if this behaviour is by design? I'm experiencing similar problems with ULs not sitting beside a floated div correctly.

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

Div overlaying floated element?

Seb as usual FF will be following the specs and IE is second guessing what you actually want to happen but not following the rules it may be worth trying to contain the error div and form elements in another div and floating it right, as the way it is now there is no positioning on the error div so FF is rightly setting it out from the left; the last rule is a bit odd
div.error *
{ position: relative;}

Have you not got a live link we can look at?

Sorry that is not a great deal of help

The opacity is a bit odd as it seems not to be effecting the text in IE which I thought it always did unless the text is in a seperate div but then I would have thought FF would be ok I've tended to use a semi trans gif for that effect so am not sure what is occuring here
Edit : looking at an old page where I was testing opacity/ layers and hover it seems that IE would play along but I couldn't stop FF fading the overlaid text so it may be something were stuck with unless someone knows better I guess that's why I changed to using trans gifs.

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

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Div overlaying floated element?

The div.error * style is what allows me to have the text not affected by the opacity rules in IE. Weird I know, but I found it with google(http://www.domedia.org/oveklykken/css-transparency.php) and it works! It doesn't affect the problem I've outlined though. Additionally, there seems to be no way to do this in other browsers.

I don't really want to put the stuff in a div floated right since I'd like it to wrap under the floated left element when it gets further down the page. You know what I mean Smile

Why isn't the div in question aligned with other elements like the p tag? They are both clock level elements after all? It definately seems to me that IE has it right in this case and FireFox is buggered....

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

Div overlaying floated element?

In my humble opinion IE went back after the ratification of the CSS specs and decided that large parts of it were not workable and that they would buck the proscribed rules in favour of something they felt would help people(or were they just running a spoiler campaign!!) ;the quirksmode.org site has some interesting views on how he believes that the CSS specs were greatly lacking in forethought when agreed upon.

I understand your desire for the content area to wrap under the float have you tried basic stuf like padding the div p away from the float
or a left margin on the div.error all I know for sure is that IE is supposedly getting it wrong by taking the width 50% and applying it to the empty space between the float and right edge of the container
when in fact it should not be seeing the float as it is removed from the flow and start the div from the left (floats are buggers basically)

I'll have to look at that odd hack seems strange.

In reply to the question as to why the form elements are not effected the only difference I can see is the div around the .error what happens if you remove the div and just leave it as a simple <p class="error"> maybe even remove the width altogether ( anyone suspect that I'm fishing in the dark yet)

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

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Div overlaying floated element?

Actually IE is correctly setting the width to 50% of the parent container, disregarding the float, as it should. And it gets the position right as far as I'm concerned. if you have a float, then "normal" stuff flows around it, it's that simple! Just FF gets it wrong....

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Div overlaying floated element?

Right, I've sussed the problem.

Basically CONTENT will flow past a floated element (as in all the text in both screenshots given), but the actual ELEMENT (i.e. the P, DIV, etc) starts at the far left of the screen overlaying the floated element.

So in the case of the other elements on that page you don't see this "problem" since they have clear backgrounds and no border.

Shove the border on and it becomes apparent.

Furthermore, applying the width property "fixes" this problem in IE, but makes no odds to firefox.

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

Div overlaying floated element?

No Seb, IE IS violating the W3C specs whether one thinks them right or wrong.
If you havn't seen this page then give it a read it helps to explain the float model.

http://www.positioniseverything.net/articles/float-bugs-1.html

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

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Div overlaying floated element?

Basically it's all a bunch of arse? Wink

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

Div overlaying floated element?

Seb have you tried what I suggested a margin left of say 230px will pull the div from under the float in FF and IE is actually taking the margin from the left edge of the container as well, not from what it looks like i.e the edge of the float so it won't change. the only other solution I can think of is put a position relative on the float and a z-index greater than the div.error but it's not a very elegant solution.
Let us know how you get on,

Hugo.

p.s yes it is all a bunch of *beep* the problem is that not enough people who matter are prepared to say as much , I like quirksmode.org and it's views on the specs

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