CSS Help???

Question

Im trying to shorten the DIV box to 400px. When I add it it the code theres no change. Do I have to remove something?
Heres the Code...

.div1 {
background-color:black; color:00CCFF;
border:2px solid; border-color:white;
width:400px; height:200px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-300px; margin-top:150px; text-align:center;
visibility:visible;
background-image:url(http://i35.photobucket.com/albums/d168/pisces1992/credit-myspacecomjblovershereee.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachent:scroll;
}

Answer 1

Your code looks fine to me, and it seems to work fine in both IE 7 and Firefox 2.



Make sure it isn't a caching problem (try it in a different browser, or check with http://www.browsershots.org, or empty your temp files) and that you are coding the div properly in your html file:

blahblah

Answer 2

Technically your div is 404px wide per your border pixels. If it seems like a 4px problem then change your width to 396px;



Try these short hand elements to shorten code.

border:2px solid #fff;

background:url(http...) no-repeat center center;

margin:150px 0 0 300px;

Answer 3

by default, the "overflow" property is show in many browsers. Set it like this:



overflow:hide;



internet explorer also has the proprietary

overflow-x

overflow-y



properties with the same options.

Answer 4

Hm, it looks fine as I can see. probably in your html page, you forgot to put that "class" thing.

Like

.

Answer 5

Remember to clear browser cache (and server cache, if used)