Hi everyone,

 

I'm new to this forum and CSS, so I'm just starting to discover all the inconsistencies between Firefox and IE. I personally use Firefox, but of course, most of the world uses IE so I'd like to understand how to get compatible code for both before I build too many DIV elements.

 

Heres the sample CSS page:

http://home.exetel.com.au/jazzy/template_css_styling.php

 

The CSS Styles are held in an external Style Sheet located in

/library/stylesheet.css

 

As you can see, in the IE browser, the DIV box that holds the Image has extended itself slightly which pushes the Specs2 DIV box out of alignment.

 

Here an extract from the stylesheet. (there is more code in the actual stylesheet, but its blanked out as developer notes):

 

/*

-moz-box-sizing: border-box;

box-sizing: border-box;

margin: 0;

padding: 0;

*/

 

 

.container

{

background-color: #666666;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

width: 400px;

height: 120px;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin: 0;

padding: 0;

}

 

.title_left

{

background-color: #CCCCCC;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 12px;

width: 194px;

height: 15px;

float: left;

text-align: left;

padding: 4px;

position: relative;

left: 4px;

top: 4px;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin: 0;

padding: 0;

}

 

.image_right

{

background-color: #CCCCCC;

width: 194px;

height: 60px;

float: right;

position: relative;

right: 4px;

top: 4px;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin: 0;

padding: 0;

}

 

.specs_1

{

background-color: #CCCCCC;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

width: 194px;

height: 93px;

float: left;

text-align: left;

padding: 4px;

position: relative;

left: 4px;

top: 8Px;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin: 0;

padding: 0;

 

}

 

.specs_2

{

background-color: #CCCCCC;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

width: 194px;

height: 48px;

float: right;

position: relative;

right: 4px;

top: 8Px;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin: 0;

padding: 0;

}

 

If anyone could help me resolve / understand whats happening here it would be much appreciated.

 

Thanks,

Jarrad

Update - This seems to have resolved itself after I merged this code with my PHP SQL Query stuff. So thanks to all those who took a look at it, even if you couldn't find a solution.

 

On another note - does anyone know the best way to put a small MARGIN inside each DIV box so that the text doesn't touch the edge of its box?

 

Thanks!

Jarrad

Update - This seems to have resolved itself after I merged this code with my PHP SQL Query stuff. So thanks to all those who took a look at it, even if you couldn't find a solution.

 

On another note - does anyone know the best way to put a small MARGIN inside each DIV box so that the text doesn't touch the edge of its box?

 

Thanks!

Jarrad

 

Use padding:5px; or whatever looks good for you. You can also use padding-top, padding-left etc.

 

Say you had <p>your text</p> in a div called #right then your css might look something like this

 

#right p {
padding:10px;
line-height: 1.4em;
color:#666666;
font-family: Georgia, "Times New Roman", Times, serif;
}

 

Pat

Update - This seems to have resolved itself after I merged this code with my PHP SQL Query stuff. So thanks to all those who took a look at it, even if you couldn't find a solution.

 

On another note - does anyone know the best way to put a small MARGIN inside each DIV box so that the text doesn't touch the edge of its box?

 

Thanks!

Jarrad

 

Add this to the relevent TAG in your CSS

 

Padding: 5px 5px 5px 5px; (each number represents a different side eg. top bottom,left,right, but I don't know in which order I forgot???

 

or you can just

 

padding-left:5px;

....

 

Padding: 5px 5px 5px 5px; (each number represents a different side eg. top bottom,left,right, but I don't know in which order I forgot???

....

the order is TOP - RIGHT - BOTTOM - LEFT (clockwise from top)

You could also do

 

padding: 5px;

 

And that will apply a 5px padding to all four sides. Try as much as you can to use shorthand CSS to cut down on the sizes of your CSS files and make them more readable.

Remember the order as 'Trouble' but in text speak TRBL - Top Right Bottom Left

Thanks for the help everyone.

 

One follow-up question I have in relation to the padding tag that has been recommended is:

 

Due to the inconsistencies between browsers, won't the padding TAG change the size of DIVs and bug the (precise) layout of my DIV boxes?

 

Here is the layout in its present form (again):

http://home.exetel.com.au/jazzy/template_css_styling.php

 

***Edit: Additional question I just thought to ask: when using a <p></p> TAG, does the body of text enclosed inside have a paragraph space, before or after it? Meaning, If I use <p> on my FIRST paragraph, will the text start on line 2, or on line 1. *** Sorry if this is a confusing way to ask this

Hey Jazzy, with respect to your first question, you would not normally apply padding to regular divs that you're using for layout purposes. To prevent elements within the div from butting up against the sides of their containers, you would apply left and right margins to those elements (like paragraphs, unordered lists, etc.). Paddings would also give you a similar effect, but margins are better.

 

Not sure what you're trying to ask in your second question though.