CSS - Huge Gap Caused By Floated Element

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

i'm working on the following page, and I've now just noticed that it doesn;t look right in IE 6....It looks ok in Mozilla and IE 7 though...

Anyway, if you look at it in IE 6, you'll see the text is HUGE....I tried to alter the font property in the body{} of my CSS (in a conditional comment), but that didn;t do anything...

I'm sure's it's a tiny something or the other somewhere that's making it do that...perhaps my template is conflicting with the blog software...I dunno for sure, and my screen is starting to get fuzzy (meaning i need to take a break), so maybe one of you can pinpoint the problem...

Thanks.

Hi,

Got my validation problem sorted (Thanks jarra) but now my page has a problem with IE6. Well, it had the problem yesterday but I thought I fixed it.

If you view the page in Firefox and Opera the first image is about 10px break away from the text above, however in IE6 it's at least 100px away.

It doesn't matter what image I use or where I put, it's always the first image. When it happened yesterday I reduced the width of the image by 2 pixels and eveything seemed fine.

Is it a CSS problem?

CSS: http://www.planetphillip.com/style.css
Page: http://www.planetphillip.com/index.php

TIA
Phillip

hello all,
i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects.
Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section.
I believe the issue stems from the ids used only for the purpose of mootools.
Here's an html exerpt from the frontpage:
Code:

<div id="h_toggle1"><a href="#">
<h1>Communication</h1>
</a></div>
<div id="horizontal_slide1">
<ul class="bullet_point">

...

and the titre_toggle.css describing the elements used.
Code:

h3.section {
margin-top: 1em;
}

#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}

#h_toggle1, #h_toggle3, #h_toggle2 {
}

div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}

I'll appreciate any insight.

safari 4.0.3 --> KO
IE 6+ --> OK
FF 3.5 --> OK
mootools 1.2.4
joomla 1.5.15

hi all...

i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet....

frank/

i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too...

it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden...

here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug...

Mini Catalog

I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded.

Here's my css for the navbar:

/* Navbar */
#nav { width: 158px;
margin-left: 0;
}
#nav ul { font-family: "Trebuchet MS", serif;
font-size: 11px;
margin-left: 0px;
list-style-type: none;
}
#nav ul li ul { margin-left: 12px; }

Any suggestions or help would be appreciated.

I can't seem to work out where the huge space at the bottom of the pages are coming from.

This is the test page
http://midnighttempest.com/layouttest.html

as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off.
Anyone help?

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

What is your go-to forum for web design (HTML, CSS, JScript, PHP)? I hate to be so spread out across a ton of forums around the same topic, but have yet to find a forum that seems to be very active.

Which do you think have huge active communities of knowledgeable designers/developers?

Hey there,

webbsdomain.com/Max

I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there....

The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight.

In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find.

I researched the issue online and found similar issues:

IE6 3px float bug

and

IE6 double margin bug

Neither of which seem to be the issue, and the fixes they describe do not work.

I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful!

Thanks in advance,
Brian

So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/

Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start.

So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this:

Code:

<div id="footer">
  <span id="left-bg"></span>
  <span id="right-bg"></span>
</div>

and the styling for these is something like (I can post the actual/more if need be)
Code:

div#footer {
  position: relative;
  height: 25px;
  width: 100%;
}

span#left-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat 0 0;
  z-index: -1;
}

span#left-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat -400px 0;
  z-index: -1;
}

in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page.

in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions:
a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top)
b) using the W3-dev opera tools, if I disable both spans
c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first).

i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed.

Hi guys,

I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout.

I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following:

Code:

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
	background-color: #000000;
	}

Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know!

I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed.

Thanks everyone!

Hello,

I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one.

My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content.

I placed:
Code:

<br style="clear: both;">

after the content <div> which usually does the trick but it's not working for some reason...

And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus.

This happens in IE only.

Any ideas?

Page html/css:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	background-color: #f9dcb3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#cRightPaneBot	{
	background-color: #D9E0EA;
	border: 1px solid #9DA7B5;
	margin: 23px 0px 0px 0px;
	padding: 15px 10px 15px 15px;
	/*
    width: 673px;
	height: 238px;
	*/	
}

.cLeftPane	{
    margin: 0px 20px 0px 0px;
	border: 1px solid #9DA7B5;
    overflow: hidden;
	float: left;
    background-color: #F5F7FB;
	height: 223px;
    /*
    */
}

h1  {
    font-size: 1.5em;
    /*
	display: inline;
	*/
}

.breakAfter {
    margin: 0px 0px 10px 0px;
}

</style>
</head>

<body>
<div id="cRightPaneBot">
	<h1 class="breakAfter">My Title</h1>
	<div class="cLeftPane" style="width: 200px;">
		hello
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna. 
	</div><br style="clear: both;">
</div>
</body>
</html>

Aaaah!
another problem...

now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div.

when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value).

what now?
thanks