homepage Welcome to WebmasterWorld Guest from 54.166.108.167
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS works in IE but not in FireFox
CSS is not rendered in Firefox
omarshehab




msg:3190895
 5:53 am on Dec 17, 2006 (gmt 0)

I have used a CSS file for the following HTML page: <snip>

All are working fine in IE but not in FF.

FF version is 1.5.0.8

Can any one help me out? Thx in advance.

[Mod note]- code added below

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel='stylesheet' type='text/css' href='test.css' />

<style type="text/css" media="screen">
@CHARSET "ISO-8859-1";

div.window {
position: absolute;
overflow: visible;
background-color: #FFFFFF;
border: solid #666600 2px;
margin: 8px;
padding: 0px;
width: 99%;
height: 99%;
min-height: 99%;
font-family: Verdana;
font-size: 10pt;
}

div.left {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 15%;
height: 99%;
overflow: hidden;
position: absolute;
top: 1px;
left: 1px;
}

div.left_media_partner {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
}

div.blank_row {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
color: white;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
}

div.link_area {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
}

div.media_partner {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
}

div.page_statistics {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
}

div.canvassing_area {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
}

div.links {
background-color: #FFFFFF;
border: solid #FFFFFF 1px;
color: blue;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
padding: 10px;
line-height: 1.5;
}

div.mPartners {
background-color: #FFFFFF;
border: solid #FFFFFF 1px;
color: blue;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
padding: 10px;
line-height: 1.5;
}

div.pStatistics {
background-color: #FFFFFF;
border: solid #FFFFFF 1px;
color: blue;
width: 99%;
height: 99%;
overflow: hidden;
left: 1px;
top: 1px;
padding: 10px;
line-height: 1.5;
}

div.right {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 15%;
height: 99%;
overflow: hidden;
position: absolute;
float: right;
top: 1px;
left: 85%;
}

div.middle {
background-color: #FFFFFF;
border: solid #D1D2D0 1px;
width: 70%;
height: 99%;
overflow: hidden;
position: absolute;
top: 1px;
left: 15%;
}
</style>

<title>I am testing my own CSS</title>
</head>
<body>
<div class='window'>
<div class='left'>
Nothing
<div class='left_media_partner'>Image <br>Be a media partner</div>
<div class='blank_row'>WHITE TEXT</div>
<div class='link_area'>Link Area
<div class='links'>
<a href="#">eNirbachon Komishon</a><br>
<a href="#">Open Voter List</a><br>
<a href="#">Election Result</a><br>
<a href="#">Monitor's Feedback</a><br>
<a href="#">More Links</a>
</div>
</div>
<div class='media_partner'>
Media Partners
<div class='mPartners'>
<a href="#">Partner 1</a><br>Image<br>
<a href="#">Partner 2</a><br>Image<br>
<a href="#">Partner 3</a><br>Image<br>
<a href="#">etc..</a><br>
</div>

</div>
<div class='page_statistics'>Page statistics
<div class='pStatistics'>
<a href="#">Statistics 1</a><br>
<a href="#">Statistics 2</a><br>
<a href="#">...</a><br>
<a href="#">...</a>
</div>
</div>
<div class='canvassing_area'>Canvassing Area 1<br>Image</div>
<div class='canvassing_area'>Canvassing Area 2<br>Image</div>
</div>
<center>
<div class='middle'>Image
<h1>Banner Area</h1>
Image
</div>
</center>
<div class='right'>Nothing
<div class='left_media_partner'>Image<br>Be a charity partner</div>
<div class='blank_row'>WHITE TEXT</div>
<div class='link_area'>
Member's Area
<div class='links'>
<a href="#">Be a candidate</a><br>
<a href="#">Be a voter</a><br>
<a href="#">Form a party</a><br>
<a href="#">etc</a><br>
</div>
</div>
<div class='media_partner'>Charity Partners
<div class='mPartners'>
<a href="#">Partner 1</a><br>Image<br>
<a href="#">Partner 2</a><br>Image<br>
<a href="#">Partner 3</a><br>Image<br>
<a href="#">etc</a><br>
</div>
</div>
<div class='canvassing_area'>Canvassing Area 3<br>Image
</div>
<div class='canvassing_area'>Canvassing Area 4<br>Image
</div>
</div>
</div>
</body>
</html>

[edited by: SuzyUK at 9:08 am (utc) on Dec. 17, 2006]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

 

omarshehab




msg:3190897
 5:59 am on Dec 17, 2006 (gmt 0)

I can not see the page properly in Opera too.

Span




msg:3190951
 9:47 am on Dec 17, 2006 (gmt 0)

Sorry I don't have the time to figure out exactly why now, but taking out the "height:99%;" from div.left and div.right makes the content of those columns visible in FF.

omarshehab




msg:3191006
 11:50 am on Dec 17, 2006 (gmt 0)

Thank you very much. I am going to dig more. :)

Span




msg:3191326
 9:29 pm on Dec 17, 2006 (gmt 0)

Actually.. if you haven't found out yet, your left and right columns both should have the 99% height. But the divs that you nested in there don't need any height.

Also, since those divs are not positioned, there's no need for the left and top properties.

omarshehab




msg:3191726
 7:48 am on Dec 18, 2006 (gmt 0)

Thanks again!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved