www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: second div drops down in ie7

  1. #1
    Join Date
    Nov 2010
    Posts
    7

    second div drops down in ie7

    Hi,
    I'm sure this is simple. I have 2 divs, to be displayed side by side (ie. 2 columns and I must use divs, not tables). both are float:left. the first div has a static width and all content fits in nicely.

    The problem: in ffox and ie8, all is well and the second div appears to the right of the first div as a "second column", In IE7, the information if the second div drops down and is positioned under the first div.

    I'm not a beginner so any tips as to where to look will help.

    CHeers,

  2. #2
    Join Date
    Nov 2010
    Location
    Sydney
    Posts
    8

    Lightbulb

    Hey there,

    My best guess would be to add fixed to both columns. If there is a width difference between the browsers, you might want to create an IE stylesheet and target a specific width for the right column div.

    Let me know how you go.

    greenlightmedia.com.au

  3. #3
    Join Date
    Nov 2010
    Posts
    7
    No luck, same problem., any other ideas?

    Does anyone know how If there is a IE developer tool bar type app which would allow me to change css values just like firebug in ffox? this would really help me debug this one.

  4. #4
    Join Date
    Nov 2010
    Location
    Sydney
    Posts
    8
    Hmm, could you post the code?

    Internet Developer Bar = http://www.microsoft.com/downloads/e...d-b8856fced535
    ______________________________________________________________

    greenlightmedia.com.au

  5. #5
    Join Date
    Nov 2010
    Posts
    7
    Thansk ibrahimA

    I have the IDDB but I don't believe it allows one to change the values on the fly like firebug. Am i wrong here?

  6. #6
    Join Date
    Nov 2010
    Location
    Sydney
    Posts
    8
    nah sounds about right, IE was never any good at helping developers out.

    ______________________________________________________________

    greenlightmedia.com.au

  7. #7
    Join Date
    Nov 2010
    Posts
    7
    I discovered that it had something to do with ie7 not setting the correct width of a div which does is taking it's width from either the parent container or the content. It behaves differently than other browsers. not sure how.

    I fixed the problem by using a PHP if statement (the site is Joomla based) and got it to work. a hack, but it works.
    thanks,

  8. #8
    Join Date
    Nov 2010
    Location
    Sydney
    Posts
    8

    resolved

    Yeh thought that might of been the case, as mentioned better off creating a stylesheet for ie7 or adjust the width for ie7 and create an ie8+ stylesheet, and call them using conditional comments. That way css is controlled in one place instead of within the code.

  9. #9
    Join Date
    Nov 2010
    Posts
    7
    I've never used an ie7 specific sheet, although there is one with this template.

    if I used this sheet to fix the ie7 problem, what would I put in it to override the declaration found in the general style sheet?

  10. #10
    Join Date
    Nov 2010
    Location
    Sydney
    Posts
    8
    How i would go about it is to build it through firefox first or since its a joomla template, have a look at it in firefox using the default stylesheet set up. From there if you find any differences, i would check to see if this difference occurs in all IE or just IE6 or IE7 or IE8, and build a stylesheet dependant on that.

    For this situation, i would set up the defaults as how it shows in firefox in the current style sheet (assuming style.css), and in the ie7.css sheet call the same area as how it is called in style.css but change the width value or add the width vaue.

    ______________________________________________________________

    http://greenlightmedia.com.au

  11. #11
    Join Date
    Nov 2010
    Posts
    7
    i see. there already is a stylesheet for ie7 ( ie7 is the only one that is causing problems) and i identified that to fix the problem, i need to set, only for ie7 the width of one of the ids. if i simply put the ID declaration in the ie7 sheet, will it override the ID in the style.css automatically?

  12. #12
    Join Date
    Nov 2010
    Location
    Sydney
    Posts
    8
    Yep, as long as your selector is exactly the same in the default sheet.

    e.g. if you have

    HTML Code:
     #header .foo {
    width: 500px;
    }
    in your stlye.css, then in ie7.css you need to have

    HTML Code:
     #header .foo {
    width: 490px;
    }
    not

    HTML Code:
     #header {
     width: 490px;
    }

  13. #13
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    11
    Quote Originally Posted by ggdevelop View Post
    I discovered that it had something to do with ie7 not setting the correct width of a div which does is taking it's width from either the parent container or the content. It behaves differently than other browsers. not sure how.
    Browsers can vary in how they calculate widths (rounding up or down to the nearest pixel). In this case, you could probably reduce the with of the dropping div by a few pixles to fix the problem, best done via a conditional comment.

  14. #14
    Join Date
    Nov 2010
    Posts
    7
    thanks,
    I'll try it next time I come across this problem.
    thanks for all your help.

  15. #15
    Hello All,

    Thanks for this useful topic!!!

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 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
  •  
HTML5 Development Center



Recent Articles