Slight problem thats bugging the he** outta me.

[Spinethetic]

HTML File: http://www.geocities.com/spinethetic3/ibiyb/index.htm
Relevant CSS file: http://www.geocities.com/spinethetic3/ibiyb/index_files/styles.css

I am having what would, I would think, be a simple sizing problem for the main cont DIV.


.main {
margin: 0px;
padding: 8px 10px 10px 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
background-color: #FAFFFF;
background-repeat: no-repeat;
vertical-align: top;
height: 100%;
width: 560px;
}


As can be seen in the HTML page ".main" content extends about 10 pixels wider than I want it because I want it to line up even with the header/nav and the footer. But simply changing the 'width' rule isnt working! :eek: :confused: This is probably just some simple little problem that I am overlooking isnt it? :rolleyes:

[billyboy]

If I remember correctly, IE treats the CSS box model differently than gecko based browsers such as Firefox and Netscape and adds the padding inside the dimensions rather than adding it outside. Try removing the padding to see if that solves the problem. If so use margins or relative positioning to move the main div away from other elements

[Twey]

You can use the following hack to cause the padding not to be applied in IE:

padding: 8px 10px 10px 12px !important;
padding: 0;

[Spinethetic]

You can use the following hack to cause the padding not to be applied in IE:

padding: 8px 10px 10px 12px !important;
padding: 0;
Thatsnot working for me, it still looks the same:
http://i23.photobucket.com/albums/b400/Spinethetic/untitled.png

[Twey]

In that case, it isn't the padding that's the problem.

[billyboy]

Have you looked at your page at a resolution greater than 800x600? There's more than a little gap, the header is way off. Try wrapping a container div around all your content and this to your CSS:
body {
margin: 0;
padding: 0;
text-align: center;
}
#container {
margin: auto;
width: ??%; /* insert value to replace ?? */
text-align: left;
}That should hold everything and center it on the page regardless of resolution. Then remove any width declarations from elements that you want extending across the page. They will default to 100% of the container div. If there is an element that still doesn't stretch to fill the container div then look for values in margins/padding that is preventing it. You can temporarily add border: 1px solid #f00; to elements to highlight them and see exactly where they are sitting. You may have to go through each element to isolate the problem. On a side note: using % instead of absolute values will give your design more flexibility at different resolutions.

[Spinethetic]

I think its completely fixed now.