CSS Browser Issues [Archive]

stefanmhodgson

August 23rd, 2007, 07:01 AM

Hello, I was wandering if you could help. I'm quite new to css but I'm picking it up quite quickly. I have a website and it works fine in Internet Explorer but not that fine in Mozilla Firefox. For some reason, there is a background image that isn't showing. This is the 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=utf-8" />
<title>Washingwell School Website</title>

</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="holder">


<div id="header"></div>


<div id="mainHolder">


<div id="leftcolumn">
<h1>WELCOME</h1>
<p>Welcome ... The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...</p>
<h1>MISSION STATEMENT </h1>
<p> The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ..</p>
<h1>HEADMASTERS INTRODUCTION </h1>
<p> The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ..</p>
<h1>ENDORSEMENTS </h1>
<p> The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ..</p>
<h1>ACHIEVMENTS</h1>
<p> Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ....</p>
<h1>LATEST NEWS</h1>
<p> Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ....</p>
</div>


<div id="rightcolumn"><div class="menu">

<ul>
<li><a class="hide" href="">Home</a>



</li>

<li><a class="hide" href="file://///sbs2003/testsite/washingwell/index.html">Documents</a>



<ul>
<li><a href="file://///sbs2003/testsite/washingwell/spies.html" title="a coded list of spies">OFSTED Report</a></li>
<li><a href="file://///sbs2003/testsite/washingwell/spies.html" title="a coded list of spies">Annual M of G</a></li>
<li><a href="#">Prospectus</a></li>
<li><a href="#">PTA Meeting</a></li>
</ul>


</li>

<li><a class="hide" href="file://///sbs2003/testsite/layouts/index.html">Gallery</a>



<ul>
<li><a href="file://///sbs2003/testsite/layouts/bodyfix.html" title="Samples of Children's Artwork">Children's Artwork</a></li>
<li><a href="file://///sbs2003/testsite/layouts/body2.html" title="A Gallery of teacher's pictures">Teacher's Pics</a></li>
<li><a href="file://///sbs2003/testsite/layouts/body4.html" title="Pictures of the class">Class Pics</a></li>
<li><a href="file://///sbs2003/testsite/layouts/body5.html" title="Pictures of the latest sporting events">Sporting Pics</a></li>
</ul>


</li>

<li><a class="hide" href="file://///sbs2003/testsite/boxes/index.html">Newsletters</a>



<ul>
<li><a href="file://///sbs2003/testsite/washingwell/spies.html" title="a coded list of spies">Latest Newsletter</a></li>
<li><a href="file://///sbs2003/testsite/washingwell/vertical.html" title="a horizontal vertical menu">Archive</a></li>
<li><a href="file://///sbs2003/testsite/washingwell/expand.html" title="an enlarging unordered list">Email Me</a></li>
</ul>


</li>

<li><a class="hide" href="file://///sbs2003/testsite/mozilla/index.html">Calender</a>

 
</li>

<li><a class="hide" href="file://///sbs2003/testsite/ie/index.html">Contact Us</a>


</li>

<li><a class="hide" href="file://///sbs2003/testsite/opacity/index.html">Links</a>


</li>
</ul>

</div>
<img src="images/pen.jpg"" alt="Pen lying with lid off"/>
</div>

</div>
<div id="footer">
<p>© 2007 Washingwell School // All Rights Reseved // Designed by First 11</p>
</div>

</div>
</body>
</html>

And this is the css:

/* CSS Document for Washingwell School*/

body{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#996600;
font-size:10px;
background:#88652b;
}

/* This is NAV */
#mainNav{
padding:0;
margin:0;
text-align:right;
font-size:12px;
width:186px;
font-family:Georgia, "Times New Roman", Times, serif;
}

#mainNav a{
display:block;
color:#996600;
background:url(../images/nav_bg.gif) right no-repeat;
text-decoration:none;
padding:7px 75px 7px 0;
margin:0;
}

#mainNav a:hover{
background:url(../images/nav_rollover.gif) right no-repeat;
color:#996600;
text-decoration:none;
padding:7px 75px 7px 0;
margin:0;
}

/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative top; margin:0; font-size:11px; margin:0;}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#654a1d;
width:128px;
voice-family:"\"}\"";
voice-family:inherit;
width:118px;
height:25px;
text-align:right;
border:1px solid #fff;
border-width:1px 1px 0 0;
padding-right:10px;
background:#ebe4d0;
line-height:19px;
font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

.menu ul li:hover a {color:#654a1d; background:#ebe4d0;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}
.menu ul li:hover ul li a.hide {background:#ebe4d0; color:#654a1d;}
.menu ul li:hover ul li:hover a.hide {width:100px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#fff;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#654a1d;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

#leftcolumn h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#663300;
padding:5px;
letter-spacing:5px;
text-align:left;
width:500px;
background-image:url(../images/header_bg.gif);
border-left:1px solid #CCCC99;
border-bottom:1px solid #996600;
border-right:1px solid #996600;
border-top:1px solid #CCCC99;
}

#docnav a{
display:block;
color:#996600;
background:url(..images/nav_bg_docs.gif) right no-repeat;
text-decoration:none;
padding:6px 55px 6px 0;
margin:0;
}

#docnav a:hover{
background:url(..images/nav_rollover.gif) right no-repeat;
color:#996600;
text-decoration:none;
padding:6px 55px 6px 0;
margin:0;
}

#holder{
width:868px;
margin:auto;
padding-top:40px;
padding-bottom:0px;
}

#header{
width:868px;
height:33px;
background:url(../images/header.jpg) no-repeat;
}

#mainHolder{
background:url(../images/hackline.gif);
width:868px;
margin:0;
padding:0;
}

#galleryhome img{
border-left:2px solid #CCCC99;
border-bottom:2px solid #996600;
border-right:2px solid #996600;
border-top:2px solid #CCCC99;
margin-bottom:10px;
margin-right:6px;
}

#leftcolumn{
margin:0;
float:left;
padding:170px 102px 30px 50px;
width:682px;
voice-family:"\"}\"";
voice-family:inherit;
width:530px;
background:url(../images/bg_girl_white_lines.jpg) top left no-repeat;
}

#rightcolumn{
background:url(../images/right_column_1_pixel.gif);
margin:0;
float:right;
width:186px;
}

#footer{
clear:both;
float:none;
height:70px;
vertical-align:top;
background:url(../images/footer.gif) no-repeat;
text-align:right;
margin:0px;
padding: 10px 70px 0 0;
width:868px;
voice-family:"\"}\"";
voice-family:inherit;
width:798px;
}

The right hand column is not displaying "images/right_column_1_pixel.gif" in firefox.

Any idea why?

Any help would be appreciated.

Stefan

VonGizzle

August 23rd, 2007, 07:45 AM

Not sure if this will fix your problem, but good practice suggests you use "background-image" as the variable instead of background.

Also, have you got any content in your right column? if not, the background wont open the div automatically for you as backgrounds aren't recognised as content. you may have to work with the height.

EDIT, I think I see the problem. Google "clear both hack".

simplistik

August 23rd, 2007, 08:21 AM

I would first start by eleminating all those conditionals... especially for a navigation... that's not needed at all. Secondly it'd help if you showed an actual page so we can see this in action... it's one thing to try and solve a box model but it's a whole nother beast when you need help where images are concerned. Third

Not sure if this will fix your problem, but good practice suggests you use "background-image" as the variable instead of background.
This won't help, nor is it neccessarly true, so pay it no mind :P

stefanmhodgson

August 23rd, 2007, 10:30 AM

Thanks to vongizzle for that link, i looked on it and insterted some code into my css, this still failed to solve the problem. I also insterted some text as you can see if you look at this link:

http://www.smhmedia.co.uk/washing

I have found that IE and MF are both not showing the right column bg image, thats because there is no content. I have a main holder DIV that holds the left and the right columns. This has a background image which is repeated. In IE, this bg image is shown which eliminates the problem of the right column. This is different in MF. Basically, MF is not showing the bg image "hackline.gif" ... and I don't know why.

Also slimplistick, is there unnessecary code in my html? to do with my navigation? if so could you highlight to me what it is. Thanks

Any help would be great.

I thank you ...

Stefan

VonGizzle

August 23rd, 2007, 11:17 AM

It IS good practice to write your declarations separately when learning CSS, especially if you're not commenting your code.