Double div height in Firefox (csswiz please look!)

[S.Sameer]

I have a page where there is content in a div which is floating inside a container which is set to repeat it's background as the content expands vertically. IE displays this fine and ends repeating the background just where the content ends, but Firefox is expanding the background way further down vertically and it seems as if it's giving a "double" height to the container. So if there's content upto 50px in height, it'd expand it's background upto 100px. Here is the code with explanation (comments) and screenshots:

div.content { /* This is the main container with the repeating background */
background-image: url('images/body_bg_content.jpg');
background-repeat: repeat-y;
position: relative;
top: -31px; 
#top: -15px; /* FOR IE7 */
padding: 15px;
max-width: 910px; display: table;
background-color: #fff;
} 
 
div.thecontent { /* This is the content div floating inside the container. This has a left dashed divider which also repeats along till the height of the content. The black area with a left dashed vertical divider in the screenshots is this. */
float: left; background-image: url('images/divider.jpg'); background-repeat: repeat-y; margin-left: 10px; position: relative; top: -260px; /* FOR IE7 */ 
#top: -10px; left: 0px; min-width: 615px; max-width: 615px; background-color: #fff;
font: 12px verdana,helvetica,arial,sans-serif; color: #333; line-height: 16px;
}

The HTML is nothing complex and simply put it would be as follows:

<div class="content">
&nbsp;
Left vertical navigation and some pre-content stuff
      <div class="thecontent">
          Content appears here. This has a background with the dashed divider,
          to separate it from the left navigation. The background of <content> 
          div also runs along till the point where this div ends. But in firefox it 
          ends after leaving a lot of extra space down, as illustrated in the
          screenshots.
      </div>
</div>

Screenshots: See attachments. (Appears correct in IE, wrong in Firefox)

[james_littler]

first off add this to the very top of your css
*{
padding:0px;
margin:0px}

this will set margins and paddings accross all elements to 0px. this will help prevent browsers rendering differently as each has its own set of default values to apply. You can then style each element from scratch rather than styling ontop of what is already there.

[DaveWoods]

Firstly, I suspect Firefox is displaying correctly but is displaying differently to how you'd like it to display whereas IE is doing something odd that it shouldn't be with the CSS but is displaying how you want it to. This doesn't mean that Firefox is wrong

Secondly, nobody will be able to see your attachments apart from you until they're approved by an admin so it's difficult to see what you're trying to achieve.

Thirdly, could you post your full HTML and CSS please, at the moment if I just use the code you're provided, the negative positioning is placing your div's overlapping outside the body so presumably you have some other code that goes with that.

Fourthly, I don't think you need to use relative positioning, the negative margins or the hacks for IE7. I'd suggest using floats to position the content you have within it's parent as you seem to be complicating the code a lot more than you need to.

[DaveWoods]

first off add this to the very top of your css
*{
padding:0px;
margin:0px}

this will set margins and paddings accross all elements to 0px. this will help prevent browsers rendering differently as each has its own set of default values to apply. You can then style each element from scratch rather than styling ontop of what is already there.

Correct, but whilst it helps solve a lot of problems, I'm pretty sure that the combination of display: table; relative positioning, negative positioning and IE7 hacks are more likely to be contributing to the problem here than simply margins and padding not being reset

[james_littler]

I'd definitely support you there, i just thought it'd be wise to get that out of the way before tackeling the wealth of unnecissary code.. to be honest i thought i as looking at a dreamweaver constructed page to start with..
what is the use of the &nsbp in the content div, and as you mentioned.. display:table

[DaveWoods]

S.Sameer, you attachments have been approved and it certainly looks like you're trying to overcomplicate the CSS which is where you're running into problems.

I suggest going through the following as it'll help you understand the basics of laying out a 2 column layout which is looks like you're trying to achieve.

2 column fixed CSS layout

You can then float other elements or containers as you require them within these columns but I'd certainly use that as a starting point to at least get the right kind of framework in place.

[S.Sameer]

james_litter: Yes, that seems to help a bit and I see the point in doing that. Only if I could've known that before I started coding. Now I know why Firefox and IE were positioning my elements differently and why the need of negative margins etc. arose. I'd also like to let this be known that this is my first CSS only website. (I have been living under a rock and coding with tables before, I'm more of a PHP/MySQL guy)

The display: table; element is there because if I don't add this then Firefox won't repeat the background of the content div vertically as the content grows larger vertically. So I found this "hack" on Google and it seemed to magically fix it. The   is there to ensure that Firefox shows the div with it's background even if it's "empty" or without any content.

I understand that the code is probably very ugly and un-necessarily complex, and as you said, "dreamweaver like", and I am / was aware of this while I was coding. Every little thing has took me hours and lots of googling and here I am finally completing the relatively simple design 7 days later, and still with another problem.

csswiz: I have used floats for most of my elements / divs on the page and they are floating nicely while keeping the main container as a reference, but I still need to position them to some specific point on the page and the float can simply not achieve that. Hence along with floats I have used relative position where applicable to move the element precisely where I want it to. Now I am not sure if this is a good practice or not but it's at-least better than absolute positioning, which is the only second way of doing it that I'm aware of right now.

The images have been uploaded here:-

This is how it appears in IE (which is the way I want):



This is how it appears in FF (which is the way I don't want - see how the page background is extending a lot more down from where the content ends):


I'm extremely sorry for all that censoring and stuff, I know it's annoying but this is a business project and I have to take all steps to ensure privacy.

Code re-posted:

/* Body and main containers */
body {margin: 0px; padding: 0px; background-image: url('images/background_body.gif'); background-repeat: repeat-x; text-align: center}
img {border: 0px;}
div.container {width: 74%; position: relative; margin: 0 auto; text-align: left;}
div.header {position: relative; top: -21px; /* FOR IE7 => */ #top: 0px; min-width: 915px;} 
h1 /* This contains the logo - for no images browsers accessibilty  */
{
background: url(images/header.jpg) no-repeat;
height: 176px;
text-indent: -2000px;
} 
div.navbg { /* This is the light grey rounded body container background starting */
background-image: url('images/body_bg_start.jpg'); min-width: 962px; max-height: 29px;
background-repeat: no-repeat; overflow: hidden; position: relative; top: -15px; /* FOR IE7 => */ #top: 0px;
}
div.content { 
background-image: url('images/body_bg_content.jpg');
background-repeat: repeat-y;
position: relative;
top: -31px; 
#top: -15px; /* FOR IE7 */
padding: 15px;
max-width: 910px; display: table;
background-color: #fff;
}
div.thecontent { /* ******* The actual content area next to the left vertical navigation ******* */
float: left; background-image: url('images/divider.jpg'); background-repeat: repeat-y; margin-left: 10px; position: relative; top: -260px; /* FOR IE7 */ 
#top: -10px; left: 0px; min-width: 615px; max-width: 615px; background-color: #fff;
font: 12px verdana,helvetica,arial,sans-serif; color: #333; line-height: 16px;
}
 
/* Vertical nav styling */
.vnav { /* This is the main vertical nav header */
float: left; background-image: url('images/vnav_start.png'); background-repeat: no-repeat; min-width: 195px; min-height: 39px; max-width: 195px; position: relative;
margin-left: 10px; text-align: center; font: 12px verdana,helvetica,arial,sans-serif; color: #ffffff; font-weight: bold; line-height: 14px; margin-top: 10px; 
border-bottom: none;
}

HTML code:

<body>
<div class="container">
<!-- HEADER -->
	<div class="header">
	 <a href="http://www.website.com" title="Website" style="cursor: pointer;">
		<h1>
			Logo image appears here 
		</h1>
	</a>
	</div>
 
<!-- HORIZONTAL NAVIGATION -->
<div class="navbg">&nbsp;</div>
<span class="hrnavlink">
<div style="position: absolute; left: 30px; top: 160px; #top: 180px; z-index: 1; float: left; text-align: center;">
<a href="#" title="Home">
	<div class="hrnav" style="cursor: pointer; float: left;" > <!-- Button 1 -->
		<span style="position: relative; top: 12px;" class="hrnavlink">
		<center>Home</center>
		</span>
	</div>
</a>
<a href="#" title="Home">
	<div class="hrnav" style="cursor: pointer; float: left; margin-left: 20px;" > <!-- Button 2 -->
		<span style="position: relative; top: 12px;">
		<center>Home</center>
		</span>
	</div>
</a>
<a href="#" title="Home">
	<div class="hrnav" style="cursor: pointer; float: left; margin-left: 20px;" > <!-- Button 3 -->
		<span style="position: relative; top: 12px;">
		<center>Home</center>
		</span>
	</div>
</a>
<a href="#" title="Home">
	<div class="hrnav" style="cursor: pointer; float: left; margin-left: 20px;" > <!-- Button 4 -->
		<span style="position: relative; top: 12px;">
		<center>Home</center>
		</span>
	</div>
</a>
<a href="#" title="Home">
	<div class="hrnav" style="cursor: pointer; float: left; margin-left: 20px;" > <!-- Button 5 -->
		<span style="position: relative; top: 12px;">
		<center>Home</center>
		</span>
	</div>
</a>
<a href="#" title="Home">
	<div class="hrnav" style="cursor: pointer; float: left; margin-left: 20px;" > <!-- Button 6 -->
		<span style="position: relative; top: 12px;">
		<center>Home</center>
		</span>
	</div>
</a>
</div>
</span> <!-- End Navigation -->
 
<!-- Main content -->
<div class="content">
&nbsp;
 
<!-- Start left vertical navigation -->
<div class="vnav">
-- Left vertical nav goes here --
</div>
 
<!-- The content area -->
<div class="thecontent">
	A search box appears here above the content..
 
<!-- ******************************************* MAIN CONTENT BEGINS BEYOND THIS POINT ********************************************** -->
<div style="position: relative; left: 15px; top: -55px; #top: -20px; float: left;"> 
<p style="font-size: 11px;"><b>This is that area which includes the words "There is content here" in the images above.</b></p>
 
</div> <!-- ********** End main content *********** -->
</div> <!-- End content box -->
</div><!-- End container -->

Some of the images used in the divs:-
body_bg_start.jpg


body_bg_content.jpg


divider.jpg


I know this looks really messed up and long but I just have to take this last step to complete the template, and it looks fine anyway on IE and FF so far. The only problem which needs to be addressed is how to stop the content background (thin grey line with a shadow) to repeat a lot longer down the content, and just make it stop where the content stops like it does in IE.

EDIT: I just read your last post, csswiz, and I am now reading your tutorial. I think I am going to have to re-code this entirely from the beginning again, which isn't going to be as difficult or time-consuming as I thought, once I read you tutorial and have a basic idea of the structure I'm trying to achieve. If there are any other specific anomalies or bad practices you'd like to point out from the above code do let me know.

[james_littler]

ok how about having
(this is an eg not the code)

<body>
<container (dont set height or width)>
<header position:relative top:0 left:0 width:what ever trevor height:what ever trevor></header>
<nav float:left width:what ever trevor height:what ever trevor />
<content margin-left: = width of nav bgcolor:#ccc> </content>
<footer clear:both width:normally = header width height:what ever trevor></footer>
</container>
</body>

just a note max width will not work prior to ie7, to achieve the same effect make a stop div 0px high and say 350px wide (min width). put this inside your container div at the top or bottom and when the container div is minimised it wont go any smaller than the stop div.

i have an example here
www.ats-heritage.co.uk/div/Red&#37;20Div

[DaveWoods]

EDIT: I just read your last post, csswiz, and I am now reading your tutorial. I think I am going to have to re-code this entirely from the beginning again, which isn't going to be as difficult or time-consuming as I thought, once I read you tutorial and have a basic idea of the structure I'm trying to achieve. If there are any other specific anomalies or bad practices you'd like to point out from the above code do let me know.

Not really, it's just your use of relative positioning and hacking for IE7 that needs changing. You shouldn't really need to place any hacks for IE7, Opera, Firefox or Safari if you use float's, margin's and padding correctly.

Also make sure all the CSS goes in your CSS file and not in the page. You also shouldn't use &nbsp;'s anymore for spacing as this can be achieved easily with margin's and padding.

Also remember to validate your code as you're going along to check that all browsers will interpret your code correctly.

http://validator.w3.org

IE6 is a little bit different in that there are a few bugs but you'll find things much easier once you've adapted that tutorial to your needs.

Let me know if there's anything on there that doesn't make sense though

[Paul O'B]

Hi,

but I still need to position them to some specific point on the page and the float can simply not achieve that. Hence along with floats I have used relative position where applicable to move the element precisely where I want it to. Now I am not sure if this is a good practice or not but it's at-least better than absolute positioning, which is the only second way of doing it that I'm aware of right now.
.....If there are any other specific anomalies or bad practices you'd like to point out from the above code do let me know.

For some reason beginners to css always latch onto relative positioning as a means of structural layout. Unfortunately relative positioning is not meant for this at all. It is used for more subtle overlapping effects and not for structural layout.

The reason for this is that a relatively positioned element is not moved at all in the real sense. It is only moved visually not physically. What this means is that although the element looks like it is somewhere else, it still occupies the original space in the flow of the document as far as everything else is concerned.

Everything on the page reacts to the element as though it were in its original position which is why you get gaps in the page because that's where the element really is and not where you see it now.

Most people will code for years without needing to use relative positioning at all.

For structural layout you should use either static, floated or absolute elements depending on the type of layout required. Absolute layouts may be easier to code but are limited in scope and if you want to put a footer under two absolute columns then you are out of luck.

Floated columns are much in use these days and although floats weren't specifically designed for this task they do the job very well in most cases.

Follow Dave's advice above and only use a hack when you are compensating for a known bug. 99&#37; of the time it will be your error and not the browser because you are just doing something the wrong way and getting unreliable behaviour.

There are of course differences between browsers but using the right method at the right time will minimize these problems.

[S.Sameer]

Thanks for the suggestions Paul O'B. I never imagined that an element positioned relatively would still occupy the space it would normally be at otherwise. Now I can almost imagine my page in my mind and the picture doesn't looks too good. Hehe, well, for some reason I absolutely hate absolute positioning, hence I'm going to stick to floats, margins and paddings as csswiz said.

Again, I'd like to thanks everyone! Since the past one week I have been skipping all my school days and I'd code and work on just the design part of my site from 9:00 AM to 11:00 PM continuously, (no kidding) as each new element I positioned would come up with it's own problems, and then it'd effect the other elements, and sad thing is that I thought that's how CSS layouts work, but now I know that I was wrong and I'd have achieved the same job within 2-3 hours. Haha, a rather expensive lesson learned.

[Paul O'B]

Haha, a rather expensive lesson learned.

Sometimes doing something wrong can be the best lesson you ever learned because you learn not to do it again

The problem with css is that there is often many ways of doing something and its only with a little experience that you realise which is the best method (and sometimes the only real method) of doing the job. So don't despair as we all went through this learning curve at some time.

Trial and error is a good way of learning but it is also good to know the underlying principles as well so try and look up the right way of doing something (through articles or forums like these). As pointed out already you need to control the margins and padding on all the elements you use because browsers have different defaults. Just because some browser uses a 1em top margin doesn't mean you have to hack negative margins for other browsers. You just take control and set the margins explicitly which over-ride those set by the UA.

Good Luck

[DaveWoods]

Glad you've learnt something and as Paul's already said, we've all been there and had to learn CSS at some point. Fortunately it sounds like you haven't got use to using tables for layout first and then had to switch as web standards were introduced which was personally a huge learning curve.

The best way to learn is trying things out and asking for advice when you're not sure. There's plenty of people around here who'll give advice or provide demo's which you can then adapt.

Try altering values in CSS that people provide you with and see what effect this has on other elements as practice will certainly help your understanding