CSS - Strange Issue With Gap Between Elements

Hello all,

I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly.

The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements.

Code:

		#wrapper-body ul.staff-list{
			list-style-type:none;
			padding-top:10px;
			position:relative;
		}
	
		#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
	
			#wrapper-body ul.staff-list li{
				float:left;
				width:230px;
				position:relative;
				padding:8px 0 8px 15px;
				z-index:1;
			}
			#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
			#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
			#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
			#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
				#wrapper-body ul.staff-list li p{
					padding:0 0 9px 0;
					margin-left:91px;
				}
	
				#wrapper-body ul.staff-list li small{
					padding:0 0 5px 0;
					margin-left:91px;
				}
		
				#wrapper-body ul.staff-list-clerks li span{
					color:#A6302B;
					display:block;
					float:left;
				}
		
				#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
				#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
				#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
		
		
				#wrapper-body ul.staff-list li div.staff-list-detail{
					display:none;
					background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
					padding-bottom:3px;
					margin-top:-15px;
					left:4px;
					z-index:10;
					top:15px;
					position:absolute;
				}

				#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }

				#wrapper-body ul.staff-list li:hover div.staff-list-detail{
					display:block;
}

An image of what is happening below:


Thanks for reading!

i have the following CSS
Code:

#logoOuter{
	width:155px;
	height:90px;
	background-color:#336699;
	position:relative;
	float:left;
}
#logo{
	bottom:0px;
	position:absolute;
}
html>body #logo{
	margin-bottom:-5px;
}
#globalNavOuter{
	margin-left:155px;
	background-color:#00CC99;
}
#globalNavTop{
	height:19px;
}
#globalNavBottom{
	height:71px;
}

and this XHTML
Code:

	<div id="header" >
		<div id="logoOuter">
			<div id="logo">
				<img src="images/logo.gif" border="0" />
			</div>
		</div>
		<div id="globalNavOuter">
			<div id="globalNavTop">globla Nav Top</div>
			<div id="globalNavBottom">global nav bottom</div>
		</div>
	</div>

The problem is there was a 5px gap at the bottom of the image
in moz/FF and in IE

when i took the whitespace out (the CR's) of the html the space went away in IE bot not MOZ/FF

so i added a -5px margin to the bottom of that div and that did the trick in FF but it over did it in IE thus the sub selector > hack.

[EDIT]
I just took the image away and that fixes it. So it looks like it's the image causing it. doing a - vertical alignment seems to fix it but I still dont understand why...
Gary perhaps you can explain this to me...i just dont get it

Some days tables just seem so much easier........

I have learned a lesson,

To look in F.F as well as I.E6 to make sure all layout is showing as it should be, it is to a point. I had three errors when I looked in validator. Learned also yesterday that there is also CSS validator heaven forbid.

I had this random image script that shows all images in posts. The link colors are what were different in F.F. Right color iin I.E. I have took that out now because when it showed images from the posts and the sidebar randomly the image over shot the sidebar when it shows both same images as the script found the posted images.

I may have the answer to that by another random image to pull from a directory instead.

On the F.F last year I had a site that had 100 errors lol so I wanted to check everything as I go this time around.

If anyone has Opera please could they check out my Wordpress please? My link is in my profile as I saw yesterday there are rules about links with good reason.

S how come the border was different color in F.F thats my question?
Thanks!

http://www.wwu.edu/~swing/newswingsite/index.html

I'm relatively new at this, but I've been trying my hardest to learn how to do all of this while conforming to web standards. I've got my page looking almost (see below) like I want it to in Firefox, but in IE I get these ugly gaps. I used to get them in the inset box too, but I figured out a way to make them go away. I can't figure out how to make it go away in the header though. So my questions, so that I can actually learn something here, are these:

What causes that big gap?
How do I get rid of it?
Is there a better/cleaner/simpler way to style the inset box so as to avoid the gaps?

Also, you can see that there's one pixel missing in the gold border. That's from the blue top border so as to blend the rounded top border gif. Is there an easier way to add the rounded top? When I simply had no top border, things got screwy.

Thank's for any help/insight you can give!

Hi,
I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly.
The page can be viewed here.

On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help.

The menu code in the HTML:
Code:

<table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center" valign="top"> 
<ul class="topmenuul" id="dmenu">
<li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a>
</li>
<li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a>
</li>
<li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a>
<ul class="submenuul">
<li class="submenuli"><a href="authors.htm">Authors & Artists</a></li>
<li class="submenuli"><a href="families.htm">Families</a></li>
<li class="submenuli"><a href="musicians.htm">Musicians</a></li>
</ul>
</li>
<li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a>
</li>
<li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a>
<ul class="submenuul">
<li class="submenuli"><a href="bio.htm">Bio</a></li>
<li class="submenuli"><a href="press.htm">Press</a></li>
<li class="submenuli"><a href="contact.htm">Contact</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table> 

The CSS for the menu:
Code:

.topmenuul{
	list-style-type:none;
	margin: 0px;
	padding:0px;
}

.topmenuli{
	list-style-type:none;
	float: left;
	margin-left: 10px;
/*	border-left:1px solid #000000; */
/*	border-right:1px solid #000000; */
	padding: 0px;
	color: #000000;
}


.topmenutitle{
	display:block;
	color:#000000; 

}
.topmenuli a:link {
	color: #000000;
	}
.topmenuli a:visited {
	color: #000000;
	}
.topmenuli a:hover{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	text-decoration:none; 
	color:#cccccc; 
	background:#fff;
	width: 120px;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding: 0;
	display:none;
	color:#000000;
}

.submenuli a{
	display:block;
	padding-top: 1px;
 	padding-bottom: 1px;
	width: 120px;
	text-decoration:none; 
	color:#000000; 
	background:#fff;
	margin-top: 1px;
}

li:hover ul, li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}

#content {
	clear: left;

}
-->

#dmenu {
	font-family: Georgia, Helvetica, Sans-Serif;
	font-size:10px;
	text-align:center;
	font-color: #000000;
}

.topmenutitle {
	background:#fff; 
	text-indent:0px;
	text-decoration: none;
	padding:0px;	
	padding-top: 1px;
 	padding-bottom: 1px;
	color:#000000;
	width: 120px;
}

.submenuul {
	background-color:#fff;
	background-position: top left;
}

.submenuli a{
	text-decoration: none;
	color: #000000;
	padding-top: 3px;
 	padding-bottom: 3px;
}
.submenuli a:link{
	color:#000000;
	}
.submenuli a:visited {
	color:#000000;
	}
.submenuli a:hover{
	text-decoration: none;	
	background:#fff;
	color: #cccccc;
	padding-top: 3px;
 	padding-bottom: 3px;
}

now, i'm posting this after i've scoured the forum here and i have yet to find a posted resolution.

The problem i'm having is pushing the footer to the bottom of the page, as opposed to the bottom of the window. The #footer is as follows: Code:

#footer {
	position: absolute;
	bottom: 0px;
	(border/font/background/padding properties)
	width: 310px;
	margin-top: 8px;
	clear: both;
}

you can view the full style sheet here.

if the page has enough information to push past the window height, teh footer remains at the bottom of the window, and is placed on top of the stacking order. The strangest part is that if you scroll, the footer scrolls with the page.

To see what i'm talking about, go to the page and try resizing the window.

I have a strange css bug in IE 6 and 7 while making a simple two column structure.

In firefox both the left and the right columns are top aligned properly but in IE the right column has around 15px of space on top of it. I can't seem to figure out why this space is coming.
This seems like the IE peekaboo bug but can't be fixed using the line-height hack. Instead giving the IE proprietary ZOOM property to the UL we can fix this bug in IE.

But I want to know is there any other method to fix this issue which uses valid css.

Doctype for the HTML is xHTML transitional

Here is the css code.

#gdsrView{width:456px;}
#gdsrView .srchGrpMod{}
#gdsrView .grpResHdr{}
#gdsrView .grpPagination{}
#gdsrView .srCnt{clear:both;float:none;}
#gdsrView .srCnt ul{list-style-type:none;margin:0;padding:0;}
#gdsrView .srCnt ul#lstView li{clear:both;float:none;border-bottom:1px solid green;padding-bottom:5px;}
#gdsrView .srCnt ul#lstView .grpPic{width:75px;height:75px;overflow:hidden;float:left;}
#gdsrView .srCnt ul#lstView .grpInfo{background:#cacaca;margin-left:83px;}
#gdsrView .srCnt ul#lstView dl.grpMLnk{font-size:1.1em;}
#gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt{display:inline;}
#gdsrView .srCnt ul#lstView .grpInfo dl.grpMLnk dt a.actLnk{font-size:0.8em;}
#gdsrView .srCnt ul#lstView .grpInfo .grpDes{font-size:1em;}
#gdsrView .srCnt ul#lstView .grpInfo .tStamp{font-size:0.9em;}
#gdsrView .clearFl{margin-top:1px;}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<head>
<title>IE bug</title>
</head>
<body>
<div id="gdsrView">
<div class="srchGrpMod"></div>
<div class="grpResHdr"></div>
<div class="grpPagination"></div>
<!-- Begin: group results list view -->
<div class="srCnt">
<ul id="lstView">
<li style="background:red;zoom:100%;">
<div class="grpPic">
<img src="../images/pic.jpg" alt="Group Image" width="75" height="75" />
</div>
<div class="grpInfo">
<dl class="grpMLnk">
<dt><a href="#">Lorem Ipsum dolor amet consectectuer...</a></dt>
<dt><a class="actLnk" href="#">Request Invitation</a></dt>
</dl>
<p class="grpDes">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec mattis urna eget magna. Nam cursus ipsum sit amet.lorem. Vestibulum ante ipsum primis in faucibus orci luc..</p>
<p class="tStamp">Updated 55 Minutes ago</p>
</div>
<div class="clearFl"></div>
</li>
</ul>
</div>
<!-- End: group results list view -->
</div>
</body>

On my test website that i make designs on I am having a very strange problem with the styles of my links.

i am trying to change the style of the title for the posts to have a blue color and the turn light blue on hover. however i have this problem where I change the style on the title, and there are also random links in the sidebar that follow that style as well.

i dont know if it is bug or what, but is begining to give me a headache.

Right now i colored the links pink so that are easy to see.

This happens in both opera and firefox for me.

the url is nverted.net

Hey,

Check out the attachment. (I had to spray paint out the important parts that would highly violate the NDA)

Here is some of the CSS:
Code:

.currentprojects{
   margin-top:10px;
   margin-left:8px;
   width:245px;
}
.currentprojects .proj_heading{
   font-weight:bold;
   padding-left:8px;
   color:#005e9d;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   background-image:url(../images/leftside_midsect_mid.gif);
   font-size:18px;
   padding-bottom:5px;
}
.currentprojects .proj_content{
   padding-left:8px;
   background-image:url(../images/leftside_midsect_mid.gif);
}

.rssfeeds{
   margin-top:10px;
   background-image:url(../images/leftside_midsect_mid.gif);
   margin-left:8px;
   width:245px;
}
.rssfeeds .rss_heading{
   font-weight:bold;
   padding-left:8px;
   color:#005e9d;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:18px;
   padding-bottom:5px;
}
.rssfeeds .rss_content{
   padding-left:8px;
   color:#000000;
}
img{
   margin-bottom:0;
   vertical-align:text-bottom;
}

Now, the projects one is the top. And the rss is the bottom.

Here is the HTML code
Code:

<div class="currentprojects">
                  <img src="images/leftside_midsect_top.gif" />
                  <div class="proj_heading">
                     Heading
                  </div>
                  <img src="images/leftside_midsect_midsplit.gif" />
                  <div class="proj_content">
                     stuff
                  </div>
                  <img src="images/leftside_midsect_bot.gif" />
               </div>
               <div class="rssfeeds">
                  <img src="images/leftside_midsect_top.gif" />
                  <div class="rss_heading">
                     Heading
                  </div>
                  <div class="rss_content">
                     stuff

                  </div>
                  <img src="images/leftside_midsect_bot.gif" />
               </div>

Does anyone have any idea why this is doing that in IE? FF it works fine (like that's really a surprise anymore).

Hi all,

Please see http://www.jaysonsgroup.com/ztest/ntc/zcontact.html

It's full of tests, but here's the problem..

The "Do you need more than one NTC Card" text at the bottom, needs to be followed by the text "(To share the Modem with friends)?*" IMMEDIATELY below it...

Unfortunately, in IE, there is a spacing problem - see the link below for 2 screenshots for what I mean:
http://www.jaysonsgroup.com/ztest/ntc/zie.gif

The code is simple:
Code:

<div class="fieldname_long">Do you need more than one NTC Card</div>
<div class="fieldvalue">(input field will come here)</div>
<div class='spacer_1px'>&nbsp;</div>
<div class='fieldname_text'>(To share the Modem with friends)?*</div>

The CSS:
Code:

	.spacer_1px {
		clear: both;
		height: 1px;
		overflow:hidden;
		background: blue;
	}
	.fieldvalue {
		float: left;
		background: #ccc;
		display: inline;
		margin: 0;
	}
	.fieldname_long {
		float: left;
		width: 120px;
		line-height: 13px;
		padding-right: 15px;
		color: #B30000;
		font-weight: bold;
		background: #eee;
		display: inline;
		margin: 0;
	}
	.fieldname_text {
		color: #B30000;
		font-weight: bold;
	}

Note - I justr added "display:inline" and "margin:0" above to 'fieldname_long' and 'fieldvalue' but it doesn't fix anything in IE

In the test link above, you can see that the blue line is the spacer_1px and that line should be touching the fieldname_long (light grey box). This happens in Firefox. But in IE, there's a gap which I need to remove.

Sorry this is a really small thing but I just can't figure it out! Any ideas?

Many thanks!

I'm currently making some site about webmaster resources, etc...
The site displays fine in firefox, but looks really fu/cked up in IE.
Can someone help me fix this? I was trying to make all 3 column to have equal height, and i found some way which works only in FF&Opera. Still, i have problem when i have too much text.

I have a DIV on my page with the style 'bottom' applied to it.

It is coloured red so you can see it.

I would like it at the bottom outside of all the other divs/containers.

The DIV with the red background should be at the very bottom of the page, under the large DIV.

This is the HTML placing it on the page:

HTML Code:
Code:

  <!-- InstanceEndEditable --></div>
<div class="bottom">bottom</div>
</body>

You can see it is the last DIV on the page.

Yes I am using Dreamweaver templates.

Here is the CSS for the bottom class:

Code:
Code:

.bottom {
 margin: 0px;
 padding: 0px;
 background-color: red;
 border: 0px solid #999999;
 height: 20px;
 width: 100%;
}

It appres in different places on different pages.

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/

'bottom' DIV almost at the bottom of the page:
http://www.jfwebdesign.co.uk/photog/about.php

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/work.php

'bottom' DIV at the top of the page:
http://www.jfwebdesign.co.uk/photog/contact.php

Here is a link to the CSS file:
http://www.jfwebdesign.co.uk/photog/styles.css

Can anyone explain why?

Many thanks.

The situation is very simple.
Just test the following code in IE7 or Mozilla, and then in IE6.
You will note that in IE6 there's a gap below the two divs.

HOw can I fix this ?


Code:

<style>
.fontBold,.fontBoldLink{ font-family:tahoma; font-size:14px; font-weight:bold; color:#333333;}
.fontTitle { font-size:16px;}
.fontBoldLink { text-decoration:underline; cursor:pointer;}
</style>

<div style="overflow:auto; margin-top:20px; margin-bottom:0px; border:0px #000000 solid">
    <div class="fontBold" style="width:150px; float:left; text-align:center; padding-top:3px; border:1px #999999 dashed ; border-bottom:0px; background-color:#EFEFEF; height:20px;">Left Padding</div>
    <div class="fontBoldLink" style="float:right;padding-left:20px; background-repeat:no-repeat">Right Padding</div>
</div>

<div style=" background-color:#EFEFEF; clear:both; border:1px #999999 dashed; padding:10px; height:60px; margin-bottom:10px; margin-top:0px "></div>

I have been tearing my hair out trying to figure out what is causing this artifact. I am assuming that it's a rendering issue with IE6, but wanted to ask here to see if anyone can think of what is causing it.

Here is a screenshot:
http://www.chimericdream.com/downloads/indexv_v35_ie6_bug.jpg

And here is the HTML/CSS markup for that part of the page:
HTML
Code:

			<div id="findHelp">
				<h3 id="findHelpHeader">Find the help you need!</h3>
				<form id="findHelpForm" action="" method="post">
					<fieldset>
						<label for="subject">Subject</label><br />
						<select name="subject" id="subject">
							<option value="">Search all subjects</option>
						</select>
					</fieldset>
					<fieldset>
						<label for="grade">Grade</label><br />
						<select name="grade" id="grade">
							<option value="">Search all grades</option>
						</select>
					</fieldset>
					<fieldset>
						<label for="type">Type of help</label><br />
						<select name="type" id="type">
							<option value="">Search all types</option>
						</select>
					</fieldset>
					<fieldset id="last">
						<br /><input type="submit" value="" id="findSubmit" />
					</fieldset>
				</form> <!-- #findHelpForm -->
				<div id="featuredTeachers">
					<h3>Featured Teachers</h3>
					<div class="teacherBox">
						<img src="images/photo_Lisa.jpg" alt="Lisa Yang" /><br />
						Lisa Yang <img src="images/browseWidget_btnPromo.png" alt="Button" /><br />
						<strong>Advanced Chemistry Prep</strong><br />
						<small>9th grade - 12th grade</small><br />
						<img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" />
					</div> <!-- .teacherBox -->
					<div class="teacherBox">
						<img src="images/photo_Drew.jpg" alt="Drew Hamlin" /><br />
						Drew Hamlin <img src="images/browseWidget_btnPromo.png" alt="Button" /><br />
						<strong>Proper CSS/HTML Coding</strong><br />
						<small>College</small><br />
						<img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" />
					</div> <!-- .teacherBox -->
					<div class="teacherBox">
						<img src="images/photo_Joey.jpg" alt="Joey Flynn" /><br />
						Joey Flynn <img src="images/browseWidget_btnPromo.png" alt="Button" /><br />
						<strong>Natural Sciences Overview</strong><br />
						<small>6th grade - 8th grade</small><br />
						<img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starActive.gif" alt="Gold Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" /><img src="images/rating_starInactive.gif" alt="Blank Star" />
					</div> <!-- .teacherBox -->
					<p><a href="#">See more teachers</a></p>
				</div> <!-- #featuredTeachers -->
				<div id="adobePlayer">
					<h4>We've got something better for you.</h4>
					<p>For an interactive search experience, please download Adobe Flash Player.</p>
					<a href="#"><img src="images/browseWidget_btnGetFlash.gif" alt="Get Adobe Flash Player" /></a>
				</div> <!-- #adobePlayer -->
			</div> <!-- #findHelp -->

CSS
Code:

#findHelp {width: 743px; height: 313px; background: #fff url('images/browseWidget_background.png') top left no-repeat; position: relative; margin-bottom: 1em;}
#findHelp #findHelpHeader {position: absolute; top: 15px; left: 25px; font-size: 1.3em;}
#findHelpForm {position: absolute; top: 45px; left: 25px; width: 718px;}
#findHelpForm fieldset {float: left; width: 27%; margin-right: 10px;}
#findHelpForm fieldset label {font-weight: bold;}
#findHelpForm fieldset select {width: 100%; border-width: 1px; border-style: inset;}
#findHelpForm fieldset#last {width: 10%;}
#findSubmit {width: 88px; height: 23px; background: #fff url('images/browseWidget_btnSearch.gif') top left no-repeat;}
#featuredTeachers {position: absolute; bottom: 35px; left: 20px;}
#featuredTeachers p {position: absolute; bottom: -20px; right: 15px; font-size: 90%;}
.teacherBox {width: 175px; float: left; text-align: center;}
#findHelp #adobePlayer {width: 150px; position: absolute; bottom: 30px; right: 20px;}
#findHelp #adobePlayer h4, #findHelp #adobePlayer p {color: #777; margin-bottom: 1em;}
#findHelp #adobePlayer p {font-size: 85%;}

Any help would be greatly appreciated.

HI all,
I've a problem. When my page is on hard drive it works fine. When I upload it to server, some characters screw up, such as three dots in a row.. and other punctuation. Take a look at the popup:
http://www.mustsh.com.cn/testingdim.html

Also.. any suggestions? My design is fairly whack..