1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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