Solved

Padding Issue / Layout messing up

Posted on 2008-10-25
6
326 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
ID: 22806099
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
ID: 22806134
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
ID: 22806142
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
ID: 22806227
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.
ID: 22808148
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

863 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

26 Experts available now in Live!

Get 1:1 Help Now