|
CSS - Obnoxious Space In Ie 6
http://cirqueamongus.bdigia.com/main/
http://cirqueamongus.bdigia.com/x.css Page is valid XHTML1.1 and CSS. However, IE 6 causes a space to appear between my header div and my menu divs. Firefox and opera display the page just fine thanks for the help. Also, if you're using IE Mac, it might display funny there, as well. If you can give me information on what's happening there, I would also appreciate it. Similar TutorialsI've been trying to get all the space out of IE, tried line-height and all of that, and nothing. Any hack to take out all of the space gaps so I can later on put some small margin? Thanks in advance In the following code...why is there a space between the two div's?? 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">
<style>
#header { background-color: cadetblue; }
#footer { background: blue; }
</style>
</head>
<body>
<div id="header">
<p>This is my header.</p>
</div>
<div id="footer">
<p>This is my footer.</p>
</div>
</body>
</html>
If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there? I mean shouldn't the paragraphs be fully enclosed inside the div's? Such that no spacing should appear between the div's? Any insight anyone might care to share with me would be most appreciated. Thanks. Carlos Hi; I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please. 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>Yourheadstone.com</title>
<style type="text/css">
html head title{
border:0;
padding:0;
margin:0;
}
body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}
table tr td{
border: 1px solid #000000;
}
table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;
}
tr td{
padding:0;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Hi, I'm working on a site in Css and it all works fine in Firefox. But in IE7 there is a lot of extra white space between elements like after the h2 heads. Anyone know what i'm doing wrong? Here's the code. CSS Code:
body {
background: #1d1d1d url(../g/header_bg.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
font-family:arial;
font-size:11px;
line-height:1;
font-weight: normal;
text-decoration: none;
color:#575859;
text-align: left;
}
#container {
width: 992px;
margin: 0px auto;
text-align: left;
}
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
input, textarea{
font-family:Tahoma;
font-size:11px;
color:#000000;
vertical-align:middle;
font-weight:normal;
background:#FFFFFF;
text-align:left;
}
.formfield {
width:271px;
height:auto;
color:#000000;
background-color:#FFFFFF;
height:18px;
margin-right:8px;
border: solid 1px #404040;
}
#header {
height: 63px;
}
.menu {
float:left;
padding-top:25px;
}
.menu li {
background:url("../g/menu_sep.gif") right 3px no-repeat;
padding:0px 10px 0px 15px;
float:left;
}
.menu li a {
background:url("../g/menu_arrow.gif") 0 6px no-repeat;
color:#181818; font-weight:bold;
padding:0px 10px 0px 15px;
text-decoration:none;
}
.menu li a:hover {
text-decoration:underline;
}
.search {
float:right;
background:url("../g/search_bg.gif") 0 0 no-repeat;
width:357px;
height:43px;
padding:12px 0px 0px 10px;
margin-top:10px;
}
h1.logo {
width: 203px;
height: 109px;
background: url("../g/title.gif");
text-indent: -9999px;
margin-left: 10px;
}
#left_container {
float: left;
width: 200px;
background-color:#000000;
margin-right: 20px;
margin-left: 10px;
}
#middle_container {
float: left;
}
#right_container {
float: right;
}
.left_top {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_top_bg.gif");
}
.left_bottom {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_bottom_bg.gif");
}
#left_container h2 {
font-size:1.01em;
line-height:1.5;
color:#85B102;
font-weight:bold;
text-transform:uppercase;
padding:0px 0 10px 0;
margin-left:20px;
}
#left_container ul { margin-left:20px;}
#left_container li { font-size:1.01em; line-height:1.5em; color:#707070;}
#left_container li a { font-size:1.01em; line-height:1.5em; color:#707070; text-decoration:none; background:url("../g/arrow.gif") no-repeat 0px 6px; padding:0 0 0 19px;}
#left_container li a:hover { text-decoration:underline;}
HTML Code: <html>
<head>
<title>Test</title>
<link type="text/css" href="x/style.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="header">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</ul>
</div>
<div class="search">
<form method="get" action="search.php">
<input type="text" class="formfield" value=""><input class="submit" type="image" src="g/search.gif" value="submit">
</form>
</div>
</div>
<h1 class="logo">MyTitle</h1>
<div id="left_container">
<div class="left_top"></div>
<h2>Menu</h2>
<ul>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Test2</a></li>
<li><a href="#" title="home">Test3</a></li>
<li><a href="#" title="home">Test4</a></li>
<li><a href="#" title="home">Test5</a></li>
<li><a href="#" title="home">Test6</a></li>
<li><a href="#" title="home">Test7</a></li>
</ul>
<div class="left_bottom"></div>
</div>
<div id="middle_container">
b
</div>
<div id="right_container">
c
</div>
</div>
</body>
</html>
Hi everyone, I know this is probably an easy fix but I'm going cross-eyed trying to find the problem. Basically the top of the site has a nice space above the header with a horizontal row of links in IE however FF ignores the space and the links are pushed down on the header itself. I downloaded firebug for FF which is great and has saved me a ton of time the last few weeks but I'm just not seeing this. Thanks for any help http://karenwilliamson.com/joom5/ I have a couple of divs at the very top of my page spanning the width of the page. In IE-8 the page is displayed as I would like, with no spacing at the top margin above the first div. In FF, there is a giant space about 50 px high. I need to get rid of this space. Below is my css for the top-most div, body, and the html... any ideas? Code:
body {
margin-top: 0px;
font-family: Arial,Verdana,Helvetica;
font-size: 12px;
}
div#top {
margin-top: 0px;
float: left;
background-image: url(../img/logo.png);
background-repeat: no-repeat;
width: 100%;
height: 42px;
}
<div id="top"></div>
<div style="margin-bottom:40px">
<script type="text/javascript">javascript menu code</script>
</div>
So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
padding:0;
margin:0;
text-align:justify;
}
#mainBox {
float:right;
margin:9px 12px 0 0;
padding:0px;
width:733px;
text-align:left;
background-color:#999999;
}
#pageHeader{
background: url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent: -15000px;
height: 290px;
overflow: hidden;
}
#nav{
position:absolute;
right:100px;
margin:0;
background: url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height: 302px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
<div id="rightNav">rightNav</div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Thanks in advanced for any help! I'm having problems with a web page not viewing correctly in IE7. Here is a link to the page: test(dot)phoenixit(dot)com(dot)au/GBDGP/index(dot)asp The left and right columns should be level (top) with the centre content area. Any help on this would be greatly appreciated. Cheers Hi everyone. I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE. Here's my CSS code: Code:
body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}
#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}
#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}
#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}
#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}
and my markup: Code: <div id="content"> <div id="header"> <img src="images/header.jpg" width="738" height="100" /></div> <div id="nav"> <ul> <li>Home</li> <li>Register</li> <li>Go Play!</li> </ul> </div> I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list. Does anyone have any ideas? Thanks, -Brian default template from DW. I get these white gaps and cant get rid of them. Going mad. Any advice for a newbie appreciated. Code and pic... 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>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColFixCtrHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-color: #FF9933;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px;
background-color: #00CCCC;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background-color: #FF0000;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. Hey guys! My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set: .footer { background:#6CBDF0; clear: both; height:45px; padding-top:5px; } So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it? Thank you very much! PS. I've tried solving this for well over an hour now... Hi all, Great forum page with problem, good in firefox, bad in ie, http://www.central12.com/photosmain1.htm The images as displayed in ie appear with a small gap at the bottom of the picture. I have condensed the code, can't figure it, but using lists to layout images is new to me. Would have used individual divs previously, but have seen this technique used and it seems better, less code. I think i'm just missing a simple fix, as images and boxes are set to the same dimensions. The code in the example differs from the code on the uploaded page, been on it for a week still trying to suss it. HTML: Code: <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="mainpic1" class="big4"></div> <div id="sidepic1"> <ul> <li class="piccys1"><a href=""><img alt="British Monuments" title="British Monuments" src="picsthums/castlehill.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href="photos.htm"><img alt="Canada" title="Canada" src="picsthums/canlake.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="Plants/Flowers" title="Plants/Flowers" src="picsthums/portplant.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="France" title="France" src="picsthums/francechurch.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="Ievissa" title="Ievissa" src="picsthums/rockyibiza.jpg" width="95" height="80" /></a></li> </ul></div> <div id="sidepic2"> <ul> <li class="piccys"><a href=""><img alt="Sunsets" title="Sunsets" src="picsthums/safricasun.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Architecture" title="Architecture" src="picsthums/majorchurch.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Mountains" title="Mountains" src="picsthums/olympos.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="British Countryside" title="British Countryside" src="picsthums/harbscot.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Ancient" title="Ancient" src="picsthums/sphinxthum.jpg" width="95" height="80" /></a></li> </ul></div> </body> </html> CSS: Code:
/*Main styles----*/
body {
margin: 0px;
padding: 5px 0px 5px 0px;
background-attachment: fixed;
background-color:#000; }
img{
border: 0 none;
}
#mainpic1 {
width: 479px;
height: 323px;
margin:24px 0 15px 10px;
float:left; }
li.piccys, ul.piccys {
float:right;
width:95px;
height:80px;
margin:9px 0 0 5px;
padding:0px;
list-style:none;
border:2px solid #fff; }
li.piccys1, li.piccys1 {
float:right;
width:95px;
height:80px;
margin-top:9px;
margin-right:5px;
padding:0px;
list-style:none;
border:2px solid #fff; }
#sidepic1 {
width: 100px;
height: 480px;
margin-top:15px;
margin-right:5px;
float:right; }
#sidepic2 {
width: 100px;
height: 480px;
margin-top:15px;
margin-right:35px;
margin-left:0;
float:right; }
Thanks for your time, I expect there are loads of ways I could do it better, your advise is appreciated. Paul Im trying to change the background color of my news posts for the main page. What I want is to have every second post a darker grey than the one before. In my css file I've added the following lines to accomplish this. Sectiontable1 and 2 beeing the different posts. Code: .sectiontableentry, .sectiontableentry0 { padding: 5px; } .sectiontableentry1 { border-bottom: 1px solid #ccc; padding: 5px; background-color: #ffffff; } .sectiontableentry2 { border-bottom: 1px solid #ccc; padding: 5px; background-color: #f6f6f6; } The php code look like this(see below) when inspecting it in the browser and I can cleary see that there is a blank space in between the class name and the number. But the problem is I have no clue how I can write that space in css. Cause if I just add a blank space in the css it thinks its another class or rather a standard tag like h1 and it doesnt work. Is there some way to write a space like that in css? Code: <span class=contentpane> <div class=sectiontableentry 1></div> <div class=sectiontableentry 2></div> <div class=sectiontableentry 1></div> /* see there is a space between sectiontableentry and 1*/ </span> hey What i want is to have one line with a select box and a submit button on it. But when i put those 2 elements in a form it takes up 2 lines. How can i make it so that the form wont require an extra line? At some point, something I did caused my website to have around 400 pixels of white space above it. My site is very simple but I can't seem to figure out the cause. I'm hoping someone can take a look and figure it out. Thanks for any help, Chris HTML CODE: http://www.bottomtimedesign.com CSS CODE: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
text-align: center;
}
/*defines web page dimensions and centers page */
#pagedimensions {
background-color: #DCDBC9;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
width: 1024px;
height: 768px;
text-align: left;
}
#mask {
position: absolute;
left: 575px;
top: -45px;
}
#sign {
margin-left: 50px;
float: left;
margin-right: 50px;
}
#snorkel {
position: absolute;
top: 390px;
left: -39px;
}
#header {
float: right;
margin-right: 20px;
margin-bottom: 0px;
margin-top: 10px;
}
#content {
margin-left: 50px;
margin-right: 155px;
position: static;
margin-top: 300px;
}
Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please? Thanks so much! vonatah Hello, im working on styling an unordered list into a file tree. So far, so good. However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted. Code:
/* -- FILE BROWSER -- */
#browseFiles {
padding: 0 0 0 20px;/* 000pix handles indent */
}
#browseFiles ul {
font: 10px sans-serif;
color: #000;
list-style:none;
margin: 0;
padding: 0;
}
#browseFiles li {
/*display:compact;
height: 18px;*/
padding: 0;
margin: 0;
}
#browseFiles .fileDiv {
height: 18px;
background: url(images/elbow2.gif) no-repeat scroll 0 0;
}
#browseFiles .fileLink {
padding: 0 0 0 13px;
margin: 3px 0 0 0;
}
#browseFiles .dir {
list-style:none;
font: bold 10px sans-serif;
margin:0;
padding:0;
}
#browseFiles .file {
padding: 0 0 0 3px;
margin:0;
}
Heres the html Code:
<div id='browseFiles'>
<ul>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
</ul>
</div>
Thank you for the help in advanced. I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me. If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well. Here's a link to the file: http://www.websimage.com/3238/index2.html I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated. EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to. Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this. Hello, I have a table formatted by CSS within which there are two styles of text, headers and content. I have the content formatted using a class (conftabledetail), with the statement: .conftabledetail {font-size:10px;} I did that to make the content more compact and distinguishable from the headers. I would like to force a space between the paragraphs of content without using a <br> tag. I read that there is an "adjacent selector" which can be used to locate adjacent tags and apply a style, for example p + p {margin-top:1em;}, which would put a 1em space between adjacent paragraphs. Apparently this selector does not work when used against a subclass, because I can't get this statement to work: p + p.conftabledetail {margin-top:1em;} I CAN get this statement to work: p.conftabledetail {margin-top:1em;} But that's not what I want to do. Anyone have any ideas as to what I need to change or do differently? It would also be nice to do this with a <div> tag so I don't have to repeat the class identifier on every <p> tag... Thanks, Chris |
|||||||