All geek questions in one place

IE has different height / width for div than Firefox

I am having problems with div height and width in IE.

On my web page http://www.ricominciodame.it/eventi.php there are several div with board type.
In Firefox, they all work fine, but in IE (both 7 and 8) the width is lower and the background is cropped.

Below is my CSS:

 div.evento { background : white url("images/sfondo_evento.png") top no-repeat; width : 260px; height : 207px; margin:5px; margin-left:0px; margin-bottom : 20px; padding-left : 20px; padding-right : 20px; padding-top : 20px; padding-bottom : 20px; color : white; }

How can I fix this problem?

+4
source share
4 answers

Your page is up, i.e. quirks mode called by DOCTYPE . You must use any of these http://www.w3.org/QA/2002/04/valid-dtd-list.html

It is also useful to always check your website, w3 validator .

+7
source

Is your doctype installed in the browser in standard mode? For instance:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+6
source

I always 'reset' css before creating a new page. I load my CSS files (note that I load reset first, after that the actual layout):

 <link rel="stylesheet" href="css-styles/reset.css" /> <link rel="stylesheet" href="css-styles/all.css" />

My reset CSS looks like this:

 /* CSS Document */ /* Clear all styles */ 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, 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: "" "";} /*Ceal all styles END */
+1
source

may be a box model issue: http://css-tricks.com/the-css-box-model/

I would do something like this:

 div.evento { background : white url("images/sfondo_evento.png") top no-repeat; width : 300px; height : 207px; margin:5px; margin-left:0px; margin-bottom : 20px; color : white; } div.evento-inner { padding-left : 20px; padding-right : 20px; padding-top : 20px; padding-bottom : 20px; }

in IE, padding takes 20 pixels on each side of the width of 260 pixels that you declare.

0
source

Source: https://habr.com/ru/post/1337030/

More articles:


All Articles