Jump to content

Layout of my intranet website was change when I access it on different computers

newphpcoder

By newphpcoder
in CSS Help

 Share

Recommended Posts

newphpcoder Advanced Member

newphpcoder

Posted
Posted

Good day!

I created my website on my computer and now I put it on my testing server and I found out that the size background of my website was change even I used those css code:

<style type="text/css">
html,body{
overflow:hidden;
}
BODY {
background-image: url(bground.png);
background-attachment: fixed;
}
</style>

I used those codes to fixed the background but my problem is the background was doubled the image although it is fixed. Not only was the background change also the content of my website was dislocated. I want is only one output should be display in all computers. 

 

It is possible that my website display should be dependent on the browser or the settings of the computer? So those in all computers the display of my website are all the same like what I browse in the internet?

 

On my used computers my website display is good, but when I try to other computers it was display not so good I don’t know why. I need to fix it now because all the staff wants to see my website… I hope you can help me…

Thank you

 

haku Regular Member

haku

Posted
Posted

You need to spend some time researching cross-browser compatibility. It's more than can be addressed in one thread. But some basic principles:

 

1) If you are using absolute positioning, don't. Remove it all. It's no good. Learn how to position with floats.

2) Make sure your HTML is valid with no errors. Use the HTML validator to check. The firefox 'HTML Validator' plug-in is even better.

3) Make your site work on Firefox (or Chrome, or Safari or Opera). Then fix it for IE. Don't make it work on IE then try on other browsers.

4) Make sure you test on IE7 and IE8 at least, and maybe even IE6 if you care about that one.

newphpcoder Advanced Member

newphpcoder

Posted
  • Author
Posted

I used IE8 browser

 

Here is my html and css codes:

<!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>Company</title>
<style type="text/css"> 
html,body{
overflow:hidden;
}
BODY { 
background-image: url(bground.png);
background-attachment: fixed; 
} 
--> 
</style>

<style type="text/css">

#ddcolortabs{
margin-left: 2px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 2px;
}

#ddcolortabs ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}

#ddcolortabs a{
float:right;
color: white;
background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;
margin:115px 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:right;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:6px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}

#ddcolortabs a:hover{
background-color: #678b3f;
}

#ddcolortabs a:hover span{
background-color: #678b3f ;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #678b3f;
}
</style>

<style type="text/css">

#Layer1_background_green {
position:absolute;
width:980px;
height:392px;
z-index:1;
top: 149px;
left: 0px;
}
#Layer1_vertical_line {
position:absolute;
width:3px;
height:387px;
z-index:2;
left: 170px;
top: 153px;
}
#Layer4_horizontal_line {
position:absolute;
width:980px;
height:5px;
z-index:3;
left: 0px;
top: 150px;
}
#visionmission_flash {
position:absolute;
width:644px;
height:404px;
z-index:5;
left: 270px;
top: 156px;
}
#green_frame {
position:absolute;
width:172px;
height:385px;
z-index:6;
left: 0px;
top: 156px;
}
#nav_vertical {
position:absolute;
width:165px;
height:111px;
z-index:7;
left: 10px;
top: 363px;
}

#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#nav_vertical li{
display:inline;
margin:0 0 0 0;
padding:0;
text-transform:uppercase;
}


#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}


#nav_vertical a:hover{
color:#00CC00;
}

#nav_vertical a:hover span{
color: #00CC00 ;
}

#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}
#ds {
position:absolute;
width:73px;
height:72px;
z-index:8;
left: 0px;
top: 160px;
}
</style>
</head>
<body>
<div id="visionmission_flash">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="650" height="406">
    <param name="movie" value="VISION_MISSION.swf" />
    <param name="quality" value="high" />
<param name="wmode" value="transparent"/>
    <embed src="VISION_MISSION.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="406" wmode="transparent"></embed>
  </object>
</div>
<form id="form1" name="form1" method="post" action="">
<div id="ddcolortabs">
<ul>
<li><a href="products.php" title="Products" target="_self"><span>Products</span></a></li>
<li><a href="event.php" title="Events" target="_self"><span>Events</span></a></li>
<li style="margin-left: 1px" id="current"><a href="company.php" title="Company" target="_self"><span>Company</span></a></li>
</ul>
</div>
<div id="ddcolortabsline"></div>
<div id="Layer1_background_green"><img src="layout_image/LINE.png" width="1020" height="417" /></div>
<div id="Layer4_horizontal_line"><img src="layout_image/horizontal_line.png" width="1020" height="5" /></div>
</form>
<div id="green_frame"><img src="layout_image/vertical left v01.jpg" width="174" height="410" /></div>
<div id="nav_vertical">
<ul>
<li id="current"><a href="visionmission.php" title="VISION AND MISSION" target="_self"><span>VISION AND MISSION</span></a></li>
<li><a href="qualitypolicy.php" title="QUALITY POLICY" target="_self"><span>QUALITY POLICY</span></a></li>
<li><a href="values.php" title="VALUES" target="_self"><span>VALUES</span></a></li>
</ul>
</div>
<div id="ds"><a href="company.php"><img src="layout_image/ds.png" width="170" height="200" border="0" /></a></div>
</body>
</html>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.