Hello,
Netscape and IE seem to be working completely differently with CSS layout. My goal is to make the webpage in the tabular format using HTML or CSS and image clips. However, I am having problems aligning and putting all the images together without any seams. The page is at:
<!-- m --><a class="postlink" href="http://mkashlev.dyndns.org:7771/ISSI2003-web/test.html">http://mkashlev.dyndns.org:7771/ISSI2003-web/test.html</a><!-- m -->
If viewed in IE, the left navbar images must be right under each other and right under the top line below the logo. No seams should be visible. Both top and bottom vertical lines must meet the middle cross without seams. I can't seem to be able to achieve this with CSS.
The body (bottom right big box) should be able to expand when the text fills it without affecting the navbar and top bar (title) arrangement. Please take a look at teh code and tell me what is wrong.
The code is:
<?xml version="1.0"?>
<!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">
<head>
<title>CSS TEST</title>
<style type="text/css">
body {
margin:0px 0px 0 0x;
align:center;
padding:0;}
#level0 {
width:600px;
margin:0;
padding:0;
background:#2f1b9d;}
#logo {
width:97px;
height:79px;
background-image: url("images/Weizmann-Institute.gif"); background-repeat: no-repeat;}
#vrtop{
height:79px;
width:8px;
margin-left:97px;
padding-left:0px;
background-image: url("images/about_02.gif"); background-repeat: no-repeat;}
#vrbottom{
float:right;
height:153px;
width:8px;
margin-left:97px;
padding-left:0px;
background-image: url("images/about_08.gif"); background-repeat: no-repeat;}
#titlebar{
height:79px;
width:595px;
margin-left:8px;
padding-left:0px;
background-image: url("images/title-about.gif"); background-repeat: no-repeat;}
#hrleft{
height:9px;
width:97px;
padding-left:0px;
margin-left:0px;
background-image: url("images/about_04.gif"); background-repeat: no-repeat;}
#midblock{
height:9px;
width:8px;
margin-left:97px;
padding-left:0px;
background-image: url("images/about_05.gif"); background-repeat: no-repeat;}
#hrright{
height:9px;
width:595px;
margin-left:8px;
padding-left:0px;
background-image: url("images/about_06.gif"); background-repeat: no-repeat;}
#home{
height:34px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/home.gif"); background-repeat: no-repeat;}
#about{
height:31px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/about.gif"); background-repeat: no-repeat;}
#students{
height:37px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/students.gif"); background-repeat: no-repeat;}
#pics{
height:38px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/Pictures.gif"); background-repeat: no-repeat;}
#spacer{
height:13px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/about_13.gif"); background-repeat: no-repeat;}
</style>
</head>
<body>
<div id="level0">
<div id="logo">
<div id="vrtop">
<div id="titlebar">
</div>
</div>
</div>
</div>
<div id="level0">
<div id="hrleft">
<div id="midblock">
<div id="hrright">
</div>
</div>
</div>
</div>
<div id="level0" style="width:700px;">
<div id="home">
<div id="vrbottom">
</div>
</div>
<div id="about">
</div>
<div id="students">
</div>
<div id="pics">
</div>
<div id="spacer">
</div>
</div>
</body>
</html>
Thanks in advance,
~DmitryDid you even bother reading the previous reply:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=14792">http://forums.webdeveloper.com/showthre ... adid=14792</a><!-- m -->
id are unique identifiers. You should not repeat them. For example, you have three divs:
<div id="level0">
This is incorrect.
Your page has absolutely no information on it. It will not be displayed on a handheld, it will not be displayed if CSS is disabled, it will not be displayed if images are disabled, search engines have no content to index, assistive technologies have no content to render.
Good luck
NiketI am working on layout first, then the content. This is why the page has no info.
Netscape and IE seem to be working completely differently with CSS layout. My goal is to make the webpage in the tabular format using HTML or CSS and image clips. However, I am having problems aligning and putting all the images together without any seams. The page is at:
<!-- m --><a class="postlink" href="http://mkashlev.dyndns.org:7771/ISSI2003-web/test.html">http://mkashlev.dyndns.org:7771/ISSI2003-web/test.html</a><!-- m -->
If viewed in IE, the left navbar images must be right under each other and right under the top line below the logo. No seams should be visible. Both top and bottom vertical lines must meet the middle cross without seams. I can't seem to be able to achieve this with CSS.
The body (bottom right big box) should be able to expand when the text fills it without affecting the navbar and top bar (title) arrangement. Please take a look at teh code and tell me what is wrong.
The code is:
<?xml version="1.0"?>
<!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">
<head>
<title>CSS TEST</title>
<style type="text/css">
body {
margin:0px 0px 0 0x;
align:center;
padding:0;}
#level0 {
width:600px;
margin:0;
padding:0;
background:#2f1b9d;}
#logo {
width:97px;
height:79px;
background-image: url("images/Weizmann-Institute.gif"); background-repeat: no-repeat;}
#vrtop{
height:79px;
width:8px;
margin-left:97px;
padding-left:0px;
background-image: url("images/about_02.gif"); background-repeat: no-repeat;}
#vrbottom{
float:right;
height:153px;
width:8px;
margin-left:97px;
padding-left:0px;
background-image: url("images/about_08.gif"); background-repeat: no-repeat;}
#titlebar{
height:79px;
width:595px;
margin-left:8px;
padding-left:0px;
background-image: url("images/title-about.gif"); background-repeat: no-repeat;}
#hrleft{
height:9px;
width:97px;
padding-left:0px;
margin-left:0px;
background-image: url("images/about_04.gif"); background-repeat: no-repeat;}
#midblock{
height:9px;
width:8px;
margin-left:97px;
padding-left:0px;
background-image: url("images/about_05.gif"); background-repeat: no-repeat;}
#hrright{
height:9px;
width:595px;
margin-left:8px;
padding-left:0px;
background-image: url("images/about_06.gif"); background-repeat: no-repeat;}
#home{
height:34px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/home.gif"); background-repeat: no-repeat;}
#about{
height:31px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/about.gif"); background-repeat: no-repeat;}
#students{
height:37px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/students.gif"); background-repeat: no-repeat;}
#pics{
height:38px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/Pictures.gif"); background-repeat: no-repeat;}
#spacer{
height:13px;
width:97px;
padding-top:0px;
margin-top:0px;
margin-left:0px;
padding-left:0px;
background-image: url("images/about_13.gif"); background-repeat: no-repeat;}
</style>
</head>
<body>
<div id="level0">
<div id="logo">
<div id="vrtop">
<div id="titlebar">
</div>
</div>
</div>
</div>
<div id="level0">
<div id="hrleft">
<div id="midblock">
<div id="hrright">
</div>
</div>
</div>
</div>
<div id="level0" style="width:700px;">
<div id="home">
<div id="vrbottom">
</div>
</div>
<div id="about">
</div>
<div id="students">
</div>
<div id="pics">
</div>
<div id="spacer">
</div>
</div>
</body>
</html>
Thanks in advance,
~DmitryDid you even bother reading the previous reply:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=14792">http://forums.webdeveloper.com/showthre ... adid=14792</a><!-- m -->
id are unique identifiers. You should not repeat them. For example, you have three divs:
<div id="level0">
This is incorrect.
Your page has absolutely no information on it. It will not be displayed on a handheld, it will not be displayed if CSS is disabled, it will not be displayed if images are disabled, search engines have no content to index, assistive technologies have no content to render.
Good luck
NiketI am working on layout first, then the content. This is why the page has no info.