|
CSS - Help With Spacing Between Navigation Boxes -- No Tables Used
I'm in the early stages of creating a Web site without tables, and am stuck on what appears to be a minor display issue in Firefox/IE.
Please check out the following test page in both browsers and note the spacing issue between the navigation boxes on the left. IE displays about how I want them look. Firefox, on the other hand, blows the navigation boxes wide apart. I've been dinking around long enough and would love some advice, before I go and start using tables again, and I know how CSS purists would love that. Ha ha. (URL address blocked: See forum rules)/testsite/index.htm WELL, AS IT TURNS OUT, I AM UNABLE TO POST A LINK TO THE PAGE. WHY ON EARTH WOULD A HELP FORUM NOT ALLOW ME TO POST A LINK TO THE PAGE IN QUESTION? (That makes two questions I have now.) Well, despite extremely restrictive rule, I would very much appreciate any help you can provide. - Scott Here's the CSS, which is probably useless now without the page: Code: #bannerback {
background-image: url('images/bannerback.gif');
background-repeat: repeat-x;
}
body {
margin: 0px;
background-repeat: repeat-y;
background-image: url('images/leftbar.gif');
background-position: left;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bolder;
color: #FFFFFF;
vertical-align: middle;
text-indent: 27px;
margin-top: 12px;
}
#content {
width:990px;
}
#expertise, #talent, #projects {
width: 230px;
margin-left: 11px;
float: left;
background-color: #E8E8E8;
background-image: url('images/navheadback.gif');
background-repeat: repeat-x;
position: absolute;
}
#expertise {
margin-top: 10px;
}
#talent {
margin-top: 235px;
}
#projects {
margin-top: 419px;
}
#content-main {
width: 730px;
margin-left: 260px;
padding-top: 10px;
position: absolute;
}
a.nav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
text-decoration: underline;
}
p.nav {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
text-decoration: underline;
padding-left: 27px;
margin-bottom: -4%;
}
Here's the page code. Gee, sure would like to give you a link. Code: <!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <link rel="stylesheet" type="text/css" href="transtyles.css" /> <style type="text/css"> </style> </head> <body> <div id="bannerback"> <img alt="" src="images/banner.gif" width="990" height="116" /></div> <div id="content"> <div id="expertise"> <h3>Our Expertise</h3> <p class="nav"><a class="nav">Traffic Engineering</a></p> <p class="nav"><a class="nav">ITS</a></p> <p class="nav"><a class="nav">Transportation Planning & Environmental Documentation</a></p> <p class="nav"><a class="nav">GIS/CAD</a></p> <p class="nav"><a class="nav">Surveying, Mapping & PLATS</a></p> <p class="nav"><a class="nav">Transportation Design</a></p><br/> </div> <div id="content-main"> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi.</p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh facilisis pharetra. Phasellus a sem enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus commodo iaculis neque, sed cursus massa consequat in. Ut elementum, risus in dictum condimentum, enim elit luctus justo, eget malesuada augue ante luctus velit. Quisque lobortis sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci neque. Integer magna nunc, luctus vitae lobortis in, vulputate id eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra quis, convallis in tortor. Fusce imperdiet mi nisi. </p> <p> </p> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> content<br /> content<br /> <br /> adsfdasfdas<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div id="talent"> <h3>Our Talent</h3> <p class="nav"><a class="nav">Experience</a></p> <p class="nav"><a class="nav">Meet the Staff</a></p> <p class="nav"><a class="nav">Careers</a></p> <p class="nav"><a class="nav">Awards / DBE Certification</a></p> <p class="nav"><a class="nav">Contact Us</a></p> <br /> </div> <div id="projects"> <h3>Our Projects</h3> <p class="nav"><a class="nav">Project Map</a></p> <p class="nav"><a class="nav">Wisconsin</a></p> <p class="nav"><a class="nav">Illinois</a></p> <p class="nav"><a class="nav">Minnesota</a></p> <p class="nav"><a class="nav">National</a></p><br/> </div> </div> <div id="footer"></div> </body> </html> Similar TutorialsHello, could someone please visit this page in IE - http://www.brooksidetransmission.co...p?service=13484 On the page click on one of the links in the body for the various models of Merceds Benz. On the next page look at the main navigation and notices how it is broken, with one of the main nav entires going down the next line. The code for both pages is identical and I can't image why I am seeing this bug??? Hi, I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header. This is the HTML Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="horses.html">Horses</a> <ul> <li><a href="stallions.html">Stallions</a></li> <li><a href="mares.html">Mares</a></li> <li><a href="geldings.html">Geldings</a></li> <li><a href="foals.html">Foals</a></li> </ul> </li> <li><a href="showteam.html">Show Team</a></li> <li><a href="showresults.html">Show Results</a></li> <li><a href="youths.html">Youths</a></li> <li><a href="sales.html">Sales</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> This is the CSS Code:
#header {
background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
}
#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }
Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too. Kim So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it. I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute? I haven't tried this before, so if I'm way off beat, I'll take directions. What I'm trying to do is take a psd file and make a webpage from it. So far, I think I've got the images cut correctly. I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it. So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables. Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help. Both pairs of files validate. Here are the links for the: div based layout and it's css file AND table based layout and it's css file Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to. I'm feeling a little tortured over this one Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!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=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer. Example: This is what we see now. | Text Here Example: This is what we would like to see. | Text Here Any suggestions? ul a, li a{ margin:0; padding:0; } Hi Guys I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here in firefox the two containers appear correctly but in internet explorer there is a 10px space between them. Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing. Does anyone have any ideas as to what the problem is. Any help would be much appreciated! Hello All, I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/ The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height. Any help would be greatly appreciated! Thanks! This is my first time ever working with CSS. I am trying to put together a site; however, I am havings some setbacks straight out of the gate. I am trying to get the navigation bar to align up against the header. How do I eliminate the spacing between the header and the navigation bar? I have tried the padding: 0; method with no luck. PLEASE HELP! Thanks for taking the time to read my question. The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF? My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6. www.scopicdesigns.com/ZoneAll/index.htm Thanks, Brad I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS. The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div. Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html CSS is he http://www.prairieplugs.com/Sample1...ieplugscss1.css Below is the CSS that is applicable: Code: body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
color: #000;
background-color: #008F13;
background-image: url(images/bgbottom.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-attachment: fixed;
}
#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
#wrapper #header {
background-image: url(images/headerSamp1.jpg);
margin: 0px;
padding: 0px;
height: 276px;
background-repeat: no-repeat;
}
#wrapper #nav {
background-color: #FFF;
background-image: url(images/navSamp1.jpg);
background-repeat: no-repeat;
height: 60px;
width: 900px;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper #content {
background-image: url(images/contentSamp1.jpg);
background-repeat: repeat-y;
margin: 0px;
width: 900px;
background-color: #FFF;
padding: 0px;
}
#wrapper #footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-repeat: no-repeat;
height: 79px;
background-color: #FFF;
background-image: url(images/footerSamp1.jpg);
margin: 0px;
padding: 0px;
}
#wrapper #nav ul {
margin: 0px;
list-style-type: none;
text-align: center;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #060;
}
#wrapper #footer p {
text-align: center;
margin: 0px;
padding-top: 25px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#wrapper #nav ul li {
display: inline;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #000;
font-size: 1.2em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#wrapper #nav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #nav ul li a:visited {
text-decoration: none;
}
#wrapper #nav ul li a:hover {
color: #000;
text-decoration: underline;
}
#wrapper #nav ul li a {
text-decoration: none;
color: #FFF;
}
#wrapper #content p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
text-align: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 15px;
}
This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!! I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows... HTML Code: <ul id="nav"> <li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a> <ul> <li><a href="#" style="color:#000;">About Asthma</a></li> <li><a href="#" style="color:#000;">Treatment</a></li> <li><a href="#" style="color:#000;">Taking Control</a></li> <li><a href="#" style="color:#000;">Lifestyle</a></li> <li><a href="#" style="color:#000;">Resources & Support</a></li> </ul></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> </ul></li></ul> I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here? I am unable to get ride of the spacing which firefox and IE is doing with <img ...>. I used margin=0 padding=0 and boarder=0 but still there is a spacing remaining. i.e. when i put 2 images rigth following, between these 2 images is a spacing, while I want that they are just hitting each other. can anyone help me? Code:
example:
<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr><td><img scr="..." alt="..."></td></tr>
<tr><td><img scr="..." alt="..."></td></tr>
there is spacing between these images even i set the following in the CSS:
table {margin:0;padding:0;}
tr {margin:0;padding:0;}
td {margin:0;padding:0;}
img {margin:0;padding:0;}
when i put the <img ...> inside <p> commands (below example), then IE shows the images without spaceing (what i want), BUT firefox still has this spaceing between images. i am totaly unable to get ride of those sppaces Code:
<p><img ...></p>
<p><img ...></p>
and in css:
p {margin:0;padding:0;}
img {margin:0;padding:0;}
I have a division on my web page. I've set the width to 800 and the height to 100. Inside of the division I have 3 nested divisions The first holds a logo and is positioned absolutely within the wrapping division so that it appears on the left side. The division has a background image and the word "HTML" that is centered both vertically and horizontally within the nested division. The second nested division is positioned so that the text within it appears in the upper right of the wrapper. The third nested division is positioned so that the text displays in the lower right hand. The problem is that in IE I am getting alot of white space between the bottom of the wrapper and the bottom of the third nested division. This does not happen in firefox. Can anyone tell me what is hapening here. is there a way to control the pixel amount a br will space in IE and FF so it's the same distance or is there just an issue in my css causing extra space? I'm stumbling through learning CSS with the help of some great people (here and elsewhere), and I've almost got a complete, working template, but I'm having a problem with (surprise) IE. I'm using nav boxes on the left and the right, and within the nav boxes I'm using unordered lists to define the menu options. In Firefox it works perfectly, in IE it adds an additional space to the bottom of each list item. Does anyone have any clue what's going on? I've tried to define the margins to 0, but that doesn't seem to do anything. http://www.mcconaha.com/css_refined.php http://www.mcconaha.com/css_refined.css Code: <div class="navbox">
<h3>Navigation</h3>
<ul>
<li><a href="#">. News</a></li>
<li><a href="#">. Junk</a></li>
<li><a href="#">. Pics</a></li>
<li><a href="#">. Downloads</a></li>
<li><a href="#">. Links</a></li>
</ul>
</div><!-- end navbox -->
Hello, What is the best way to adjust the vertical spacing between bullets? I tried inserting a br tag inbetween the li tags, but that isn't "valid" XHTML. So for now I'm using the margin-bottom property... Code:
li {
margin-bottom:20px;
}
Any suggestions? |
|||||||