Archived

This topic is now archived and is closed to further replies.

Why is Internet Explorer so bad?

This topic is 5048 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I knew that title would get someone''s attention. I''m trying to write a website for a program of mine, and I''m having trouble doing the simplest thing in the world. In Mozilla, my website looks fine. In IE, it looks almost identical. Except for one thing - the logo isn''t centered! Can anyone tell what''s wrong with my CSS (or what IE bug I have exploited and how to work around it)? I did short search and there doesn''t seem to be any known problems with horizontal centering in IE6. Any help is much appreciated. PS: If you think my CSS code is a bit weird, you''re right. I originally had just a #logo id, which had everything it currently has, plus the centering. But I hoped (incorrectly) that IE was confused by my combination of positioning and centering, so I created another inner <div> tag. The official zorx website

Share this post


Link to post
Share on other sites
I don't really see anything, including the part where you center it :D. Although I didn't take a look at the external css file. Btw, don't use /'s in serious descriptions/logs/stuff (), it looks really unprofessional and bothers me a lot.


[edited by - brassfish89 on February 19, 2004 6:55:21 PM]

Share this post


Link to post
Share on other sites
Here''s all the relavent parts. The linked style sheet is a direct link to one of w3''s "core" style sheets.
   
...
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Ultramarine" type="text/css">

<!-- This is how the web page differs from the standard "Ultramarine" stylesheet -->
<style type="text/css"> <!--
...
.center {text-align: center}
...
#logo {position: absolute; left: 0; top: 0; right: 0em; height: 100px}
-->
</style>
...
<div id="logo">
<div class="center">
<img alt="Discontinuity logo" src="../logo.gif">
</div>
</div>


The official zorx website

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
You''re approaching this incorrectly. CSS doesn''t have a notion of centering boxes, just of text!

To position a box you need margins, specifically the left and right margins should be set to auto on your image so they''ll equally distribute. i.e.

img {display: block; margin: 0 auto;}

actually I just found this link!

http://www.w3.org/Style/Examples/007/center.html
how handy :-). Furthermore, the incongruency between IE6 and Mozilla is probably due to the DOCTYPE you''re using. It''s not capitalized and I''m not sure it''s correct, but it needs to be otherwise the browsers switch to a compatibility mode in which they sorta guess what you want (not handy for a new page at all).

just search for DOCTYPE switch on google.

Share this post


Link to post
Share on other sites
I think it''s the way the boxes are rendered between browsers, most likely the width of the box. Give this a shot and tell me what happens:
.center { text-align: center; width: 100%; } 

Share this post


Link to post
Share on other sites
Oh no! It takes me forever to update the website (for which I have to boot into linux, because I don''t have an ssh client in Windows) and then forever to test it on IE (for which, of course, I have to boot into Windows), after all that, its off-center (though it was dead-center in Mozilla)! What did I do wrong this time? While I wait for a reply, I''m going to look for an ssh client in Windows.

The official zorx website

Share this post


Link to post
Share on other sites
Well, I got rid of all the /''s, but has no-one figured out why the title is off-center? In Mozilla it appears perfectly. I even tried adding a few unnecessary CSS properties to no effect. BTW, which logo do you think is better, the current one or the one found here. You see, I wrote a random texture generator for POV-Ray (the raytracer for which Discontinuity is written for and in which my logo was mad) and I had trouble deciding between these 2 (out of 500).

The official zorx website

Share this post


Link to post
Share on other sites
You know what else is weird? I just tried it in Mozilla for Windows and it looks completely different from Mozilla for Linux. Mozilla for Linux and Internet Explorer look pretty much the same (besides the logo centering issue), while Mozilla for Windows, though the logo is centered properly, uses this really ugly, smaller, serif font.

The official zorx website

Share this post


Link to post
Share on other sites
The logo doesn''t look centred on any browser I use!

To centre an image in a containing block, use text-align:center, because an image is an inline object and counts as part of the text. However, to centre a block (eg. a DIV, that might contain your image) within its container, you need to set both sides as having margin:auto.

Personally I''d advise using your own style sheet written from scratch. That way, you can watch and tweak the effects of each individual rule, and learn the differences between the browsers.

[ MSVC Fixes | STL Docs | SDL | Game AI | Sockets | C++ Faq Lite | Boost
Asking Questions | Organising code files | My stuff | Tiny XML | STLPort]

Share this post


Link to post
Share on other sites
Another way to center the logo is:

div.logo_container {
    width: 100%;
    background: url(image_file) no-repeat top center;
    height: [height-of-image]px;
}


[edited by - twanvl on February 20, 2004 7:18:50 AM]

Share this post


Link to post
Share on other sites
quote:
Original post by TravelingCoder
Hey, there are some people who complain about websites not rendering correctly in Mozilla too.


That is because people write their sites to conform to IE, since a lot of people use it. But Mozilla conforms to all HTML 4.0/CSS2 standards, where IE does not. So if doesn't work in Mozilla, it is a hack to make IE work.

[EDIT] Make that: Mozilla is the most standards compliant.(just in case it misses one or two)



First make it work, then make it fast. --Brian Kernighan

The problems of this world cannot possibly be solved by skeptics or cynics whose horizons are limited by the obvious realities. We need men and women who can dream of things that never were. - John Fitzgerald Kennedy(35th US President)

Do not interrupt your enemy when he is making a mistake. - Napolean Bonaparte

[edited by - CaptainJester on February 20, 2004 7:24:48 AM]

Share this post


Link to post
Share on other sites
IE and Mozilla (both in Windows) render the pages identically to me, except for the fonts which are all different. I think the reason is you don''t specify any font information in your styles. The text is within <p> blocks but there''s no font information associated with them. I''d suggest entering the font stuff yourself in your <style> section.

~CGameProgrammer( );

Screenshots of your games or desktop captures -- Post screenshots of your projects. There''s already 134 screenshot posts.

Share this post


Link to post
Share on other sites
I got it solved.
Kylotan - the reason it didn''t look centered on any browser is because I was working on it and I left it in a non-centered state overnight.
If anyone''s curious about how I solved it, look here. To tell the truth, I haven''t a clue how it was done, but it works, and that''s what matters.

The official zorx website

Share this post


Link to post
Share on other sites