DIV with both IE and Firefox - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

DIV with both IE and Firefox

div

xafft

6:44 am on Sep 29, 2010 (gmt 0)

10+ Year Member

Hi all, I'm new to CSS and I'm having a lot of trouble when testing with different browsers.

I have a layout with two containers horizontally positioned. After many tests in IE, I managed to accomplish the behavior I wanted: Two fixed containers that reorganise his content if you make the window smaller or if the content is bigger than its container with overflow:hidden.

| container1 | container2 |

The problem is that I now tested it in Firefox and the second container goes down the first one, even in a maximised window. How can I fix it in Firefox without spoiling it in IE?

The following is the code with css:


<body>

<div id="outer" class="mainPage">

 <div id="layout" class="layout1">

<div id="div2" class="container5A">
...
</div>

<div id="div3" class="container5B">
...
</div>

 </div>
</div>


.mainPage
{
float:left;
width:100%;
height:100%;
}

.layout1
{
float:left;
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}

.Container5A
{
float:left;
height:85%;
width:49.99%;
padding-right:12px;
overflow-x:hidden;
}
.Container5B
{
float:left;
height:85%;
width:49.99%;
padding-left:12px;
overflow-x:hidden;
}

milosevic

8:24 am on Sep 29, 2010 (gmt 0)

10+ Year Member

How can I fix it in Firefox without spoiling it in IE?

Working this way is a lot more difficult - FF (or Safari or Chrome) is a W3C standards compliant browser.

IE is not by a long way (unless we're talking IE9) - full of quirks, bugs and non-standard implementations.

So you are designing for a special case single browser that has tons of bugs, rather than for the web standard. This means that your site will only work properly in IE 8 or whatever and all other browsers will need fixes.

IE also supports conditional comments which makes it a lot easier to work on the standards-compliant browser and fix bugs with IE.

But to answer your question, try setting less width on the two containers. When something drops down it means it's usually too wide to be rendered where it is supposed to.

Also, having both pixel padding and a percentage width is likely to cause problems, because if 12px is say 0.5% of the width of the page fullscreen, it will become more like 3% rendered in a narrow window - you will likely need to use a padding in percentage or you will find that anyone using a smaller window than what you are designing in will see a broken page.

enigma1

10:17 am on Sep 29, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi xafft welcome to the forums.

First of all make sure the html defs for the css classes are identical to the css styles. For example:

<div id="div2" class="container5A">

and the css is:
.Container5A
{

That's not too good, make sure the names are identical upper/lower case letters.

Then also remove the padding as mentioned before you cannot calculate widths properly using pixels and percentages.

.container5A
{
float:left;
height:85%;
width:49.99%;

overflow-x:hidden;
}
.container5B
{
float:left;
height:85%;
width:49.99%;

overflow-x:hidden;
}

Doing these 2 changes should display the same on the popular browsers.

xafft

11:10 am on Sep 29, 2010 (gmt 0)

10+ Year Member

Hi,

Thank you both for your quick replies! It was the padding issue what prevented it from working properly in FF.

The defs were ok but I mispelled the upper case letters while posting. But I should follow a convention with that so all defs start with the same upper/lower case.

I know IE basically ignores the standards but I've been asked to design it for both browsers :/

milosevic

11:20 am on Sep 29, 2010 (gmt 0)

10+ Year Member

xafft - glad we could help!

Designing for both browsers is the way to go, but my point was it's way, way easier to design for Firefox and fix for IE than the other way round.