FireFox/ IE 7 issue [Archive] - Dynamic Drive Forums

SirTom909

09-10-2008, 03:03 PM

Afternoon all,

Hope you could help me wit an issue im having with.....IE7. I've produced a template that im about to upload to our CMS (running Typo3). However im having a similar issue to Chadi (http://www.dynamicdrive.com/forums/showthread.php?t=28043)

Everything runs fine in FF,Opera, Chrome etc however in IE6/7 everything below the header aligns to the left.

Grateful for any response,

CC attached:

body{
color: #666666;
/* text-align:right; */
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0;
background: url(images/back_main.jpg) top repeat-x;
background-color: #fff;
font-size: 76%;
line-height: 16px;
}

a:link, a:visited {
text-decoration:underline;
color : #6A849D;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

a:hover, a:active{
text-decoration:none;
}

h1{
font-size:1.2em;
}

h3{
font-size:1em;
}

input {
-x-system-font:none;
border:1pt solid #6A849D;
color:#707070;
font-family:tahoma;
font-size:10px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0px 0px 5px;
}

/* Use a break with this class to clear float containers on both sides */
.brclear {
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

/********************************************/
/******* header ***********/
/********************************************/
#header-wrapper{
height: 265px;
padding: 5px;
background: url(images/header_main.jpg) top center no-repeat;
}

#header{
margin:0 auto;
width:780px;
}

/**************logo*******************/
#logo{
margin-left:20px;
padding:0;
text-align:left;
}

/*************sitename********************/
#sitename{
margin:15px 0px 0px 15px;
padding:0;
text-align:left;
}

#sitename h1 {
font-size : 22px;
margin : 0;
text-align:left;
}

#sitename h1 a {
text-decoration:none;
color:#000;
}

#sitename h1 a:hover {
color:#000;
}

/***************slogan******************/
#slogan {
margin-left: 15px;
}

#slogan h2{
font-size : 14px;
padding: 0;
margin:0;
}

/*************search********************/
#search{
float:right;
margin:5px 10px 0 0;
padding:0;
text-align:right;
color : #666666;
}

* html #search{
margin:5px 5px 0 0;
}

#search input.searchbox {
margin-right: 3px;
}

/********************************************/
/******* middle part (wrapper) ***********/
/********************************************/

/**************wrapper*******************/

#wrapper{
width:780px;
margin:0 auto;
padding:0;
text-align:left;
background:none;
}

/***************************************************/
/************** left part*******************/
/*************************************************/
#left-part{
width: 140px;
margin: 0 0 0 10px;
padding: 5px;
float:left;
background: url(images/shad_main.jpg) no-repeat ;
border-top: 1px dashed #EDF1F2;
}

/***************login******************/
#login {
margin : 2px;
padding : 0;
text-align : left;
color : #9D9C6A;
}

#login label {
color: #993333;
font-size: 0.9em;
}

#login h3{
margin:0;
padding:0;
font-size : 70%;
color:#993333;
}

#login p{
margin:2px 0px;
padding:0;
font-size : 70%;
}

#login p a{
font-size : 100%;
}

#login a{
font-size : 70%;
}

/***************left content******************/
#left {
margin : 7px 0;
padding : 0;
text-align : left;
}

#left img{
margin: 6px 0;
}

#left h1,
#left h2,
#left h3 {
border-bottom:1px dotted #993333;
color:#993333;
font-size:12px;
font-weight:bold;
}

#left p {
margin : 0;
padding : 2px 0px;
}

/***************************************************/
/************** right part*******************/
/*************************************************/
#right-part {
width: 585px;
padding :10px;
margin : 0 10px 0 0;
float:right;
background: url(images/shad1.jpg) no-repeat ;
border-top: 1px dashed #EDF1F2;
}

/***************breadcrumb******************/
#breadcrumb {
margin : 0;
padding:0 9px;
color : #666666;
font-size : 70%;
float:right;
}

#breadcrumb a:link, #breadcrumb a:visited {
color : #993333;
}

#breadcrumb a:hover, #breadcrumb a:active {
color : #666666;
}

/************** main content*******************/

#pagetitle{
text-align : left;
color:#666666;
font-size : 1.3em;
font-weight:bold;
margin:0;
padding-bottom: 7px;
}

#main-content h1 {
color : #6A849D;
font-size : 100%;
padding : 0;
margin:4px 0 0 0;

}

#main-content h2 {
color : #6A849D;
font-size : 90%;
padding : 0;
margin:4px 0 0 0;
}

#main-content h3 {
color : #6A849D;
font-size : 80%;
padding : 0;
margin:4px 0 0 0;

}

#main-content a{
color:#6A849D;
}

/********************************************/
/******** footer ***********/
/********************************************/
#footer{
margin:20px auto 10px auto;
padding:0;
text-align:center;
width:800px;
height:80px;
background: url(images/footer.jpg) no-repeat top;
border-bottom:1px solid #fff;
}

/***************bottom nav******************/
#bottomnav {
margin : 0;
padding : 2px 30px;
font-size : 75%;
color : #6A849D;

}

#bottomnav a {
padding :0;
margin:0 5px ;
color : #6A849D;
}

/***************copyright******************/
#copyright{
color : #6A849D;
font-size : 75%;
padding : 2px 30px;
margin : 0;
}

#copyright a {
color : #6A849D;
}

/*************contact info********************/
.contact {
font-size : 75%;
padding : 2px 30px;
margin : 0 0 20px 0;
color : #6A849D;
}

Medyman

09-10-2008, 03:15 PM

Do you have a link to your page? The CSS is good, but the markup would really help in diagnosing the problem.

SirTom909

09-10-2008, 03:22 PM

thanks for your help - find attached.

It seems everything after the dynamic menu is centered left in IE :S

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEC template-Amoreira-blue</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>



</head>
<body>
<div id="header-wrapper"><div id="header">
<div id="search">
<input name="textfield" type="text" size="20"/>
<input type="submit" name="Submit" value="search"/>
</div>
<div id="logo"></div>
<div id="sitename">
<h1><a href="#"></a></h1>
</div>
<div id="slogan">
<h2></h2>
</div>
<div id="menu">
<ul id="menuList" class="adxm">
<li><a href="#">Home</a>
<ul class="subList">
</ul>
</li>
<li><a href="file:///F|/tv-templates/template1/index.php?id=522">About Us</a>
<ul class="subList">
</ul>
</li>
<li><a href="#">News & Events</a>
<ul class="subList">
</ul>
</li>

<li><a href="#">Ministries</a>
<ul class="subList">
<li class="submenu"><a href="#">(Sample)</a></li>
</ul>
</li>
<li><a href="#">Learn & Grow</a>
<ul class="subList">
<li class="submenu"><a href="#">Link</a>
<ul class="subList">
<li class="submenu"><a href="#">Link</a></li>
<li class="submenu"><a href="#">Link</a></li>
<li class="submenu"><a href="#">Link</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Link</a></li>
<li class="submenu"><a href="#">Link</a></li>
<li class="submenu"><a href="#">Link</a></li>
<li class="submenu"><a href="#">Link</a></li>
</ul>
</li>
</ul>
</div>
</div></div><div id="wrapper">
<div class="brclear"></div>
<div id="left-part">
<div id="login">
<div class="tx-felogin-pi1">
<form action="home/" target="_top" method="post" onsubmit="">
<fieldset>
<div>
<div style="font-size: small"><div></div></div>
<label for="user">Username:</label>
<input type="text" id="user" name="user" value="" />
</div>
<div>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" value="" />
</div>
<div>
<input type="submit" name="submit" value="Login" />
</div>
<div class="felogin-hidden">
<input type="hidden" name="logintype" value="login" />
<input type="hidden" name="pid" value="31" />
<input type="hidden" name="redirect_url" value="" />
</div>
</fieldset>
</form>
<p><a href="home/forgot_password/" >Forgot password?</a></p>
</div>
<div class="tx-srfeuserregister-pi1">
<a href="a/cmd/create/" title="Presents a registration form.">Not a member?</a>
</div>
</div>

<div id="left">
<h1>Left Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer molestie bibendum diam. Morbi in<a href="#"> mi. Du</a>is id nisl. </p>
<h2>Vestibulum</h2>
<p> accumsan nisl quis liguLorem ipsum dolor sit </p>
<h3>amet, conse</h3>

<p>ctetuer adipiscing elaccumsan nisl quis liguLorem ipsuit</p>
</div>

</div>
<div id="right-part">
<div id="breadcrumb">Home > <a href="#">Main</a></div>

<div id="pagetitle">Page Title</div>


<div id="main-content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer molestie bibendum diam. Morbi in mi. Duis id nisl. Vestibulum accumsan nisl quis ligula. Aliquam urna justo, tincidunt vitae, fermentum e<a href="#">u, scelerisque a, </a>ligula. Sed tincidunt adipiscing ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent velit sem, laoreet sit amet, tempus vitae, consectetuer sed, tellus. In hac habitasse platea dictumst. Nam velit risus, condimentum a, convallis semper, ornare sed, mauris. </p>
<h2><a href="#">Maecenas placerat </a></h2>
<p>condimentum felis. Proin massa justo, venenatis et, egestas ut, rhoLorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer molestie bibendum diam. Morbi in mi. Duis id nisl. Vestibulum accumsan nisl quis ligula. Aliquam urna justo, tincidunt vitae, fermentum e<a href="#">u, scelerisque a, </a>ligula. Sed tincidunt adipiscing ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent velit sem, laoreet sit amet, tempus vitae, consectetuer sed, tellus. In hac habitasse platea dictumst. Nam velit risus, condime</p>
<h3>ntum a, convallis sem</h3>
<p>per, ornare sed, mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer molestie bibendum diam. Morbi in mi. Duis id nisl. Vestibulum accumsan nisl quis ligula. Aliquam urna justo, tincidunt vitae, fermentum e<a href="#">u, scelerisque a, </a>ligula. Sed tincidunt adipiscing ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent velit sem, laoreet sit amet, tempus vitae, consectetuer sed, tellus. In hac habitasse platea dictumst. Nam velit risus, condimentum a, convallis semper, ornare sed, mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer molestie bibendum diam. Morbi in mi. Duis id nisl. Vestibulum accumsan nisl quis ligula. Aliquam urna justo, tincidunt vitae, fermentum e<a href="#">u, scelerisque a, </a>ligula. Sed tincidunt adipiscing ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent velit sem, laoreet sit amet, tempus vitae, consectetuer sed, tellus. In hac habitasse platea dictumst. Nam velit risus, condimentum a, convallis semper, ornare sed, mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer molestie bibendum diam. Morbi in mi. Duis id nisl. Vestibulum accumsan nisl quis ligula. Aliquam urna justo, tincidunt vitae, fermentum e<a href="#">u, scelerisque a, </a>ligula. Sed tincidunt adipiscing ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent velit sem, laoreet sit amet, tempus vitae, consectetuer sed, tellus. In hac habitasse platea dictumst. Nam velit risus, condimentum a, convallis semper, ornare sed, mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer molestie bibendum diam. Morbi in mi. Duis id nisl. Vestibulum accumsan nisl quis ligula. Aliquam urna justo, tincidunt vitae, fermentum e<a href="#">u, scelerisque a, </a>ligula. Sed tincidunt adipiscing ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent velit sem, laoreet sit amet, tempus vitae, consectetuer sed, tellus. In hac habitasse platea dictumst. Nam velit risus, condimentum a, convallis semper, ornare sed, mauris. </p>
</div>

</div>
<br class="brclear" />
</div><div id="footer">
<div id="bottomnav"><a href="#"></a></div>
<div id="copyright"></a>.</div>
<div class="contact"> </div>
</div>
</body>
</html>

TheJoshMan

09-11-2008, 12:17 AM

I don't know if you've already tried this approach, but I've used this to center layouts in IE before...

body{
text-align:center;
}
#wrapper{
text-align:left;
}

That's a very basic example where you center everything within the "body" of the page, then override it by using a "wrapper" div and setting the width to your liking, then setting the alignment of everything inside the wrapper to the left.

The general concept is that you only center the wrapper div, then everything WITHIN it aligns left.

SirTom909

09-11-2008, 08:13 AM

works perfectly, thank you Nyne! :):D:cool:

TheJoshMan

09-11-2008, 03:06 PM

no problem, glad to help

Can we see a link to the finished product when you're all done with it? I'm interested to see your work.

Shamray

04-11-2011, 04:24 PM

suppose this work has not been done? there are no cialis (http://originalcialis.com) link until now