homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
aligning divs IE vs mozilla
alignment doesnt work for IE
revo9567




msg:4078348
 2:18 pm on Feb 11, 2010 (gmt 0)

i've got the page to work exactly how i want it to in mozilla and safari but something weird happens when i view it in internet explorer. the main menu (at the top) jumps to the right while the main content jumps to the left. any ideaS?

www.revolutiondesign.info

body {
font: 14px Georgia, "Times New Roman", Times, serif;
height: 100%;
text-align: center;
}

div#container {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
height: 100%;
}

div#content {
position: absolute;
margin-left:auto;
margin-right:auto;
width: 650px;
top: 100px;
right: 25px;
left: 25px;
color: #31593e;
font: 16px Georgia, "Times New Roman", Times, serif;
text-align: justified;
z-index: 1;
padding-bottom: 100px;
margin: 0 auto;
text-align: left;
}

h1 {
color: #31593e;
font-size: 24px;
font-style: italic;
}
h2 {
color: #31593e;
font-size: 18px;
font-style: italic;
}
p {
color: #182c1e;
font: 16px Georgia, "Times New Roman", Times, serif;
text-align: justify;
}

div#header {
width: 100%;
position: absolute;
left: 0;
top: 50px;
z-index: 1;
}

div#menu {
float: left;
width: 100%;
height: 50px;
z-index: 2;
position: absolute;
top: 0;
text-align: center;
margin-left:auto;
margin-right:auto;
color: #91bb32;
border-bottom-style: dashed;
border-bottom-color: #31593e;
}

div#menu2 {
width: 100%;
height: 100px;
padding: 10px;
z-index: 2;
position: relative;
text-align: center;
margin-left:auto;
margin-right:auto;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #dad88b;
background-color: #31593e;
}

ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;

}

ul a {
padding-right: 25px;
padding-left: 25px;
display: inline-block;
text-decoration: none;
text-align: center;
color: #fa9c36;
text-decoration: none;
font: italic 20px/50px Georgia, "Times New Roman", Times, serif;
}

ul a:hover {
color: #dad88b;
text-align: center;
text-decoration: none;
}

li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

 

CSS_Kidd




msg:4078373
 2:51 pm on Feb 11, 2010 (gmt 0)

Hey revo9567,

Quick fix... Remove the z-index and the position for both the menu div and the content div. Also remove the position on the container div.

If you are using IE8, hit f12 and you will be able to access the developer tools, which will allow you to edit your css and view it in real time.

birdbrain




msg:4078427
 3:50 pm on Feb 11, 2010 (gmt 0)

Hi there revo9567,

and a warm welcome to these forums. ;)

Our friend CSS_Kidd has correctly pointed out that your problems are caused by the use of position:absolute.

I would suggest that you code it something like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Revolution Design</title>

<style type="text/css">
body {
padding:0;
margin:0;
background-image:url(layout/background.gif);
}
#menu {
float:left;
width:100%;
margin-bottom:63px;
border-bottom:3px dashed #31593e;
overflow:hidden;
}
#menu ul {
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#menu li {
float:left;
position:relative;
right:50%;
}
#menu a {
display:block;
padding:0 25px;
font:italic 20px/50px georgia,'times new roman',times,serif;
color:#8b7940;
text-decoration:none;
}
#menu a:hover {
color:#dad88b;
}
#content {
clear:both;
width:650px;
margin:auto;
font:16px georgia,'times new roman',times,serif;
color:#182c1e;
text-align:justify;
}
#content h1 {
font-size:24px;
font-style:italic;
color:#31593e;
}
#content a {
color:#8b7940;
text-decoration:none;
}
#content a:hover {
color:#dad88b;
}
#logo {
display:block;
width:178px;
height:175px;
margin:auto;
}
</style>

</head>
<body>

<div id="menu">
<ul>
<li><a href="/">Revolution Design</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/order">Order</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>

<div id="content">
<h1>Welcome to Revolution Design</h1>
<p>
Revolution Design is around to do one thing: provide you with designs that will
give you the competitive edge every business needs. With training in marketing
and advertising in addition to web illustration and design, you can be assured
that Revolution Design will always provide great results. Our design process
includes putting the customer first which means you're a part of every step to
ensure quality, efficiency, and premium results. It's important for us to do
the best job that we can to help you promote your business.
</p><p>
Have a question?
E-mail us <a href="mailto:desiree@revolutiondesign.info">here</a> for questions,
orders, and any other inquiries!
</p><p>
<img id="logo"src="layout/logo.gif" alt="logo">
</p>
</div>

</body>
</html>


birdbrain

revo9567




msg:4078491
 5:04 pm on Feb 11, 2010 (gmt 0)

thanks to the both of you! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved