Firefox Design Great - How in IE?

November 12, 2008

I got this design in Firefox by using CSS. I used divs with absolute and relative positioning, but I have no idea how to get the same look in IE. Does anyone know how I can achieve the same look, with 5 divs in IE?

mod edit: huge image file removed to conserve bandwidth

haku · November 12, 2008

Depends on which version of IE you are talking about. But generally, if you try to use padding more than margins, IE will behave closer to FF. Not always though.

Or you can use conditional comments. It's the easiest way to make IE do what it should, though it takes a little more code that way.

rarebit · November 12, 2008

Do you want to show some code, should basically be the same, maybe a few tweaks.

Q. Can you also display a bigger image next time please? Ahem...

foxtrotwhiskey · November 12, 2008

Please convert your images to a web safe format like jpeg/png before uploading! BMP is an uncompressed format and that image you posted is 3.6 megs!

November 12, 2008

I know I can use conditional comments, but I am unsure how to make this same layout in IE.

I do not have the code with me right now; I will post it later.

Please convert your images to a web safe format like jpeg/png before uploading! BMP is an uncompressed format and that image you posted is 3.6 megs!

Sorry about that.

haku · November 12, 2008

I know I can use conditional comments, but I am unsure how to make this same layout in IE.

That's the point - you use conditional comments to adjust your layout to work in IE. The code shouldn't be that drastically different.

November 13, 2008

The CSS code:

body { background: black url("../Graphics/background.png") repeat-x; }

#all { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 1% 0 1% 12.5%; margin-left: 12.5%; width: 75%; border: 2px solid black; }

#top { position: absolute; top: 0; bottom: 85%; left: 0; right: 0; background: orange; overflow: auto; margin-bottom: 4px; }

#login { position: absolute; top: 0; bottom: 95%; left: 70%; right: 0; margin-bottom: 4px; font-size: 75%; }

#login input { margin: 0; padding: 0; font-size: 75%; }

#left { position: absolute; top: 15%; bottom: 5%; left:0; right: 80%;  background: silver; overflow: auto; margin-right: 4px; }

#content { position: absolute; top: 15%; bottom: 5%; left: 20%; right: 20%; background: white; overflow: auto; }

#right { position: absolute; top: 15%; bottom: 5%; left: 80%; right: 0; background: silver; overflow: auto; margin-left: 4px; }

#footer { position: absolute; top: 95%; bottom: 0; left: 0; right: 0; background: orange; overflow: auto; margin-top: 4px; }

div { text-align: center; }

hr { color: #000000; }

td { text-align: center; }


/* Ids */
#left a { font-family: arial, sans, sans-serif; font-size: 75%; text-decoration: none; color: red; }
#left a:hover { text-decoration: overline; color: black; }

/* Classes */
.virtual_samurai { margin-bottom: 5px; }
.indent { margin-left: .25in; text-align: left; }

How the previous code looks in IE7:

height=300 width=400 http://www.fmtabor.k12.ia.us/images/hosting/2.JPG[/img]

And a smaller version of the firefox view, for easy comparison:

height=300 width=400 http://www.fmtabor.k12.ia.us/images/hosting/1.JPG[/img]

SuperBlue · November 13, 2008

I won't start looking into your code, but you may want to have a look at these position based layout examples.

I do expect to add some more later on. The layout you are trying to make however would be something like below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>SE Friendly Absolute Positioning Example</title>

    <style type="text/css">
     html, body {
      margin: 0;padding: 1em;
      height: 100%;
     }
     #Basement {
      position: relative; /* Enables positioning inside the wrapper */
      width: 75%;
      min-width: 800px;
      max-width: 1600px;
      min-height: 700px;
      margin: 0 auto; /* Normal way to center the Page AKA wrapper */
     }
     #CenterContent {
      position: absolute;
      top: 135px;right: 20%;bottom: 135px;
      width: 60%;
      overflow-y: scroll;
       background: green;
     }
     #LeftContent {
      position: absolute;
      top: 135px; /* Height of the Header */
      left: 0;bottom: 135px;
      width: 20%;
       background: silver;
     }
     #RightContent {
      position: absolute;
      top: 135px; /* Height of the Header */
      right: 0;bottom: 135px;
      width: 20%;
       background: silver;
     }
     #Header {
      position: absolute;
      top: 0;left: 0;
      width: 100%;height: 135px;
      min-width: 200px;
       background: gray;
     }
     #Footer {
      position: absolute;
      bottom: 0;left: 0;
      width: 100%;height: 135px;
      min-width: 200px;
       background: gray;
     }
    </style>

  </head>

  <body>
    <div id="Basement">

     <div id="CenterContent">
      <h1>SE Friendly Absolute Positioning Example</h1>
      <p>This is the content.</p>
     </div>

     <div id="LeftContent">
      <p>Left Navigation</p>
     </div>
     <div id="RightContent">
      <p>Right Navigation</p>
     </div>

     <div id="Header">
      <p>Header</p>
     </div>

     <div id="Footer">
      <p>Footer</p>
     </div>

    </div>
  </body>

</html>

You should easily be able to modify it in any way you want.

Also, avoid padding on wrappers, instead use another wrapper around the text with a smaller width. Otherwise the padding just gets added to the width of the box, which is very impractical to work with in percentage based layouts.

The need for conditional comments in IE7 is almost non-existent, and i haven't had to use them as of yet.

November 13, 2008

Thank you so very much for your help; it is almost perfect for what I needed. No I will just tweek it to reduce whitespace.

Thanks a lot!

haku · November 14, 2008

Ahh, I see both you guys are using absolute positioning. That's where your problem lies. It's a common mistake amongst newbies. It's an easy trap to fall into because it seems like it should be easy, but the further you get into your design, the harder it is to fix the problems that arise.

I suggest spending some time doing a few tutorials on layouts that don't use absolute positioning. It will make your life much easier.

SuperBlue · November 14, 2008

Ahh, I see both you guys are using absolute positioning. That's where your problem lies. It's a common mistake amongst newbies. It's an easy trap to fall into because it seems like it should be easy, but the further you get into your design, the harder it is to fix the problems that arise.

I suggest spending some time doing a few tutorials on layouts that don't use absolute positioning. It will make your life much easier.

Like what? i sure haven't encountered problems with AP.

Stop writing about stuff like you are experienced in the field, when you clearly have no idea. You also suggested using Conditional Comments to solve the problem, which is intirely unnessosery and one of many bad-practices.

Relying on browser bugs and browser specific coding to get your layout to render the way you want, when good standard based methods exists, is just creating a mess in your CSS, making it harder to maintain.

AP is actually one of the best ways to layout pages, at some points better then using floats.

haku · November 15, 2008

Like what? i sure haven't encountered problems with AP.

For an example, you position one div absolutely, and another one below it. Then the content in the top div becomes too much for it, but in expanding, it falls below the div below it, since the div below is fixed in position and can't adjust to move.

There are many other problems that can arise from it as well - I know this because I fell in the same trap when I was a newbie. I kept trying new workarounds and new workarounds until I would finally either hack something together that half-ass worked, or got to a point where I just couldn't proceed any further.

Stop writing about stuff like you are experienced in the field, when you clearly have no idea.

I AM experienced in the field. I've been doing this full time for a number of years now. What I say I say from experience, not from guessing.

You also suggested using Conditional Comments to solve the problem, which is intirely unnessosery and one of many bad-practices.

Since you feel the need to quote out of context, I'll have to give the rest of the context:

Depends on which version of IE you are talking about. But generally, if you try to use padding more than margins, IE will behave closer to FF. Not always though.

Or you can use conditional comments. It's the easiest way to make IE do what it should, though it takes a little more code that way.

I wasn't recommending it, I was giving it as an option. I prefer not to use them myself, as they can bloat code. But that being said, I've found them to sometimes be unavoidable, such as when dealing with the double margin bug on floated elements in IE6. If you know a way around it that doesn't require a conditional comment, then honestly, please tell me, as I'd love to know it.

I also give the option to newbies, because a simple comment like 'try to avoid margins' isn't very specific, and can leave someone with no more clue as to how to fix their problem than if no comment was made at all. When going for the lesser of two evils, I think that conditional comments are not all that bad. I'd rather give a guy a reasonable option that he can use to fix his problem, than leave him frustrated with a broken site and no idea on how to fix it.

xtopolis · November 15, 2008

BlueBoden,

haku is very right here. Relative positioning is a much better answer, especially for the design that the OP's site is portraying.

Here are more tutorial sites.

http://www.cssplay.co.uk/

http://css.maxdesign.com.au/index.htm

http://www.alistapart.com

SuperBlue · November 15, 2008

BlueBoden,

haku is very right here. Relative positioning is a much better answer, especially for the design that the OP's site is portraying.

Here are more tutorial sites.

http://www.cssplay.co.uk/

http://css.maxdesign.com.au/index.htm

http://www.alistapart.com

If you got some specific contributions of value, then feel free to provide us with an Example and and highlight the part which is better that you claim exist.

I've worked with AP for a long time, and i know both how to work with floats and AP, i still chose AP above floats. Have you even worked with AP?

At this point it would be worth to ask if you have even viewed the intire threed? You should be aware that haku also suggested using conditional comments.

haku · November 15, 2008

Heh, didn't like it that someone agreed with me eh.

So tell me, how exactly do you deal with the double margin bug on floated elements in IE6 without using conditional comments? I'm still waiting for an answer on that.

And for that matter, how do you deal with AP elements that extend past their boundaries and have an absolutely positioned element below them? This was a huge problem I found when dealing with AP elements in the past, I'd love to know a way around it.

SuperBlue · November 15, 2008

Heh, didn't like it that someone agreed with me eh.

So tell me, how exactly do you deal with the double margin bug on floated elements in IE6 without using conditional comments? I'm still waiting for an answer on that.

And for that matter, how do you deal with AP elements that extend past their boundaries and have an absolutely positioned element below them? This was a huge problem I found when dealing with AP elements in the past, I'd love to know a way around it.

IE6 is an outdated and broken/bugged browser, i don't support IE6 in any of my layouts, unless its specifically requested by a client. Of cause this may rule out the small percentage who for whatever reason can't upgrade, or are to ignorant to either shift or upgrade their browser. Also note that IE7 haven't got this bug.

However i don't disagree on that part, IE6- usually always needs its own code to work, so that's one of those few places where CC are useful. The margin bug is however not an issue when working with AP, both float and AP have their own use however, if you want your layout to work in IE6, then float would be the obvious way to go for this type of layout.

For your last question however, the answer would be that you don't really, because you need to have a wrapper in place. Lets say you have a list for navigation, simply positioning this list would be lovely, however we need an additional wrapper before we will be able to position elements below, such as additional navigation lists or ads.

Lets name those wrappers RightContent, CenterContent, and LeftContent and place it so it matches the headers height from the top. An example is shown below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
   <!-- Imported Styles Start -->
   <style type="text/css">
body {
  background: #72c1ca;
  margin: 0;
  padding: 1em;
  text-align: center; /* IE specific way to center divs */
}
#basement {
  position: relative; /* Used to anable absolute positioning "inside" basement */
  width: 100%;
  min-width: 900px;
  margin: 0 auto; /* The normal way to center elements, IE6 uses text-align instead. */
}
#CenterContent, #LeftContent, #RightContent, #TopContent {
       /* This will apply the following styles, on the above comma separated ids */
    background: #e6f4f4;
    position: absolute;
}
#CenterContent {
  width: 69%;
  min-width: 450px;
  min-height: 300px;
  top: 140px;
  right: 30.5%;
  left: 15.5%;
}
#LeftContent {
  width: 15%;
  min-width: 100px;
  min-height: 150px;
  top: 140px;
  left: 0;
}
#RightContent {
  width: 15%;
  min-width: 100px;
  min-height: 150px;
  top: 140px;
  right: 0;
}
#TopContent {
  height: 135px;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
}
p { margin: 0; }
.ContentPadding {
  width: 98%;
  text-align: left;
  margin: 0 auto;
}
   </style>

   <!-- Imported Styles End -->
    <title>Website Title</title>
  </head>

  <body>
    <div id="basement">

      <div id="CenterContent">
       <div class="ContentPadding">
        <p>Center Content</p>
        <p>Center Content</p>
        <p>Center Content</p>
        <p>Center Content</p>
        <p>Center Content</p>
        <p>Center Content</p>
       </div>
      </div>
      <div id="LeftContent">
       <div style="width:100%;background:silver;margin: 1em 0;">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div style="width:100%;background:silver;margin: 1em 0;">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div style="width:100%;background:silver;margin: 1em 0;">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
      </div>
      <div id="RightContent">
       <div style="width:100%;background:silver;margin: 1em 0;">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div style="width:100%;background:silver;margin: 1em 0;">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
       <div style="width:100%;background:silver;margin: 1em 0;">
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
        <p>Example Box</p>
       </div>
      </div>

      <div id="TopContent">
        <p>TopContent</p>
      </div>
    </div>
  </body>

</html>

It becomes more of a problem in IE6 when working with footers, and thats something i won't even try to solve using AP, as float based techniques has been widely referenced.

bronzemonkey · November 15, 2008

Float based layouts are more flexible and robust.

IE6 won't accept a declaration like {position:absolute; top:100px; bottom:100px;}. Other browsers will, and will simply calculate the dynamic height (or width) of the element, but IE won't. That is another important reason why you can't use absolute positioning for complex layouts.

IE6 still has substantial market share (over 30%) and those of us who work on projects for large clients could never fail to cater for that browser. It isn't outdated because it is still in significant use. It is also unnecessary to not style layouts that work in IE6 because everything you've done in your examples can be done just was well, with less code, and still support IE6.

The reality is that a LOT of businesses, the public sector in most countries, and users for certain countries are still running XP and IE6. They will not upgrade from IE6 until they migrate away from XP. There are security and logistical reasons for that decision. In some cases that will mean upgrading their entire network of PCs to new hardware which can run Windows 7 (because they look set to skip Vista completely). Most public sector networks will not allow staff to download any programs - IE6 is all they can use for browsing - and there is no pressing need to upgrade their hardware since most businesses need little more than word, outlook, excel and powerpoint.

Unless you're working on small personal-projects for people and they are unaware of the statistics regarding browser usage, most people working for clients cannot afford to alienate such a high proportion of visitors. Not giving IE6 users some new shiny enhancements to the experience is one thing. Not giving IE6 users a functional and readable website is quite another.

So tell me, how exactly do you deal with the double margin bug on floated elements in IE6 without using conditional comments?

You don't need conditional comments to overcome the double margin bug. It can be avoided by adding {display:inline} to your declarations for that selector.

However, I believe that your main stylesheet should only contain declarations that target (more) standards compliant browsers. Every IE bug is documented and predictable. I will always list declarations to fix IE specific behaviour in an IE version-specific stylesheet. For example (in an IE6 stylesheet):

/* double margin fix */

#element,
.elem1,
.elem2,
.elem3 {
   display:inline;
}

/* clearing and haslayout fixes */

.contains-float,
.contains-float-2,
.contains-float-3 {
   zoom:1;
}

/* min-height */

.lorem {height:100px;}
.ipsum {height:325px;}

No hacks. No mixing of bug-fixing code with standards code. Future-proof. It is clear what declarations are fixing what IE problems. In addition to that, some complex layouts will require their own IE6 mixture of declarations or a suitable alternative, and all that stuff can be kept separate in this file too.

haku · November 16, 2008

That's a nice little thing to know - I will definitely use it in the future.

As for IE6 - it's not a small market share using it. 30% world-wide give or take, and here in my country, it's still by far the dominant browser (60% of my users on one of my sites are using it). I don't support it on my own personal site, but on all my commercial sites, not supporting it would lose me a significant amount of business both through users/customers and through clients whose sites I build.

SuperBlue · November 16, 2008

I was already aware of the display:inline; trick, as well as the usually placed in a CC min-height trick for IE6, now try to solve the more serious rendering problems, whitout using hacks, i would actually say that anything that differs from the standard can be considered a hack.

Calling floats more flexible and robust can only be applied because most web designers only know to use floats, they wouldn't know what to do if they encountered an AP based page. A lot of them don't even know about the positioned wrapper trick, thats where a lot of beginners regard AP as useless. Luckily float has become so widely accepted, so they rarely encounter cases where they need to use AP.

Both floats and AP however each have their own use, i usually only use floats for specific tasks, such as floating navigation list items, or floating images to get text to wrap. A few layouts are also quite simply impossible to make using floats, some can however be faked, but i don't really find that being an acceptable solution.

Its like the arguments ageinst using javascript or flash, lately we got major sites who started to use flash or ajax, which in turn forced people to install a flash player, or have scripting enabled. I can only hope more sites will ditch support for IE6, because in the end it isn't really our problem that the user can't view our page in older browser versions.

I don't really recognise the cases mentioned here as valid arguments for us to keep supporting IE6, it looks more like being cases where people suffer from the ignorance of system admins, which can be frustrating enough, but still not our problem.

Simply doing it without trying to educate the client in the matter would be a waste of time, and i would certainly not asure compatibility with older browsers for free, also since it requires more experiance of the designers to work on the page. As it is now, none of this is referenced in the orginal specs, thats something they need to figure out on their own.

ifubad · November 16, 2008

because in the end it isn't really our problem that the user can't view our page in older browser versions.

I don't really recognize the cases mentioned here as valid arguments for us to keep supporting IE6, it looks more like being cases where people suffer from the ignorance of system admins, which can be frustrating enough, but still not our problem.

If one ran a very busy restaurant and only want to setup 70 tables and chairs, because you feel that it would take too long to set up that extra 30, therefore unable to serve those extra 30 customers, then who's fault that becomes, since those potential customers are not going to bring their own tables and chairs, unless one don't care to lose the extra business that they could've had. It's up to the restaurant owner to provide that option, not the boss that is treating his employees to lunch, if one can't serve them, they'll just go somewhere else that can.

xtopolis · November 16, 2008

Obviously Blue is too arrogant to concede. Might as well drop it.

Personally, I don't like supporting the weakest links, ex: IE users. However, when it comes to business and profit, you're damn sure I'd like to get the most money I could by supporting everyone that comes easily.

Also, making a site that's standards compliant and looks good in FF2-3 is usually only a few declarations away from getting it to work in IE, hardly considered "too much work" for any decent web designer.

And lastly, I'm pretty sure people started out using AP rather than floating.. AP is specific, goes exactly where you want, while floats take skill to get it to perform for you. I would definitely compare the use of AP to the use of tables for non tabular data. People did it because they could mess with it and use it improperly to get what they want, not that it was the right way to do things.

bronzemonkey · November 16, 2008

I was already aware of the display:inline; trick, as well as the usually placed in a CC min-height trick for IE6, now try to solve the more serious rendering problems, whitout using hacks, i would actually say that anything that differs from the standard can be considered a hack.

If you had been paying attention you'd have noticed I was talking to haku, not you. But what are these "serious rendering problems"?

A lot of them don't even know about the positioned wrapper trick, thats where a lot of beginners regard AP as useless.

It's not a trick. It's a basic part of the css spec.

A few layouts are also quite simply impossible to make using floats

Such as? And we've already pointed out that layouts relying on absolute positioning lack flexibility and can fail in IE6. The layout you gave as an example has no footer and would struggle to merge two columns into a single column (without modifying the source). It also uses more code than a float-based layout.

Its like the arguments ageinst using javascript or flash, lately we got major sites who started to use flash or ajax, which in turn forced people to install a flash player, or have scripting enabled.

Javascript and flash should be used if they are the best tools for a job. But they should be used to enhance a site and never be a requirement - they are different "layers". This is a basic accessibility issue and there are legal as well as moral requirements involved.

I can only hope more sites will ditch support for IE6, because in the end it isn't really our problem that the user can't view our page in older browser versions.

It is your problem if you fail to make content accessible to a large chunk of internet users. Supporting IE6 isn't even that difficult if you know what you're doing...even if it means that IE6 users don't get the complete visual experience.

Supporting IE6 isn't something you can seriously charge clients for while 30%+ of the market still uses that browser. Any government or large corporate client expects IE6 support because that is what most of their staff have to use anyway and what most of their intranets are built to work on. There are fundamental logistical, security, and financial reasons for IE6's continued existence in the business world.

You're not going to find any professional who is going to say they want IE6 to hang around. Everyone is waiting for the day when it can finally be ditched without impacting business. But no serious professional can do that yet.

haku · November 17, 2008

I'd sure love to see a couple of these AP sites of bodens. Maybe they are great, and he (she?) can back up what (s)he is saying. But without seeing them, I'm doubtful.

bronzemonkey · November 17, 2008

I'd sure love to see a couple of these AP sites of bodens. Maybe they are great, and he (she?) can back up what (s)he is saying. But without seeing them, I'm doubtful.

http://www.brugbart.com/Tutorials/7/

dropfaith · November 17, 2008

just so everyone can see i have a layout already made that is damn similar and uses floats..

im a strong float supporter in this i dont have much exp with ap but floats seem to work pretty damn well for me

http://www.dropfaithproductions.com/layout/index.php

its clearly just demo content but yeah

Sign In

Firefox Design Great - How in IE?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information