CSS Forum

**newphpcoder** · 10-26-2010, 04:27 AM

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:

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

**Kelpie** · 10-26-2010, 05:20 AM

It's probably different screen resolutions. Could you paste all code, or provide a link to the site so we can take a look?

**sieger82** · 10-26-2010, 05:27 AM

Are you saying you get a repeated background?

Thy this CSS code:

Code:

body
    { 
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

the 'background-repeat:no-repeat;' should prevent the background from repeating even on larger screens.

**LadynRed** · 10-26-2010, 08:35 AM

In addition, that can be cut to ONE LINE of code using CSS shorthand:

Quote:

background: url(smiley.gif) no-repeat fixed;

**Alvis Fenrir** · 10-26-2010, 01:37 PM

Hope this link offers something to your solution.
http://mirificampress.com/permalink/...tion_w_dignity

**newphpcoder** · 10-26-2010, 08:30 PM

my background image size is 1020x570...

Why it happens that the location of the content of my website was move or dislocate?

Thank you

**newphpcoder** · 10-26-2010, 08:31 PM

Quote:

Originally Posted by Kelpie

It's probably different screen resolutions. Could you paste all code, or provide a link to the site so we can take a look?

Code:

<!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/s...rsion=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>

**newphpcoder** · 10-26-2010, 08:31 PM

Quote:

Originally Posted by LadynRed

In addition, that can be cut to ONE LINE of code using CSS shorthand:

Thank you..I will try tis codes

**LadynRed** · 10-26-2010, 08:35 PM

The problem is all that unnecessary positioning. You don't need it and it causes big problems in Internet Explorer.

**newphpcoder** · 10-26-2010, 09:14 PM

Quote:

Originally Posted by LadynRed

The problem is all that unnecessary positioning. You don't need it and it causes big problems in Internet Explorer.

Like what unnecessary positioning?where in my codes i have unnecessary positioning?

Thank you

**LadynRed** · 10-27-2010, 07:17 AM

All of that position:absolute - completely unnecessary.

**sivavt** · 02:41 PM

One tip on CSS.

Even if you write valid css, you have to test it in different browsers. Browsers implement CSS differently. For example, browser like IE are nightmarish for developers.

-Siva
<removed>

**newphpcoder** · 10-27-2010, 08:19 PM

Quote:

Originally Posted by LadynRed

All of that position:absolute - completely unnecessary.

instead of position:absolute what should i used?
thank you

**newphpcoder** · 10-27-2010, 08:21 PM

Quote:

Originally Posted by sivavt

One tip on CSS.

Even if you write valid css, you have to test it in different browsers. Browsers implement CSS differently. For example, browser like IE are nightmarish for developers.

-Siva
<removed>

All my users used IE8

**LadynRed** · 10-27-2010, 09:13 PM

Quote:

instead of position:absolute what should i used?

Learn to use the normal document flow and floats.

**newphpcoder** · 10-27-2010, 09:43 PM

Quote:

Originally Posted by LadynRed

Learn to use the normal document flow and floats.

I'm not familiar with the float:confused:

**LadynRed** · 10-28-2010, 09:27 AM

You don't know about floats??? You're missing a huge piece of css!
Start here -http://css.maxdesign.com.au/floatutorial/

**newphpcoder** · 10-28-2010, 08:01 PM

Good day!
I research on internet about auto fit of website or adapting the resolution of the monitor or screen of computer, but I can’t find the solution. I want is in any settings/resolution/size of monitor my website appearance was not change. Because now I got a problem that I can’t upload my website in a server because I notice that in other computer my website display was change or change the location of the content of my website, After I noticed that the background was doubled I put the background no repeat and after that on the below of webpage I see a white color.

Here is my css codes:

Code:

<style type="text/css"> 
html,body{
overflow:hidden;
}
BODY { 
background-image: url(layout_image/bgroundv09.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>

Thank you….

**newphpcoder** · 10-28-2010, 08:09 PM

Quote:

Originally Posted by LadynRed

All of that position:absolute - completely unnecessary.

Actually the position absolute is automatically coded because I used Macromedia Dreamweaver, that's why I'm not using float.

**LadynRed** · 10-28-2010, 08:39 PM

I figured as much, but that does not change the fact that you should not be using it on everything. Just because DW produces code doesn't mean it's good code!