CODEWITHSUNDEEP
csslayouthtmlinternet-explorer-7
dic2342
dic2342

Reputation:

Need to make div and css based pages work in IE 7

I am working on a project where I need to build the pages using div tags and css. The pages look fine in Firefox, Opera, Safari and IE 8, but my client who is using IE7 is complaining of layout problems in IE 7. Can someone take a look and tell me how to fix the code so it will work in all the browsers, especially IE 7? Links and css code is below. Thanks.

Home Page is here: (Code is below) http://www.danieldicenso.20m.com/citybeams/

/* HOME PAGE CSS CODE */
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;}

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 1000px;
    background: #FFFFFF;
}

#header {
    margin: 0 0 15px 0;
    background: #ffffff;
}

#side-a {
    float: left;
    width: 300px;
}

#side-b {
    float: right;
    width: 300px;
}

#content { 
    float: left;
    width: 400px;
}

#footer {
    clear: both;
    background: #ffffff;
}

.curvy2 {
    position:relative;
    width:250px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

.bl {
    width: 330px;
    background-color: #99ff99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px} 


.bl2 {
    width: 330px;
    background-color: #ffffff;
    background-image: url;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br2 {background: url100% 100% no-repeat}
.tl2 {background: url 0 0 no-repeat}
.tr2 {background: url 100% 0 no-repeat; padding:10px}
.clear2 {font-size: 1px; height: 1px
} 

#navmenu {
    position: relative;
    left: 16px;
    top: 0px;
    width: 712px;
    height: 22px;
    z-index: 2;
    background: #99FF99;
    text-align: center;
    padding: 0px;
    }

body,td,th {
    color: #000000;
}
a:link {
    color: #003333;
}
a:visited {
    color: #000066;
}
a:active {
    color: #FF0000;
}

--------------------

Sign-up page is here:  (CSS Code below)
http://www.danieldicenso.20m.com/citybeams/signuppage.html

/* SIGNUP PAGE CSS CODE */
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;}

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 1000px;
    background: #FFFFFF;
}

#header {
    margin: 0 0 15px 0;
    background: #ffffff;
}

#side-a {
    float: left;
    width: 100px;
}

#side-b {
    float: right;
    width:100px;
}

#content { 
    float: left;
    width: 800px;
}

#footer {
    clear: both;
    background: #ffffff;
}

.curvy2 {
    position:relative;
    width:250px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

.bl {
    width: 330px;
    background-color: #99ff99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px} 


.bl2 {
    width: 330px;
    background-color: #ffffff;
    background-image: url;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br2 {background: url100% 100% no-repeat}
.tl2 {background: url 0 0 no-repeat}
.tr2 {background: url 100% 0 no-repeat; padding:10px}
.clear2 {font-size: 1px; height: 1px} 

#navmenu {
    position: relative;
    left: 16px;
    top: 0px;
    width: 712px;
    height: 22px;
    z-index: 2;
    background: #99FF99;
    text-align: center;
    padding: 0px;
}
.signupfield {
    float: none;
    width:480px;
    color:#000;
    margin-top: 1em;
    margin-right:1 em;
    margin-bottom: 1em;
    position: relative;
    left: 75px;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   
}
----------------------------------

Reviews page example is here: (CSS code below)
http://www.danieldicenso.20m.com/citybeams/reviewers.html

/* REVIEW PAGE CSS CODE */
body {font-size:12px; font-family:"trebuchet MS", verdana, arial, sans-serif; background: #CCCCCC; word-wrap:break-word;}

#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 1000px;
    background: #FFFFFF;
}

#header {
    margin: 0 0 15px 0;
    background: #ffffff;
}

#side-a {
    float: left;
    width: 50px;
}

#side-b {
    float: right;
    width: 200px;
}

#content { 
    float: left;
    width: 750px;
}

#footer {
    clear: both;
    background: #ffffff;
}

.curvy2 {
    position:relative;
    width:250px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: auto;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#327734; background:#fff; background-image:url(metalgreen2.jpg); overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#327834; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

.bl {
    width: 330px;
    background-color: #99ff99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px} 


.bl2 {
    width: 330px;
    background-color: #ffffff;
    background-image: url;
    background-repeat: no-repeat;
    background-position: 0 100%;
}
.br2 {background: url100% 100% no-repeat}
.tl2 {background: url 0 0 no-repeat}
.tr2 {background: url 100% 0 no-repeat; padding:10px}
.clear2 {font-size: 1px; height: 1px} 

#navmenu {
    position: relative;
    left: 16px;
    top: 0px;
    width: 712px;
    height: 22px;
    z-index: 2;
    background: #99FF99;
    text-align: center;
    padding: 0px;
    }
.signupfield {
    position:relative;
    width:480px;
    color:#000;
    margin-top: 1em;
    margin-right: auto;
    margin-bottom: 1em;
    margin-left: -120px;
    background-color: #99FF99;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: left bottom;

}


body,td,th {
    color: #000000;
}
a:link {
    color: #003333;
}
a:visited {
    color: #000066;
}
a:active {
    color: #FF0000;
}
#selectionbar {
    position: relative;
    left: 0px;
    top: 0px;
    width: 750px;
    height: 22px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}
#selectionbartwo {
    position: relative;
    left: 0px;
    top: -10px;
    width: 750px;
    height: 22px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}

#selectionbarthree {
    position: relative;
    left: 0px;
    top: -10px;
    width: 750px;
    height: 22px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}

#dividerline {
    position: relative;
    left: 0px;
    top: -4px;
    width: 750px;
    height: 1px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}
#results {
    position: relative;
    left: 55px;
    top: -14px;
    width: 600px;
    height: 1px;
    z-index: 2;
    background: #ffffff;
    padding: 0px;
}

Upvotes: 0

Views: 1066

Answers (6)

Welbog
Welbog

Reputation: 60418

If default margins and padding are indeed your problem as Ryan so helpfully suggested, you can force every element to have the same base margin and padding with the following statement:

* {
   margin: 0px;
   padding: 0px;
}

Note that this will probably break your layout in the other browsers too, but at least they'll all be broken the exact same way.

Upvotes: 4

simon
simon

Reputation: 12902

To test how your page looks in IE7 without meta-tag tricks or similar, you can download a virtual sandboxed browser from here: http://www.xenocode.com/browsers/ Great for testing web applications.

Upvotes: 0

quark
quark

Reputation: 386

You can force your IE8 to render pages like IE7 and check the layout yourself. Read that: http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx

Use:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

but only for debug

Upvotes: 0

Bart
Bart

Reputation:

Don't use 

*{margin: 0px;padding: 0px;}

U dont want to rewrite your whole site for html elements who actually need the default value.

use css reset

Use xhtml and css valid code

And fix common bugs

Upvotes: 0

Geoff
Geoff

Reputation: 9340

You might try using padding to offset navmenu instead of using position:relative and left.

Upvotes: 0

Ryann Graham
Ryann Graham

Reputation: 8229

IE7 has different defaults and behaviour for margin and padding than the other browsers. A quick viewing of the page in IE7 suggests that is likely where the majority of your problems are.

Upvotes: 1

Related Questions