August 19th, 2006, 07:14 AM
|
 |
|
|
Join Date: Jun 2006
Location: Salem, OH
|
|
|
Layout bugs: IE and FF
I have some layout issues.....one in FF, and one in IE....
I have a set of nested div's. One main one that applies a 2px solid black collapsable border. In side are two more divs of equal height. One floated left, and one floated right.
In FF, they display perfect except that the border of the main div does not extend all the way to enclose both of the divs that it contain.
In IE, the div that I have floated right appears centered beneath the first div instead of next to it.
Here is the relevant XHTML 1.1 code (I've added the <base> tag so you can recreate this locally):
Code:
index.html
<!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" xml:lang="en" lang="en">
<head>
<title>Welcome to Foltzconstruction.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-US" />
<link rel="stylesheet" href="newstyles.css" />
<base href="http://www.foltzsconstruction.com">
<script type="text/javascript">
var revert = new Array();
var inames = new Array('about', 'gallery', 'services', 'estimates', 'test', 'contacts');
// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = "images/"+inames[i]+"2.jpg";
}
}
function rollover(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function rollback(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
</script>
</head>
<body>
<div ID="main">
<div ID="header">
<h1><a href="index.html"><IMG SRC="images/title.jpg" WIDTH=775 HEIGHT=53 ALT="Welcome to Foltzconstruction.com" /></a></h1>
<div ID="navbar">
<a href="about.html" onmouseover="rollover(0)" onmouseout="rollback(0)"><img name="about" src="images/about1.jpg" width=274 height=54 border=0 alt="about us" /></a>
<a href="gallery.html" onmouseover="rollover(1)" onmouseout="rollback(1)"><img name="gallery" src="images/gallery1.jpg" width=274 height=32 border=0 alt="photo gallery" /></a>
<a href="services.html" onmouseover="rollover(2)" onmouseout="rollback(2)"><img name="services" src="images/services1.jpg" width=274 height=31 border=0 alt="services" /></a>
<a href="contacts.html" onmouseover="rollover(3)" onmouseout="rollback(3)"><img name="estimates" src="images/estimates1.jpg" width=274 height=31 border=0 alt="estimates" /></a>
<a href="tests.html" onmouseover="rollover(4)" onmouseout="rollback(4)"><img name="test" src="images/test1.jpg" width=274 height=31 border=0 alt="customer testimonials" /></a>
<a href="contacts.html" onmouseover="rollover(5)" onmouseout="rollback(5)"><img name="contacts" src="images/contacts1.jpg" width=274 height=67 border=0 alt="contacts" /></a>
</div>
<h2><img src="images/m3.jpg" width=501 height=179 alt="" /><a href="pom.html"><img src="images/project.jpg" width=501 height=67 border=0 alt="project of the month" /></a></h2>
</div>
<div ID="headline">
<img src="images/aboutbar.jpg" alt="About Us" />
</div>
</div>
</body>
</html>
And here's my current stylesheet:
Code:
newstyles.css
body {
padding: 10px;
margin: 0;
background-image: url(images/wood120.jpg);
font-family: Verdana;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #525252;
}
#main {
margin: 0 auto;
width: 775px;
border-width: 2px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
position: relative;
top: 10px;
height: *;
}
#header {
width: 775px;
margin: 0;
padding: 0;
font-size: 1px;
height: 189px;
}
#navbar {
width: 274px;
height: 246px;
float: left;
}
#headline {
width: 775px;
height: 47px;
}
h1 {
width: 775px;
margin: 0;
padding: 0;
height: 53px;
}
h2 {
width: 501px;
height: 246px;
margin: 0;
padding: 0;
float: right;
}
a img {
border: none;
}
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
