Advanced Search

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
    9
    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
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    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
    9
    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
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    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
    9
    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
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    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
    9
    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
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    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
    9
    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
    9
    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, 09: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, 06: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, 12:24 AM
  4. Replies: 0
    Last Post: 07-27-2007, 05:01 PM
  5. Putting extra text around links
    By Shattered Plastic in forum CSS
    Replies: 2
    Last Post: 09-10-2004, 08: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
  •