1. Home
  2. Forums Index
  3. Browser Side / CSS 5:04 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE css padding issue

padding issue

         

scuzzo84

7:33 pm on Jul 6, 2006 (gmt 0)

10+ Year Member



This is the difference on my page IE vs Firefox and I want the FF look but IE is having problems with the padding. Its also having problems with the height and width I think for the menu.

Picture: [i79.photobucket.com...]

/////////////////////////////////////
Here is the HTML:
////////////////////////////////////
<html>
<head>
<title>Rabble!</title>
<style type="text/css" media="all">@import "look.css";</style>
</head>
<body>
<center>
<table id=MAIN cellspacing="0" cellpadding="0">
<tr><td colspan="6" valign="top" id="banner"><img src=images/banner2.gif></td></tr>
<tr id="MENU"><td id="MENU"><a href="index.php">HOME</a></td><td id="MENU"><a href=index.php?page=faq>BUGS/FAQ</a></td>
<td id="MENU"><a href="index.php?page=search">SEARCH</a></td><td id="MENU"><a
href=index.php?page=licenses>LICENSES</a></td>
<td id="EMPTY"></td><td id="EMPTY"></td></tr>
<tr><td colspan="5" valign="top">

THIS IS THE MAIN BODY SECTION. HELLO WORLD.

</td>
<td colspan="2" valign="top" align="right">

<FORM action=auth.php method=POST>
<table id=admin>
<tr><td id=block>Admin Login</td></tr><tr>
<td id=ssub>
User: <br><input type=text size=25 name=uname><br>
Pass: <br><input type=password size=25 name=pass><br>
<input type=submit value=Login id=button>
</td></tr>
</table>
</FORM>

</td></tr>
<tr id="footer"><td colspan="6"></td></tr>
<tr><td colspan="6" align="right" valign="middle"><p id="fsub"><b>Rabble!
1.0</b> by Haroon Khalid
<img src=images/apache.gif> <img src=images/php.gif>
<img src=images/pgsql.gif> <img src=images/bsd.gif>
</p>
</td></tr>
</table>
</center>
</body>

////////////////////////////////////
Here is the CSS:
///////////////////////////////////

body {
background-color: #E5E5E5;
}

#MAIN {
margin-top: 20px;
width: 900px;
background-color: #FFFFFF;
padding: 25px;
}

#LOGOFF {
margin-top: 300px;
width: 900px;
background-color: #FFFFFF;
padding: 25px;
}

#MENU {
text-align: center;
width: 100px;
height: 30px;
background-color: #666666;
font: 8pt verdana, arial, sans-serif;
color: #FFFFFF;
border-style:solid;
border-top-color:blue;
border-bottom-color:red;
border-left-color:yellow;
border-right-color: #FFFFFF;
border-width:20px;
border-top-width:0px;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:1px;
}

#MENU a:link {
color: #FFFFFF;
text-decoration: none;
}

#MENU a:active {
color: #FFFFFF;
text-decoration: none;
}

#MENU a:visited {
text-decoration: none;
color: #FFFFFF;
text-decoration: none;
}

#MENU a:hover {
text-decoration: underline;
color: #FFFFFF;
}

#EMPTY {
text-align: center;
width: 100px;
height: 30px;
background-color: #666666;
font: 8pt verdana, arial, sans-serif;
color: #FFFFFF;
border-style:solid;
border-top-color:blue;
border-bottom-color:red;
border-left-color:yellow;
border-right-color: #FFFFFF;
border-width:20px;
border-top-width:0px;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:1px;
}

#MENU td:hover {
background-color: #000000;
}

#header {
margin-top: 15px;
font-size: 36px;
font-weight: bold;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
color: #B40101;
margin-bottom: 3px;
}

#hsub {
margin-top: 5px;
margin-bottom: 10px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
display: inline;
}

#faq {
margin-top: 5px;
margin-bottom: 0px;
font-size: 14px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
}

#hsub a:link {
color: #000000;
text-decoration: underline;
}

#hsub a:active {
color: #000000;
text-decoration: underline;
}

#hsub a:visited {
text-decoration: none;
color: #000000;
text-decoration: underline;
}

#hsub a:hover {
text-decoration: underline;
color: #B40101;
}

#admin {
margin-top: 25px;
margin-left: 30px;
border-collapse: collapse;
}

#ssub {
margin-top: 5px;
margin-bottom: 10px;
font-size: 12px;
font-weight: bold;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
}

#block {
margin-top: 25px;
margin-left: 30px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
width: 180px;
background-color: #000000;
text-align: middle;
vertical-align: middle;
padding: 10px;
}

#blockhead {
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
padding: 10px;
}

#blocksub {
border-collapse: collapse;
margin-top: 25px;
margin-left: 30px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
color: #FFFFFF;
width: 140px;
background-color: #000000;
text-align: middle;
vertical-align: middle;
padding: 10px;
border-style:solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color:yellow;
border-right-color: #FFFFFF;
border-width:1px;
border-top-width:1px;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
}

#blocksub a:link {
text-decoration: none;
color: #FFFFFF;
}

#blocksub a:active {
text-decoration: none;
color: #FFFFFF;
}

#blocksub a:visited {
text-decoration: none;
color: #FFFFFF;
}

#blocksub a:hover {
text-decoration: underline;
color: #FFFFFF;
}

#blocksub td:hover {
color: #FFFFFF;
background-color: #666666;
}

#bsub {
margin-left: 30px;
margin-top: 5px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
color: #666666;
}

#button {
margin-top: 5px;
margin-bottom: 5px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
color: #000000;
background-color: #CCCCCC;
border:1px solid;
border-color: #000000;
}

#footer {
margin-top: 40px;
background-color: #B40101;
width: 690px;
height: 10px;
}

#fsub {
margin-top: 5px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
}

.hart{
margin-top: 5px;
margin-right: 0px;
width: 610px;
border: 1px solid #000000;
border-collapse: collapse;
}

#edit {
padding: 5px;
border: 1px solid #000000;
border-collapse: collapse;
}

#edit2 {
padding: 5px;
border: 1px solid #000000;
border-collapse: collapse;
color: #FFFFFF;
background-color: #B45050;
}

#edit3 {
padding: 5px;
border: 1px solid #000000;
border-collapse: collapse;
color: #FFFFFF;
background-color: #B78383;
}

#edit4 {
padding: 5px;
border: 1px solid #000000;
border-collapse: collapse;
color: #FFFFFF;
background-color: #666666;
}

#edithead {
font-size: 14px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
margin-bottom: 0px;
margin-left: 2px;
}

#editing {
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
}

#editbad {
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #B40101;
}

#editbad a:link {
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #000000;
}

#editbad a:active {
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #000000;
}

#editbad a:visited {
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #000000;
}

#editbad a:hover {
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #B40101;
}

.fill2{
border: 1px solid #000000;
border-collapse: collapse;
padding: 5px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
background: #B40101;
}

.fill3{
border: 1px solid #000000;
border-collapse: collapse;
padding: 5px;
font-size: 12px;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
font-weight: bold;
color: #000000;
background: #FFFFFF;
}

#banner {
background-color: #B40101;
}

[edited by: scuzzo84 at 7:36 pm (utc) on July 6, 2006]

scuzzo84

7:34 pm on Jul 6, 2006 (gmt 0)

10+ Year Member



woops

bbmatt

12:24 pm on Jul 7, 2006 (gmt 0)

10+ Year Member



Ok, firstly your mixing up Tables with CSS layout, you should really get to grips with dropping tables for layouts and only use them for tabular data.

Secondly, your using the same ID more than once in a page, which isn't good practice.

Thirdly, for structural page elements, it's best to steer clear of excessive use of padding and margin elements, rather using those for the elements which lie within the main structure.

At it's most basic, what you need are is something like the following css structural code :-

.clearboth {
margin:0px;
padding:0px;
font-size:1%;
line-height:0%;
clear:both;
}

#wrapper

{
margin: 0 auto 0 auto;
width:900px;

}

#topbar
{
width:100%;
height:83px;
margin:0;

}

#topnav
{
width:100%;

}

#col1 {
width:600px;
float:left;
}

#col2 {
width:300px;
float:left;
}

#footer {
width:100%;
}

Then, your basic HTML structure would be :-

<html>
<body>

<div id="wrapper">

<div id="topbar">Rabble Logo</div>
<div id="topnav">Your navigation code - use a list for this</div>
<div id="col1">Your main content area</div>
<div id="col2">Your menu
<br class="clearboth" /> (This clears the float, there's different ways to do this)
</div>

<div id="footer">Your footer</div>

</body>
</html>

I'll leave it up to you to fill in the missing bits, but it'll head you in the right direction.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:04 am May 2, 2026