Background and positions - works in IE, but not Firefox or Opera
newbie
Posted: Wed, 2008-08-20 09:44
Hello everyone.
I am currently building a site for a client. I can make it work using tables, but I'm trying to build the site using ONLY CSS and I'm trying to learn to build from scratch rather than piecemealing code from various tutorials and books.
At present I am trying to get the background to center and the text to position where I want it.
It works perfectly in IE 7.0 (can't test 6 at present), it's ALMOST there in Firefox (the text box is slightly out of place), but looks like crap on Opera. I also can't test it in Safari at present, but I suspect it will have issues like Firefox and Opera.
The test page is here: http://www.thereelmorganelizabeth.com/actor/scratch2.html
If you view it in IE, you can see exactly what it should look like.
In addition, you wil see that I am trying to colour the mini scrollbar on the site. While I understand only IE lets you do that, the code I used was suggested in another forum as one that would work (but does not). I am not trying to change the viewer's main scrollbar - just the one on the site - don't know if that helps (but I accept if it can't be done).
The code is on the test page, but to make life simple for everyone, I've also included it all below.
TIA!!!!!
<HTML>
<TITLE>from scratch test</TITLE>
<HEAD>
<style>
/* body */
body {
margin: 0;
padding: 0;
background-color: #3E3E3E;
background-position: center center;
background-image: url("newtest2.jpg");
background-repeat: no-repeat;
height: 100%;
}
html {
padding: 0;
margin: 0;
height: 100%;
}
/* tables */
#textbox {
background-color: transparent;
margin: 215px 0px 10px 453px;
scrollbar-face-color: #999999;
scrollbar-arrow-color: #000000;
scrollbar-highlight-color: #FFFBF0;
scrollbar-3dlight-color: #999999;
scrollbar-shadow-color: #999999;
scrollbar-darkshadow-color: #999999;
scrollbar-track-color: #CCCCCC;
}
#textbox ul {
margin: 7px 0px 0px 15px;
width: 345px;
height: 280px;
overflow: auto;
padding: 7px, 10px, 0px, 15px
}
/* fonts */
p {
font-family: verdana, arial, helvetica, sans-serif;
color: #000099;
font-size: 0.8em;
line-height: 1.2em;
text-align: justify;
}
h1 {
font-family: verdana, arial, helvetica, sans-serif;
color: #000099;
font-size: 0.9em;
line-height: 1.2em;
text-align: center;
text-decoration: underline;
}
/* links */
#textbox a:link, a.menu:visited, a.menu:active {
color: #CCFF33;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.7em;
text-decoration: none;
text-align: center;
}
#textbox a:hover {
color: #FFFF00;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.7em;
text-decoration: underline;
text-align: center;
}
</style>
</HEAD>
<BODY>
<div id="textbox">
<a class="#" href="http://www.thereelmorganelizabeth.com">Main</a>
<a class="#" href="http://www.thereelmorganelizabeth.com/actor/bio">Bio</a>
<a class="#" href="http://www.thereelmorganelizabeth.com/actor/resume">Resume</a>
<a class="#" href="http://www.thereelmorganelizabeth.com/actor/news">News</a>
<a class="#" href="http://www.thereelmorganelizabeth.com/actor/media">Media</a>
<a class="#" href="http://www.thereelmorganelizabeth.com/actor/gallery">Gallery</a>
<a class="#" href="http://www.thereelmorganelizabeth.com/actor/links">Links</a>
<a class="#" href="http://www.thereelmorganelizabeth.com/actor/contact">Contact</a>
<ul>
<h1>Biography</h1>
<p>Bio is here. Bio is here</p>
<br></ul>
</div>
</BODY>
</HTML>
Enthusiast
Posts: 267
Joined: 2008-07-18
Location: US
Things will go better
Posted: Wed, 2008-08-20 16:20
Things will go better cross-browser by adding a doctype.
This will do:
Then validate the markup and the CSS.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
Bring it back, valid, and someone will assist with the issue(s) you wrote about.
BTW, code to Opera, FF,and Safari. Correct IE/6 and IE/7 if necessary. Not vice versa.
PS All that is needed is the URL-- given you provide it, anyone can view the source document and open the CSS file.
newbie
Posts: 2
Joined: 2008-08-20
Adding that top part did
Posted: Wed, 2008-08-20 20:47
Adding that top part did center the background image on Opera. However it also changed all the ' to boxes or question marks.
The text is also misaligned on all three broswer types.
I don't know anything about validating - but I tried and it told me:
"Sorry, I am unable to validate this document because on line 116 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
The error was: utf8 "\x92" does not map to Unicode "
Moderator
Posts: 6782
Joined: 2004-05-01
Location: Brisbane
Please read this before
Posted: Thu, 2008-08-21 02:40
Please read this before proceeding further with this thread.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference