Textpattern CMS

#1 2005-11-03 15:19:47

igeo

New Member

Registered: 2005-11-03

Posts: 3

CSS IE Rendering Issue I Can't Figure Out

So I have this site: http://www.giovannygutierrez.com Looks fine on Firefox, Opera, Safari, etc…. EXCEPT IE… IE is shortening the header on top and it’s showing a right margin that I don’t explicitly specify. In addition to this I tried to add a negative margin, changing the width and nothing seems to be working. Is there an IE hack that I’m missing? Please help….. Thanks in advance!

#2 2005-11-03 16:50:42

oldi

Member

Registered: 2005-10-14

Posts: 87

Re: CSS IE Rendering Issue I Can't Figure Out

Had a look. using IE 5.5 i see everything aligned left. Not sure whether this is the problem that you mentioned. Do you have the same problem when using IE 6? What have you written in the margin for you wrapper in your css? If you have something like this
Margin: 0 auto;
that might be your problem cos IE5 doesn’t support it. however it should work ok in IE 6. Let me know if this is your problem and i will show you a simple hack how to fix it. If this isn’t your problem, i am sorry but i don’t have any ideas why that happens.

#3 2005-11-03 17:03:46

igeo

New Member

Registered: 2005-11-03

Posts: 3

Re: CSS IE Rendering Issue I Can't Figure Out

Hey Oldi, thanks for the reply…. I tested it with IE6… I know what you are referring to (text-align:center) but that’s not what I’m stuck on…. it’s the margin/padding on IE 6. Here’s a screen shot: http://www.giovannygutierrez.com/temp/Pic.png

I appreciate your time….

#4 2005-11-04 00:02:22

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: CSS IE Rendering Issue I Can't Figure Out

It is happening because you are placing the #header inside the body of the container which has 20px margins. This is part of the old IE box problem. Additionally the same quirk makes the container end up wider than the background area you want to display in.

May I suggest the following?

Change the appropriate lines in your default CSS to:

#container { width: 700px; margin: 0 auto; background-color: white; padding: 0;}
div#header { width: 700px; height: 66px; margin:0; padding:0; background:#000000 url(../images/header-bg.jpg) repeat-x;}

Add the following id:

#content {width: 660px; margin: 0 20px;}

Wrap the page content betwen the end of the #header DIV and the closing BODY tag with a DIV id=“content”

You can then remove the conditional code for IE as it will render the same in FF and IE (untested in others).

Hope it helps.

Last edited by NyteOwl (2005-11-04 00:27:37)

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#5 2005-11-04 04:57:17

igeo

New Member

Registered: 2005-11-03

Posts: 3

Re: CSS IE Rendering Issue I Can't Figure Out

NyteOwl, worked like a charm… Thanks!!!

So if you don’t mind me asking, what is the general rule that you follow so that this doesn’t happen on other layouts… do you usually use a #container without padding and margins and then a #content? I just really want to get this down because what you did makes perfect sense but I thought what I did made sense as well except it caused that glitch. I guess I’m just looking for a Rule Of Thumb or something similar.

Thanks again for your time and I owe you a beer,
-giovanny g.

#6 2005-11-04 05:24:06

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: CSS IE Rendering Issue I Can't Figure Out

Glad to be able to help! Make that Guiness :-)

Sometimes I use a #container or #wrapper div for the entire page, sometimes not. Depends on the page – purpose, layout etc.

What I always try to do as much as possible is to modularize the page: page, headers, contents, menus, footers, ad blocks, etc. In general, these would each have their own #id within the overall body of the page.

Every page is slightly different of course.

Last edited by NyteOwl (2005-11-04 05:26:33)

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;