Jump to content


Photo

Not working right in FF


  • Please log in to reply
2 replies to this topic

#1 scizor

scizor

    Young Padawan

  • Members
  • Pip
  • 48 posts
  • Gender:Male

Posted 31 July 2006 - 08:01 PM

style.css
body{
background-color:#242424;
text-align: center; 
width:800px;
margin-left: auto;
margin-right: auto;
font-family:Arial, verdana, sans-serif;}

#container{
width: 800px;
background-color:#434343;
margin-left: auto;
margin-right: auto;
text-align: left;}

#top_grad{
background-image:url(images/grad_top.gif);
height:27px;
width:800px;}

#banner{
background-image:url(images/banner.gif);
width:800px;
height:112px;}

#grad_under_banner{
background-image:url(images/grad_under_banner.gif);
width:800px;
height:14px;}

#first_content{

width:800px;
height:150px;
}

div.pullQuote {
background-color:#585858;
float:left;
padding:5px;
margin:5px;
width:372px;
border-style:solid; border-width:1px; }

div.pullQuote2 {
background-color:#585858;
float:right;
padding:5px;
margin:5px;
width:372px;
border-style:solid; border-width:1px; }

#content{
background-color:#434343;
width:800px;}

#left{
background-color:#434343;
	width: 154px;
	float: left;
	margin-left:15px;
}

#nav_top{
background-image:url(images/left_box_header.gif);
width:154px;
height:22px;
}

#nav_mid{
	background-color: #585858;
	
}

#center{
background-color:#434343;
width:601px;
float: left;
margin-left: 15px;
}

#content_mid{
	background-color: #585858;
	
}

div.pullQuote3 {
background-color:#585858;
float:left;
padding:px;
margin:px;
width:800px;
border-style:solid; border-width:1px; }

index.htm
<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>TitanGX</title>
</head>

<body><div id="container">

<div id="top_grad"></div>

<div id="banner"></div>

<div id="grad_under_banner"></div>

<div id="first_content"><div class="pullQuote"><img src="images/anime.gif" width="372" alt="Anime" /></div><div class="pullQuote2"><img src="images/anime.gif" width="372" alt="Anime" /></div></div>

<div id="content">
<div id="left">
<div id="nav_top"></div>
<div id="nav_mid">hrhghjajg<br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>

<div id="center">
<div id="content_mid">fvbfdh<br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>
</div><br />

<div class="pullQuote3">jgfjyfj</div>

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

Firefox:
IE:

In IE the backgorund behind the text boxes is perfect. But it refuses to work in Firefox.
Help.
Thanks.

Edited by scizor, 03 August 2006 - 08:42 PM.


#2 NGPixel

NGPixel

    Senior Programmer

  • P2L Staff
  • PipPipPipPip
  • 1,410 posts
  • Gender:Male
  • Location:Montreal, Canada
  • Interests:Web Design : Coding : Animation

Posted 31 July 2006 - 08:38 PM

Just looking really fast,

1) never leave a div with empty content, use  
2) having divs inside another div usually needs an overflow property in your css. Just add to your container div:

overflow:auto;

#3 scizor

scizor

    Young Padawan

  • Members
  • Pip
  • 48 posts
  • Gender:Male

Posted 31 July 2006 - 08:45 PM

Thanks. I changed it to overflow:hidden; and it works perfect now.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users