Page 1 of 1

Page displaying with differences in different browsers

Posted: Sat Nov 13, 2010 8:31 am
by shehan31

Code: Select all

<!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">
<link href="myselfcss.css" rel="stylesheet" type="text/css"  /> 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body bgcolor="#333333">
<div id="header_wrap">
<div id="header">
<div id="site_logo"></div>
</div>
</div>
<div id="menu_wrap">
<div id="menu">
<ul>
<li><a href="myself.html">Who am I ?</a></li>
<li><a href="myself.html">Academic Background</a></li>
<li><a href="myself.html">Professional membership</a></li>
<li><a href="myself.html">Contact me</a></li>
</ul>
</div>
</div>
<div id="contents_wrap">
<div id="contents">
<div class="top_image"></div>
<div class="my_photo"></div>
<div class="project_contents">
<div class="project_text"></div>
<p> hi all !!!</p>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CSS code ....

#body{
margin:0px;
padding:0px;
background-color:#333333;
}
#header_wrap {
height:140px;
width:100%;
margin::0px;
padding:0px;
background:url(blue.jpeg);
}
/*
#header {
width::980px;
margin:0 auto:
padding:0;
}*/
#site_logo {
margin::0;
height:140px;
width:900px;
background:url(mickeyb.jpeg) no-repeat ;

}
#menu_wrap{
background:url(menu_wrap.jpeg);
height:35px;

width:100%;
margin:0px;

}
#menu {
width:1100px;
height:35px;
margin: 0px ;

padding:0px;
}
#menu ul {
margin::0 0 0 35px;
padding:0px;
list-style:none;
}
#menu li {
margin:0px;
padding:0px;
display:inline;
}
#menu a {
display:block;
height:35px;
width:250px;
float:left;
text-decoration:none;
font-size:16px;
font-weight:bold;
color:#333;
white-space:2px;

background:url(buttons.jpeg);
outline:none;
text-align:center;


}
#menu a:hover {
color:#999;
background:url(hover.jpeg) bottom:no-repeat;

}
#contents_wrap {
width:980px;
margin:0 auto;
}
#contents {
width:1000px;
margin:30px;
padding:9px;
border:1px solid:#c3c4c5;
background:#d8d7d7;
}
.top_image{
background:url(who.jpeg) center;
width:550px;
height:96px;

}
.my_photo {
background:url(myself.jpeg);
float:left;
width:300px;
height:225px;
}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
please refer the attachments first.
The problem is I am not getting the desired look in firefox and internet explorer. I haven't tried out in other browsers.
there are two different types of gaps under the logo in two browsers.
The contents (.contents in css code) is not centerd as i wanted. Is there any metod to achive this goal.

Regards
Shehan31

Re: Page displaying with differences in different browsers

Posted: Sat Nov 20, 2010 4:46 am
by social_experiment
If you want to center things with css, you have to use 'auto' as the value for margin's left & right properties.

Code: Select all

#someId {
 margin: 0 auto;
}
This is best used in conjuction with a width value.

To get the spaces underneath the logo more-or-less the same in Firefox and IE, use margin again.

Code: Select all

#menu_wrap {
 /* other css code */
 margin: 20px auto 0 auto;
}
This puts a 20px margin on top of the menu_wrap value (between the header & menu_wrap)

Watch out for syntax errors, they can throw your stylesheet complete off.

Code: Select all

#someId {
 /* incorrect and causes display issues */
 margin:: 0 auto;
 /* correct */
 margin: 0 auto;
}

Re: Page displaying with differences in different browsers

Posted: Mon Nov 22, 2010 4:21 am
by shehan31
Hi Social_Experiments;
Thank you for your support. I will return to you after trying your advice.
Regards
Shehan31