CSS Box Size Compatibility IE6

  • Author
  • #399943




    I’m trying to modify my CONNECTIONS theme and am having problems with sizing. My code is quite complex to cut and paste but I have the EXACT same problem here as a test


    CSS is 100% validated OK

    It displays properly in IE8 and FF. But My Miscorosft Expressions compatibility browser says that IE6 and IE7 have the dark grey main container box very much longer /lower than the height of the main/only image.
    I have set margin, padding and border globally to default to 0px.

    many thanks !

    The blog I need help with is blog.kothea.com.



    Please, please, please… ALWAYS include a link to your blog, it’ll make it a lot easier for us to help you by looking at what you’re trying to do.

    Also, I hope you’re not pasting the whole CSS in the CSS Editor like, unfortunately, most people do. If you’re tweaking an existing theme, the CSS Editor should have YOUR changes only.




    the url to the web site is where the best most cimple and complete example is (see original post).

    I have not bought the CSS customisation yet and so am only able to test my results. what I am trying is complex (probably to complex!!) and yes I kow to only past the changes not the whole lot. Blog is blog.kothea.com but you won’t see anything there yet as it is not in any fit state to release to the world.




    a) When setting something to zero (0) you don’t need to specify the units. This will suffice:

    padding: 0;

    b) Do not use px unites for font sizes. It’s of bad practice. Use “em” or “%” units instead.

    c) When setting all 4 sides of an element to the same value, you don’t need to write it like this:

    margin: 0px 0px 0px 0px;

    This will suffice:

    margin: 0;

    Your problem:

    The problem is in your sidebar CSS:

    In your navigation.css, you have this:

    .menuright ul{
    	height: 20px;

    Take the “height” property out.

    In your layout.css file, your #sidebar selector should look like this:

    #sidebar {
    	float: right;
    	width: 250px;

    In your class.css file your .buttonstyle selector should look like this:

    .buttonstyle {
    	font-family: "Century Gothic";
    	margin-top: 45px;
    	text-align: right;

    Notice that I removed the “margin-top: 270px;” property out of the definition.

    That should fix your problem in IE6. These changes work in Fx3, Chrome, K-Meleon 1.5.2 and Opera 9.0.1. Don’t have Safari, IE7 nor IE8 here, but it should work in them too.



    most grateful…all i have to do now is try it!



    Notice that I removed the “margin-top: 270px;” property out of the definition.

    Sorry, that should read:

    Notice I modified the “margin-top” value. I changed it from “270px” to “45px”.




    Ah my friend you are a genius.

    I will gladly give you my firstborn.

    but seriously I don’t know how Iwould have ever figured that out. I think I could have fixed one of the issues but …..

    anyway it works, genius, thank you. And I even managed to follow your instructions WHILST DRUNK….amazing.



    Cool! Glad it worked.

The topic ‘CSS Box Size Compatibility IE6’ is closed to new replies.