Browser compatibility issues.

[ashwyn222]

Hi,

Recently I downloaded a template and using XHTML and CSS I designed the layouts as exactly the replica of that template. I did it by checking in firefox.

But when I opened it with IE8 it looked so wiered, all the columns were misplaced and all others overlapping. When I googled about this, came to know about the browser compatibility issue. I want to fix the compatibility issues of IE8 and not able to find the exact material how to do that.

If you guys now, please give me the link.

Thanks.

 

[PixelPusher]

Sounds like you are having issues with the inherit values applied to elements by different browsers. For example, IE will have a different value for padding or margin on an element than say FF or Opera. I recommend using a CSS reset so the values you then declare stay consistent through different browsers.

You have a link to this template so we can see the breakdown in IE?

 

[bluecollar01]

You may want to rewrite a CSS style specifically for IE8. Here is a link that explains how to set-up the if statements so the page checks the browser and then selects the appropriate CSS style sheet.

Let us know if this helps. Thanks.

 

[elcape]

one word 4 you

RESET

add a reset css and later work with that

because each have it own styles (margin, padding and stuff)

so you have to reset it before designing

edit: sorry i did not see the comment of PixelPusher

but here a reset css



html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
p {
margin: 0 0 0 0;
}

body {
line-height: 1;
margin-top:10px;
margin-bottom:0px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

html {
overflow: auto;
}