I am building a new website for my company. It's my first time being heavy into CSS.
When I view the page (in IE 6) without the CSS, the plain old HTML acts just fine.
But, when viewed with the CSS, I can't select specific text with my mouse. It will only select large blocks - including the menu items.
It's not like this really effects the appearance or functionality of the site, but if someone wanted to cut and paste some text from the site, they would have problems (...I guess some of you developers might see this as a good thing
).
Does anyone know what the problem might be? Any other critique would be appreciated as well.
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>************ - Home</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="copyright" content="Copyright 2003 ************">
<meta name="author" content="************">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
</head>
<body>
<div id="bannerlogo"> </div>
<div id="banner"> </div>
<!-- SIDEBAR BEGINS HERE -->
<div id="sidebar-a">
<!-- MENU BUTTONS BEGIN HERE -->
<div id="menubutton">
<ul>
<li><a class="current" href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services/index.htm">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"products/index.htm">Products</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contacts/index.htm">Contacts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"jobs/index.htm">Jobs</a></li>
</ul>
</div>
<!-- MENU BUTTONS END HERE -->
<!-- ADDRESS BEGINS HERE -->
<div id="address">
<span class="bold">Company name</span>
<p>
Address<br>
City, State zip
<p>
P.O. Box 55555<br>
City, State zip<br>
USA
<p>
Phone 555-555-5555<br>
Fax 555-555-5555
<p>
</div>
<!-- ADDRESS ENDS HERE -->
</div>
<!-- SIDEBAR ENDS HERE -->
<div id="content">
<!-- MAIN CONTENT BEGINS -->
<h1 class="pagehead">COMPANY PROFILE</h1>
************, established in 1908, is the United States' most versatile fabrication and machining facility in both skilled personnel and equipment capacity.
<p>************ is an industry leader in shop and field manufacturing, repair, and maintenance of industrial equipment ranging from A.S.M.E. Code vessels to axial compressors.
<p>************ has facilities located in the ************ industrial areas, with over 250,000 sq. ft. under roof.
<p>************ has the capabilities to handle up to 35' - 6" in diameter, 200' lengths, and 800,000 lb. weight.
<p>
<!-- MAIN CONTENT ENDS -->
<!-- FOOTER BEGINS -->
<div id="footer">
Copyright © 2003 ************, City, State. All rights reserved.<br>Page last updated on 11/18/2003.<br>Contact <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:webmaster@*******.com">webmaster</a> to report comments or problems with the website.<br>
</div>
<!-- FOOTER ENDS -->
</div>
</body>
</html>
...and the CSS:
body {
background: #fff url("common/bgblufad.gif") repeat-y top left;
margin: 0px;
padding: 0px;
}
/* BANNER BEGINS
Located on top of page with logo to the left
*/
#bannerlogo {
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
height: 127px;
width: 200px;
background-image: url("common/anvil1.gif");
background-repeat: no-repeat;
}
#banner {
position: absolute;
top: 0px;
left: 200px;
padding: 5px;
height: 127px;
width: 1000px;
background-image: url("common/headerdwg.jpg");
background-repeat: no-repeat;
}
/* BANNER ENDS */
#sidebar-a {
position: absolute;
top: 140px;
left: 0px;
width: 200px;
height: auto;
}
#address {
border: none;
font-family: arial, sans-serif;
font-size: small;
color: #fff;
padding: 0px 0px 0px 5px;
}
/* MENU BUTTONS BEGIN */
#menubutton a {
color: #000;
font-size: medium;
font-family: verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
border: 4px outset #fff;
background-color: #E2D170;
display: block;
width: 110px;
padding: 3px 5px;
margin: 5px 5px;
}
#menubutton a:hover {
color: #000;
border: 4px inset #fff;
}
#menubutton a.current {
background-image: url("common/goldbutani1.gif");
}
#menubutton ul {
list-style: none;
margin-left: 0px;
}
#menubutton a.submenu {
color: #fff;
font-size: small;
font-weight: normal;
text-align: left;
border: none;
background-color: transparent;
width: 150px;
margin: 0px 0px 0px 10px;
}
#menubutton a.subcurrent, #menubutton a.subcurrent:hover {
color: #e2d170;
font-size: small;
font-weight: normal;
text-align: left;
border: none;
background-color: transparent;
width: 150px;
margin: 0px 0px 0px 10px;
}
#menubutton a.submenu:hover {
color: #e2d170;
border: none;
}
/* MENU BUTTONS END */
#content {
position: absolute;
top: 130px;
left: 200px;
width: auto;
height: auto;
padding: 5px 10px 60px 10px;
margin: 0px 5px 5px 5px;
font-family: tahoma, sans-serif;
}
#footer {
position: relative;
bottom: -60px;
left: 0px;
width: auto;
height: auto;
text-align: center;
font-size: x-small;
font-family: arial, sans-serif;
padding: 5px;
background-color: rgb(213, 219, 225);
border: medium ridge;
}
.uline {
text-decoration: underline;
}
.bold {
font-weight: bold;
}
h4.indent {
margin: 0px 0px 0px 25px;
}
p.descrip {
margin: 0px 0px 15px 35px;
}
h1.pagehead {
font-size: x-large;
color: #051dab;
border-top: medium solid #bfa01f;
border-bottom: thin solid #e2d170;
}
img.right {
float: right;
margin: 5px 0px 5px 10px;
}
img.left {
float: left;
margin: 5px 10px 5px 0px;
}
Thanks in advance for your help.
-Philyes i had a similar problem when i first made a heavy css site, i never solved the problem
, however i gave up trying to fix it purely for the reason you said stop people cut and pasting so easily ,
critques
firstly the buttons on the left the buttons in their mouseout state as they appear when page is loaded are fine howevr on mouseover the kinda ina bevel, i personally would just have them drop on or two pixels and possible same pixels to the right leaving the image the same as mouseout, this will be more effective to making them look like depressed
and thats it lol dont know why i said firstly, i see youve cut out most of the things on it i presume such as banner and that. bits that reference company its for, other than that good start, let me know what you think about buttons
RichThanks for the idea for the menu buttons, Rich. I might give that a try.
Does anyone else have a solution to the text selection problem?
I'm sure it's possible to select text on a CSS formatted page. Even though it doesn't affect the appearance, I would like to do the page correctly so that I better understand how CSS works.
-PhilThis is an IE bug, that is introduced only with certain layouts. One way to get around it would be to throw IE into quirks mode, but this may have undesirable results. Not sure exactly what causes it, but google (<!-- m --><a class="postlink" href="http://www.google.com/">http://www.google.com/</a><!-- m -->) might.
When I view the page (in IE 6) without the CSS, the plain old HTML acts just fine.
But, when viewed with the CSS, I can't select specific text with my mouse. It will only select large blocks - including the menu items.
It's not like this really effects the appearance or functionality of the site, but if someone wanted to cut and paste some text from the site, they would have problems (...I guess some of you developers might see this as a good thing
).Does anyone know what the problem might be? Any other critique would be appreciated as well.
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>************ - Home</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="copyright" content="Copyright 2003 ************">
<meta name="author" content="************">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
</head>
<body>
<div id="bannerlogo"> </div>
<div id="banner"> </div>
<!-- SIDEBAR BEGINS HERE -->
<div id="sidebar-a">
<!-- MENU BUTTONS BEGIN HERE -->
<div id="menubutton">
<ul>
<li><a class="current" href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services/index.htm">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"products/index.htm">Products</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contacts/index.htm">Contacts</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"jobs/index.htm">Jobs</a></li>
</ul>
</div>
<!-- MENU BUTTONS END HERE -->
<!-- ADDRESS BEGINS HERE -->
<div id="address">
<span class="bold">Company name</span>
<p>
Address<br>
City, State zip
<p>
P.O. Box 55555<br>
City, State zip<br>
USA
<p>
Phone 555-555-5555<br>
Fax 555-555-5555
<p>
</div>
<!-- ADDRESS ENDS HERE -->
</div>
<!-- SIDEBAR ENDS HERE -->
<div id="content">
<!-- MAIN CONTENT BEGINS -->
<h1 class="pagehead">COMPANY PROFILE</h1>
************, established in 1908, is the United States' most versatile fabrication and machining facility in both skilled personnel and equipment capacity.
<p>************ is an industry leader in shop and field manufacturing, repair, and maintenance of industrial equipment ranging from A.S.M.E. Code vessels to axial compressors.
<p>************ has facilities located in the ************ industrial areas, with over 250,000 sq. ft. under roof.
<p>************ has the capabilities to handle up to 35' - 6" in diameter, 200' lengths, and 800,000 lb. weight.
<p>
<!-- MAIN CONTENT ENDS -->
<!-- FOOTER BEGINS -->
<div id="footer">
Copyright © 2003 ************, City, State. All rights reserved.<br>Page last updated on 11/18/2003.<br>Contact <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:webmaster@*******.com">webmaster</a> to report comments or problems with the website.<br>
</div>
<!-- FOOTER ENDS -->
</div>
</body>
</html>
...and the CSS:
body {
background: #fff url("common/bgblufad.gif") repeat-y top left;
margin: 0px;
padding: 0px;
}
/* BANNER BEGINS
Located on top of page with logo to the left
*/
#bannerlogo {
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
height: 127px;
width: 200px;
background-image: url("common/anvil1.gif");
background-repeat: no-repeat;
}
#banner {
position: absolute;
top: 0px;
left: 200px;
padding: 5px;
height: 127px;
width: 1000px;
background-image: url("common/headerdwg.jpg");
background-repeat: no-repeat;
}
/* BANNER ENDS */
#sidebar-a {
position: absolute;
top: 140px;
left: 0px;
width: 200px;
height: auto;
}
#address {
border: none;
font-family: arial, sans-serif;
font-size: small;
color: #fff;
padding: 0px 0px 0px 5px;
}
/* MENU BUTTONS BEGIN */
#menubutton a {
color: #000;
font-size: medium;
font-family: verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
border: 4px outset #fff;
background-color: #E2D170;
display: block;
width: 110px;
padding: 3px 5px;
margin: 5px 5px;
}
#menubutton a:hover {
color: #000;
border: 4px inset #fff;
}
#menubutton a.current {
background-image: url("common/goldbutani1.gif");
}
#menubutton ul {
list-style: none;
margin-left: 0px;
}
#menubutton a.submenu {
color: #fff;
font-size: small;
font-weight: normal;
text-align: left;
border: none;
background-color: transparent;
width: 150px;
margin: 0px 0px 0px 10px;
}
#menubutton a.subcurrent, #menubutton a.subcurrent:hover {
color: #e2d170;
font-size: small;
font-weight: normal;
text-align: left;
border: none;
background-color: transparent;
width: 150px;
margin: 0px 0px 0px 10px;
}
#menubutton a.submenu:hover {
color: #e2d170;
border: none;
}
/* MENU BUTTONS END */
#content {
position: absolute;
top: 130px;
left: 200px;
width: auto;
height: auto;
padding: 5px 10px 60px 10px;
margin: 0px 5px 5px 5px;
font-family: tahoma, sans-serif;
}
#footer {
position: relative;
bottom: -60px;
left: 0px;
width: auto;
height: auto;
text-align: center;
font-size: x-small;
font-family: arial, sans-serif;
padding: 5px;
background-color: rgb(213, 219, 225);
border: medium ridge;
}
.uline {
text-decoration: underline;
}
.bold {
font-weight: bold;
}
h4.indent {
margin: 0px 0px 0px 25px;
}
p.descrip {
margin: 0px 0px 15px 35px;
}
h1.pagehead {
font-size: x-large;
color: #051dab;
border-top: medium solid #bfa01f;
border-bottom: thin solid #e2d170;
}
img.right {
float: right;
margin: 5px 0px 5px 10px;
}
img.left {
float: left;
margin: 5px 10px 5px 0px;
}
Thanks in advance for your help.
-Philyes i had a similar problem when i first made a heavy css site, i never solved the problem
, however i gave up trying to fix it purely for the reason you said stop people cut and pasting so easily ,critques
firstly the buttons on the left the buttons in their mouseout state as they appear when page is loaded are fine howevr on mouseover the kinda ina bevel, i personally would just have them drop on or two pixels and possible same pixels to the right leaving the image the same as mouseout, this will be more effective to making them look like depressed
and thats it lol dont know why i said firstly, i see youve cut out most of the things on it i presume such as banner and that. bits that reference company its for, other than that good start, let me know what you think about buttons
RichThanks for the idea for the menu buttons, Rich. I might give that a try.
Does anyone else have a solution to the text selection problem?
I'm sure it's possible to select text on a CSS formatted page. Even though it doesn't affect the appearance, I would like to do the page correctly so that I better understand how CSS works.
-PhilThis is an IE bug, that is introduced only with certain layouts. One way to get around it would be to throw IE into quirks mode, but this may have undesirable results. Not sure exactly what causes it, but google (<!-- m --><a class="postlink" href="http://www.google.com/">http://www.google.com/</a><!-- m -->) might.