[Jamie]

Hey,

I just wondered if anyone can help, i'm coding for the latest browsers and running into a padding issue where the width of a gap is bigger in between two content areas in FF than it is in IE7.

Here's my code (also if you have any recommendations to better my code, that will also be very helpful!):

HTML

CODE

<div id="contentwrap"> <!-- Start Content Wrapping -->
                
                        <div id="contentmain"> <!-- Start Main Content -->
                        
                                <div id="bluebar">
                                
                                <h1>Main content</h1>
                                
                                </div>
                                
                                <p>Main content area here.</p>
                        
                        </div> <!-- End Main Content -->
                        
                        <div id="rightmain"> <!-- Start Right Content -->
                        
                                <div id="greybar">
                                
                                <h1>Right Content</h1>
                                
                                </div>
                                
                                <ul>
                                
                                <li>Diskspace: 20,000MB</li>
                                <li>Diskspace: 20,000MB</li>
                                <li>Diskspace: 20,000MB</li>
                                <li>Diskspace: 20,000MB</li>
                                <li>Diskspace: 20,000MB</li>
                                
                                </ul>

                        </div>
                
                </div> <!-- End Content Wrapping -->

CSS

CODE

#contentwrap {
    width: 755px;
    margin-top: 5px;
}

#contentmain {
    width: 494px;
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    padding: 2px;
    float: left;
}

#contentmain p {
    text-align: left;
    padding: 5px 0px 5px 5px;
}

#bluebar {
    height: 15px;
    background-color: #103a6b;
    padding: 5px 0px 5px 10px;
}

#bluebar h1 {
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
}

#rightmain {
    width: 234px;
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    padding: 2px;
    float: right;
    color: #474747;
}

#rightmain p {
    text-align: left;
    padding: 5px 0px 5px 5px;
}

#rightmain ul {
    float: left;
    padding: 20px 0px 20px 30px;
}

#rightmain ul li {
    padding-bottom: 3px;
}

#greybar {
    height: 15px;
    background-color: #232323;
    padding: 5px 0px 5px 10px;
}

#greybar h1 {
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
}

As you can see, i'm not brilliant at coding so if you have any other suggetions feel free to post them!

Thanks,
Jamie

[Tom]

I had a quick look - just a small suggestion - theres no need to wrap your h1 tags in another div in order to style them...

Also you have 2 h1's, you should swap them for h2's to make them more semantic.

[Diffraction]

Always always always code for firefox first. Then make a conditional statement and attach a stylesheet for IE only to fix the padding issue.

[styyls]

Always always always code for firefox first. Then make a conditional statement and attach a stylesheet for IE only to fix the padding issue.

I definitely agree with this one. In addition to this, I would periodically check the site in IE while I'm writing the CSS and HTML to make sure that any larger issues won't come up. (By larger, I mean positioning of elements vs. padding, borders, etc.)

Tom brought up a great point as well. The h1 (and h2, h3, etc.), by default, is displayed as a block level element. This of course means that there is usually a default margin and padding value associated with it.

If you are not familiar with conditional statement in HTML, take a look at this link.

Good luck, Jamie!

[Will Roberts]

change your css to the following

CODE

#contentwrap {
    width: 755px;
    margin-top: 5px;
}

#contentmain {
    width: 494px;
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    padding: 2px;
    float: left;
}

#contentmain p {
    text-align: left;
    padding: 5px 0px 5px 5px;
}

#bluebar {
    height: 15px;
    background-color: #103a6b;
    padding: 5px 0px 5px 10px;
}

#bluebar h1 {
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
}

#rightmain {
    width: 234px;
    background-color: #FFFFFF;
    border: 1px solid #D8D8D8;
    padding: 2px;
    float: right;
    color: #474747;
}

#rightmain p {
    text-align: left;
    padding: 5px 0px 5px 5px;
}

#rightmain ul {
    float: left;
    padding: 20px 0px 20px 30px;
}

#rightmain ul li {
    padding-bottom: 3px;
}

#greybar {
    height: 15px;
    background-color: #232323;
    padding: 5px 0px 5px 10px;
}

#greybar h1 {
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;
}

[pat24]

Hi

I find its always a good idea to use a reset css sheet. This will as closely as possible give you a standard blank canvas accross all browsers to start with.

In affect what you are doing is removing all the annoying padding and margin differences between browsers.

This is not full proof but will give you a good starting point.

Here is the one I use, it was written by Eric Myers a css guru.

Hope it helps

CODE

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Pat

[Sam Granger]

What about:

CODE

* {
margin: 0;
padding: 0;
etc...
}

for resetting?

[Diffraction]

What about:

CODE

* {
margin: 0;
padding: 0;
etc...
}

for resetting?

That is good in most cases but it resets some elements you don't want reset..