Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

macjram

macrumors 6502a
Original poster
Dec 20, 2008
574
3
How do I make my divs look the same in both IE and Firefox? I want both to appear like they do in IE.

IE
1.jpg


Firefox
2.jpg


Thanks !
 
We'll need to see the HTML and CSS to answer. Browsers have different understandings of CSS so it's hard to get them both to display things exactly the same in some instances.
 
Sadly the screenshots are far to small to see the URL and therefore take a look at the CSS and markup.
 
oh sorry

http://www.mfjram.com/wp

you could've looked at the address of the picture and found out from there ;), but my fault

/*
Theme Name: Aer
Theme URI: http://thebuckmaker.com/aer
Description: Beautiful light and professional designed WordPress theme by <a href="http://thebuckmaker.com">TheBuckmaker.com</a>.
Author: Joe Fischler
Author URI: http://thebuckmaker.com
Tags: fixed width, single column, valid XHTML, simple, blue, clean, widgets, widget ready, 1column, gravatars, rounded corners, transparent
Version: 1.0.1
*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++ General Stylings ++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++*/


a {
color: #000;
text-decoration:none;
font-weight:bold;
}

a img {
border: none;
}

img {}



a:hover {
color:#000;
text-decoration:none;
}



blockquote {
border-left: 5px solid #ccc;
margin-left: 1.5em;
padding-left: 5px;
}


/*++++++++++++++++++ The BACKGROUND IMAGE +++++++++++++++++++++*/
/*+++++ replace "(images/aerodrome.jpg)" with another image from the /images directory of the theme ++++*/

body {
background: url(http://www.mfjram.com/images/bg/bgeezy.jpg) no-repeat 0 0 #fff;
background-attachment:fixed;
background-position:top center;
color: #000;
font-family: Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
}

cite {
font-size: 90%;
font-style: normal;
}

h1 { font: 20px 'Arial', Verdana, sans-serif;
margin: 15px 0 2px 0;
padding-bottom: 2px;
font-weight:bold;
}

h2 {
font: 95% 'Arial', Verdana, sans-serif;
margin: 15px 0 2px 0;
padding-bottom: 2px;
}

h3 {
font-family: Arial, Verdana, sans-serif;
margin: 0 0 5px 0;
}



p, li {
font: 12px 'Arial', Verdana, sans-serif;
line-height:16px;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++ Containers and Headers ++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ++++++++++++++++++ The Main Container ++++++++++++++++++ */
#rap {
width:625px;
height: 100%;
margin:0 auto;
background-image: url(http://www.mfjram.com/images/trans.png) no-repeat 0 0;
}

#rap3 {
width:585px;
margin:0 auto;
}

#rap2 {
width:700px;
margin:0 auto;
position: absolute;
background-color: #fff;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;

}

/* ++++++++++++++++++ The Content Container - where your posts are ++++++++++++++++++ */

#content {
width: 580px;
float:left;
overflow:hidden;
margin-bottom:30px;
}


/* ++++++++++++++++++ The Header Section ++++++++++++++++++ */
#header {
width:580px;
font-family: Verdana, Arial, sans-serif;
overflow:hidden;
margin:0 0 0 0;
padding: 20px 2px 0px 3px;
background:#fff;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:10px;

-khtml-border-radius-topleft:0px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:0px;
-khtml-border-radius-bottomright:10px;

-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:10px;
}

#header a {
color: #fff;
text-decoration: none;
}

#header a:hover {
text-decoration: none;
}

#header h1 {font-family:verdana,arial,sans-serif;
font-size:29px;
margin: 15px 0 0 20px;
padding:0;
color:#fff;
z-index:1;

}

#header h1 a:hover {}

#header h2 {margin-top:2px;
font-family: verdana, arial, sans-serif;
font-size:13px;
color:#fff;
margin-left:25px;

}

#headerleft {
float:left;
width:70%;

}


#headerright a {
background:url(images/rss2.jpg) no-repeat -1px -64px #000;
width:60px;
height:59px;
cursor:pointer;
float:right;
margin:10px 20px 0 0;
}

#headerright a:hover {
background:url(images/rss2.jpg) no-repeat -1px -1px;
}

.navlink {
margin:0px 48px 20px 40px;
color:#808080;
text-align:center;
font-size:10px;
}

.navlink a {
padding:10px;
font-size:10px;
background:#fff;
opacity: 0.5;filter:alpha(opacity=50);zoom:1;
}

.navlink a:hover {
color:#000;

}


#headmenu {
font-family: verdana, arial, sans-serif;
font-size:14px;
width:100%;
font-weight:bold;
float:none;
margin: 30px 0 0 0;
color:#fff;
overflow:hidden;
}


#headmenu a {
color:#000;
background:#fff;
padding:4px 10px 6px 10px;
margin:5px 3px 0 0;
line-height:21px;

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:0px;
-khtml-border-radius-bottomright:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;

}


#headmenu a:hover {text-decoration:none; color:#fff; background:#000;}
#headmenu ul {margin:0;padding:0;}
#headmenu ul li {float:left;
list-style-type:none;
}

.headlip2 {
color:#fff;
background:#6b8994;
font-weight:bold;
padding:0 10px;
margin-right:3px;
line-height:21px;

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:0px;
-khtml-border-radius-bottomright:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
}


.headlip {
color:#fff;
background:#6b8994;
padding:0px 10px 0px 10px;
margin:0 3px 0 0;
line-height:21px;
font-weight:bold;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

-khtml-border-radius-topleft:0px;
-khtml-border-radius-topright:0px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}

#headmenu2 {
font-family: verdana, arial, sans-serif;
font-size:14px;
width:100%;
font-weight:bold;
float:none;
margin: 0 0 20px 0;
color:#fff;
overflow:hidden;
}


#headmenu2 a {
color:#000;
background:#fff;
padding:4px 10px 4px 10px;
margin:0 3px 0 0;
line-height:21px;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;

-khtml-border-radius-topleft:0px;
-khtml-border-radius-topright:0px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;

-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;

}


#headmenu2 a:hover {text-decoration:none; color:#fff; background:#000;}
#headmenu2 ul {margin:0;padding:0;}
#headmenu2 ul li {float:left;
list-style-type:none;
}

/*++++++ The Post wrap without its heading (storytitle) ++++++ */


.datecomrap {
float:left;
width:35px;

}

.date {
color:#fff;
background:#000;
width:100%;
height:60px;
text-align:center;
font-size:0.7em;
padding:3px 0 0 0;

opacity: 0.6;filter:alpha(opacity=60);zoom:1;

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:0px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;

}

.commy {
color:#fff;
background:#000;
height:30px;
text-align:center;
font-size:1.1em;
padding:7px 0 0 0;
margin-top:10px;
width:100%;
opacity: 0.2;filter:alpha(opacity=20);zoom:1;


-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:0px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:0px;

}

.commy a, .commy a:hover {color:#fff;}

.storywrap {
padding:10px 20px;
font-size:12px;
text-align:justify;
float:left;
width:502px;
margin-bottom:15px;
min-height:100px;
background:#fff;
overflow:hidden;
border-right:2px solid #c0c0c0;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;

-khtml-border-radius-topleft:0px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:10px;
-khtml-border-radius-bottomright:10px;

-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

}


/* ++++++++++++++++++ The Sidebar Section ++++++++++++++++++ */


#sidebar {
width:220px;
color:#fff;
line-height:14px;
border:40px solid #fff;
padding:20px 120px;
float:right;
margin-bottom:20px;
margin-right:10px;
overflow:hidden;
background:#000;
opacity: 0.2;filter:alpha(opacity=20);zoom:1;
-webkit-border-radius:0px;
-khtml-border-radius:0px;
-moz-border-radius:0px;


}



#search {list-style-type:none;
padding:5px 5px 5px 0;


}


.notfound {
margin:40px 100px 0 100px;
text-align:center;
font-weight:bold;
background:#fff;
padding:20px 10px;}


.notfound a {
text-decoration:underline;}

#sidebar form {
margin: 0;
padding:0;
list-style-type:none;
}

#sidebar input#s {
text-align:left;
margin-left:0px;
width: 77%;
color: #000;
font-weight:bold;
font-family: verdana, arial,sans-serif;
font-size:12px;
}

#sidebar a {font-weight:normal; color:#fff;}

#sidebar a:hover {
color:#fff;
text-decoration:underline;
}


#sidebar h3 {font-weight:bold; font-size:15px; margin:40px 0 6px 5px;}

.widget {width:100%;}

#sidebar ul {
color: #fff;
font-weight: bold;
list-style-type: none;
margin: 0 auto;
width:100%;
text-align:center;
padding:0;

}

#sidebar ul li {
font-family: Arial, Verdana, sans-serif;
padding:0 5px 1px 5px;
margin:3px 0 0 0;
list-style-type: none;
font-size:11px;
float:center;
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++ Special Stylings ++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++*/







/* +++++++++++++++ The Heading of your Posts and Pages ++++++++++++++++++ */

.storytitle {
color:#000;
padding-bottom:2px;
border-bottom:1px solid #808080;
text-align:left;

margin-bottom:12px;
}

.storytitle h3 {text-align:left;}

.storytitle a {
text-decoration: none;
color:#000;
font-size:16px;
font-weight:bold;
}

.storytitle a:hover {
text-decoration:none;
}

.storytitle a:visited {
}


.post {
clear:both;
padding-bottom:10px;
overflow:visible;

}

.feedback {
float:left;
font-size:10px;
margin-bottom:20px;
}

.feedback a {font-weight:normal;}

.storycontent {font-size:13px; line-height:16px;}
.storycontent p {margin-top:0px; }
.storycontent p a {text-decoration:underline;}

.meta {
font-size: 10px;
font-family: Arial, Verdana, sans-serif;
color: #808080;
clear:both;
padding-top:2px;
border-top:1px solid #808080;
margin:20px 0 0 0;
}

.meta li, ul.post-meta li {
display: inline;

}

.meta ul {
display: inline;
list-style: none;
margin: 0;
padding: 0;

}


.meta a, .meta a:visited {
color: #808080;
font-weight: bold;
}


.meta a:hover {
border-bottom:1px solid #808080;
}

ul.post-meta {
list-style: none;
}

ul.post-meta span.post-meta-key {
font-weight: bold;
}

.footprint {

border-top: 3px double #fff;
color: #000;
font-size: 11px;
margin: 30px 0 0 0;
background:#fff;
padding: 3px;
text-align: center;
clear:both;
opacity: 0.5;filter:alpha(opacity=50);zoom:1;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:0px;
-khtml-border-radius-bottomright:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
}

.footprint a {
color:#757575;

}


/* +++++++++++++++ The comment section +++++++++++++++++ */


#commentform #author, #commentform #email, #commentform #url, #commentform textarea {

border: 1px solid #808080;
padding: .2em;
margin-left:10px;
}

#commentform textarea {
width:96%;
}

#commentlist {
width: 97%;
font-size:11px;
color:#000;
margin:0 0 20px 0;
padding: 0 0 0 10px;
}

#commentlist li {
border:5px solid #dcdcdc;
margin:0 0 20px 0;
list-style-type:none;
padding:0px;

background:#fff;

-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;

}

#commentlist ul {margin:0; padding:0;}

#commentlist li p {font-size:12px;
padding:5px 10px 5px 80px;
margin:0;

}

#commentlist a {
text-decoration:underline;
font-weight:bold;
}

#commentlist li div.meta {padding:0; margin:0; text-align:center;}

#commentlist li .avatar {
float:left;
padding:0;
margin:5px;

}

.authorcomm {float:left;
margin:0;
padding:0;
width:70px;
text-align:center;
line-height:12px;
font-size:10px;
}

.authorcomm a {text-decoration:none; font-weight:bold;}


/* ++++++++++++++++++ Not to much css for the Calendar ++++++++++++++++++ */

#wp-calendar {

border: 1px solid #999;
empty-cells: show;
font-size: 11px;
width:200px;
margin:0 auto;
}

#wp-calendar a {text-decoration:underline; font-weight:bold;}
#wp-calendar a:hover {border:none; color:#fff;}
#wp-calendar caption {text-align:left;}
#calendar_wrap {text-align:center;}


/* ++++++++++++++++++ IMAGES Size & aligment ++++++++++++++++++ */

img.alignleft {
float: left;
margin:0 10px 5px 0;

}

img.aligncenter {
margin-top:10px;
margin-bottom:10px;
display: block;
margin-left: auto;
margin-right: auto;

}

img.alignright {
float: right;
margin:0 0 5px 10px;

}

img.size-thumbnail {width:200px;
}

img.size-medium{
}

img.size-full {
}

/* ++++++++++++++++++ WORDPRESS Captions & aligment ++++++++++++++++++ */


.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
padding-top: 4px;
margin: 10px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}


and heres from my header html

<body>
<div id="rap" style="background-image: url(http://www.mfjram.com/images/trans.png); height: 100%;">
<div id="rap3">

<div id="headmenu">


</div><!-- end headmenu -->


<div id="header">
<center>
<img src="http://www.mfjram.com/images/banner/rotate.php">
<div id="headerleft">

</div><!-- end headerleft -->

<div id="headerright">

</div><!-- end headerright -->

</div><!-- end header -->

<div id="headmenu2">
<ul>

<!-- ******************** C U S T O M L I N K S E C T I O N H E A D E R B O T T O M *************** -->
<!-- INSERT YOUR CUSTOM LINKS AND LINK DESCRIPTIONS LIKE <li><a href="http://thebuckmaker.com" title="The Buckmaker is great">TheBuckmaker</a></li> -->



</div><!-- end headmenu2 -->

<div id="content">
 
The most common way of dealing with IE's inadequacies is to use custom CSS files depending on the browser.

Example:

Code:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

The unfortunate answer is that you will have to code up multiple sheets. You can thank Microsoft for not making a standards compliant browser.




....Melrose should be in here soon....
 
The most common way of dealing with IE's inadequacies is to use custom CSS files depending on the browser.

Actually he said IE is showing it the way he wants.

The short answer to the issue is that you have a lot of floating going on. Firefox is showing it correctly as implemented. When you float an item it's removed from the flow, and as a result won't add to its parent's height, and is why the background is not going as far as it should. You should read over float behavior.
 
....Melrose should be in here soon....

Dun-da-da-daaa!! :D

Safari Screenshot (Mac)

IE8 also has trouble with it I'm afraid - which is only Win7 atm but will be danger down the road. Sorry there's not more right now but it's a bit late. I'll check it in the morning if it hasn't been resolved by Angelwatt or someone by then.

The float bug mentioned ^^ has troubled me in the past until I caught on to what it was.. Float hack in IE. I'd also note what Angelwatt said about the differences between the two: Firefox is interpreting it correctly. I'd recommend you develop in Firefox, and do your testing in IE at the major stages along the way.
 
How I do it

I agree with what Melrose said about coding for FireFox. If you do you will have less problems later on, like when you deal with Safari andpossibly Opera and a Linux browser. After you do so you can make sure it is valid which will in theory make it relatively future proof. Once that is done I start in on the custom CSS page or IE hacks(only use the hacks if it is only a couple of adjustments).

I am by no means telling you how it has to be done but with IE8 coming all your work could be harder to fix, been there myself. This is the best solution I could come up with so I had to make adjustments for only one browser not five. I hope that helps, happy coding.
 
Hi,

Change these two declerations:

HTML:
#rap {
        width:625px;
        height: 100%;
        margin:0 auto;
}

#rap3 {
        width:585px;
        padding: 0 20px;
        float: left;
        background: url(http://www.mfjram.com/images/trans.png) 0 0;
}

This means everything inside the #rap div will be centred (as before).

The #rap3 div will expand to fill its contents. This means the background image will tile down the page.

This will get the job done in Safari and Firefox and very likely IE 8.

Will probably break IE 7 and earlier though. Use conditional comments, as outlined a above.
 
to see the HTML and CSS to answer. Browsers have different understandings of CSS so it's hard to get them both to display things exactly the same in some instances.
 
Actually he said IE is showing it the way he wants.

The short answer to the issue is that you have a lot of floating going on. Firefox is showing it correctly as implemented. When you float an item it's removed from the flow, and as a result won't add to its parent's height, and is why the background is not going as far as it should. You should read over float behavior.

Exactly. I want you to keep those words in mind when I tell you that just because it looks right in IE, doesn't mean it is coded correctly. You haven't provided a solution for his issue, only a float tutorial. There are situations that dictate the use of multiple style sheets. If you think different, you must have come across some miraculous new way that web designers have missed.
 
You were all really helpful, I read all the links (some of it was confusing, well, most of it but I'm kinda new at this lol), and thanks for the screenshots & advice from everyone ! I tried the fixes elppa recommended, and so far so good.

I'm gonna start trying to mainly code in Firefox now, and then afterwards I'll deal with IE since that seems what most of you are recommending?

Anyways, thanks everyone that helped ! Hopefully I didn't waste too much of your guys times :eek:

See ya.
 
Exactly. I want you to keep those words in mind when I tell you that just because it looks right in IE, doesn't mean it is coded correctly. You haven't provided a solution for his issue, only a float tutorial. There are situations that dictate the use of multiple style sheets. If you think different, you must have come across some miraculous new way that web designers have missed.

Well the solution is an involved one, not a quick fix, and I don't have the time to develop the solution. You didn't provide a solution either so not sure why you're being so immature about this. I've never had to rely on conditional comments.
 
you must have come across some miraculous new way that web designers have missed.

sure! do it the way we did it in the olden days!

use only P, B, A and IMG tags. =D

(joking aside)

this is one of the unfortunate things that has happened when we 'ditched' tables. and of course, MS being, well, MS.

I do suggest looking at some of the CSS frameworks (like YUI, for example) which have already tackled this issue, perhaps they would be of help.
 
Well the solution is an involved one, not a quick fix, and I don't have the time to develop the solution. You didn't provide a solution either so not sure why you're being so immature about this. I've never had to rely on conditional comments.
I hate to say this but I think you may have just gotten lucky. Unfortunately many of us have seem to of had at some point needed to deal with floats and/or fixed/absolute positioning. Conditional CSS is almost a necessity these days and from what I hear so far IE8 is well on it's way to getting worse not better (i really should get off my ??? and test it myself). I hope this changes but I never expect anything even half way decent from MS, ever, that way it is never a huge disappointment only a small one.

With that in mind I recommend macjram look up w3schools cssplay.co.uk and anything else in the new thread in these forums with developer resources you will find it here: Helpful links for Web Design and Development it will help you learn how to code correctly and it has an indispensable link for the CSS "IE hacks". The only solution for now would be to leave what you have now alone and make adjustments in a new CSS file copying what you have and using what elppa gave you. You can then do what Tip.tucker said and add that code calling up the IE specific CSS which is what you have now. I personally make a whole CSS file for "everything else" and then a CSS file with only that IE hacks.
 
I hate to say this but I think you may have just gotten lucky. Unfortunately many of us have seem to of had at some point needed to deal with floats and/or fixed/absolute positioning. Conditional CSS is almost a necessity these days and from what I hear so far IE8 is well on it's way to getting worse not better (i really should get off my ??? and test it myself). I hope this changes but I never expect anything even half way decent from MS, ever, that way it is never a huge disappointment only a small one.

Well, from the look of the OP's site now, they have fixed the original problem and it didn't require using the conditional comments. :) Some of the comments here were making it sound like I have something against conditional comments as if they were evil. I haven't said anything against them, but also didn't see them being necessary for this situation, as has been shown by the solution. I know you (RoninXI) weren't accusing me of anything, but you were the second person to mention it, so I just wanted to clarify my position as I was seemingly being misinterpreted.

Glad to see elppa's help has given macjram a solution. The site looks good.
 
This is why I hate Microsoft. I have much the same problem. I just constantly tweak the code over and over again until it looks the same, avoiding using the 'padding' attribute.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.