Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 Community Forums
 Community Discussions (All other subjects)
 IE botches CSS margins
 New Topic  Topic Locked
 Printer Friendly
Author Previous Topic Topic Next Topic  

muzishun
Senior Member

United States
1079 Posts

Posted - 19 May 2005 :  14:48:21  Show Profile  Visit muzishun's Homepage
I'm working on converting my site and forum over to CSS. I have finished the main site page and was working on the forum default page when I hit a snag. For some reason, IE doesn't display the left-hand column in the proper place. I've gone over the code a few dozen times, as well as double and triple checked the CSS files. Both pages are using the same CSS file, and the site main page displays properly on IE. Any ideas?

Site main (neither of these will be live till I get everything converted):
http://www.genuineimitation.org/gargoyle_default.asp

Forum default:
http://www.genuineimitation.org/forum/gargoyle_default.asp

Thanks in advance

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)

muzishun
Senior Member

United States
1079 Posts

Posted - 19 May 2005 :  15:09:54  Show Profile  Visit muzishun's Homepage
As a side note, I've tested in Firefox, Netscape, and IE so far. IE does one page correctly, and FF and NN display everything properly. Also, this is a much smaller deal, but does anyone else using IE see the random "0" in the bottom right corner? It's next to the copyright line, and I can't find it anywhere in the code. It doesn't display on FF or NN, so it has to be some weird IE bug.

EDIT: I somehow got rid of the ghost "0". I'm still trying to find fixes for the left panel issue, but one of the suggested fixes made the "0" disappear.

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)

Edited by - muzishun on 19 May 2005 15:34:23
Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 19 May 2005 :  15:40:46  Show Profile  Visit D3mon's Homepage
IE makes a poor interpretation of the CSS 'Box' model. IF you, like me, don't like filling up your CSS with nasty hacks and workrounds, avoid using combinations of margin and padding on the same object to avoid it's wrath.


Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won"

Edited by - D3mon on 19 May 2005 15:42:27
Go to Top of Page

muzishun
Senior Member

United States
1079 Posts

Posted - 19 May 2005 :  16:03:52  Show Profile  Visit muzishun's Homepage
Well, the theme I'm using already has a bunch of hacks planned into it. The problem seems to be the height hack. The problem is happening is that I've got two floated <div>'s. One for content on the right, and one for the menu stuff on the left. Due to the hack that I have to use to keep the <div> elements displaying right, IE decides that it's too big and throws it down to the bottom of the page. I don't think it'll be possible for me to set a negative top margin for every page on the site, as the height of the pages varies so much. I just need to find a way to force IE to not drop the box. What blows me away is that it keeps the float on the other page, but botches it on the forum page.

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)
Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 19 May 2005 :  16:14:05  Show Profile  Visit D3mon's Homepage
That's the trouble with hacks - once you start you never really know where you are with them.

What your trying to do should be simple enough without resorting to browser-specific code. If two divs are side by side (and especially if they are 'floated') make sure you set a width for each one. If the width is too wide for the page then one will get pushed down. Just keep decreasing the widths until they fit. Remember to iclude your margins in the width of each div too.


Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won"
Go to Top of Page

muzishun
Senior Member

United States
1079 Posts

Posted - 19 May 2005 :  22:01:13  Show Profile  Visit muzishun's Homepage
The problem is that I want to have one of the columns be fluid width and the other to be fixed width. Is there some way to do this? The left column needs to be a fixed 180px wide and the right column needs to fill the rest of the space.

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)
Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 20 May 2005 :  03:55:44  Show Profile  Visit D3mon's Homepage
Sure, just set the width on the left column. The right column should automagically be fluid, if it has no specific width applied.


Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won"

Edited by - D3mon on 20 May 2005 03:55:59
Go to Top of Page

muzishun
Senior Member

United States
1079 Posts

Posted - 20 May 2005 :  11:17:15  Show Profile  Visit muzishun's Homepage
If the right column has several other <div> elements in it, will it throw things off if I set widths for them? Or do I just need to have the right column with no width whatsoever, then the things underneath it don't matter?

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)
Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 20 May 2005 :  11:34:06  Show Profile  Visit D3mon's Homepage
if your right column is 'fluid' (i.e. as big as it needs to be) then if you need to set sizes of divs inside it, you should use percentage sizes, otherwise you'll force the right div to become too big by filling it with lots of stuff.


Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won"
Go to Top of Page

muzishun
Senior Member

United States
1079 Posts

Posted - 21 May 2005 :  14:43:04  Show Profile  Visit muzishun's Homepage
I messed around with the width of the left and right columns for several hours. For some reason I couldn't ever get them to display right. Then, on a whim, I just switched the order of the columns in the code, and it displayed right. Oy! Three days' work could have been solved so easily. But at least it works now.

Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com)
Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 21 May 2005 :  17:26:15  Show Profile  Visit D3mon's Homepage
The best way to learn - the hard way. You won't forget what you leaned so easily now that it took you three days to find out.

Of course, you can have the code in any order you want and still get the same effect, with a little CSS tuning.


Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won"

Edited by - D3mon on 21 May 2005 17:27:21
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Topic Locked
 Printer Friendly
Jump To:
Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.3 seconds. Powered By: Snitz Forums 2000 Version 3.4.07