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:
Thank you.
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:
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
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.
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.
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?
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.
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.. 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 :?
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.
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.. 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.
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.
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 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.
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![]()
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?
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
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.
Pixel Problem in IE and Alignment Problems in IE and Firefox
Ed your missing the point slightly
Hmm... so I was closer than I usually am....
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.
Pixel Problem in IE and Alignment Problems in IE and Firefox
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">
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.
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!
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:
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/
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.