IE 6, 7- Head spinning - Hello, I know having alignment issues in IE is nothing new, but my head is spinning with possible solutions, to

BCJen · 10th November 2009, 02:55 AM

Hello,
I know having alignment issues in IE is nothing new, but my head is spinning with possible solutions, to the point where I feel a bit paralyzed by fear of screwing everything up.

The site I designed and coded (with the fabulous teachings of SaltedM8) is fairly basic, as are my skills, and I am looking for some guidance as to the most effective way to tackle my problem.

The site looks fine in IE8, in IE7 the text on the nav bar is pushed to the right but the rest of the alignment seems okay, and then it falls apart in IE 6, with the alignment of the main content div pushed to the right and the text in the menu pushed to the right as well. In older versions of Firefox the menu text is also pushed to the right.

Here's the CSS and I'll post the HTML next. Any suggestions are appreciated!
Thanks,
Jen

Code:

@charset "UTF-8";
body {
    background-color: #172C13;
    font-family:Arial, Helvetica, sans-serif;
}


#header {
    margin: 0 auto;
    width:940px;
    height:160px;
    background-image: url(images/bv_header.jpg);
}
#header p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    float: right;
    font-style: normal;
    right: auto;
}
#main_image {
    margin: 0 auto;
    width:940px;
    height:300px;
    background-color:#CCCCCC;
    border: 1px solid #333333;
}

#menu {
    margin: 0 auto;
    width:877px;
    height:40px;
    background-color:#FFFFFF;
}
#wrapper {
    margin: 0 auto;
    width:940px;
    background-color:#CCCCCC;
}

#content {
    float:left;
    margin-left: 31.5px;
    width:876px;
    background-color:#999999;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #333333;
    border-left-color: #333333;
}
.profile {
    float:left;
    width:835px;
    padding: 20px 20px 0 20px;
    margin: 15px 0 30px 0;
}

#footer {
    margin: 0 auto;
    width:940px;
    height:65px;
    background-image:url(images/bv_footer.jpg);
}

#footer p {
float:right; margin: 38px 35px 0 0 ; font-size:15px; }

.clear{ clear:both; }

p {
    font-size:18px;
    margin:0;
    padding:0;
}
h1 {
    margin: 0;
    padding: 0;
    font-size:22px;
}
.profile strong {
    font-size:22px;
}

#menu {
    height:50px;
    text-align:center;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #333333;
    border-left-color: #333333;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
}
#menu ul {display:inline-block; margin:0 auto; padding:0; list-style:none; white-space:nowrap;}
#menu li {display:inline;}
#menu li a {
    display:block;
    height:24px;
    float:right;
    color:#003300;
    text-decoration:none;
    padding:0 10px 0 10px;
    font-family: arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    margin: 13px 0px 0px 0px;
}
#menu li a:hover {  color:#000; }

BCJen · 10th November 2009, 02:58 AM

And the html:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BV Land Home</title>

<!--[if lte IE 7]>
<style type="text/css">
#menu ul {display:inline;}
</style>
<![endif]-->


<link href="bvmain.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="http://webprocafe.com/images/bv_header.jpg" alt="bvland logo" /></div>
<div id="main_image"><img src="http://webprocafe.com/images/bv_corporate_header.jpg" alt="chowade valley northern british columbia" /></div>

<div id="wrapper">
<div id="menu">
    <ul>
        <li><a href="http://www.nres-fsj.com/">NRES</a></li>
        <li><a href="contact.html">CONTACT US</a></li>
        <li><a href="links.html">INDUSTRY LINKS</a></li>
        <li><a href="whatsnew.html">WHAT'S NEW</a></li>
        <li><a href="services.html">OUR SERVICES</a></li>
        <li><a href="aboutus.html">ABOUT US</a></li>
        <li><a href="index.html">HOME</a></li>
        
        
    </ul>
</div>
<div id="content">
<div class="profile">
   <h1>BV Land Consulting Ltd.</h1><br />
   <p>  is a diverse land service company with over
40 years combined expertise within the Peace River Region of
Northeastern British Columbia and Northwestern Alberta. <br /><br />
Our level of knowledge and experience within the BV Land team allows us to continue
to provide our clients with the services they need to ensure their success.</p><br />
<h1>"Our Clients' Success is Our Success"</h1><br />
<p>With the addition of our subsidiary company Northern Rockies
Environmental Services Ltd., we can provide a multitude of services that
will meet the needs of your company. <br /><br />
In combination with our environmental team, we can provide complete and comprehensive land
acquisition, consultation and environmental services in the venues of
agriculture, forestry, mining, oil and gas and power.</p>
<p><br />
</p>
<p>&nbsp;</p>
<p><br />
</p>
</div>
</div>
<div class="clear"></div>

</div>
<div id="footer"><p>&copy;BV Land Consulting Services Ltd. 2009</p></div>
</body>
</html>

CloudedVision · 10th November 2009, 03:06 AM

Could you give us a link to the page in question? That usually helps us a lot better than the raw code.

My best guess is the display:inline-block. IE6/7 doesn't support it. Is there an alternative method? If not, here's a CSS hack that fixes it: Cross-Browser Inline-Block | Mozilla Web Development (Invalid, unfortunately)

BCJen · 10th November 2009, 03:09 AM

Here's the link:

BV Land Home

Thanks so much for the quick reply!

saltedm8 · 10th November 2009, 04:07 AM

its very late ( or very early - depends on how you look at it ) for me right at this moment, but I promise I will have a peek tomorrow and see what I see

saltedm8 · 10th November 2009, 07:04 PM

ok, I think I have it ( and not a single ie fix hehe ).. let me know if there are any issues with it

Code:

body {
    background-color: #172C13;
    font-family:Arial, Helvetica, sans-serif;
}


#header {
    margin: 0 auto;
    width:940px;
    height:160px;
    background-image: url(images/bv_header.jpg);
}
#header p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    float: right;
    font-style: normal;
    right: auto;
}
#main_image {
    margin: 0 auto;
    width:940px;
    height:300px;
    background-color:#CCCCCC;
    border: 1px solid #333333;
}

#menu {
    width:877px;
    height:40px;
    background-color:#FFFFFF;
}
#wrapper {
    margin: 0 auto;
    width:910px;
    padding-left:30px;
    background-color:#CCCCCC;
}

#content {
    float:left;
    width:876px;
    background-color:#999999;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #333333;
    border-left-color: #333333;
}
.profile {
    float:left;
    width:835px;
    padding: 20px 20px 0 20px;
    margin: 15px 0 30px 0;
}

#footer {
    margin: 0 auto;
    width:940px;
    height:65px;
    background-image:url(images/bv_footer.jpg);
}

#footer p {
float:right; margin: 38px 35px 0 0 ; font-size:15px; }

.clear{ clear:both; }

p {
    font-size:18px;
    margin:0;
    padding:0;
}
h1 {
    margin: 0;
    padding: 0;
    font-size:22px;
}
.profile strong {
    font-size:22px;
}

#menu {
    height:50px;
    text-align:center;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #333333;
    border-left-color: #333333;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
}
#menu ul {display:inline-block; margin:0 auto; padding:0; list-style:none; white-space:nowrap;}
#menu li {display:inline;}
#menu li a {
    display:block;
    height:24px;
    float:right;
    color:#003300;
    text-decoration:none;
    padding:0 10px 0 10px;
    font-family: arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    margin: 13px 10px 0px 0px;
}
#menu li a:hover {  color:#000; }

HTML Code:

</head>

<body>
<div id="header"><img src="/images/bv_header.jpg" alt="bvland logo" /></div>
<div id="main_image"><img src="/images/bv_corporate_header.jpg" alt="chowade valley northern british columbia" /></div>

<div id="wrapper">
<div id="menu">
    <ul>
        <li><a href="http://www.nres-fsj.com/">NRES</a></li>
        <li><a href="contact.html">CONTACT US</a></li>
        <li><a href="links.html">INDUSTRY LINKS</a></li>
        <li><a href="whatsnew.html">WHAT'S NEW</a></li>
        <li><a href="services.html">OUR SERVICES</a></li>

        <li><a href="aboutus.html">ABOUT US</a></li>
        <li><a href="index.html">HOME</a></li>
        
        
    </ul>
</div>
<div id="content">
<div class="profile">
   <h1>BV Land Consulting Ltd.</h1><br />
   <p>  is a diverse land service company with over
40 years combined expertise within the Peace River Region of
Northeastern British Columbia and Northwestern Alberta. <br /><br />

Our level of knowledge and experience within the BV Land team allows us to continue
to provide our clients with the services they need to ensure their success.</p><br />
<h1>"Our Clients' Success is Our Success"</h1><br />
<p>With the addition of our subsidiary company Northern Rockies
Environmental Services Ltd., we can provide a multitude of services that
will meet the needs of your company. <br /><br />
In combination with our environmental team, we can provide complete and comprehensive land
acquisition, consultation and environmental services in the venues of
agriculture, forestry, mining, oil and gas and power.</p>
<p><br />
</p>
<p>&nbsp;</p>
<p><br />
</p>
</div>
</div>
<div class="clear"></div>

</div>
<div id="footer"><p>&copy;BV Land Consulting Services Ltd. 2009</p></div>
</body>
</html>

10th November 2009, 03:09 AM	#4
BCJen Junior Member Join Date: Sep 2009 Posts: 3 Thanks: 0 Thanked 0 Times in 0 Posts Expertise: Design & Graphics Experience: Beginner	Link Here's the link: BV Land Home Thanks so much for the quick reply!

10th November 2009, 04:07 AM	#5
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,461 Blog Entries: 5 Thanks: 13 Thanked 43 Times in 43 Posts Expertise: (X)HTML / CSS Experience: Professional	its very late ( or very early - depends on how you look at it ) for me right at this moment, but I promise I will have a peek tomorrow and see what I see __________________ THePiNcH

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

10th November 2009, 03:06 AM	#3
CloudedVision Join Date: Jan 2009 Location: Your Imagination Posts: 624 Blog Entries: 4 Thanks: 1 Thanked 22 Times in 21 Posts Expertise: PHP Experience: Professional	Could you give us a link to the page in question? That usually helps us a lot better than the raw code. My best guess is the display:inline-block. IE6/7 doesn't support it. Is there an alternative method? If not, here's a CSS hack that fixes it: Cross-Browser Inline-Block \| Mozilla Web Development (Invalid, unfortunately) __________________ Panthr - Web Design and Development