Log in

View Full Version : Wrong Position in IE but looks fine in FF, Safari...



justforki
03-05-2007, 11:16 PM
Hi guys,

I'm kinna new in here. I'm having problem with positioning in IE... version 7 will show a line between 2 div tag inside #topsection... but for lower version of IE, it's even worse... they are all out of position... Please help!

Here's the link

http://www.artisangroupre.com/WebObjects/

Here's my CSS code.

http://www.artisangroupre.com/WebObjects/css/layout.css (http://www.artisangroupre.com/WebObjects/css/layout.css)

I've tired everything! Seem I always have problem with position in IE... Anyone has any suggession or anywhere I can study about this?

thanks guys,
Justforki

Blake
03-06-2007, 12:10 AM
I had to make a few changes.

The page:



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="maincontainer">

<div id="topsection">
<img src="images/layout/head.jpg" /><br/>
<div id="menu_wraper">
<ul id="thicktabs">

<li><a href="index.php?mod=about">About Us </a></li>
<li><a href="index.php?mod=buysell">Featured Properties </a></li>
<li><a href="index.php?mod=community_school">Community Info </a></li>
<li><a href="index.php?mod=community_info">Interactive Map</a></li>
<li><a href="index.php?mod=testimonials">Luxury Market Retport </a></li>
</ul>
</div>
</div>

<div id="contentwrapper">
Content Here
</div>

<div id="footer">
Copyright&copy; 2005-2007 by ARTISANGROUPRE.COM. All rights reserved. Designed by <a href="http://www.pm-creative.com/" target="_blank">PM Creative</a>
</div>
</div>

</body>
</html>


The stylesheet:



/* CSS Document */
body{
margin:0;
padding:0;
line-height: 1.7em;
background-image: url(../images/layout/bg.jpg);
background-repeat: repeat-y;
background-position: center;
color: #1a1a1a;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 750px; /*Width of main container*/
margin: auto; /*Center container on page*/
}

#topsection{
height: auto; /*Height of top section*/
border-top-width: 10px;
border-top-style: solid;
border-top-color: #FFFFFF;
width: 750px;
margin: 0;
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
}

#footer{
clear: left;
width: 750px;
color: #663300;
text-align: center;
background-color: #c39460;
font-size: 10px;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 0;
}

#footer a{
color: #663300;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

/* Menu */
#menu_wraper {
background-image: url(../images/layout/logo_bottom.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 750px;
float: left;
}


#thicktabs{
padding: 0;
float: right;
font-weight: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}

#thicktabs li{
display: inline;
}

#thicktabs li a{
float: left; /*padding of tabs*/
text-decoration: none;
background-repeat: repeat;
background-position: top;
background-image: url(../images/layout/menu_n.jpg);
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
color: #f0f0e4;
}

#thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/
}

#thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/
background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
border-right-width: 1px;
border-right-style: solid;
border-right-color: #412104;
}

#thicktabs li a:visited{
color: #f0f0e4;
}

#thicktabs li a:hover{
color: #f0f0e4;
background-image: url(../images/layout/menu_o.jpg);
background-position: top;
}



Now at looks fine in ie 5+

justforki
03-06-2007, 01:20 AM
Thank you so much! :D