alignment issue with IE

Discussion in 'CSS' started by dodul, Feb 2, 2011.

0
  1. #1
    Hey,

    In my site i have 3 divs inside a parent div. I set the position of all 3 child divs as relative. In firefox the site is displayed fine.But, using IE8 I am observing the height of the parent div is increased. The css code I have done is as follows,

    #slideshow {float:left; width:916px; height:340px; border:2px solid #fff; background:#fff} /*Parent div */

    #slides {position:relative; width:916px; height:340px; list-style:none; overflow:auto; top:-16px; left:-40px} /* child 1*/

    .pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px; position:relative; top:-402px; right:60px; z-index:100;} /*child 2*/

    #query {filter: alpha(opacity=65); -moz-opacity: .65; background-color:#BDBDBD;z-index:100; position:relative; top:-360px; left:646px; width:230px;padding-left:30px; height:320px} /* child 3 */

    I tried a lot but couldnt reduce the size of the parent div. Can anyone help ?

    Thanks in advanced ..
     
    dodul, Feb 2, 2011 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Can you share a live URl or the HTML markup as well.
     
    radiant_luv, Feb 2, 2011 IP
  3. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #3
    :eek: What are you trying to achieve with those styles? Whatever it is, I'm sure there is a much easier way to do it.

    Anyway, I think the problem is that you have no DOCTYPE. Add this at the very top of your markup, just before the <html> tag:
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

    That's one problem solved, but as you will see there are now more to fix. Gotta love IE! :D
     
    Cash Nebula, Feb 2, 2011 IP
  4. dodul

    dodul Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    Thanks for your replies ...

    Let me explain the problem a little further..

    #slideshow is my parent div. And you can see I defined the height as 340px. All three other divs (#slides,.pagination and #query ) are inside the #slideshow div. But my problem is whenever I am viewing the site using IE7 or 8 I see the height of the #slideshow div becomes a lot higher than 340px. The size is reduced only when I am keeping only one div inside and remove two others or I change the child divs position to absolute.

    I dont have this problem through Firefox.

    I have already solved the issue ... what I did is I added overflow:hidden in my parent div. It worked for me ..

    #slideshow {float:left; width:916px; height:340px; border:2px solid #fff; background:#fff; overflow:hidden}

    Anyways thanks for your help.
     
    dodul, Feb 3, 2011 IP
  5. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,095
    Likes Received:
    103
    Best Answers:
    5
    Trophy Points:
    240
    #5
    It might sound silly but did you included a reset code before you've started your code ?
     
    ApocalypseXL, Feb 3, 2011 IP