Why divs and ie don't mix

[Phat-Cat]

#1 it's ie.....

#2 divs always show up completely different in ie, than in firefox (to name one), although when used with tables it works better.

#3 my figured reason being, is because in ie the vertical scrollbar is always there even when not in use and in ie the boundary off the browser on that side of the browser starts from the closest edge to the page where scroll bar starts, in ie it's different even when you tell the browser to not let vertical bar show, the content on the page stays in the messed up spot like as if though the vertical scrollbar was there, so angry AAAAAAAAAAAAHHHHHH!!!!!! grr... :td: :yell: 8-X :bah: ---there is no emoticon to express how i feel....

 

[JYM]

I hate IE more than you hate it. For one of my layouts, which I fixed, IE6.0 would put the elements literally all over the place. I tried everything... then rather accidentally I changed the width of the right sidebar 1px smaller... and EVERYTHING was fixed. I spent hours trying other things and in the end I just need to make it 1px smaller for it to work.

IE is so buggy that instead of using hacks in the CSS that select IE, (for example html * { ), I simply include an iehacks.css file, which targets IE6.0 and under.

Here's the code:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->

 

[paaaaaaaaaa]

Thats a great idea. I may actually use that idea. I normal spend quite a while getting my css code to work for both without hacks though.

IE does have some catching up to do with css but IE aint as bad as everyone makes out. Infact there are a couple IE features that I prefer. But only a couple mind.

 

[Keral_Patel]

Yeah man. I always hate when the time comes to open my site in IE.

I usually develop it in FF and when I open it in IE it shows everything wrong

Same things goes for li tags too.

 

[LazyD]

I totally agree, CSS and IE is a recipe for disaster... Im the same as Nick, I develop in FF and see what mangled mess IE shows up later.... Infact, I even posted a thead in the development forum http://www.namepros.com/website-development/225778-css-internet-explorer-help.html about IE mangling my site when it displayed fine in FF... IE, I hate you.

 

[mikesherov]

hi guys

In general, I agree. However, IE isn't going away any time soon. THe best way to handle this IMHO is to install the FF extension "IETab", and periodically switch between the ie and FF version of your site. With this extension installed, it only takes one click to switch between the IE and FF version of a page, and in general will train to quickly see both sides of the coin before thinking your done.

 

[LazyD]

Thank you for the heads up Mike, im definitely going to pick that up. I know everyone complains about different browsers interpreting things differently, but cant we even come to a common standard on things like margins? I mean, every browser seems to have a different default margin and frankly its pissing me off...

JYM, thats an awesome trick, im going to be clueless though and ask, is that all there is to it? Is there more required?

 

[adam_uk]

#1 it's ie.....

#2 divs always show up completely different in ie, than in firefox (to name one), although when used with tables it works better.

#3 my figured reason being, is because in ie the vertical scrollbar is always there even when not in use and in ie the boundary off the browser on that side of the browser starts from the closest edge to the page where scroll bar starts, in ie it's different even when you tell the browser to not let vertical bar show, the content on the page stays in the messed up spot like as if though the vertical scrollbar was there, so angry AAAAAAAAAAAAHHHHHH!!!!!! grr... :td: :yell: 8-X :bah: ---there is no emoticon to express how i feel....

if divs are rendering differnetly in firefox than they are in ie, then its your code. EVERY project i have done since i started using xhtml/css I have used divs, p tags, li, ul, ol, pre, em the lot and i have always managed to get it to look the same in all browsers.

its a matter of understanding the code, understanding css and knowing what options there are to tweak the code. you can still get it to validate and look the same cross browser.

it sounds like you need to expand your css/xhtml knowledge further to understand how to over come hurdles like this.

 

[Dan]

If it doesn't show up correctly in all browsers, it's not the browser's fault; it's yours.

Default margin shouldn't be annoying:
* { margin: 0; }

So hard to fix..

 

[ApocComputing]

If it doesn't show up correctly in all browsers, it's not the browser's fault; it's yours.

how is it your fault that the browser doesn't interpret code correctly?

IE sucks and almost everyone knows it. you would think that they would do something about it but i guess not. I guess everyone should use FF/Safari..

 

[Dan]

Apoc, how is it the browser's fault?

Everyone knows IE has loads of problems with CSS; nothing that can't be fixed or done correctly.

If you don't code it work right, then obviously it's not going to just work right.

IE is doing something about it; and even if they don't, it doesn't matter.

You think just because you know about and use FF/Safari, everyone else does.

 

[JYM]

Dan, stop arguing with every person you meet. Ask any true CSS designer out there, unless you make the most basic of layouts, there is no way to make a site that will look identical in ALL browsers. With IE hacks, basically what you are doing is trying to make it look similar. In fact, I don't like to call it "hack" because the way I do it, with the code that gets the stylesheet if the browser is IE x, then all I am doing is adding a little extra code to make it look nicer on IE.

LazyD, it does work. lte means less than or equal, so essentially you can replace the 6 with a 5 and it will target IE5 and lower.

IE and FF are definitely not similar at all... even a simple <p> tag will show you the difference in spacing between the two. I code, then verify my design with FF. Once the FF version looks good, I then check it in IE and see what needs fixing. If I start by making it look good in IE, I'm sure it'll look somewhat decent in FF, but just not the same because of the strange methods I had to use to make it work with IE. Then... I'd have to do Firefox hacks? That would make no sense... write wrong CSS, so then you can use "hacks" to make it right on a good CSS browser.

 

[LazyD]

JYM, so your if statement goes into my html/php correct?

 

[JYM]

LazyD: yes, it goes right under your link to your stylesheet. It has to stay within the header, and it must go under your stylesheet so that it can overwrite some of the attributes provided in your normal stylesheet.

 

[LazyD]

JYM, awesome, thank you so much, that helps alot.

 

[JYM]

Glad to be of service... I just hope more people know about this option instead of having to seriously use IE selector hacks in their normal stylesheet... It really makes it messy.

 

[Dario D.]

Always, always, always build your site to be compatible with IE first. If you develope for FF, you're excluding the *majority* of your visitors, and will have a nightmare getting it to work for them also, once it's done.

 

[abcde]

i love IE. wat are u all talking about, over 80% of us using it.

 

[JYM]

Well, when you weigh Firefox versus Internet Explorer... FF beats IE in many features. Why do you think that most of the internet-savvy internet population uses Firefox? Visit digg or slashdot or any of those websites and you will find that most of them use Firefox. The only problem is, there is no way the majority of the internet will be as tech-savvy so they just use what they have to begin with, which is IE.

I suppose you COULD design a site using CSS that works in IE, THEN make adjustments for Firefox... but you will get bad CSS code. You should write CSS the way it should be and not have to resort to doing alternatives in order for it to work in IE6.0. In fact, Microsoft will issue a windows update and all users using IE6.0 will be upgraded to IE7.0, which has MUCH better CSS support. Therefore, making a design using Firefox as your test browser and then configuring a CSS file for those CSS-unsafe browsers is ideal. Why do you think all the CSS coders do this?

 

[discobiscuits]

I code my websites and preview them in IE... never firefox. Don't get me wrong, I love Firefox and all, but you have to make it look good in IE before checking FF.

www.upupmedia.com

This one took a while to get right, had a bunch of a trial and error, but got it after a while. Validating the code with W3C's HTML checker, and it seemed to fix all the IE issues I encountered.

One major pain I have with IE is that you can't make something like this...

800px content area.

4 200px blocks floating left.

It shows up like this in Firefox.

--------800px--------
200px200px200px200px

But in IE, it does this crap...

--------800px--------
200px200px200px
200px

Annoys the hell out of me, I swear...