+ Post New Thread
Results 1 to 10 of 10
Web Development Thread, IE8/IE9 differences in showing <div> in Coding and Web Development; Right, this is a bit weird (for me anyway). I have a div layout which (from a previous thread) lays ...
  1. #1

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    199

    IE8/IE9 differences in showing <div>

    Right, this is a bit weird (for me anyway). I have a div layout which (from a previous thread) lays out with the boxes side by side (example below). On my machine with IE9 it shows fine, on a machine with the same res running IE8 it shows the boxes stacked up above each other (ignoring the inline-block/text-align and floats).
    Is there any way to fix this as I've built this page and tested it with IE9 and it now looks stupid on IE8!

    CSS
    PHP Code:
    .staff-container {
    width90%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    }

    .
    staff-box {
    width:23%;
    text-align:center;
    displayinline-block;
    margin-left:5px;
    margin-right:5px;
    background: [URL=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=e2ebe8]#e2ebe8[/URL]
    padding-top5px;
    padding-bottom10px;
    border:#000 1px solid;

    HTML
    HTML Code:
    <div class="staff-container">
    <div class="staff-box" onClick="document.location.href='#';" style="cursor:pointer;cursor:hand" onmouseover="style.backgroundColor='#6f9387';" onmouseout="style.backgroundColor='#e2ebe8'"><h4>Online Booking</h4><img src="http://www.edugeek.net/images/bookingsystem.png"></div>
    <div class="staff-box" onClick="document.location.href='#';" style="cursor:pointer;cursor:hand" onmouseover="style.backgroundColor='#6f9387';" onmouseout="style.backgroundColor='#e2ebe8'"><h4>Online Helpdesk</h4><img src="http://www.edugeek.net/images/helpdesk.png"></div>
    </div>
    <hr style="clear: both; visibility: hidden; padding: 0; margin: 0;">
    As I said, the above code in IE9 is fine, it lays out just how I want. But when viewed in IE8 it goes pear shaped!
    Last edited by MK-2; 13th July 2011 at 01:47 PM.

  2. #2
    comedydave's Avatar
    Join Date
    Sep 2007
    Location
    Gloucestershire, UK
    Posts
    154
    Thank Post
    9
    Thanked 9 Times in 9 Posts
    Rep Power
    15
    Try using "float:left;" instead of "display:inline-block;"

    Also, prempting the next issue - place <div class="clearFloats"></div> after your 2 boxes in your markup. And creat a class with the same name and the property "clear:both;" in your CSS

  3. #3
    paul_1989's Avatar
    Join Date
    Jan 2010
    Location
    Blackpool
    Posts
    45
    Thank Post
    5
    Thanked 9 Times in 7 Posts
    Rep Power
    15
    They both layout fine for me. IE8 left, IE9 right.

    super preview.JPG

  4. #4

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    199
    Quote Originally Posted by paul_1989 View Post
    They both layout fine for me. IE8 left, IE9 right.
    not sure what else it can be then. IE8-XP and IE9-Win7 but both on 1024x768 res and 32bit colour!

  5. #5
    paul_1989's Avatar
    Join Date
    Jan 2010
    Location
    Blackpool
    Posts
    45
    Thank Post
    5
    Thanked 9 Times in 7 Posts
    Rep Power
    15
    If I change to IE8 running in IE7 compatibility mode it puts them on top of each other, but IE8 itself seems to work fine. Have you tried what @comedydave sugessted?

  6. #6

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    199
    Quote Originally Posted by paul_1989 View Post
    Have you tried what @comedydave sugessted?
    the problem is, if i do float left, it then stacks them up side by side by from the left of the screen, whereas i need them to be central. i had another thread (replacing table with div in this forum) that someone suggested inline-block instead and that worked, so i dont want to be redesigning it again

  7. #7
    paul_1989's Avatar
    Join Date
    Jan 2010
    Location
    Blackpool
    Posts
    45
    Thank Post
    5
    Thanked 9 Times in 7 Posts
    Rep Power
    15
    That's because you have a 90% container and they're set to 'margin-left:5px' so they will float 5px from the left. If you try creating another smaller centred container inside the main one, then you may have better luck.

    CSS:
    Code:
    .staff-container {
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    }
    
    .box-container{
    	width:50%;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .staff-box {
    width:45%;
    text-align:center;
    float:left;
    margin-left:2%;
    margin-right:2%;
    background: url('http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=e2ebe8');
    padding-top: 5px;
    padding-bottom: 10px;
    border:#000 1px solid;
    cursor:pointer;
    cursor:hand;
    }
    
    .staff-box:hover {
    background:	#6f9387
    }
    HTML:
    Code:
    <div class="staff-container">
    <div class="box-container">
    <div class="staff-box" onClick="document.location.href='#';"><h4>Online Booking</h4><img src="images/bookingsystem.png"></div>
    <div class="staff-box" onClick="document.location.href='#';"><h4>Online Helpdesk</h4><img src="images/helpdesk.png"></div>
    </div>
    </div>
    <hr style="clear: both; visibility: hidden; padding: 0; margin: 0;">

  8. Thanks to paul_1989 from:

    MK-2 (13th July 2011)

  9. #8

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    199
    This is what I get, all tested at the same res of 1024x768

    in Firefox
    ff.jpg

    in IE8
    ie8.jpg

    in IE9
    ie9.jpg

  10. #9

    MK-2's Avatar
    Join Date
    Oct 2006
    Location
    Nottingham
    Posts
    3,237
    Thank Post
    149
    Thanked 581 Times in 307 Posts
    Blog Entries
    8
    Rep Power
    199
    Quote Originally Posted by paul_1989 View Post
    That's because you have a 90% container and they're set to 'margin-left:5px' so they will float 5px from the left. If you try creating another smaller centred container inside the main one, then you may have better luck.
    I don't think kissing is allowed on this forum, so I'll just say thank you instead
    I really need to get my head around css. I'm using it and picking it up as I go (much the same with php), but I get these errors where something works or doesn't and I don't know why.

  11. #10
    comedydave's Avatar
    Join Date
    Sep 2007
    Location
    Gloucestershire, UK
    Posts
    154
    Thank Post
    9
    Thanked 9 Times in 9 Posts
    Rep Power
    15
    CSS is easy, you just have to dive right in.
    I learned the basics for my job interview for this job on w3 schools. Then when I got the job I spent the first 3 months pulling my hair out. Now 12 months in, it is like a second language to me.
    Need any help in the future PM me

    A little tip. Build in Firefox (the most standards compliant browser out there), validate your code through The W3C Markup Validation Service then test it in Chrome, Safari, Opera and finally IE. As IE upto version 8 doesn't support w3c standards, because MS thought they were superior. So then fix for IE with a separate stylesheet.
    So the general rule is - Build to Standards, fix for IE.

SHARE:
+ Post New Thread

Similar Threads

  1. Replies: 0
    Last Post: 17th January 2011, 12:35 PM
  2. Showing output from 4 computers on 1 screen
    By srochford in forum Hardware
    Replies: 8
    Last Post: 20th March 2007, 05:02 PM
  3. The BBC showing off WiFi Hacking
    By Ric_ in forum Jokes/Interweb Things
    Replies: 24
    Last Post: 27th October 2006, 11:33 AM
  4. Tests not showing in DPS (problem and solution!)
    By sahmeepee in forum ICT KS3 SATS Tests
    Replies: 6
    Last Post: 11th May 2006, 07:22 AM
  5. Replies: 0
    Last Post: 13th January 2006, 10:55 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •