Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: IE seems to be putting in extra paddiing

  1. #1
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default IE seems to be putting in extra paddiing

    IE seems to be putting in extra padding in the menu on the left-hand side of this home page, causing the menu to overlap the middle content.

    http://www.estateagentsespana.com/

    It displays correctly in Firefox and Chrome.

    I'd appreciate any help in getting to the bottom of this.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Yep, that'll be the lovely way that IE interprets the box model
    Reference: http://en.m.wikipedia.org/wiki/Inter..._box_model_bug and http://stackoverflow.com/questions/1...ng-css-problem

    The best way to tackle it is by using an IE specific style sheet: http://css-tricks.com/how-to-create-...ly-stylesheet/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks Beverly, but I had looked at possible box problems before posting. When I set padding and margin to 0, IE still indents the menu text. What I need to do is have the menu text appear immediately inside the vertical line and I just can't get this. After solving this problem. I can look at using IE specific styles.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I'm not seeing any menu indent, or any overlap into the main content. Checked in IE9 & IE8 against Chrome - they both look virtually the same.

    Is it still happening at your side? Maybe you just need to refresh your cache?

    Can you provide a screen capture of your problem if you still have it as I'm not entirely sure what the error is.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    wkennyspain (12-10-2012)

  6. #5
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I've uploaded screen prints to here. Did these just now.

    http://www.estateagentsespana.com/screenie.htm

    I'm using IE7

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Try this CSS on the menu ul;
    Code:
    #navigation ul { list-style-type:none; margin:0; padding:0; }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #7
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I've tried that, putting the line in after all othe #navigation but it makes no difference.

  9. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Then I'll refer you back to my first reply as you should probably try targetting IE7 (and under?) and put a negative left margin on the li's.
    Code:
    #navigation li { margin-left:-40px; }
    Have a play with the ul or li placement in your IE7 specific stylesheet because IE7 is known for adding a 40px (ish) indent on list items.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  10. #9
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I've tried that, putting the line in after all othe #navigation but it makes no difference.

  11. #10
    Join Date
    Sep 2012
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Voila! That does the trick. Thanks for all your help, Beverley

Similar Threads

  1. putting white box around images...
    By justinchrono in forum HTML
    Replies: 4
    Last Post: 03-09-2010, 10:08 PM
  2. Script putting a > at top of page
    By PaulC in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-20-2009, 07:50 PM
  3. Putting a While Loop in a MySQL_query() ???
    By Colonel_Popcorn in forum MySQL and other databases
    Replies: 0
    Last Post: 03-29-2009, 01:24 AM
  4. Replies: 0
    Last Post: 07-27-2007, 06:01 PM
  5. Putting extra text around links
    By Shattered Plastic in forum CSS
    Replies: 2
    Last Post: 09-10-2004, 09:22 PM

Bookmarks

Posting Permissions

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