• Some users have recently had their accounts hijacked. It seems that the now defunct EVGA forums might have compromised your password there and seems many are using the same PW here. We would suggest you UPDATE YOUR PASSWORD and TURN ON 2FA for your account here to further secure it. None of the compromised accounts had 2FA turned on.
    Once you have enabled 2FA, your account will be updated soon to show a badge, letting other members know that you use 2FA to protect your account. This should be beneficial for everyone that uses FSFT.

[Should Be] Simple CSS Problem

Z

zacdl

[H]ard|Gawd
Joined
Feb 12, 2007
Messages
2,012
I'm working on this website for a company and am having some IE6 troubles. Basically this website displays fine in IE7 or Firefox or Opera.
IE6 on the other hand is having trouble. It looks like the below (standalone IE6, so the PNGs won't render correctly- I have checked on retail IE6 installs and the PNGs are retail).
Basically, that content is supposed to fit into the area that looks obvious. I cannot get it to (it is off at the bottom).
639461526_180fdea83c.jpg


I have that entire content page set to a width of 760px.
If I set it to 754px, it will fit like it is supposed to in IE6 (755px screws it up again).
But it has background showing on both sides of it in all browsers if set at 754px (IE6, IE7, FF, Opera all have it). Which makes me think- 760px is correct, I just don't understand WHY it is not working in IE6!!
is my CSS file. Rather unorganized, but content is toward the bottom.

Thanks!
 
I think it is because of the floats. IE6 will add a 3pixel margin beside floats (under certian circumstances). If you set the size of your content div 6 pixels smaller, it works. That is due to adding 3px per float (left and right) to make it fit right.

That's my best guess at any rate. Read more about it here: http://www.positioniseverything.net/explorer/threepxtest.html

Or search for "IE6 float bug" in google.

Hope that helps.
 
I had a problem today when I was trying to have objects fit together closely. For some reason there was this extra few pixels around everything. It ended up working after I set the margins around those objects to be -3px. You may want to try adjusting the padding and margins so they're 0 or less, assuming I understand your problem.
 
Is the page rendering in Quirks or Standards mode in IE 6?
 
Why not create an alternative CSS file for IE6 and use conditional commenting to target it to IE6?

Code: 
<!--[if IE 6]>

Link to css file for IE6 here..

<![endif]-->

I think there is even some CSS code to include the main CSS file and then just add the code to correct the glitch.

AMDbuilder
 
Hopefully I'll try the -3px thing tomorrow (seems like a good idea).

I tried conditional- but for some reason it didn't work.
 
For whatever reason, I never could get conditional comments to work either, so you aren't alone.

This certainly looks like the float bug to me.
 
Interesting that you can't get it working..

Here is the code from a site I did with IE issues. Both are copies of each other and addressed as primary setups instead of using alternative sheats..

Notice the rel="stylesheet" - I seam to recall this being rather important.

If you still can't get it working send me a link and I will see if I can get it.

AMDbuilder

Code: 
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
 
IE6 will apply some bogus margins if you're using floats... sometimes. I'm pretty sure that adding "float: left;" to #content in your css will fix this... at least it works when changed in my IE6. It should now look like this:
Code: 
#content {
	float: left;
	width: 760px;
	height: 570px;
	padding: 15px;
	background: #FFFFC0 url(images/contentbackground.gif) no-repeat;
	overflow: auto;
}
When setting a specific width, I try to avoid padding since the results can throw you for a loop -- I also use display: inline which fixes a lot of render problems. In this instance, I'd set the width of #content to 790px and remove the padding. Then I'd put another div inside of #content called #main (or something), set its display to block and give it a padding of 15px; This way I know it will look the same in most browsers... if not all. Its more code but I know its reliable.
 
I thought I replied to a post like this, might have gotten nuked when the forums went down.

Anyway, I was just having to fix this damn IE floating css problem the other day on a site I was working on.

Check out this:
http://www.positioniseverything.net/articles/cc-plus.html

Basically you can add in a new div which helps you apply styles to sections while keeping your css in one place, and its all valid :)
 
JPWilson said:
IE6 will apply some bogus margins if you're using floats... sometimes. I'm pretty sure that adding "float: left;" to #content in your css will fix this... at least it works when changed in my IE6.
Click to expand...

Worked like a charm! Don't give up you dayjob- cuz your wonderful at it! (I guess if webdesign is what you do...)
 
zacdl said:
Worked like a charm! Don't give up you dayjob- cuz your wonderful at it! (I guess if webdesign is what you do...)
Click to expand...
Haha yes it is. I've spent more time playing with CSS than should be allowed.
 
You must log in or register to reply here.
Back
Top