CODEWITHSUNDEEP
htmlcss
user1477707
user1477707

Reputation: 65

Why don't changes to my padding affect the width of an element in IE?

Firefox and Chrome are handling padding in a different way from IE.

For Firefox and Chrome, when I use padding, this is added to the total width of the div. For IE, padding values are ignored so the CSS doesn't work uniformly. This seems to be a new development because they've always worked the same. EG

#header
{
   width:280;
   padding-left:10px;
   padding-right:10px;
}

This gives a total of 300px in Firefox and Chrome but the width doesn't change in IE.

How do I handle this issue?

Upvotes: 0

Views: 103

Answers (2)

user1477707
user1477707

Reputation: 65

Adding a doctype and modifying my html tag helped me fix the problem. This is the new change below.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

Of course, I used opening and closing tags but there's not displaying properly as code blocks

Upvotes: 0

Dancrumb
Dancrumb

Reputation: 27529

What you're dealing with here is a known problem in IE.

In short, when there's a problem with your HTML, IE drops into Quirks Mode as it tries to figure out how to resolve those problems. When it does this, its interpretation of the CSS Box Model (the thing that determines how to handle width, padding, border and margin) breaks away from the W3C standard.

So, odds are, there's a problem with your HTML and your first port of call should be the W3C Markup Validation Service. Use this to validate your HTML. Once your HTML validates, try again with your CSS. If it's still broken, head back here.

Upvotes: 1

Related Questions