|
CSS - Margins And Padding - Position Problem
Hi all! I am a bit of a newb to CSS, and could certainly use some help on this slight problem that I can't seem to figure out.
Here is the link. And the code is at the bottom as well. If you look closely you will see that in the main page content, the text to the right of the quote is just a little bit further right than text below the quote. I must admit that I find a bit of CSS still quite confusing. I could certainly use any help that all of you could provide. Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
background: #006600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
text-align: left;
color: #FFFFFF;
text-decoration: none;
}
div#head {
background: #FFFFFF;
width: 100%;
height: 100px;
}
div#menu {
text-align: right;
font-size: 12px;
font-weight: bold;
position: absolute;
top: 88px;
right: 50px;
color: #000000;
font-variant: small-caps;
}
div#title {
text-align: right;
font-size: x-large;
margin: 25px;
margin-right: 50px;
font-style: oblique;
}
div#quote {
text-align: center;
font-size: large;
width: 200px;
margin-top: 50px;
margin-left: 10px;
float: left;
}
div#content {
margin-left: 250px;
padding-left: 25px;
padding-right: 25px;
border-left: 1px solid #FFFFFF;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="menu">
Link 1 | Link 2 | Link 3
</div>
<div id="title">
Welcome to CLA
</div>
<div id="quote">
"This is a quote from some guy who said something profound."<br />
- Leonardo da Vinci
</div>
<div id="content">
<p>Established at the University of California, Irvine in November of 2001, The da Vinci Research Center for Learning Through the Arts builds on the expertise and combined knowledge of faculty in the Arts disciplines, Education, Social Ecology and Medicine to study the nexus of relationships between arts education, aspects of cognitive and social development, civic engagement, and public policy information.</p>
<p>The center fosters interdisciplinary studies that involve appropriate faculty from several other parts of the campus as well as from other institutions.</p>
<p>For more information please contact us: </p>
<blockquote>
(949) 824-8942<br />
Wendy Lee, Assoc. Director<br />
Claire Trevor School of the Arts<br />
University of California<br />
Irvine, CA 92697-2775
</blockquote>
</div>
</body>
</html>
Similar Tutorialsok im having a no brainer and i cant figure out what i did wrong, can someone take a look at this and tell me how to remove the space below. im posting a link, it has the css text posted on the page with the menu im working on that im having difficulty with. thanks in advance, Trizen www dot cooperativecreditsystems slash Untitled-2 dot html apparently being a new user i cant post links but just add the dots as dots and you should be able to find it. Hi, I am shifting from table-based layouts to CSS layouts and having a hard time with padding and margins. In the code given below, I had placed the DIV bodypan within the parent DIV mainpan to create a box look. I had given the padding and margins of both the DIVs accordingly. But in IE6,the child DIV bodypan is not displayed as intended. The top and right borders of the inner DIV is streched more than the bottom and the left borders. In FireFox, only the right border is getting streched. Any help in solving this issue for both IE6 and FireFox will be very much appreciated. Code: <html>
<head>
<title>My page</title>
<style type="text/css">
.mainpan
{
float:left;
width:450px;
height:370px;
display:block;
border:1px solid #000000;
margin-left:auto;
margin-right:auto;
padding:10px 10px 10px 10px;
background:#BABB99;height:100%;
overflow:hidden;
}
.bodypan
{
width:410px;
height:330px;
margin:10px 10px;
background:#FCFAE6;
color:#3D3C2C;
padding:10px 10px 10px 10px;
border:1px solid #FF0000;
}
</style>
</head>
<body>
<div class="mainpan">
<div class="bodypan">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</body></html>
thanks, Rajkhowa Please bear with this CSS learner...again Am trying to understand why IE adds extra spacing at times, while other times doesn't. As opposed to Firefox doing it right all the time. Is there something I'm doing wrong or missing? Here is my code(all comments included) Code:
<html>
<head>
<title>Dude's Work Web Page</title>
<style type="text/css" media="screen">
body {
background: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
text-align: center; /*IE hack for margin: auto;*/
}
#area {
background: #F5F5F5; display: table;
width: 776PX;
margin: 0 auto;
padding: 0px;
text-align: left;
}
#header {
float: right; width: 100%;
margin: 0; padding: 0;
background: white;
}
#header img {
margin: 5px 0 5px 5px; padding: 0;
height: 67px; width: 440px;
border-style: none;
}
#header h2 {
float: right;
text-align: center;
font-size: 18px; width: 38%;
border: 3px solid black;
margin: 15px 5px 0 0;
}
#toplinks {
background: #D3D3D3;
margin: 0; padding: 0;
line-height: 25px;
}
#toplinks a {
display: block: float: left;
padding: 0 10px; margin: 0 2px;
color: darkblue; text-decoration: none;
font-size: 16px; font-weight: bold;
vertical-align: middle;
border: 4px double gray;
}
#toplinks #firstlink {
margin-left: 10px;
}
#toplinks a:hover {
background: white; color: blue;
}
#menu {
float: left; margin: 20px 5px 0 5px;
background: white; width: 20%;
border: 1px solid black; border-width: 0 1px 1px 1px;
}
#menu a {
display: block; text-decoration: none;
border-top: 1px solid black;
padding: 5px; margin: 0;
font-size: 12px; color: black;
}
#menu a:hover {
font-weight: bold;
background: #EEE;
}
#maincontent {
float: left;
margin: 0; padding: 0;
width: 78%;
background: white; color: #191970;
font-size: 15px;
text-align: justify;
}
#maincontent h2 {
font-size: 20px; text-align: center;
padding-top: 20px;
}
#maincontent h3 {
font-size: 18px; padding-left: 15px;
}
#maincontent p {
padding: 0 20px;
line-height: 1.3em;
}
#maincontent img {
float: right;
width: 132px; height: 90;
margin: 0 20px 0 0; padding: 0;
border-style: none;
}
#maincontent ul {
padding-bottom: 30px;
}
#maincontent li {
padding: 0 20px 5px 5px; line-height: 1.3em;
}
</style>
</head>
<body>
<div id="area">
<div id="header">
<h2>Serving blah blah State Since blah</h2>
<a href=""><img src="Logo.gif" alt="Logo" title="Logo" /></a>
</div> <!-- end header -->
<div id="toplinks">
<a href="" id="firstlink">First top link</a>
<a href="">Second</a>
<a href="">Third</a>
</div> <!-- end toplinks -->
<div id="menu">
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
</div> <!-- end menu -->
<div id="maincontent">
<h2>My Margin or Padding or Whatever Dilema.</h2>
<p>I am getting oh so very confused regarding why IE is adding extra space from the sides on only SOME of my images/div/headings and not others---as opposed to Firefox doing everything perfectly. This is pretty much my exact stripped down page. Notice below list of Minor Annoyances plaguing me. Yeah, sure, I could simply let things be cause, hey, it still works...but I am nagged why perfect browser harmony cannot be attained.</p>
<h3>List of Minor Annoyances</h3>
<ul>
<li>Notice in top header section: IE makes my h2 with border twice the width from the right than I would like. </li>
<li>In top header section: Logo looks great on left and top, but twice the space from bottom in IE.</li>
<li>Top links: spacing is perfect in both browsers(go figure).</li> <li>Onto side menu: space from top is perfect. IE space on left side is twice what's wanted.</li>
<img src="" alt="Front Desk" id="frontdesk" />
<li>Now image sitting here to right: IE puts no padding between letters and image. I could add margin: ; to the img, but that further increases my firefox space.</li>
<li>And, well, okay, that's it. Just wanna understand this IE extra spacing thing.</li>
</ul>
</div> <!-- end maincontent -->
<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div> <!-- end area -->
</body>
</html>
Any input/advice is appreciated...Thanks, James Btw, can I size these code boxes? It's huge. I'm using the following code below to try and get a CSS template that I can use on sites to make them as consistent as possible across browsers. I've done fairly well (I think), but I'm having trouble with odd stubborn space around textarea's and other form elements. Any suggestions on how to remove these margins/padding? Both CSS and HTML is validated OK. Code:
/* CSS Document */
/* TAG DEFAULTS */
HTML {
font-size:100%; /* IE correction */
/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
height:100%;
margin-bottom:1px;
color:#352819;
font-family:"Times New Roman", Times, serif;
}
BODY {
/* Text-Sizing with ems: (URL address blocked: See forum rules) */
font-size:1em;
background-color:#FFFFFF;
margin:0;
}
TABLE {
font-size:100%; /* IE correction */
border-collapse:collapse;
border:0px none;
}
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE {
margin:5px 0 10px;
line-height:100%;
}
H1 {font-size:2em;}
H2 {font-size:1.5em;}
H3 {font-size:1.25em;}
H4 {font-size:1em;}
H5 {font-size:.75em;}
H6 {font-size:.55em;}
INPUT, SELECT, TEXTAREA, TH, TD {
font-size:1em;
font-family:"Times New Roman", Times, serif;
margin:0;
padding:0;
}
INPUT, SELECT, TEXTAREA {
border:1px solid #352819;
}
TEXTAREA {
overflow: auto;
width:300px;
height:100px;
}
FORM, LI {margin:0;}
UL {list-style-type:disc;}
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}
OL, UL {
margin:0;
padding:0;
padding-left:23px;
}
A:LINK {color:#a47832;}
A:VISITED {color:#a47832;}
A:HOVER {color:#e5a135;}
/* END TAG DEFAULTS */
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Style Test</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <table> <tr><th>Cell TH 1</th><th>Cell TH 2</th></tr> <tr><td>Cell TD 3</td><td>Cell TD 4</td></tr></table> <h1>This is H1</h1> <h2>This is H2</h2> <h3>This is H3</h3> <h4>This is H4</h4> <h5>This is H5</h5> <h6>This is H6</h6> <p>This is P</p> <UL> <LI>List Item 1</LI> <LI>List Item 2 Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped</LI> <LI>List Item 3</LI> </UL> <OL> <LI>List Item 1</LI> <LI>List Item 2 Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped Wrapped</LI> <LI>List Item 3</LI> </OL> <form action=""> <div><input value="Input" name="name" type="text"><input value="Input" name="name" type="text"><br> <input value="Input" name="name" type="text"><br> <input value="Input" name="name" type="text"> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><br> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <select name="stuff"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <textarea name="myarea" cols="100" rows="5">This is my text area</textarea><textarea name="myarea" cols="100" rows="5">This is my text area</textarea><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <textarea name="myarea" cols="100" rows="5">This is my text area</textarea><br> <table style="border:1px solid #000000;"><tr><td> </td></tr></table> <input type=submit name=submit value="My Button"> <input type=submit name=submit value="My Button"><br> <input type=submit name=submit value="My Button"> </div></form> <div><a href="contact.shtml">Hyperlink</a></div> <blockquote><div>This is a blcokquote This is a blcokquote This is a blcokquote This is a blcokquote</div></blockquote> </body> </html> I am looking for a way to color the padding/margin/border of all the elements on my page, so that I can, with a quick look, see how the elements are interacting with eachother. If you have used firebug, then you know what I mean, because in Firebug, when you hover over an element in "inspect" mode it shows the margins and padding in different colors. I have heard of diagnostic CSS before, but have never seen anything quite like this. Does anyone know how Firebug does it, or know of anything similar? Hello, I used a negative value for the position of a div on this site: Code: www.godynamic.nl Everything is like it have to be in mozilla browsers but in IE the image is partly beneath the upper layer and hidden. I tried z-index but this will only work with absolute position types. Is there IE hack for this? Thanks for helping. Hi All, I have been working on this validated site - http://www.edgeandbarrett.com/zub/test2/logo.htm and it works on all browsers, mac and pc, all apart from IE7 (and 6 of course with fixed). When viewing it, on ie7, it seems the padding is not being read, so the fixed navigation, is overlapping my content. This is the css - Code:
* {
margin : 0;
padding : 0;
}
img {
display : block;
border : 0;
}
body {
background-color : #eeeeee;
font-family : helvetica, arial, sans-serif;
line-height : 18px;
}
hr, .hide {
position : absolute;
top : 0;
left : 30px;
}
#site {
width : 870px;
margin : auto;
}
#header {
position : fixed;
display : inline;
height : 100%;
width : 200px;
top : 30px;
background : #eeeeee;
z-index : 4;
}
#logo {
position : relative;
top : 10px;
z-index : 5;
}
.picbar {
position : relative;
padding-top : 5px;
padding-bottom : 5px;
margin-top : 22px;
margin-bottom : 12px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
z-index : 6;
}
.menu {
position : relative;
width : 190px;
z-index : 7;
}
.menu .title {
font : bold 13px Georgia, "Times New Roman", Times, serif;
color : #333333;
padding : 5px 0 5px 0;
}
.menu .title a {
text-decoration : none;
color : #333333;
}
.menu .title a:hover {
text-decoration : none;
color : #940f04;
}
.menu .title a:visited {
text-decoration : none;
color : #940f04;
}
.menu ul {
list-style-type : none;
}
.menu ul li {
padding-bottom : 2px;
}
.menu ul li a {
font : normal 12px Arial;
color : #333333;
padding : 7px 0 7px 0;
line-height : 17px;
text-decoration : none;
}
.menu ul li a:visited {
color : #940f04;
}
.menu ul li a:hover {
color : #940f04;
}
.menu h1 {
padding : 5px 0 5px 0;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
.menu a {
color : #333333;
text-decoration : none;
}
.menu a:hover {
color : #940f04;
}
#container {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 90px;
z-index : 3;
}
#container h1 {
padding-bottom : 10px;
padding-bottom : 10px;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
#container h2 {
padding-bottom : 10px;
padding-bottom : 10px;
font-size : 13px;
color : #333333;
}
#container p {
padding-bottom : 10px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
#container a {
color : #000;
text-decoration : none;
}
#container a:hover {
color : #940f04;
}
.pic {
padding-top : 5px;
padding-bottom : 5px;
margin-bottom : 18px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
}
.text {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.about {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
margin-bottom : 20px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
.ser {
background-color : #fff;
float : left;
width : 210px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.ser2 {
background-color : #fff;
float : left;
width : 210px;
padding-left : 8px;
padding-top : 47px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.test {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.line {
background-color : #fff;
float : left;
width : 420px;
padding-bottom : 15px;
margin-bottom : 20px;
border-bottom : 1px solid #9f9f9f;
}
#footer {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 20px;
padding-bottom : 20px;
border-top : 1px solid #9f9f9f;
z-index : 1;
}
#footer p {
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 12px;
color : #505050;
text-align : left;
}
#footer a {
color : #505050;
text-decoration : none;
}
#footer a:hover {
color : #940f04;
}
I have no idea the fix, have tried display:inline; and had a look around, but am not sure what the exact problem is, and am quite new so all a bit confusing. Any help would be really useful!!! i have also uploaded 2 screenshots. one how it looks on all other browsers . . . and one on IE7!!! http://www.edgeandbarrett.com/zub/test2/how%20it%20should%20look.png http://www.edgeandbarrett.com/zub/test2/ie7.png Its the only issue i have before i can complete site . . . . . . and really want to crack on!!!!!! Thanks, Orwel Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? Why doesn't the following code result in a blue border that is 10px wide? PHP Code: <Table> <tr> <td style="background-color: 0000FF;"> <Table> <tr> <td style="background-color: FF0000; padding: 10; margin: 10; border: 10px solid #00FF00;"> Test Font </td> </tr> </Table> </td> </tr> </Table> Hi, My site is at pageShree and I'm having trouble with margins or padding, i can't tell which. In FF there are gaps between the main box with the news in it. In IE6 they aren't there, how do I get it to work in FF? My CSS Code can be seen he http://jigsaw.w3.org/css-validator/validator?uri=http://pageshree.com/style.css Thanks I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Problem here - view in IE6 Relative CSS Hello! This is quite an odd one. In IE6, there's a problem whereby upon hovering over the category / product links, the position of elements will shift a small amount. This is the best I can explain the issue really. There are no positioning changes attributed to the .hover pseudo-element on either class. I have a feeling it has something to do with margins, but am at a loss trying to find the solution. Any help rewarded with a glacier cherry, some sugar and 44 gleaming rep points Everyone knows about collapsing margins, but not everyone knows that inline blocks never collapse. So it would appear that IE treats tables as block elements (so margins collapse) and firefox treats them as god-knows-what (but akin to inline elements - so they do not collapse). Now, whether its right or wrong, I want the firefox behaviour - so I tried to display the tables as inline. This fixes IE.... but breaks firefox - the tables "loose" their width parameter so they don't display with correct widths. Does any CSS guru know a nice solution to this dilema (I know a couple of dirty solutions). To elaborate further on what is going in: There are a number of tables one after the other in the normal flow of the document that need to be seperated by certain margins. Hello. I have a horizontal nav bar with a background color. When I add left padding it does do that but adds that amount of space onto the right side of the div so it's sticking out of my layout. What am I doing wrong? Here is my code: Code: body {
font-family: Arial, Helvetica, sans-serif;
background-color: #C0BFAB;
background-position: 195px 140px;
margin-left: auto;
margin-right: auto;
width:800px;
}
#header {
position: absolute;
margin-left: 140px;
margin-top: 5px;
width: 790px;
height: 173px;
z-index: 2;
background-image:url(images/header.gif)
}
#topnav {
position: absolute;
margin-left: 140px;
margin-top: 178px;
width: 790px;
height: 17px;
padding-left: 2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#C0BFAB;
background-color:#786350;
z-index: 31;
}
#main {
position: absolute;
margin-left: 140px;
margin-top: 195px;
width: 790px;
height: 606px;
z-index: 3;
}
#footline {
position: absolute;
margin-left: 140px;
margin-top: 802px;
width: 790px;
height: 13px;
background-color:#786350;
z-index: 18;
}
#footer {
position: absolute;
margin-left: 140px;
margin-top: 815px;
width: 790px;
height: 34px;
z-index: 19;
background-image: url(images/footer.gif);
top: 0px;
}
#bottomnav {
position: absolute;
margin-left: 140px;
margin-top: 815px;
width: 790px;
height: 13px;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color:#786350;
text-align: right;
z-index: 32;
}
.binkwaffle {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
background-image: url(images/Aric-Smiling-gradient-BG.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
background-image: url(images/Aric-Smiling-gradient-BG.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
Code: <HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<style type="text/css">
<!--
@import url(binkwaffle_test.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="header"></div>
<div id="main" class="binkwaffle"></div>
<div id="footline"></div>
<div id="footer"></div>
<div id="topnav">home cards faq about contact</div>
<div id="bottomnav">home cards faq about contact</div>
</BODY>
</HTML>
Also the centering doesn't seem to be working. Thanks for the help. 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;
}
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;
}
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 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 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 } |
|||||||