19 replies [Last post]
xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

For some odd reason, the header for my layout is being pushed to the left one pixel in Internet Explorer, but it looks perfectly fine in Firefox. Also, I am new to coding layouts only in CSS, so I have do not really know as to how you code the text box areas to be floating where you want it to be. I've looked through tutorials, but the tutorials didn't seem to work. The layout can be viewed here:

http://night-star.net/test

Thank you.

sperks
Offline
Enthusiast
New York
Last seen: 15 years 29 weeks ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

I think you main problem is with using padding of em and width of px. Width should only include the content and not the padding. mixing up em and px like this will make it extremely difficult to calculate.
Correct: padding + width = total area

That said, IE does add it the other way around
IE: padding + width = width

It might seam at first glance that IE has it right, but there's rationale behind it (I can't remember what it is, but it made sense when I read it!). :roll:

xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

I figured out a way to get the navigation to look correct, or at least as close as I can get it to be looking correct. However, there is still that one pixel problem in Internet Explorer (the header is moved one pixel to the left) and I have trouble placing my content section correctly in Firefox. I've gotten the content section to be placed correctly in IE, but not in Firefox. I do not have any ideas about how I should place it since I've tried what I know and it hasn't worked. I also replaced all ems with pxs just to make it easier for me right now.

It's still at http://night-star.net/test

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Pixel Problem in IE and Alignment Problems in IE and Firefox

put IE(6) into standards mode with a full doctype complete with URL and it will follow the correct box model.

xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

I'm not really clear on what does the box model have to do with my layout? My main concern right now is to have the content section to be placed correctly on my layout. Thank you for the tip though.

Anonymous
Anonymous's picture
Guru

Pixel Problem in IE and Alignment Problems in IE and Firefox

xxangel wrote:
I'm not really clear on what does the box model have to do with my layout?
It doesn't really matter that you don't understand it. These people are pretty much experts and it would pay you to listen. Without you at least taking the first step to proper coding for them to help would be completely pointless. Render in standards mode by using a proper doctype and you may get help. Ignore the first step and there's no point in trying a second.

It also could also be a rounding error. Use even numbers for your widths when you center them. I didn't look too deep into it (for the reason stated above) so don't count on that being the problem.

xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

I didn't know that not having the full doctype would affect the page. I did what was said (I gave a full doctype, but I do not understand how to put the page in standards mode for IE 6.Innocent. However, if someone could explain what giving out a full doctype and having the box model work does in my situation, that would be helpful as well.

I don't really understand what you mean by using even numbers. I counted everything pixel by pixel in my graphics program, but I don't know if that would really relate to what I'm doing. By saying even numbers, do you mean don't use odd numbers, such as 7px?

Edit: I got the pixel problem fixed in a way (the header aligned to the left) by using another div before that with the background. However, that background doesn't seem to keep on repeating all the way day the page (on Firefox, that background doesn't go down the page at all, so I have the same background in the body and in this div). If I have it repeat all the way down, it will cover up the other background so it will still look correct in Firefox and Internet Explorer. I don't know how to do this any other way :?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Pixel Problem in IE and Alignment Problems in IE and Firefox

xxangel,
I apologize, my statement was only a generic one more directed to sperks in effort to show how to correct the major differences between IE and standards compliant browsers in regards to the box model.

While the full doctype may not have helped with this particular problem, it's important to note that it should be used in every page.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 26 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Pixel Problem in IE and Alignment Problems in IE and Firefox

xxangel wrote:
I didn't know that not having the full doctype would affect the page. I did what was said (I gave a full doctype, but I do not understand how to put the page in standards mode for IE 6.Innocent. However, if someone could explain what giving out a full doctype and having the box model work does in my situation, that would be helpful as well.

IE renders in "strict" mode when you give it the right doctype. You have that now so it will do so. You should modify your <head> tag to look like this, though:

<html xmlns="http://www.w3.org/1999/xhtml">

When not in strict mode, IE uses the wrong box model to determine with and heights of block elements, and will look different in IE than compliant browsers.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

Oh, okay. I have added that in. Thanks for explaining about what these things do.

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

Pixel Problem in IE and Alignment Problems in IE and Firefox

Ed you're once again on the xml name space declaration kick as discussed before Smile if your're going to quote this attribute it would be best to include the only really important part which is the lang type.

xml: lang="en" or lang="en" for html or both if you wish for XHTML1.0
(insert lang code of choice).

But as we have covered before this set of attributes has no bearing upon validation or doctype switching.

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 26 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Pixel Problem in IE and Alignment Problems in IE and Firefox

Hugo wrote:
Ed you're once again on the xml name space declaration kick as discussed before Smile

But as we have covered before this set of attributes has no bearing upon validation or doctype switching.

Well it's true that it doesn't, but I'm just going by my references that say it is supposed to be there. I don't believe I actually said it was necessary for it to validate, just that it "should" be like that.

I will recheck my references though, and get back to you. I certainly don't want to be giving incorrect or bad advice, and I do appreciate it when people point it out when they believe I'm doing so.

Is this the proper forum to be discussing this in? Should I start a thread in a more appropriate place?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Pixel Problem in IE and Alignment Problems in IE and Firefox

If you want to, feel free to PM me or Hugo, or start a new topic in Site Discussion Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

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

Pixel Problem in IE and Alignment Problems in IE and Firefox

Ed your missing the point slightly my last comment was to re-affirm that the declaration is not a requirement for validation or switching capabilities, and realise that you were not claiming it was necessary for validation( I think that was cleared up last time I mentioned it); however the actual point is that what is important is the lang attribute which has been missing in all examples. If you're going to add any attribute to the html tag it should be this one.

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 26 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Pixel Problem in IE and Alignment Problems in IE and Firefox

Hugo wrote:
Ed your missing the point slightly

Hmm... so I was closer than I usually am....

Quote:

however the actual point is that what is important is the lang attribute which has been missing in all examples. If you're going to add any attribute to the html tag it should be this one.

That's correct, and I won't bother giving you the excuse as to why it happened, because it isn't a good enough one to impress even me.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

Hugo wrote:
xml: lang="en" or lang="en" for html or both if you wish for XHTML1.0
(insert lang code of choice).

I'm a bit confused. Am I supposed to insert that in this code?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Pixel Problem in IE and Alignment Problems in IE and Firefox

No, leave the DTD as it is. The code suggested by hugo goes in the <html> element.

Verschwindende wrote:
  • CSS doesn't make pies

xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

Okay, I've added that.

The only question I have now (I figured out how to fix quite a few of the problems. Well, not really figure out, but find a way to overlap problems so they won't show) is how do I make the footer go to the bottom (I have the footer at the bottom, but it is up 1px and I don't know how to get rid of that 1px)?

Thank you!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 16 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Pixel Problem in IE and Alignment Problems in IE and Firefox

Site is inaccessible for me at the moment but I think you want this:

http://www.themaninblue.com/experiment/footerStickAlt/

Verschwindende wrote:
  • CSS doesn't make pies

xxangel
Offline
Regular
Last seen: 14 years 4 weeks ago
Timezone: GMT-4
Joined: 2006-03-14
Posts: 43
Points: 0

Pixel Problem in IE and Alignment Problems in IE and Firefox

thepineapplehead wrote:
Site is inaccessible for me at the moment but I think you want this:

http://www.themaninblue.com/experiment/footerStickAlt/

Thanks for the link. I tried it, but for some odd reason, it didn't work with me. My footer went up on the page.

I'm okay with my current code. The only thing is that there is that 1px. If I have more content and it pushes the footer down, that 1px disappears. But, without that content, the 1px is there.