Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

justinm

macrumors member
Original poster
Aug 15, 2007
93
0
Orlando FL
Hey Guys-

Ok, here is my problem. If you go a website I am making for a friend, (http://digitalcommscorp.com ) in Safari, Firefox, or Opera, there are no issues. But if you try Internet Explorer some things are misaligned. The biggest problem is the body is shifted over to the right. I can't seem to figure this out. If you want me to post any files just let me know.

Thanks a ton,

Justin
 
Welcome to the biggest nightmare in web design ;)

The other browsers you mentioned all follow the CSS spec with somewhere around 90% consistency, whereas IE is only in the 50% range. The most common problems are typically with margins on floated elements, but there's tons of documented bugs. Try to isolate your problem down to one specific element (use an add-on that helps you inspect specific HTML elements or just start putting border: 1px solid red; on things until you find the problem), and then google for the issue you're seeing. For example, searching for "IE margin bug" gives you a ton of info about margin bugs if what you're seeing in IE is a margin different from the other browsers.

I don't have access to IE on all my machines, and I imagine not everyone here does. It might help if you can post screenshots.
 
Here are some screenshots. The top picture is the good site, and the bottom is in Internet Explorer.

Thanks!
 

Attachments

  • Picture 1.png
    Picture 1.png
    252.1 KB · Views: 79
  • site1.jpg
    site1.jpg
    11.2 KB · Views: 221
I would think that the easiest thing to fix this would be to put it all in a wrapper.
 
You would put a div around all the content, and then set the width and margin on that. Everything else inside it -- the nav, the main graphic, the content area -- wouldn't each need to be positioned then. For example,

HTML:
<div id="wrapper">
...all your stuff...
</div>

Then in the CSS...

Code:
#wrapper {
  width: 960px;
  margin: 10px auto;
}

This will give you a container that's 960px wide, with a 10px margin on the top and bottom and auto margins on the left and right (which will center it on the page). Adjust the numbers as you see fit.

EDIT: I should also mention that the "good" screenshot you posted looks like it has some width consistency issues as well.
 
That thread titles sends shivers down my spine.
One day… I will get around to making my sites IE friendly.
In the back of my mind I think that one day, IE 8 will be commonplace and I won't need to worry.
</end dream>

It's a pain.

You could manually put IE correcting code in your CSS file (that only targets IE), might take a while.
Does anyone know of any smart tools what will look at a CSS file and automatically insert IE correcting styles?
 
Say thanks to Ballmer, besides IE is "standard compliant"

It is important that we have a browser that embraces (Internet) standards but also allows us to have innovative extensions, even before the standards bodies go there."S.Ballmer
 
Say thanks to Ballmer, besides IE is "standard compliant"

I would say if you hold a 90+% market share (such as IE did at one time), you can set whatever "standard" you want. Whether its a good or bad "standard" doesn't really matter when you have market share.

Now that IE's market share is dropping (below 80% now), I think we will see more compliance with web standards.

Unfortunately for me, I use websites daily that are coded for IE only, many of which use ActiveX. Grr.
 
I would say if you hold a 90+% market share (such as IE did at one time), you can set whatever "standard" you want. Whether its a good or bad "standard" doesn't really matter when you have market share.

Now that IE's market share is dropping (below 80% now), I think we will see more compliance with web standards.

Unfortunately for me, I use websites daily that are coded for IE only, many of which use ActiveX. Grr.

IMO, they can set whatever standard they want, but along with security, site display is one of the reasons IE is being abandoned. MS got used to setting their own rules because they were the monopoly at one point so expected everyone else to play along, designers included, now that they've got competition from all sides (firefox, google, opera, etc.), they're seeing their strategy fall apart.
 
Does anyone know of any smart tools what will look at a CSS file and automatically insert IE correcting styles?

Look here:

http://www.sohtanaka.com/web-design/css-fixes-tools-hacks-cross-browser-solutions/

Then read this:

Internet Explorer 6 was the first fully CSS Level 1-compliant version of Internet Explorer. Windows Internet Explorer 8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some features of CSS 3.
View Features

In terms of tools like you asked remember there are at least 3 versions of CSS to account for, and not all MSIE browsers support all features - not even V8. So Microsoft has dug itself a big hole. Of course other browsers aren't perfect, but most of them support both CSS1 and CSS 2.1 these days (2.1 being the "standard" at present date and time) and nobody should be using CSS 3.0 if you want wide support.

View CSS 2.1 and CSS 3 support by browsers (excellent, a must read to see what level of CSS is supported per browser type)

I included the links to help you identify problems in advance.

-jim
 
Nice site btw.

First off validate your code. You have 8 errors. It normally helps.

Other stuff I do when trying to solve this sort of problem:

Set the whole thing in a frame or wrapper (as mentioned above)

Identify the element with webdeveloper plugin for firefox and reset it's margins. If it doesn't work, reset every elements margins and work on the float and positioning of of elements.

If I'm sure I've got solid code, I would probably have a look at Position is everything or conditional commenting.

As a last resort, say you don't support ie6. I have several sites that break in ie6 but work in ie7. Why support it if microsoft doesn't?

Just some random thoughts...Good luck.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.