Firefox and IE

[Joshua4550]

Hey, something isn't right with my styles. They work perfect with Firefox, as I want them to, but when It comes to IE - they mess up sometimes.

 

I think this is the part in question.

width:765px;
text-align:left;
position:relative;
margin:10px auto;

 

Is there something here that would be effective on Firefox and not on IE?

[Joshua4550]

I have a feeling it's the margin?

[Joshua4550]

For anyone encountering this problem, I decided to use absolute position with a certain % set as the left attribute, instead.

[.Stealth]

The problem with that is, if you resize your browser the absolute positioned object will move over if it is positioned against the browser window.

[haku]

The secret is to use two divs:

 

<div id="outside">
  <div id="inside">
    some stuff
  </div>
</div>

 

Then set the width on the outside div, and the margin on the inside div:

#outside
{
  width:765px;
}

#inside
{
  margin:10px;
}

[Joshua4550]

I have a div for body, then 2 divs inside it for left and right.

Sometimes in IE, they align too much to the left, if the content is too much. I just needed it to be a set padding on the left so it wouldn't do it, but it's confusing when IE is SO much different to Firefox

[Joshua4550]

Oh, and also sometimes on IE it shows the content in the right DIV, still on the right hand side, but underneath the left div though?!

 

Firefox and Chrome are fine, shows it perfect - why does IE do this?

God damn I hate microsoft with a passion :L

[Joshua4550]

Any got answer(s) to my question(s)/problem(s)?

[haku]

I gave you the answer above. Two divs. Width/height on the outer div, margin/padding on the inner div. Simple as that.

[Joshua4550]

No, I have an outer div and two inner divs. The problem i'm facing is that if theres too much content on the right hand side, it aligns perfectly in the middle, as it should - but then it's more to the left (for my background). I just want the extra content to be shoved to the right, not everything aligned for it.

[Joshua4550]

K I did what you said anyway, didn't fix the alignig to left problem, and just messed up layout for firefox completely.

[haku]

It's not going to work as is - you'll have to adjust your code to get it back to where it is. I gave you the proper method, you have to adjust your code to work with that method.

 

And if you want help, you need to post a code/image/a link. We aren't telepathic here unfortunately, though sometimes we try

[Joshua4550]

I have a width set, and it works - but IE uses that as a minimum width? How can I make IE use the width as firefox does, and if the content goes over the width, it will just display it on the right of the div?

 

I've heard of

width:700px;
max-width:700px;

But this has no effect.

[Joshua4550]

textarea {
margin: 4px;
background-color: #D2BB86;
border-color: #382418;
text-align: left;
border-style: solid;
}

 

Is there something wrong? When I use a textarea in my right hand division, it makes the division start underneath the left division, but still on the right hand side.

like so:

L
L
L
L
    R
    R
    R
    R

This is REALLY annoying, but it only happens in IE. Can someone explain to me my problem? If theres no problem with that code I can show you my other codes.

 

Thanks a bunch peeps. I'm a CSS NEWB

[haku]

We need HTML as well - CSS only doesn't tell us anything.

 

Also, every version of IE is different. Which one are you speaking of specifically?

[Joshua4550]

<div id="body">
      <div>
        <div style="text-align: center; margin-bottom: 10px; position:relative;">
          <img src="**" style="text-align:center;"><br />
        </div>
      </div>
      <div class="left">
        Hi
     </div>
     <div class="newscontainer">
       <div class="buttons">
         <textarea>HI</textarea>
       </div>
     </div>
  </div>

#body {
width:765px;
text-align:left;
position:relative;
margin:10px auto;
}
.left {
float:left;
}
.newscontainer {
margin-left:290px;
margin-bottom:40px;
}
.buttons {
width:457px;
/*height:110px;*/
position:relative;
margin:0;
}

 

Works fine in Firefox & chrome, but not IE?

(Ps: Latest Ie, I think.)

[Joshua4550]

The code above works, but with more code inside the left pane, the right pane fucks up.

[Joshua4550]

anyone?

[haku]

If the code works, how are we supposed to tell you what is wrong with it?

[Joshua4550]

but with more code inside the left pane, the right pane fucks up.

[haku]

If the code works, how are we supposed to tell you what is wrong with it?

[Joshua4550]

THAT'S THE POINT! It doesn't if theres more content in the left division. ffs.

[Joshua4550]

textarea {
margin: 4px;
background-color: #D2BB86;
border-color: #382418;
text-align: left;
border-style: solid;
}

I removed this from my CSS and the layout on IE fixed itself - WTF is wrong with this? :S