Solved

Padding Issue / Layout messing up

Posted on 2008-10-25
6
325 Views
Last Modified: 2012-05-05
As you can see when you open www.cjs.ezhoster.com with Internet Explorer (only messes up with IE), the layout of the site messes up. Notably the footer and the black bars in the header. I have tried removing the padding of the content box and it does fix the issue, but without padding it looks a bit stupid.

All help is appreciated!
John
0
Comment
Question by:drumer901
  • 2
  • 2
6 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
Comment Utility
it seems like your main problem is with the padding automatically inserted by IE around the images, so if you start here with CSS --

IMG  {padding:0px; margin:0px; border:0px }  

and apply that to the images first, you will probably get rid of the black that is the main cause of the IE issue.

The other problem is here in your code --
<td style="padding:0 44px 0 44;">

that is creating a lot of the problem.  Start with all of those 0px, and increase if not a problem.

YOu can also style the Table and TD just as easily, and you should to remove any inherent padding and margins that IE places in the TD and tables.
0
 
LVL 1

Author Comment

by:drumer901
Comment Utility
I added the IMG  {padding:0px; margin:0px; border:0px } and that seems to do the trick. The problem now though, is that I have no padding on for the content. What should I do?
0
 
LVL 1

Author Comment

by:drumer901
Comment Utility
EDIT: Nevermind, I had a mix up with a few files. The problem is still happening. I know that when I put <td style="padding:0 44px 0 0;"> the problems are fixed, but I need the padding...
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
Your content is styled with <P> tags as I recall, so do this --

P  {  padding-left:20px; padding-top:10px; padding-bottom:15px; padding-right:10px; }

or you can use a combination of padding and margins, and you can also declare them as

padding: 10 20 15 20px; but I find the rotating nature of that padding hard to remember, so it is easier to specify them as you want to change them.  

Also remember, you should style your CONTENT DIV differently than the DIVs holding images --

DIV.content  { give some padding and margins here }

<DIV class=content> here are your paragraphs of content </DIV>

that is the usual way to do it, keep the content layout styled differently than the graphics layout.
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
For starters, you're using an incomplete doctype so IE is in quirks mode, which is usually a bad thing. So use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

or even better, this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now