Forum Moderators: not2easy
Right first id like to say hello to everyone im new around here...
But any ways i have build this web site:
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
Its for a business. If you view it in IE it works like magic.. But when it comes to viewing the page in FF most of the images not appear.
I am using CSS for all of my layout and i have learnt css from W3C tutorials so where have i gone wrong..?
Also i did add a Doc Tag into my coding but that didnt work either... All it did was strip my font formating out and made the background colour white....
Any help would be great
Cheers Mark
[edited by: SuzyUK at 12:58 pm (utc) on Jan. 4, 2005]
sorry about the site link snip, URLS (site reviews) aren't permitted here re: the TOS ;
First step though..
have you validated your HTML [validator.w3.org] and CSS [jigsaw.w3.org] there could be some malformed markup causing the confusion?
The HTML will probably need a doctype and content type in order to validate it online. By not giving it a doctype you are triggering IE Quirks mode which could be one reason you're seeing different results
However I think if you start by validating the CSS you may find some of the errors, such as images not appearing, in there as non-IE browsers are much more strict in their rendering of CSS (or not if it contains errors)
Suzy
Like SuzyUK said, validation could well be the key here. It sounds to me like you have some invalid CSS or HTML markup that could be causing the problem. Validation is another whole box of worms, though - if you've never done it before, be prepared for a small struggle to get the page to validate. (Well worth it though.)
Incidentally, you'll find that testing first in FireFox, then tweaking for IE, gives much better and faster results than testing in IE first. A lot of folks here use FireFox for development purposes, and IE only for cross-browser testing. On my machine, IE is decidedly an inferior being! ;)
Thanks for the replys.... Well the css coding looks like this...
body
{
background-color:C1C1C1;
scrollbar-face-color:4F4F4F;
scrollbar-highlight-color:C0C0C0;
scrollbar-3dlight-color:C0C0C0;
scrollbar-shadow-color:4F4F4F;
scrollbar-darkshadow-color:2F2F2F;
scrollbar-track-color:DFDFDF;
scrollbar-arrow-color:0F0F0F;
}
p.links
{
font-size:18px;
text-align:left;
font-family:Times New Roman,Arial;
}
.text
{
font-size:18px;
text-align:center;
color:1F3E8E;
font-family:Times New Roman,Arial;
}
li.text
{
list-style-type:circle;
}
p.keywords
{
color:C1C1C1;
font-size:1px;
}
a:link
{
color:1F3E8E;
}
a:visited
{
color:1F3E8E;
}
a:active
{
color:1F3E8E;
}
a:hover
{
color:1A4DCD;
}
img.header
{
position:absolute;
top:50px;
left:140px;
width:1012px;
height:163px;
z-index:-1;
}
img.leftbar
{
position:absolute;
top:213px;
left:140px;
width:12px;
height:529px;
z-index:-1;
}
img.rightbar
{
position:absolute;
top:213px;
left:1139px;
width:13px;
height:529px;
z-index:-1;
}
img.bottombar
{
position:absolute;
top:728px;
left:152px;
width:987px;
height:14px;
z-index:-1;
}
div.menu
{
position:absolute;
top:175px;
left:728px;
width:420px;
height:30px;
z-index:0;
}
img.ad
{
position:absolute;
top:172px;
left:993px;
width:150px;
height:30px;
z-index:1;
border-style:none;
}
div.contents
{
position:absolute;
top:208px;
left:348px;
width:790px;
height:520px;
z-index:1;
background-color:D7D3D3;
overflow:auto;
}
img.image1
{
position:absolute;
top:220px;
left:160px;
width:177px;
height:155px;
border-style:solid;
border-color:585757;
border-width:thin;
}
img.image2
{
position:absolute;
top:389px;
left:160px;
width:177px;
height:155px;
border-style:solid;
border-color:585757;
border-width:thin;
}
img.image3
{
position:absolute;
top:558px;
left:160px;
width:177px;
height:155px;
border-style:solid;
border-color:585757;
border-width:thin;
}
div.cover
{
position:absolute;
top:208px;
left:150px;
height:520px;
width:198px;
z-index:-1;
background-color:D7D3D3;
}
Sorry its abit long... also sorry for posting a url..!
With that said, sometimes it just takes a lot of code to show the situation!
Anyway, the CSS looks pretty complex to me but not particularly troublesome. The reason your colored text went away when you added a doctype is because you don't have a # sign in front of your hexidecimal color values. CSS colors should be expressed like this:
color: #000000;
Otherwise, as you discovered, a browser that interprets CSS correctly won't display the colors at all.
<edit> You'll also want to replace your "thin" borders with a pixel value, something like this:
border-width: 1px;
Better yet, consolidate your border declarations using CSS "shorthand", like this:
border: 1px solid #000000;
This specifies the border-width, border-style and border-color, all in one declaration. Much easier to read and keep track of.
</edit>
Besides that, a cursory look over your code doesn't reveal any problems to me (I just went over it quickly so there may be issues I didn't notice at first). If you still have problems even after correcting your color values, try posting your HTML code as well. It's a little hard to help debug a stylesheet without knowing what it's supposed to be styling! ;) Again, if you post HTML, spend a few minutes removing specifics to your site and eliminating all unnecessary code. Replace text with Lorem Ipsum [lipsum.com]. Replace URL's with example.com; basically make everything as generic and concise as possible.
It would also help to know what kind of problems you've been experiencing. Was it only the color? Did the layout break? If so, what happened? And etc.
Hope this helps!
Matthew
Ok brace your self here comes the HTML bit..
<html>
<head>
<title>ARL - Home </title>
<link rel="stylesheet" type="text/css" href="script/colours.css" />
</head>
<body>
<img class="header" src="menu_images/header.gif" alt="" />
<img class="leftbar" src="menu_images/l-bar.gif" alt="" />
<img class="rightbar" src="menu_images/r-bar.gif" alt="" />
<img class="bottombar" src="menu_images/b-bar.gif" alt="" />
<img class="image1" src="menu_images/ascari_1.jpg" alt="" />
<img class="image2" src="menu_images/ascari_2.jpg" alt="" />
<img class="image3" src="menu_images/ben.jpg" alt="" />
<a href="http://www.example.com"><img class="ad" src="menu_images/av.gif" alt="" /></a>
<div class="menu">
<p class="links">
<a name="return">
<a href="http://www.example.com">Home</a> ¦ <a href="http://www.example.com">Services</a> ¦ <a href="http://www.example.com">Contact</a>
</p>
</div>
<div class="contents">
<p class="text">
<br />
<!--Text For Page-->
</p>
</div>
<div class="cover"></div>
<p class="keywords">
<!--Keywords for page-->
</p>
</body>
</html>
I think i have taken all the rubbish out of the coding.. The <!-- --> arnt normally there by the way.
What happens now is that when i load the page in FF the header, leftbarbar, rightbar & bottombar dont display.
I hope this is enough information for you.. Else post back...
Cheers
Mark
Note to any one else..
FF dont like -1 as a z-indez layer
Why doesnt W3C tell you that in there tutorials?
but I'm not sure FF does handle a negative z-index accurately according the CSS Recommendations for Layered Presentation [w3.org].
Here's my understanding..
A parent element with a z-index set on it (though not necessarily a containing block) is the one which establishes the stacking order of further z-indexed child layers. Which seems at first to be fine.. you just count the parent as stack level zero then perhaps you might expect that anything with a negative z-index should go "behind it" hence it disappearing behind any backgrounds?
If you set a parent element to have a z-index of 50; then it theoretically becomes layer level 0. You can then place subsequent children of that parent with z-index +1, -1 etc.. that is telling them to go + or - 1 level higher/lower than the original parent level (0).
In FF that is exactly what happens.. But IE and Opera don't do that..
Sample Code:
<style type="text/css" media="screen">
#wrapper {
position: relative;
z-index: 50;
margin-left: 150px;
width: 300px;
height: 200px;
background: #eee;
}
.layer {
position: absolute;
width: 200px;
height: 100px;
}.one {top: 25px; left: 40px; z-index: 1; background: #ff0;}
.two {top: 55px; left: -85px; z-index: -2; background: #fcf;}
.three {top: 85px; left: 10px; z-index: 2; background: #ccc;}
.four {top: 115px; left: -70px; z-index: -1; background: #cfc;}
</style>
</head>
<body>
<div id="wrapper">
parent layer = stack level "0"
<div class="layer one"> layer 1 +1</div>
<div class="layer two"> layer 2 -2</div>
<div class="layer three"> layer 3 +2</div>
<div class="layer four"> layer 4 -1</div>
</div>
Now on further reading of the recommendations I think that IE and Opera are "right" ;) ..back to that specs page first linked to, the stacking context is listed as follows
Each stacking context consists of the following stacking levels (from back to front):1. the background and borders of the element forming the stacking context.
2. the stacking contexts of descendants with negative stack levels.3. a stacking level containing in-flow non-inline-level descendants.
4. a stacking level for floats and their contents.
5. a stacking level for in-flow inline-level descendants.
6. a stacking level for positioned descendants with 'z-index: auto', and any descendant stacking contexts with 'z-index: 0'.
7. the stacking contexts of descendants with positive stack levels.
the order of 1 and 2 suggest, to me anyway, that the "negative" layers should still appear on top of (in front of) the parent elements background and borders?
Suzy
As you said the scrollbar colouring i used in the body tag isnt valid. I found this out when trying to validate my css with W3C..
So what is the valid code for colouring the scrollbar?
