Solved

Padding Issue / Layout messing up

Posted on 2008-10-25
6
335 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

688 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