tags:

views:

715

answers:

6
Q: 

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;
}
+1  A: 

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.

Ryan Graham  2009-03-18 16:53:41
So what do I change to make it work?
 2009-03-18 16:57:30
@Daniel: I take it you aren't a web developer?
George Stocker  2009-03-18 17:01:14
@Gortok: according to his website, he's a web developer; just a really bad one.
Welbog  2009-03-18 17:03:18
So, anyway, what do I need to change to fix this problem.
 2009-03-18 17:04:19
Not to be offensive, but if you really want to be a web designer/developer, you are going to need to find a way to test in multiple browsers.
Geoff  2009-03-18 17:17:27
Which I did. Now perhaps you'd like to offer a solution instead of commenting on my lack of skill?
 2009-03-18 17:24:50
We aren't going to do your work for you. You've been given some suggestions to try from Welbog and myself. Fire up IE7 and try them out.
Geoff  2009-03-18 17:28:51
+3  A: 

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.

Welbog  2009-03-18 17:09:06
So would this fix the elements or just set up them to be fixed (As in adding px value until it lines up right)?
 2009-03-18 17:13:31
It won't fix them. It will make everything the same across all the browsers, so you'll still have to fix it. But once you fix it once, it should be fixed for all. *IF* that's the problem.
Welbog  2009-03-18 17:14:41
Well that is the problem. My client says that certain things are "off" in IE7 while they look fine in all the other browsers.
 2009-03-18 17:17:08
That's because you don't know what you're doing. Which is why you're on SO looking for advice. There is no magic spell that makes sites work in IE7. You have to spend the time to test it in every browser. Making a site that doesn't work in IE7 is an amateur mistake.
Welbog  2009-03-18 17:25:13
OK, so what's the step by step I need to do to fix this or at least, get close?
 2009-03-18 18:25:08
How many times do we commenters have to tell you that we don't have the time to solve your problems for you? The best we can do in your case is point you in the right direction. Unfortunately for you, the right direction is "learn web design or find a new profession". Because this layout is hopeless
Welbog  2009-03-18 18:59:32
Welbog has a point. We can't really do your web design for you, and if all of the possible pointers are not enough, then it may be time for you to think about starting from scratch.
TheTXI  2009-03-18 19:06:59
All I can say is: LOLWUT: http://www.hillmasonryco.com/
Geoffrey Chetwood  2009-03-18 19:11:01
Daniel, people here are happy to help with problems (that's why we're here), but we're not going to do your job for you. If you're not going to put in any effort, why should we, especially since we're not the ones getting paid here?
Chuck  2009-03-19 09:17:01
A: 

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

Geoff  2009-03-18 17:09:58
A: 

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

Bart  2009-03-19 08:46:56
A: 

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

quark  2009-03-19 08:52:33
A: 

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.

simon  2009-03-19 08:58:34

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?