|
| |
|
|
sticks464
Posts: 55
Joined: 10/16/2005
Status: offline
 |
FF and IE difference - 11/2/2006 10:29:01
I am working on a page that works fine in FF and Opera but displays with about 400 px padding or margin over the main content. Is there a conditional statement or hack I need to put in the CSS? Also is there a way to have the background image in the lower half on each side of the page extend down the full length of the page without doing what I have done here.
Here's my page. I have not validated or reworked the table yet but I don't think that contributes to the problem.
quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home Page</title>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:#33ccff;
}
#wrapper {
width:100%;
height:100%;
}
#left {
float:left;
width:191px;
background:url(Graphics/background.gif) repeat-y;
height:100%;
}
#right {
float:right;
width:191px;
background:url(Graphics/background-1.gif) repeat-y;
height:100%;
}
#container {
margin:0 191px 0 191px;
padding-top:10px;
}
h1 {
font-size:200%;
text-align:center;
}
h2 {
font-size:150%;
text-align:center;
}
h3 {
text-align:center;
}
#more {
margin-top:108px;
background:url(Graphics/nav_bar_3.gif) no-repeat;
height:500px;
}
#menu1 {
margin-top:108px;
background:url(Graphics/nav_bar_2.jpg) no-repeat;
height:500px;
}
#header {
text-align:center;
padding-bottom:20px;
}
#warning {
text-align:center;
}
#cleardiv {
height:10px;
}
#footer {
font-size:70%;
text-align:center;
}
#extradiv {
float:left;
width:191px;
}
#extradiv1 {
float:right;
width:191px;
}
#mainpicbox1 {
width:325px;
height:155px;
text-align:center;
margin-top:40px;
margin-left:auto;
margin-right:auto;
padding:8px 0 0 16px;
background:url(Graphics/box-2.gif) no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="menu1">
</div>
<div id="extradiv">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right">
<div id="more">
</div>
<div id="extradiv1">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="container">
<div id="header"><img src="Graphics/banner.gif" alt="banner" /></div>
<h2>WARNING: </h2>
<div id="warning"><iframe src="warning.html"
width="630px" height="300"
frameborder="0" scrolling=yes style="clear:right; border:6px ridge #07f;">
</iframe></div>
<h1>I AGREE <a href="preview.html">ENTER HERE</a></h1>
<h3>I DISAGREE <a href="http://yahoo.com">EXIT HERE</a></h3>
<div id="mainpicbox1">
<form action='loginck.php' method=post>
<table style="text-align:center; border:none;">
<tr id='cat'>
</tr><tr> <td bgcolor='#33ccff' ><font face='verdana, arial, helvetica' size='2'> Member Login
</font></td> <td bgcolor='#ffffff' align='center'><font face='verdana, arial, helvetica' size='2' >
<input type ='text' class='bginput' name='userid' /></font></td></tr>
<tr> <td bgcolor='#33ccff' ><font face='verdana, arial, helvetica' size='2'> Password
</font></td> <td bgcolor='#ffffff' align='center'><font face='verdana, arial, helvetica' size='2' >
<input type ='text' class='bginput' name='password' /></font></td></tr>
<tr> <td bgcolor='#33ccff' colspan='2' align='center'><font face='verdana, arial, helvetica' size='2'>
<input type='submit' value='Submit' /> <input type='reset' value='Reset' />
</font></td> </tr>
<tr> <td bgcolor='#33ccff' ><font face='verdana, arial, helvetica' size='2'> <a href='signup.php'>New
Member Sign UP</a></font></td> <td bgcolor='#33ccff' align='center'><font face='verdana, arial, helvetica' size='2' > Forgot Password ?</font></td></tr>
<tr> <td bgcolor='#33ccff' colspan='2' align='center'><font face='verdana, arial, helvetica' size='2'>
</font></td> </tr>
</table></form>
</div>
<div id="cleardiv"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
|
|
|
|
mtfm
Posts: 426
Joined: 1/13/2006
From: Mesa, AZ
Status: offline
|
RE: FF and IE difference - 11/2/2006 18:06:18
ran it through the validator at w3c, they noted:
quote:
Error Line 2 column 5: document type does not allow element "head" here; assuming missing "html" start-tag.
Error Line 132 column 26: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
Error Line 137 column 34: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.
Error Line 140 column 4: end tag for "tr" which is not finished.
I am not sure about the middle two, but fixing the first and last are easy no brainers, need to be fixed, and might solve things for you. I don't have FF/opera on this computer else I'd try it and see if it did.
| |
|
|
|
BonRouge
Posts: 42
Joined: 3/3/2006
Status: offline
|
RE: FF and IE difference - 11/4/2006 11:36:11
#container {
display:inline:block;
}
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
