CSS Issue in IE 7

Discussion in 'CSS' started by dj_gie, Feb 7, 2007.

  1. #1
    Hi, does anyone know why this is happening. My test page at www.fcbs.co.uk/test2.html appears how I want it in Firefox, but when I see it in Internet Explorer 7, it is different.
    My drop down menu at the top right of the page is positioned different.

    Can someone please help me resolve this issue?

    Kind Regards
     
    dj_gie, Feb 7, 2007 IP
  2. Dan_A

    Dan_A Peon

    Messages:
    65
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try to control margins (and paddings)
    form{margin:0;}
     
    Dan_A, Feb 7, 2007 IP
  3. Smaug

    Smaug Peon

    Messages:
    374
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ok, I noticed you are using padding to position it, that's bad way because the IE represents paddings differently than FF/Opera... make it like this:
    
    .topbackground {
    ...
    position:relative; /*This make position absolute usable only inside the div*/ 
    }
    
    .topnavigation {
    position:absolute;
    top:123px; /*position where you want it, itll be the same in all browsers*/
    left:123px;
    }
    Code (markup):
    PS: You have nice website, but I would try to center it (wrap everything in one div which would have margin:0 auto 0 auto;)
     
    Smaug, Feb 7, 2007 IP
  4. dj_gie

    dj_gie Peon

    Messages:
    327
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks, i'll give that a try.
     
    dj_gie, Feb 7, 2007 IP
  5. dj_gie

    dj_gie Peon

    Messages:
    327
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I am having a little bit of trouble here. Can you please advise.
    I've tried to do what you've said and i've made it worse

     
    dj_gie, Feb 7, 2007 IP
  6. Smaug

    Smaug Peon

    Messages:
    374
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You can't leave there that padding, you have there:
    
    .topnavigation {
    	left: 593px;
    	top: 44px;
    	position: absolute;
    	padding-top: 44px;
    	padding-right: 13px;
    	padding-bottom: 1px;
    	padding-left: 593px;
    }
    
    Code (markup):
    this is right:
    
    .topnavigation {
    	left: 593px;
    	top: 44px;
    	position: absolute;
    	
    }
    
    Code (markup):
     
    Smaug, Feb 7, 2007 IP
  7. Smaug

    Smaug Peon

    Messages:
    374
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Just tried with left:600px; , top:50px; and padding:0; and its positioned well
     
    Smaug, Feb 7, 2007 IP
  8. dj_gie

    dj_gie Peon

    Messages:
    327
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks, i'll give that a try. Do you think it would be better to use all div tags rather than tables?
     
    dj_gie, Feb 8, 2007 IP
  9. Smaug

    Smaug Peon

    Messages:
    374
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #9
    yes, definately tableless
     
    Smaug, Feb 8, 2007 IP
  10. dj_gie

    dj_gie Peon

    Messages:
    327
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks for your help smaug. Much appreciated.
     
    dj_gie, Feb 8, 2007 IP