Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

div height different in IE6

  • 07-05-2009 02:59PM
    #1
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭


    anyone have this problem?
    [PHP]#main{
    background-image: url(back2.png);
    background-repeat: repeat-y;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:60px;
    width:900px;
    height:550px;



    } [/PHP]


    basically have to change the height to 560 in IE6, but then its too big in other browsers


Comments

  • #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    is because of the margin-top
    try another div inside the main div. 
    <div id='main'>
  <div id='in_main' style='height:60px;'></div>
  your content here
</div>


  • #3
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭Placebo


    i have another div there, i tried various things, ended up using a table.
    TABLES never fail


  • #4
    KerranJast
    Registered Users, Registered Users 2 Posts: 1,828 ✭✭✭KerranJast


    Tables nearly alway fail when you want to style the contents. Divs are W3C recommended. I tried your code it works fine. You must have something else around it affecting it.


  • #5
    ron_darrell
    Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    Unfortunately IE uses a different box model to the other browsers. Fortunately there is a relatively simple fix :)
    #main{ 
background-image: url('back2.png'); 
background-repeat: repeat-y; 
position:relative; 
margin-left:auto; 
margin-right:auto; 
margin-top:60px; 
width:900px; 
height:550px; 
#height:560px;
}

    or if you prefer
    #main{ 
background-image: url(back2.png); 
background-repeat: repeat-y; 
 position:relative; 
margin-left:auto; 
margin-right:auto; 
margin-top:60px; 
width:900px; 
height:560px; 
}  

html>body #main {
height: 550px;
}

    Regards,
    RD


  • #6
    Hydrosylator
    Closed Accounts Posts: 275 ✭✭Hydrosylator


    ron_darrell wrote: »
    #main{ 
background-image: url(back2.png); 
background-repeat: repeat-y; 
 position:relative; 
margin-left:auto; 
margin-right:auto; 
margin-top:60px; 
width:900px; 
height:560px; 
}  

html>body #main {
height: 550px;
}

    Regards,
    RD

    That's the way I'd do it usually. In a perfect world of course, I wouldn't have to. Flippin IE.


  • Advertisement
  • #7
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭Placebo


    #height:560px;


    thanks, never seen this before, source?


  • #8
    mewso
    Moderators, Science, Health & Environment Moderators Posts: 9,221 Mod ✭✭✭✭mewso


    Because IE6 will often present more then one problem I've taken to using conditional comments these days:-
    <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->

    This style sheet will only have an effect on IE6 or earlier versions of IE and I can add to it specifically to fix problems. Prefer it to hacks tbh.


Advertisement