www.webdeveloper.com
Results 1 to 2 of 2

Thread: Padding/Margin issue in IE6/7 and transforming a table to divs...

  1. #1
    Join Date
    Nov 2006
    Posts
    46

    Padding/Margin issue in IE6/7 and transforming a table to divs...

    Hello, I have two main questions, the first and most important is the following:
    http://www.disembodied.us

    Take a look at that in FF, IE6 and/or IE7 (both IEs do the same thing). The problem is my tabbed menu (the list) jumps way up in the IEs but not in FF or Opera.

    I can't imagine its the old box model problem the old IEs had, since they were supposed to fix those... and even if it was the box model hack doesn't fix it. I can solve the problem by increasing the #header h1 padding by like 30px but then it is messed up in FF and Opera of course.

    Anyway, here are the parts of the CSS that are probably important for this, but let me know if there are more styles that are needed:

    Code:
    #header {
    	padding: 0;
    	margin: 5px 70px 20px 70px;
    	text-align: center;
    }
    
    * html #header {
    	margin-bottom: 50px;
    	mar\gin-bottom: 20px;
    }
    
    * html #header h1 {
    	padding: 50px;
    	padd\ing: 15px;
    }
    
    #header h1 {
    	font-size: 48px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-style: italic;
    	background-color: transparent;
    	padding: 15px;
    }
    As you can see, I have included the box model hack in this, but its not solving the problem (since its not really supposed to apply to padding anyway... its supposed to correct width but I thought a similar method would work.

    If anyone has any idea how to fix this it would be great... the page validates in both xhtml and css, so i know its not that.

    ___________
    The second issue I am having is on the same page... I have used a table (don't flog me please!) so I could place the content area next to the sidebar. DIVs wouldn't work because the only way I knew to get them to be placed side by side is with float, but because they have to be held inside another div (to not creep up on the tabbed list menu) the float would break them out and screw the layout up. Is there anyway to maintain the site look as it is but replace that nasty table code

    Thanks for any help!,
    Marcus
    Disembodied Studios
    http://www.disembodied.us

  2. #2
    Join Date
    Nov 2006
    Posts
    46
    Update on the padding issue:

    I solved the problem by using the Conditional Comment trick for IE and just made a separate stylesheet that contained the header h1 element with a greater amount of padding for IE specifically.

    But I am still trying to figure out how to get rid of the table and replace it with divs.

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles