?
Solved

Padding Issue / Layout messing up

Posted on 2008-10-25
6
Medium Priority
?
338 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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).
Suggested Courses

777 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