PDA

View Full Version : Slight problem thats bugging the he** outta me.



Spinethetic
12-16-2005, 09:53 PM
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
12-17-2005, 07:44 AM
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
12-17-2005, 10:32 AM
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
12-18-2005, 09:45 PM
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
12-18-2005, 10:02 PM
In that case, it isn't the padding that's the problem.

billyboy
12-20-2005, 11:17 AM
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
01-07-2006, 09:43 PM
I think its completely fixed now.