Forum Moderators: not2easy
The problem I am having is that in every browser apart from IE my white_bg_2 and white_bg_3 divs are around 10px too high. Also, although less crucial, every browser apart from IE is shifting most things around 10px too high.
I'm guessing this is probably an IE problem rather than "every other browser".
Here is the XHTML and CSS which both validate
-------------------------------------------------------
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>specifics removed</title>
<link href="dgp.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id= "wrapper">
<div class = "white_bg">
<div class= "contact">
specifics removed
</div>
<img class= "logo" src="dgplogo.png" alt="logo"/>
<div class= "white_bg_1">
<div class= "main_text" >specifics removed</div>
<div class= "white_bg_2">
<div class= "skills_header" >Skills</div><div class= "skills_list" >specifics removed</div>
<div class= "knowledge_header" >Knowledge</div><div class= "knowledge_list" >specifics removed</div>
<div class= "white_bg_3">
<img class= "walkalot" src="walkalot.jpg" alt="walkalot"/><div class= "walkalot_header" />specifics removed</div>
</div>
</div>
</div>
</div>
</body>
</html>
------------------------------------------
body
{
background-color: rgb(228,237,197);
margin-top: 0px;
}
.wrapper
{
width: 800px;
margin: auto;
}
.white_bg
{
margin: auto;
width: 800px;
height: 124px;
background-color: white;
margin-top: 20px;
}
.logo
{
height: 100px;
width: 326px;
margin-top: -25px;
margin-left: 10px;
}
.white_bg_1
{
margin-left: 0px;
width: 395px;
height: 300px;
background-color: white;
margin-top: 25px;
}
.white_bg_2
{
margin-top: -230px;
margin-left: 405px;
width: 395px;
height: 300px;
background-color: white;
}
.white_bg_3
{
margin-top: 210px;
margin-left: -405px;
width: 800px;
height: 248px;
background-color: white;
}
.contact
{
margin: 10px;
margin-left: 450px;
font-family: verdana;
color: green;
}
.main_text
{
width: 375px;
font-family: verdana;
line-height: 30px;
color: green;
text-align: justify;
margin: 10px;
}
.skills_header
{
width: 375px;
font-family: verdana;
color: green;
margin: 10px;
text-align: left;
text-decoration: underline;
}
.skills_list
{
width: 375px;
margin: 10px;
font-family: verdana;
font-size: 14px;
color: green;
text-align: left;
}
.knowledge_header
{
width: 375px;
font-family: verdana;
color: green;
margin: 10px;
text-align: left;
text-decoration: underline;
}
.knowledge_list
{
width: 375px;
margin: 10px;
font-family: verdana;
font-size: 14px;
color: green;
text-align: left;
}
.walkalot
{
margin: 10px;
}
.walkalot_header
{
margin: 10px;
font-family: verdana;
color: green;
}
--------------------------------------------
Any help much appreciated thank you.
[edited by: swa66 at 1:49 pm (utc) on Nov. 9, 2009]
[edit reason] No Specifics, please see ToS and Forum Charter [/edit]
and a warm welcome to these forums. ;)
this is how I would have coded it...
<!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" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="" />
<meta name="keywords" content="" /><title>specifics removed</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin-top:20px;
background-color:#e4edc5;
font-family:verdana,sans-serif;
font-size:100%;
color:#008000;
}
#wrapper {
width:780px;
height:1%;
padding:10px;
margin:auto;
background-color:#fff;
overflow:hidden;
}
#contact {
float:right;
display:inline;
margin-right:47px;
}
#logo {
float:left;
height:100px;
width:326px;
margin:3px 0 38px 0;
}
#content {
clear:both;
}
#main_text {
float:left;
width:375px;
line-height:30px;
text-align:justify;
margin-right:10px;
}
#right {
float:left;
width:375px;
padding:0 10px;
}
#skills_header,#knowledge_header,#walkalot_header {
line-height:30px;
font-size:100%;
text-decoration:underline;
}
#skills_list,#knowledge_list {
margin:10px 0 10px 10px;
font-size:80%;
}
#walkalot{
display:block;
margin:10px 0 10px 10px;
}
</style></head>
<body><div id= "wrapper">
<div id="contact">specifics removed</div>
<img id="logo" src="dgplogo.png" alt="logo"/>
<div id="content">
<div id="main_text">
specifics removed
</div><!-- end #main_text --><div id="right">
<h1 id="skills_header" >Skills</h1>
<div id="skills_list" >specifics removed</div>
<h2 id="knowledge_header" >Knowledge</h2>
<div id="knowledge_list" >specifics removed</div>
<img id="walkalot" src="walkalot.jpg" alt="walkalot"/>
<h3 id="walkalot_header">specifics removed</h3>
</div><!-- end #right -->
</div><!-- end #content -->
</div><!-- end #wrapper --></body>
</html>
[edited by: swa66 at 1:53 pm (utc) on Nov. 9, 2009]
[edit reason] quoted specifics cleanup [/edit]
-------
--- ---
-------
