Menu
Hi,
I’ve got several divs that are meant to be directly underneath the preceding div.
In IE, this looks fine but in Firefox, there’s a gap. As result, my design is getting screwed royally.
Is there a fix for this?
Thanks for your time.
Riz
[code=html]<div class="level-1">Header</div>
<div class="level-2">
<p align=left>This is the title</p>
<p align=left>This is the first paragraph.</p>
<p align=left>This is the second paragraph.</p>
</div>
<div class="level-3">Footer</div>[/code]
[code=html]<div class="level-1">Header</div>
<div class="level-2">
<div align=left>This is the title<br>
<br>
This is the first paragraph.<br>
<br>
This is the second paragraph.<br>
</div>
<div class="level-3">Footer</div>[/code]
[code=html]<div class="level-right-box-holder">
<div class="level-right-box-1">
<p align="left"><img width="180" height="30" border="0" src="jpg/advert_title_downloads.jpg" alt="Downloads"></p>
</div>
<div class="level-right-box-2">
<p align="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('downloads_rules','','gif/downloads_rules2.gif',1)"><img name="downloads_rules" border="0" src="gif/downloads_rules.gif" width="54" alt="Download Rules"></a><br>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('downloads_applications','','gif/downloads_applications2.gif',1)"><img name="downloads_applications" border="0" src="gif/downloads_applications.gif" width="127" height="31" alt="Download Applications"></a><br>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('downloads_maps','','gif/downloads_maps2.gif',1)"><img name="downloads_maps" border="0" src="gif/downloads_maps.gif" width="60" alt="Download Maps"></a></p>
</div>
<div class="level-right-box-3">
<p align="right"><img src="jpg/corner_white-on-red4.jpg" width="30" height="30" border="0" alt="This image is for design purposes. It carries no informational purpose."></p>
</div>
</div>[/code]
[code=html].level-right-box-holder {
left : 0px;
top : 0px;
width: 180px;
margin-left : 29px;
margin-top : 0px;
padding : 0px;
z-index : 0;
}
.level-right-box-1 {
left : 0px;
top : 0px;
width: 180px;
margin-left : 0px;
margin-top : 0px;
padding : 0px;
z-index : 0;
}
.level-right-box-2 {
left : 0px;
top : 0px;
width: 180px;
margin-left : 0px;
margin-top : 0px;
text-align: center;
padding : 0px;
z-index : 0;
background-color : #FFFFFF;
}
.level-right-box-3 {
left : 0px;
top : 0px;
width: 180px;
margin-left : 0px;
margin-top : 0px;
text-align: right;
padding : 0px;
z-index : 0;
background-color : #FFFFFF;
}[/code]
[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.level-right-box-holder {
width:180px;
margin-left:29px;
}
.level-right-box-holder p {
margin:0;
}
.level-right-box-holder img {
border:0;
}
.level-right-box-1 {
}
.level-right-box-2 {
background-color:#fff;
text-align:center;
}
.level-right-box-3 {
background-color:#fff;
text-align:right;
}
</style>
</head>
<body>
<div class="level-right-box-holder">
<div class="level-right-box-1">
<p>
<img width="180" height="30" src="jpg/advert_title_downloads.jpg" alt="Downloads">
</p>
</div>
<div class="level-right-box-2">
<p>
<a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('downloads_rules','','gif/downloads_rules2.gif',1)">
<img name="downloads_rules" src="gif/downloads_rules.gif" width="54" alt="Download Rules">
</a><br>
<a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('downloads_applications','','gif/downloads_applications2.gif',1)">
<img name="downloads_applications" src="gif/downloads_applications.gif" width="127" height="31" alt="Download Applications">
</a><br>
<a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('downloads_maps','','gif/downloads_maps2.gif',1)">
<img name="downloads_maps" src="gif/downloads_maps.gif" width="60" alt="Download Maps">
</a>
</p>
</div>
<div class="level-right-box-3">
<p>
<img src="jpg/corner_white-on-red4.jpg" width="30" height="30" alt="This image is for design purposes. It carries no informational purpose.">
</p>
</div>
</div>
</body>
</html>
[/color]
[color=navy] [/quote]
Anyone know how I can keep the space between paragraphs but kill the space above the top paragraph and below the bottom paragraph?
[/color]
[color=navy]
.level-right-box-2 p {
margin:10px 0; [color=purple] /*change the 10px value to suit*/[/color]
}[/color]
level-right-box-2 p {
margin:10px 0; /*change the 10px value to suit*/
}
...it did not kill off the space above the first paragraph and below the last paragraph.[/QUOTE]
margin:[B]0 10px;[/B][/QUOTE]THIS means "[B]zero[/B]" top & bottom, and "[B]10px[/B]" right & left.
0.1.9 — BETA 5.9