|
CSS - Div Padding Problem In Firefox
CSS pisses me off.
Just about every new class I implement, I have to debug it for either IE or Firefox. I can't figure this one out, anybody wanna help? In Firefox, when I use padding on the #inner-box instance, the container overflows. It should only extend to the end of the white line. It works fine in IE. http://www.rhizaowns.com/holly/index.php Similar TutorialsHi I'm having a problem with padding <a> tags in firefox i have a div inside another div. I'm using the 2nd div as a button but it doesn't fit inside the containing div. The top and bottom stick out. Any clues? here is my code: Code: <html>
<head>
<style type="text/css">
.mybox {
border: 1px solid #000000;
}
.buttonbox{
/*padding: 5px;*/
}
.buttonbox a{
padding: 5px;
background-color: #33F4FF;
border: 1px solid #FF0000;
}
.buttonbox a:hover{
background-color: #EBF4FF;
}
</style>
</head>
<body>
<div class="mybox">
<div class="buttonbox"><a href="asdfasfd">buttonbox</a></div>
</div>
</body>
</html>
This is my HTML code: Code: <div id="ManagerFastMenu" style="padding:5px;margin:0px;border-width:1px;border-color:#2D3B72;border-style:solid;background-color:#FFF;"> <!-- Buuton --><a href="/Editor.asp" class="SiteB">Edit here</a><!-- Buuton --> <!-- Buuton --><a href="/index.asp" class="SiteB">Edit</a><!-- Buuton --> </div> This is my CSS code: Code:
.SiteB,
a.SiteB,
a.SiteB:visited
{
border-width:1px;
border-color:#cccccc;
border-style:solid;
background-color:#2D3B72;
display: inline;
padding-top:10px;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
white-space: nowrap;
cursor:pointer;
text-decoration: none;
}
a.SiteB:hover,
a.SiteB:focus,
a.SiteB:active
{
border-color:#000000;
background-color:#6280F6;
text-decoration: none;
}
Somehow Firefox don't recognize this too: Code: padding-right:10px; padding-left:10px; Why? Hi, so basically I have a problem with padding in css. For example, when I use padding-left 15px then in IE it moves the specific stuff from left to right exactly 15 pixels but in FF it moves almost everything 15 pixels. I would post an example-image here but the forum wont let me cause I'm new so we'll just have to deal with the text. Any possible solution would be helpful so post here, I'm keepin' this link in my bookmarks. (see attached) CSS Snippet Code: #contentBox{
float:right;
padding:0;
margin:17px 15px 0 0;
width:423px;
/* overflow:hidden; */
}
#content{
background:url(images/layout/content_bg.gif) top left;
margin:0;
padding:15px 15px 0 15px;
width:393px;
overflow:hidden;
}
* html #content {
width: 423px; /* for IE5 and IE6 in quirks mode */
w\idth: 393px; /* for IE6 in standards mode */
}
#contentTop{
background:url(images/layout/content_top.jpg) top left;
padding:0;
margin:0;
width:423px;
height:41px;
overflow:hidden;
}
#contentTop h3{
padding:15px 0 0 0;
margin:0;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
font-size:14px;
color:#036;
}
#contentBottom{
background:url(images/layout/content_bottom.gif) top left;
padding:0;
margin:0;
text-indent:-15000px;
width:423px;
height:28px;
overflow:hidden;
}
HTML Snippet Code: <div id="contentBox"> <div id="contentTop"><h3>What Is The Shalom Foundation?</h3></div> <div id="content"> <p>The Shalom Foundation is a non-profit 501(c) (3) organization dedicated to providing financial support for under-privileged children and their families in the United States, Central and South America.</p> <p> We are dedicated to providing basic educational opportunities, home construction and repair for families at risk, essential food and clothing needs and medical support and assistance for critical as well as basic healthcare. </p> <p>The Shalom Foundation seeks funding through personal donations, corporate contributions and special event fundraisers. Contributions to The Shalom Foundation are 100% tax deductible.</p> <p>If anyone has material possessions and sees his brother in need but has no pity on him, how can the love of God be in him? Dear children, let us not love with words or tongue but with actions and in truth. 1 John 3:17-18</p> </div> <div id="contentBottom"></div> </div> Now, why on earth are they different!?!? Thanks in advance! It seems that in Firefox, whenever I use the padding-left directive, it actually increases the size of the div by the amount I chose in padding-left. It doesn't do this in IE, all it does is pad the contents in, which is what I want. Is there any way to do this except for creating another div within that one that is padded-left... Thanks in advance... I'm working on a proof of concept, to be able to create a rounded edge button that will expand with the text on it. To do this I've been using a button tag with a span inside it, such as: Code: <form onsubmit="return doSomething()"> <input type="text" name="textfield" /><br /> <button type="submit"><span>Button Tag and a really long blah</span></button> </form> Unfortunately, IE and Firefox put some default padding on their buttons which is hard to get rid of. With some fiddling, I got this: Code: BUTTON {
background:url(btn_right.jpg) no-repeat top right;
padding: 0px;
border: none;
width: auto;
overflow: visible;
}
BUTTON SPAN {
background:url(btn_left.jpg) no-repeat top left;
display: block;
padding: 15px 25px 25px 20px;
margin: 0px -3px;
white-space: nowrap;
position: relative;
top: -1px; /* for Firefox */
}
* HTML BUTTON SPAN { margin: 0px; top: -2px;} /* for IE */
Looking at it in Opera 9, the same top: -1px that makes it work in Firefox is what breaks it in Opera. Past browser detection and serving different stylesheets, is there an easy way to make this work for both Opera and Firefox? I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
position:relative;
padding:0em;
width: 930px;
height: 27px;
margin:0em;
background-image: url(images/nav/navBg.gif);
background-repeat: no-repeat;
}
.NavLeftPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.NavRightPad {
position:relative;
padding:0em;
width: 87px;
height: 27px;
margin:0em;
float:left;
background-image: url(images/nav/spacer.gif);
background-repeat: no-repeat;
}
.Nav2pxPad {
position:relative;
padding:0em;
width: 2px;
height: 26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
}
.NavLink {
font-size:12px;
color:#FFFFFF;
font-family:arial,helvetica,sans-serif;
text-decoration:none;
font-weight:normal;
line-height: normal;
}
.NavBlock {
position:relative;
padding: 7px,3px,0px,0px;
height:26px;
margin: 1px,0px,0px,0px;
float:left;
background-color:#54636D;
text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
-->
</style>
<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray
var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
var apoldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = aponfunc;
} else {
window.onload = function() {
apoldonload();
aponfunc();
}
}
}
function NavInit(){
if (theNavState != '') {
document.getElementById(theNavState).style.backgroundColor = "#E46804";
}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
if (theElement != theNavState) {
document.getElementById(theElement).style.backgroundColor = "#54636D";
} else {
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
}
</script>
</head>
<body>
<div id="NavContainer" class="NavContainer">
<div id="NavLeftPad" class="NavLeftPad"></div>
<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
<div id="Nav2pxPad" class="Nav2pxPad"></div>
<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
<div id="NavRightPad" class="NavRightPad"></div>
</div>
</body>
</html>
I have a menu structure that I am trying to create with CSS. The features I want are the following:
Variable width elements
Resizable text from user
Image at left of link
I have an example page up he URL I've got it working with a table, but when I've tried with a unordered list, I start having problems. Here's what is happenning: Firefox -- when I put padding on my anchor tags, the anchor elements expand outside of the list item elements. Firefox -- anchor elements don't expand to the full width of the list item element. Internet Explorer -- IE seems to only allow for fixed/percentage with list item elements. Is there a way to allow for variable width elements? Thanks for the help! -- Doug I'm just playing around with some HTML and CSS for my student home page. I'm trying to use divs only, without the aid of any tables. All seems to be going well, except for my content area. I cannot post a link, becuase I'm a new user, but here is the page I'm working on: http://students.uww.edu/beghindb27/. The page is CSS and HTML validated properly, but only views properly in IE 6, not Firefox. In Firefox there appears to be a 10px padding below the content_top and above the content_bot divs. This should not be there, and does not appear in IE. In the past I've been able to remove this by using "!important" in my CSS to have Firefox ignore the accepted padding, but I'm looking for a better way to fix this, or the actual reason these paddings are showing up. CSS: Code: <style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
</head>
<body>
<div align="center">
<div id="header"></div>
</div>
<div align="center">
<div id="content_top"></div>
<div id="content_mid_wrapper">
<div id="content_mid">
<p align="justify">
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, what is the point? Look, we all know who is at fault here, what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Huh? No, what the **** are you... I'm not... We're talking about unchecked aggression here, dude.<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: What the **** is he talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: My rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Forget it, Donny, you're out of your element!<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, the chinaman who peed on my rug, I can't go give him a bill, so what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about? The chinaman is not the issue here, Dude. I'm talking about drawing a line in the sand, Dude. Across this line, you DO NOT... Also, Dude, chinaman is not the preferred nomenclature. Asian-American, please.<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, this isn't a guy who built the ****ing railroads here. This is a guy...<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, he peed on my rug!<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: He peed on the Dude's rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Donny you're out of your element! Dude, the Chinaman is not the issue here!
</p>
<p><font size="6">beghindb27 [at] uww [dot] edu</font></p>
</div>
</div>
<div id="content_bot"></div>
</div>
</body>
</html>
Thank you. Hey y'all. I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember. The site is www (dot) texasarmor (dot) com I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same. Please help... Also, please if you could, any critiques? Suggestions? Thanks very much. -michael Code:
-- HTML
<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>
-- CSS
/* Dashboard */
#Dashboard {
border: 1px solid #b5bfbf;
padding: 2px;
}
/* Overview Table */
#Overview {
width: 100%;
border-collapse: collapse;
height: 50px;
background-image: url(../images/dashboard/overviewtable_bg.png);
background-repeat: repeat-x;
}
#Overview td {
padding-top: 8px;
padding-left: 5px;
border: 1px solid #b5bfbf;
margin: 0;
}
#Overview td.Detail {
width: 45px;
}
#Overview span {
font-size: 20px;
font-weight: bold;
display: block;
margin-top: 2px;
}
so there is a DIV with a 2px padding on the inside. But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right. I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous. I am not sure what the issue is? edit: screenshot: http://ricebox.whiteazn.com/tabpadding.png Hello all. This is a problem I am encountering on many placing: when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px; This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels. Does anybody know how to get of this bug in Firefox? I am currently having to deal with a mystery padding at the bottom of each of my im_container tags... everything is set to 0px, and oddly enough... it looks GREAT in IE (ugghh... i can't believe i just said that)... it doesnt however look good in firefox... whats up... here is the XHTML followed by the CSS.. Code: <div class="im_left"> <div class="im_container"> <div class="im_logo"><img src="/images/im_icq.gif" alt="Contact Via ICQ" /></div> <div class="im_info"> 164149536 </div> <div class="clear"></div> </div> <div class="im_container"> <div class="im_logo"><img src="/images/im_aim.gif" alt="Contact Via AIM" /></div> <div class="im_info"> Incomplete Gamer </div> <div class="clear"></div> </div> </div> Code: .im_left {float:left; width:270px;}
.im_container {
margin:0 0 0 30px !important;
border:1px solid #900;
}
.im_container a:link,
.im_container a:visited,
.im_container a:active,
.im_container a:hover {color:#FFF;}
.im_logo {
margin:0px 0 0 0;
float:left;
width:30px; margin:0px; padding:0px;
}
.im_logo img {border:0px; margin:0px; padding:0px;}
.im_info {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 5px;
text-align:justify;
width:200px;
float:left;
}
.im_title {
text-align:center;
font-weight:bold;
}
I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned): Quote: html, body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: verdana, tahoma, serif; font-size: 11px; color: #000000; } a:link, a:visited { text-decoration: none; color: #ff0000; } a:active, a:hover { text-decoration: underline; color: #ff0000; } form { margin: 0px; } img { border: 0px; } table { border-collapse: collapse; } #top { background: url(../images/top.jpg); height: 100px; } #bar { background: url(../images/bar.jpg); font-weight: bold; color: #ffffff; height: 26px; width: 100%; } #bar1 { position: absolute; top: 100px; left: 0px; background: url(../images/bar1.jpg); height: 26px; width: 4px; } #bar2 { position: absolute; top: 100px; right: 0px; background: url(../images/bar2.jpg); height: 26px; width: 4px; } .bar4 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; width: 200px; } .bar5 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; height: 18px; } a.nav:link, a.nav:visited { text-decoration: none; color: #ffffff; } a.nav:active, a.nav:hover { text-decoration: underline; color: #ffffff; } img.top { height: 100px; width: 395px; } td.bar1 { padding-left: 6%; } td.bar2 { padding-right: 6%; } td.bar3 { padding-left: 1.4%; } And here is the HTML (in bold again the place concerned): Quote: <?$page='';?><?include'body/head.txt';?> <div id="top"> <img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div> <table id="bar"> <tr> <td class="bar1"> <a href="index.php" class="nav">Index</a> | <a href="forums.php" class="nav">Forums</a> </td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom"> <table> <tr> <td><input type="hidden" name="domains" value="xander6669.com"/></td> <td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td> <td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td> <td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td> <td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td> </tr> </table> </form></td> </tr> </table> </body></html> So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/. Thanks for any help. Hello friends I try to put padding and borders in a image with the follow code : img { border: 1px solid #666666; padding: 3px; } It works with the firefox and opera but not with IE ... Why? Thanks I'm using the following code. I'd like the DIV that surounds the up / down images to more tightly wrap the images (there is too much space between the top and bottom border and the images). I'm having trouble understanding how to accomplish this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
.nav_box {
width: 95%;
padding: 1px 1px 1px 2px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #003366;
background-color: #eef7ff;
text-align : left;
}
</style>
</head>
<body>
<div class="nav_box">
<img ... />
<img ... />
Row Zero
</div>
</body>
</html>
Admin Page Okay, on that page the left side navigation menu I setup a table along with some DIV tags with CSS to put a little border around each division of the page. For some reason the padding around the header for each box is rather large when I view it in internet explorer. I set the padding to 1px on the header div and the nav div. The odd thing is in dreamweaver's preview window everything looks fine except for a spilt between each div tag. Am I missing something? Here is part of my CSS code: /*Admin Page*/ H1 {font-size:20px; text-align:center; text-indent: .1em; font-weight:bold; font-family:Garamond; letter-spacing: .1em } H2 {font-size:18px; text-align:center; text-indent: .1em; font-weight:bold; font-family:Garamond; letter-spacing: .3em } .admin-nav{ font-size:14px; font-weight:400; font-family:Arial; border:1px solid black; padding: 10px; background-color:#CCCCCC } .admin-nav-header{ border:1px solid black; padding: 1px; background-color:#CCCCCC } Im running IE6 and its on an Intranet so for the moment Im only keen on getting it to work in IE5/6. I have got the following HTML and CSS. When I remove the CSS 'display: block; padding-bottom: 0px;' the links list views fine, but when I include it, the list spaces right out and I can't control the level of padding. Its really weird.. Im pretty sure this is where the error is but Im not exactly sure what it is.. I have not had problems in the past implementing a display type of BLOCK before, so not sure what is doing it now... Any ideas would be great... Can post the whole template and assets if that helps... Code:
<ul><li class="mainNav"><a href="about.htm" onMouseOver="MM_showMenu(window.mm_menu_1111120312_5,180,160,null,'navigation1');" onMouseOut="MM_startTimeout();">About Us</a></li>
<li class="mainNav"><a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1015140727_0,170,170,null,'navigation1');">Our Programs</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020105028_0,170,185,null,'navigation1');">Managing our People</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020115125_0,170,195,null,'navigation1');">Managing our Money</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();"
onMouseOver="MM_showMenu(window.mm_menu_1020121338_4,170,220,null,'navigation1');">Supporting our Business</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121623_3,170,235,null,'navigation1');">Ministerial and Parliamentary</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121709_2,170,255,null,'navigation1');">IT Systems & Support</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121752_1,170,275,null,'navigation1');">Staff New & Events</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121857_0,170,290,null,'navigation1');">Staff & Territory Offices</a></li>
</ul>
##############
CSS
li.mainNav {
list-style: url('../images/common/navarrow.gif');
margin-bottom: 5px;
font-size : .80em;
}
li.mainNav a:link {
display: block;
padding-bottom: 0px;
color: #283164;
text-decoration: none;
}
li.mainNav a:visited{
display: block;
padding-bottom: 0px;
text-decoration: none;
}
li.mainNav a:hover {
display: block;
padding-bottom: 0px;
text-decoration: underline;
}
li.mainNav a:active {
display: block;
padding-bottom: 0px;
text-decoration: underline;
}
Heyhey Probably a very simple solution to this, but I just can't find it. Nesting DIVs and adding padding to the parent, so I can position the DIV within. I'm subtracting the amount of padding I am using from the width and height so that everything else around it will fit ok. Works fine in all browsers, apart from IE 5.5, which ignores the padding (thus making the div too small because of the subtracting of width and height from the parent DIV). Sample code: #holdera { background:url(images/header_banner_a.png) no-repeat; width:80px; height:57px; padding-top:25px; padding-left:80px; float:left; } #buttona { width:62px; height:27px; } I could use margins on the inner DIV instead, but that brings up a problem with Netscape. The DIV positions shift because of no padding on the parent. Real pain, anybody have any suggestions? Cheers The line "between" the columns is actually a background image in the second column. I'd like to reduce the area between the top of the text and the top of the div (so the text is about even with the line). I've tried setting the padding to 0, but that has no effect. Any ideas? Code: #inner_wrap_2_col {
margin:0 auto;
width:690px;
}
#news_col_left {
float:left;
width:345px;
color: #330;
line-height: 1.5em;
padding: 0;
}
#news_col_right {
float:right;
width:345px;
color: #330;
line-height: 1.5em;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}
|
|||||||