CSS Breaking up in Firefox, unnecessary margins in IE

tox0tes · #1 (**permalink**) Jun 27th, 2007, 20:21

I am trying to make a full CSS/div web site, and I have the layout done which validates both CSS and HTML....it looks exactly as it should in the design view of dreamweaver 8, but when on the web, it looks completely broken up in Firefox. On IE, it looks almost okay, but there are unecessary margins between each div row...

My code is very simple and organized, but I don't know why it doesn't look the way it should. Here is the page: http://www.solsurfer.com/alienindex.html

EDIT:

I fixed my problem by adding this to the ".row" style: "clear: both;"..........this fixed the issue with the layout breaking in Firefox, but now I still have about 5px spacing between the rows in IE.

Lchad · #2 (**permalink**) Jun 27th, 2007, 21:04

Ok.. I've got your site in dreamweaver and I don't understand the problem. It looks the exact same in IE7 and FF.

More please???

tox0tes · #3 (**permalink**) Jun 27th, 2007, 21:41

On IE, it looks like this, with a space between the first row and the second row:

Lchad · #4 (**permalink**) Jun 27th, 2007, 23:05

The two divs named right grad and left grad have a set height of 223px. The center container is longer than that...

Code: Select all

<div id="rightgrad">
<img src="images/indexsliced_12.gif" width="50" height="223" alt="Alien Juice designs"/>
</div>

You are going to have to make a content div with that entire image as a background. Then nest some div's inside for content.
The content div is going to have to be set at the dimensions of the image.

tox0tes · #5 (**permalink**) Jun 27th, 2007, 23:18

I have tried that. Basically, the left side and right side each contain an image that will always be aligned to the top. But, they also each have a background image to fill up the space in case the middle content div gets longer. I made a 776px wide container div to house all 3 divs and then specify a background image for this container div - that way when the content gets longer, the space will be filled up by that background image regardless of the height of the left and right divs. But, it doesn't work for some reason. It won't show the background image.

Here's my code:

Code: Select all

<!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" />
<title>Alien Juice Designs</title>

<style type="text/css">
body {
background-color:#1e1e1e;
}
.row {
width:776px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
clear: both;
}
.faux {
background-image:url(images/bar_03.gif) 100% 0;
}
#logo {
width:264px;
height:179px;
padding:0px;
float:left;
}
#home {
width:121px;
height:179px;
padding:0px;
float:left;
}
#services {
width:103px;
height:179px;
padding:0px;
float:left;
}
#portfolio {
width:103px;
height:179px;
padding:0px;
float:left;
}
#contact {
width:103px;
height:179px;
padding:0px;
float:left;
}
#emptynav {
width:82px;
height:179px;
padding:0px;
float:left;
background-image:url(images/indexsliced_07.gif)
}
#greenbar {
width:776px;
height:37px;
padding:0px;
float:left;
background-image:url(images/indexsliced_09.gif)
}
#leftgrad {
width:42px;
padding:0px;
float:left;
background-image:url(images/indexsliced_14.gif)
}
#divcontent {
width:684px;
padding:0px;
float:left;
background-color:#0b0b0b;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#rightgrad {
width:50px;
padding:0px;
float:left;
background-image:url(images/indexsliced_15.gif)
}
#bottom {
width:776px;
height:39px;
padding:0px;
float:left;
background-image:url(images/indexsliced_15.gif)
}
#copyright {
width:776px;
height:47px;
padding:0px;
float:left;
background-image:url(images/indexsliced_16.gif)
}
.content {
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
color:#FFFFFF;
font-weight: normal;
margin-bottom: 15px;
margin-top: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.greenbartext {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#000000;
font-weight: normal;
position:relative;
top:-5px;
left:55px;
}
.copyrighttext {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#b0fe81;
font-weight: normal;
position:relative;
top:-12px;
left:55px;
width:500px;
}
.bottomlinks {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#b0fe81;
font-weight: normal;
position:relative;
top:-18px;
left:55px;
width:500px;
}
.sitemap {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#5fff00;
font-weight: normal;
text-decoration:none;
}
.sitemap:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#5fff00;
font-weight: normal;
text-decoration:underline;
}
.validation {
position:relative;
top:-65px;
left:530px;
width:200px;
}
.h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
color:#ffd100;
font-weight: normal;
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
color:#ffd100;
font-weight: normal;
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
</style>

</head>

<body>

<div class="row">
<div id="logo">
<img src="http://www.webforumz.com/images/indexsliced_02.jpg" width="264" height="179" alt="Alien Juice Designs"/>
</div>
<div id="home">
  <a href="alienindex.html"><img src="http://www.webforumz.com/images/indexsliced_03.jpg" alt="Home" width="121" height="179" border="0"/></a></div>
<div id="services">
  <a href="alienservices.html"><img src="http://www.webforumz.com/images/indexsliced_04.jpg" alt="Services" width="103" height="179" border="0"/></a></div>
<div id="portfolio">
  <a href="alienportfolio.html"><img src="http://www.webforumz.com/images/indexsliced_05.jpg" alt="Portfolio" width="103" height="179" border="0"/></a></div>
<div id="contact">
  <a href="aliencontact.html"><img src="http://www.webforumz.com/images/indexsliced_06.jpg" alt="Contact" width="103" height="179" border="0"/></a></div>
<div id="emptynav">
</div>
</div>
<div class="row">
<div id="greenbar">
<p class="greenbartext">
WEB DESIGN, GRAPHIC DESIGN, ECOMMERCE, WEB HOSTING
</p>
</div>
</div>
<div class="row faux">
<div id="leftgrad">
<img src="http://www.webforumz.com/images/indexsliced_10.gif" width="42" height="223" alt="Alien Juice Designs"/>
</div>
<div id="divcontent">
<p class="h2">
Header Statement
</p>
<p class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis commodo, tellus nec condimentum placerat, justo metus accumsan leo, vitae molestie elit sapien molestie nisl. Vivamus non sem quis massa commodo blandit. Cras laoreet. Donec commodo. Vestibulum libero. Aliquam erat volutpat. Integer nec sapien. In commodo rutrum nisl. Morbi dapibus felis ut augue ultrices laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
<p class="h2">
Header Statement
</p>
<p class="content">
Nam mollis erat porttitor est. Integer lectus purus, ultrices quis, fermentum posuere, auctor mattis, purus. Suspendisse potenti. Phasellus consectetuer. Maecenas quis urna vitae velit hendrerit pulvinar. Morbi cursus lobortis tortor. Sed sed dui. Etiam urna mi, bibendum a, tincidunt in, imperdiet non, est. Aenean accumsan, nibh ut sodales auctor, massa justo vehicula lacus, sed condimentum justo odio vel ante. Proin sollicitudin massa sed sapien. In tincidunt augue eget mauris. In hac habitasse platea dictumst. Vestibulum et leo. Donec dignissim dolor sit amet felis.
</p>
<p class="h2">
Header Statement
</p>
<p class="content">
Sed fermentum feugiat ipsum. In hac habitasse platea dictumst. Praesent et justo. In sollicitudin nulla a turpis. Vestibulum consequat mollis lacus. Phasellus hendrerit mollis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus viverra mauris ut neque. Etiam sed nisi. In sagittis ipsum eu risus. Nunc nisi velit, suscipit vel, semper at, tincidunt in, dui. Donec nibh. Duis blandit posuere leo. Nunc eu magna. 
</p>
</div>
<div id="rightgrad">
<img src="http://www.webforumz.com/images/indexsliced_12.gif" width="50" height="223" alt="Alien Juice designs"/>
</div>
</div>
<div class="row">
<div id="bottom">
</div>
</div>
<div class="row">
<div id="copyright">
<p class="copyrighttext">
&copy; 2007 Alien Juice Designs
</p>
<p class="bottomlinks">
<a href="alienindex.html" class="sitemap">Home</a> | <a href="alienservices.html" class="sitemap">Services</a> | <a href="alienportfolio.html" class="sitemap">Portfolio</a> | <a href="aliencontact.html" class="sitemap">Contact</a>
</p>
<p class="validation">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/></a>
        
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</p>
</div>
</div>

</body>
</html>

Lchad · #6 (**permalink**) Jun 28th, 2007, 01:33

dane is this now sorted out???? or are you still having trouble here?

tox0tes · #7 (**permalink**) Jun 28th, 2007, 01:40

yeah this is fine, sorry, this thread went into the same topic as the other one. Ignore this one.

Lchad · #8 (**permalink**) Jun 28th, 2007, 12:09

Ok that's what I thought! Thread Closed!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Any ideas why this is breaking over the ftr	lostboys	Web Page Design	2	Mar 11th, 2008 13:36
[SOLVED] page breaking on ie 6 and 7	lostboys	Web Page Design	3	Jan 22nd, 2008 17:11
Breaking up a .SQL file	Assault	Databases	5	Nov 28th, 2007 21:38
Margins in IE are different than Firefox	KiwiTaicho	Web Page Design	3	Sep 28th, 2007 14:57

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Breaking up in Firefox, unnecessary margins in IE