PDA

View Full Version : wrap problem in IE


bigcy
January 19th, 2007, 06:41 AM
hello all
Im using the following code to wrap my layout to a width of 766 px.
Its coming exactly in centre in mozilla but In IE its align to left side
Could anyone know what exactly could be the problem?

Thanks in advance


#wrap{
padding: 0;
width: 766px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
vertical-align: middle;
}

regards
Tudor.b
January 19th, 2007, 07:30 AM
Try

body {
text-align: center;
}
bigcy
January 19th, 2007, 07:52 AM
hi
the concern is of whole page layout & not the text
my whole layout is shifting towards left side
plz suggest the same
regards
simplistik
January 19th, 2007, 10:33 AM
well your code is correct and it should work, must be an error somewhere else... post all your code for more help.
fasterthanlight™
January 19th, 2007, 10:37 AM
I'm slightly confused, are you trying to align your entire site container in the the middle of the page? or......... ?

try this?

#wrap
{
width: 766px;
position: relative;
margin: 0 auto;
padding: 0px;
}
simplistik
January 19th, 2007, 10:46 AM
I'm slightly confused, are you trying to align your entire site container in the the middle of the page? or......... ?

try this?

#wrap
{
width: 766px;
position: relative;
margin: 0 auto;
padding: 0px;
}

padding: 0px; should be padding: 0; even though it won't make a difference it's just better practice.

also... why did you just post him the same code that he's already using :h: :P :hurt: ? :lol:
thebloodpoolkid
January 19th, 2007, 11:57 AM
Is it "aligned" to the left or "shifted" to the left by a few pixels?
Tudor.b
January 19th, 2007, 04:32 PM
Dude, in internet explorer, using margin: auto to align center doesn't work. You need to specify text-align: center to the containg element. Try this


body {
text-align: center;
}

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

It should work...
fasterthanlight™
January 19th, 2007, 05:09 PM
padding: 0px; should be padding: 0; even though it won't make a difference it's just better practice.

also... why did you just post him the same code that he's already using :h: :P :hurt: ? :lol:


I don't eat, breath, and regurgitate CSS as much as you, but from my experiences, margin: 0 auto; won't work unless position: relative; is defined, and that, good sir, would be the difference between the code i posted and his.........................
bigcy
January 19th, 2007, 08:41 PM
HTML CODE :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link href="body.css" rel="stylesheet" type="text/css">
</head>
<body >
<div id="wrap">
<div id="logoBox">
</div>
<div id="image">
</div>
<div id="content">
<table width="95%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="235" height="75" colspan="2" class="main-text">
some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text
</td>
</tr>
</table>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

CSS CODE

body{

background-color: #111111;

margin: 0;

padding: 0;

}



#wrap{
padding: 0;
width: 766px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

}



#logoBox{
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-position: 0 0px;
height: 102px;
background-color: #000000;

}

#image{
margin: 0;
height: 222px;
background-color: #00CC66;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;

}

#content{
margin: 0;
padding: 0px;
height: 340px;
background-color: #000000;

}

#footer{
color: #7E5B22;
height: 50px;
background-color: #333333;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}
.main-text {
margin: 0;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
padding: 0px;
text-align: left;
vertical-align: top;
line-height: 18px;
}

THANKS IN ADVANCE FOR YOUR SUPPORT
bigcy
January 22nd, 2007, 03:37 AM
Anyone out there to help me ?
Emiel
January 22nd, 2007, 11:47 AM
max-width: 766px;

else it's easy to workout with php wordwrap() (http://se2.php.net/manual/sv/function.wordwrap.php)
Tudor.b
January 22nd, 2007, 12:39 PM
Dude, I've already helped you...read my last post!