CSS in Internet Explorer

Python

Ive just started playing around with CSS. Im designing it generally for Firefox however every so often I look at my design in IE.

In firefox everything looks as it should whereas in internet explorer its all over the place...

Either Im coding my CSS wrong or this is just another reason why people prefer firefox to ie...

gilly

Can you post some of the code?

Nuvo

Internet Explorer has very poor support for W3C standards and it often means that you need to use some simple hacks to get around things.
If you're using floated divs instead of tables, you might find that it does look a bit iffy in IE but it'll be fine in other browsers.
The easiest way to fix this is to modify the floated div so that instead of looking like:
[html]<div class="myclass">[contents]</div>[/html]
It looks like:
[html]<div class="myclass" style="display: inline;">[contents]</div>[/html]
For some reason, you need to set it's display property to inline in order for it to work with IE as it should.
This doesn't break your code at all, so you don't have to worry about messing up your code so much

If that doesn't help, I'd suggest looking on google for sites like http://www.positioniseverything.net/ (poorly designed, but has a good number of browser bugs listed and how to get around them).

Python

Ok I tried that on my div's and then it just messes it up for firefox...

Ive got in the style:
[HTML]div.container
{
position:relative;
width: 760px;
height: 100%;
border-left: 0.5px solid #999999;
border-right: 0.5px solid #999999;
background-color: white;
margin-left: auto;
margin-right: auto;
}

div.header
{
width: 760px;
height: 60px;
background-image: url(templates/images/header_bg.jpg);
background-repeat: x;
margin-left: auto;
}[/HTML]

Then [HTML]<div class="container">
<div class="header">
<a href="index.php"><img src="templates/images/logo.jpg" border="0"></a>
</div>
</div>[/HTML]

looks fine in firefox but in ie everything is on the left hand side instead of center of page. and if i set the display to inline then in ie it stays the same but in firefox it throws everything off...

Nuvo

Oh... I think I see what you're trying to do now
If you want to center a site, you should use position: absolute; since position: relative; only positions things relative to their origional place within the document.
For example, if you had a site that was something like 622 pixels wide, you would do something like this:

.container { 
position: absolute; /* Absolute positioning lets you place the element almost anywhere you like */
left: 20%; /* Guess work to nudge it into the middle... */
right: 25%; /* More guess work... not essential, but I did it anyway! */
top: 5px; /* Nudge it down by 5 pixels... not required but this is stolen from something I was coding :] */
width: 622px; /* I know it's this wide because my banner / logo is this wide. */
}

You should be able to center your template with absolute positioning, but don't use it for content inside a div or other html element since it won't work in any browser.
In those situations, you'd use relative positioning.

Python

Ahh I see

Is there a better way than just guessing the left and right percentages?

Python

Also on the right hand side of the header there is a small gap about 1 px where it isnt right up against the container. only shows in firefox... if i set it to left: 1px; then it takes away the gap in ff but in ie the gap appears...

Nuvo

I don't know really.
If you used pixel widths, you'd be really stuck since you'd have to know what resolution the user had in order to tell how many pixels in width theier system was set to.
If you were using fluid design (a design that can stretch and squash to fit the size of the window it's viewed in), you'd have less guess work since all you'd have to do is subtract the width (lets say it's 50%) from 100 and then divide what's left by 2... something like:
(100 - 50) / 2 = 25 (or 100 - 50 = 50, 50 / 2 = 25).

If you're going to have a border of any width, you should take into account that it may slightly change things since you're adding usually to the width of the item you're adding it to.
You only really need to know the left percentage really with fixed width templates since the right percentage can't effect the width like it can with fluid templates, but I just put it in just in case

Python

Ok.. I solved the gap problem...

Its annoying... IE cant use 0.5px borders

Positioning in CSS is really annoying...

Chroder

You don't need to use absolute positions (I usually find that using absolute positions makes it even harder to accomplish cross-browser accessibility).

The centering problem is just because IE doesn't know what 'auto' means with 'margin'. You need to have one wrapper div that has a width of 100%, but with 'text-align' to center -- this will center the content within with IE. Then another wrapper the sets the width of your page, and resets 'text-align' to left.

#wrapall { text-align: center; }

div.container {
    /* .. your css .. */
    margin-left: auto;
    margin-right: auto;
    width: 760px;
    text-align: left;
}

...

<div id="wrapall">
    <div class="container">
        ... your page content ...
    </div>
</div>

Python

aha I see

Didnt think of that. Thanks

kink

mmmmmmm waatch oout for that relative positioning browsers interpret that differently try using left or absolute positioning

xPureNLx

Their are different CSS tags for both IE and Firefox, esspecially IE7.x is very vulnerable for CSS. Try to make a textbox and resize it using standard methods, you'll see the difference

daboss

eh? my experience is that ie is much more forgiving on the css coder as compared to ff. i guess that only applies to newbies.

for those who are very good at css, they'll probably prefer ff...

xPureNLx

I'm no CSS-pro, really, but I've had several little conflicts using IE7.x and CSS together. Firefox handled everything okay ^^