Page 1 of 2

CSS Float Troubles

Posted: Thu Aug 17, 2006 2:58 pm
by jayshields
In FireFox it's fine, but in IE it's just plain weird.

Go to http://www.jay-designs.co.uk/iss/prods.php?cat=dishes in IE and the "Show records per page" box will be out of the top right corner of its container, it'll be closer to the centre. Now click the "Dishes" link in the left hand nav block. The "Show records per page" box will be positioned (correctly) in the top right of its container. Now refresh the page, misplaced again. You can even see it rendering the box, if you look closely it puts it in the right place then repositions it quickly. This happens in both IETab for FF and the real IE.

In FF it's always placed correctly.

Navigate around the other categories, and the pages within, sometimes it's OK, refresh it, and bam, it's not.

Can anyone explain/cure this for me PLEASE?!?!?!

Thanking you Image

Posted: Thu Aug 17, 2006 3:16 pm
by Oren
Did you fix it? It looks the same on IE and Firefox for me.

Posted: Thu Aug 17, 2006 5:01 pm
by jayshields
I thought it was just me, but I got someone else to have a look at it. He sees it the same as me.

Open the link in IE, refresh it, click the dishes link in the nav bar, refresh again, repeat a few times. The show records box will move randomly.

Posted: Thu Aug 17, 2006 5:07 pm
by Oren
I'm sorry, I refreshed maybe 50 times or more... nothing. I do believe you though, but I can't help without seeing the problem :P

Posted: Thu Aug 17, 2006 5:16 pm
by s.dot
I see it. That's odd. I can't look at your css so it's hard to say. Have you tried setting your margins and paddings to 0 for the "recordform" class?

Posted: Thu Aug 17, 2006 5:28 pm
by jayshields
Removing the padding doesn't solve it, there's no margin. Sorry, didn't know you couldn't see the CSS, here it is:

Code: Select all

html {
	scrollbar-3dlight-color: #EEEEEE;
	scrollbar-arrow-color: #CCCCCC;
	scrollbar-base-color: #EEEEEE;
	scrollbar-darkshadow-color: #BBBBBB;
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #EEEEEE;
	scrollbar-shadow-color: #CCCCCC;
}

body { 
	font: 11px verdana, arial, helvetica, sans-serif;
	background-image: url('dot2.jpg');
	padding: 20px 20px 0px 20px;
}

h1 {
	letter-spacing: -1px;
	font-size: 30px;
	font-weight: bold;
}

h2 {
	margin: 0px 0px 15px 0px;
	padding: 0px;
	letter-spacing: 5px;
	font-size: 28px;
	font-weight: bold;
	color: #CCCCCC;
}

h3 {
	font: bold 12px/14px verdana, arial, helvetica, sans-serif;
	color: white;
	margin: 0px 0px 5px 0px;
	border: 1px solid black;
	background: #3399FF url('grad1.jpg') repeat-y left;
	padding: 3px;
	letter-spacing: 4px;
}

h4 {
	font: bold 16px/18px verdana, arial, helvetica, sans-serif;
	color: #3399FF;
	letter-spacing: 4px;
	margin: 0px;
	padding: 0px;
}

hr {
	border: 1px solid #EEEEEE;
	width: 75%;
}

fieldset {
	border: 1px solid black;
	margin: 5px 0px 0px 0px;
}

p, td {
	font: 11px/20px verdana, arial, helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
}

form {
	margin: 0px 0px 0px 0px;
}

a {
	color: #3399FF;
	text-decoration: none;
}

a:link {
	color: #3399FF;
}

a:visited {
	color: #3399FF;
}

a:hover {
	color: #000066;
}

.headerrow {
	font-weight: bold;
}

.error {
	border: 1px dashed red;
	background-color: #FFCCCC;
	color: black;
	padding: 2px;
	text-align: center;
}

.success {
	border: 1px dashed green;
	background-color: #CCFF99;
	color: black;
	padding: 2px;
	text-align: center;
}

.info {
	border: 1px dashed #CCCCCC;
	background-color: #EEEEEE;
	color: black;
	padding: 2px;
	text-align: left;
}

/*.center {
	margin: 0px;
	padding: 0px;
	text-align: center;
}*/

.textinput {
	border: 1px solid #CCCCCC;
	margin: 0px;
	padding: 0px;
	background-color: #EEEEEE;
}

.submit {
	border: 1px solid #CCCCCC;
	background-color: #EEEEEE;
	color: black;
	margin: 5px;
}

.content {
	position: relative;
	min-width: 120px;
	margin: 0px 0px 16px 186px;
	border: 1px solid #CCCCCC;
	background: white url('grad2.jpg') repeat-x bottom;
	padding: 10px;
}

.navLeft {
	clear: left;
	float: left;
	left: 20px;
	width: 172px;
}

.navRight {
	clear: right;
	float: right;
	right: 20px;
	width: 172px;
}

.navBlock {
	border: 1px solid #CCCCCC;
	background: white url('grad2.jpg') repeat-x bottom;
	padding: 10px;
	margin: 0px 0px 16px 0px;
}

.header {
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 0px 5px;
	border: 1px solid #CCCCCC;
	line-height: 11px;
	background-color: #FFFFFF;
}

.topnav {
	height: 13px;
	margin: 0px 0px 3px 0px;
	padding: 3px;
	border: 1px solid #CCCCCC;
	background-color: #EEEEEE;
}

.left {
	float: left;
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	float: right;
	text-align: right;
}

.footer {
	clear: both;
	margin: 0px;
	padding: 5px;
	text-align: center;
}

.showrecordform {
	position: relative;
	float: right;
	background-color: #EEEEEE;
	border: 1px solid #CCCCCC;
	padding: 3px;
}

.bottomright {
	position: relative;
	text-align: right;
	float: right;
	margin-top: -10px;
}

.overlap {
	position: relative;
}

.overlap .top, .overlap .bottom {
	position: absolute;
}

.overlap .top {
	z-index: 1;
	top: 0;
	right: 0;
}

.overlap .bottom {
	z-index: 2;
	bottom: 0;
	left: 0;
}
Thing is, it only does it on the dishes page too, and I have no idea why, the other pages are generated just the same as that one...

When I was fiddling with it earlier I got it in the right position in IE, but it was under the container (content class) div, as mentioned in a previous thread. This is because I changed the position attribute to something else, but it has to be relative to appear on top of the container (content class) div.

...this is so annoying, I wish I could forget about IE...

Posted: Thu Aug 17, 2006 5:43 pm
by s.dot
Weird. I think because the page content is pretty wide, and combined with the width of that span (the record form), it's larger than the area it's contained in.

If you take out the text (show record(s) per page).. it positions it's self correctly. I can't confirm without using your images, but it worked without the width of images in my test.

Another idea is to absolute position it.

Posted: Thu Aug 17, 2006 5:43 pm
by Benjamin
Add this to the elements that are moving to fix it..

Code: Select all

position: relative;

Posted: Thu Aug 17, 2006 5:53 pm
by jayshields
You're correct. It was related to the text. I would never have thought that would've been the cause. Didn't want to mess with absolute positioning. Had to implement a stupid workaround but atleast IE is happy now.

Thank you Image

@astions: The position was already set to relative.

Posted: Thu Aug 17, 2006 5:54 pm
by s.dot
Hmm,

Also I find that if you set the .content to width: 100%; it will fix it as well.

Posted: Thu Aug 17, 2006 6:06 pm
by Benjamin
I had this problem earlier today actually. It was a combination of things on the page I was working on, rather than 1 tag in particular. i.e. there were several things I could remove to fix the problem.

Here is a good page that talks about it..

http://www.soxiam.com/Code/CSSDisappearingTextBugInIE6

Posted: Thu Aug 17, 2006 6:17 pm
by jayshields
scottayy wrote:Hmm,

Also I find that if you set the .content to width: 100%; it will fix it as well.
That's better :D

Image

LOL. No it's not. I go back in FF and it's stretched right outta the page!

LOL. Now I put your old fix on, and it's doing the same trick again! rghgdhklhsgkgdfdfsfddfsfsdfsd.

I'm giving in. I'll leave it crocked in FF and working fine in IE. I need rest before my head explodes.

Posted: Fri Aug 18, 2006 1:12 am
by matthijs
Couple of things:
first make sure the code is valid. The warnings for the amps are probably not too bad, but the errors for the span might.

Then, I would replace the span with a div. The span is for inline elements, the div for block-level. When floating, I would give it a certain width.

Also, what is the left: 20px; supposed to do in

Code: Select all

.navLeft {
	clear: left;
	float: left;
	left: 20px;
	width: 172px;
}
Floating blocks left or right in combination with width and margin (?) is often asking for trouble.

The width: 100%; in .content must go, I'm afraid :) Doing that makes it work in FF, that's a first step

Maybe later I'll have more time. the layout you have is really basic so should work without trouble in both FF and IE.

Posted: Fri Aug 18, 2006 7:08 am
by jayshields
I'm not bothered about valid code. I know it won't be far off, although I know for certain it will fail because I've used XHTML stuff and it's defined as a HTML4.x document.

Anyway, I replaced the span with a div, and gave it a set width in pixels. It's just back to it's old self.

Correct me if I'm wrong, but the left attribute specifies the left margin? If so, it's to make sure it's 20px from the far left of the screen, I haven't tested without it though. Why is a set width and margin asking for trouble in floats?

I know about the width 100% for content, but to be honest, I'm getting to the stage where I don't care about anything but IE. Chances are my client will never see his website in anything but IE, so why have it working in FF and not in IE? I can't showcase it to him and say "uurrr, that bit there, it works in FireFox but doesn't in IE", he'll just say fix it, proceeded by, what the feck is FireFox.

I know the layout is basic, but that's beside the point. I just wish CSS would work without so many fiddles. It's like every single thing I do with CSS is trial and error.

So, now I've been advised to not go to the "Works in IE but nothing else" path, I'm back to square one. matthijs, you got any ideas how to fix this without changing the text like scottayyy suggested?

Cheers.Image

positioning

Posted: Fri Aug 18, 2006 8:56 am
by mummra1
I don't think IE 6 supports positioning very well in CSS. I try to avoid using this whenever possible b/c it always causes problems.