CSS problems on browsers

[ayok]

Hi,

 

I am quite new for CSS. Mostly I use table to structure a webpage which is for me easier. But something I don't like with table, so I learn CSS now.

 

However, I got some problems with CSS.

 

I have the picture below in opera. It looks fine.

The css is as follow for the content and navigation:

#content{
width:78%;
text-align:left;
margin:0px auto;
float:right;
height:auto;
background-color:#FFFFFF;
border: 1px;
border-color: #000000;
padding-left: 5px;
}

#nav{
font-size:12px;
background-color:#CCCCCC;
width:20%;
padding-right:5px;
height:100%;
text-align:right;
padding-top:10px;
padding-bottom:10px;
float:left;
}

So the navigation width is 20% and the content 78%.

However in IE it looks like this:

The content is below the navigation. How can I fix it?

 

And I've been trying to make the hight of the navigation always the same height with the content.

How can I possibly do that?

 

Thank you,

 

ayok

[TheFilmGod]

I understand you - loud and clear.

 

The problem: In IE, the content is shifted under the navigation. Instead, the navigation should be isolated on the left, with no content on the bottom.

 

The solution: Make sure you clear the float. Like so...

 

<div id="nav"></div>
<div id="content"></div>
<div class="clear"></div>

/* CSS */
.clear {
clear: both;
}

[ayok]

Thanks man. It works on the newest version of IE.

 

Another question is, how can I make the height of the navigation as high as the content? I've tried 'height:100%;' but it doesn't work.

 

Regards,

 

ayok

[haku]

Height is difficult with CSS. Its generally decided by content, and not set by CSS. There are plenty of articles out there on the subject, so google is probably a good way to go on this one. There is no easy answer.

[TheFilmGod]

I understand you loud and clear.

 

Problem: You want the navigation to go as far down as the content goes.

 

Solution:

 

You need to set a bg image on the parent div of the nav and content div.

 

So...

 

HTML:

<div id="body">
  <div id="nav"></div>
  <div id="content"></div>
  <div class="clear"></div>
</div>

 

CSS:

/* Everything is the same except #body *?

#body {
background: url(body_bg.png) repeat-y;
}

 

Explanation: The all way to make the navigation go all the way down is to use the parent div as the background. Only the parent div will always be as high as the content. So, we add a bg declaration to that parent div - #body.

 

You must make "body_bg.png" an image that will be used to give the background and color that will fill in for the navigation, and make it seem - like its there.

 

Picture attached for help.

[ayok]

Thanks again man..

So the navigation bg is the bg of the #body, right? Make sense.. hey you're the man, man.

It works.. but not in Opera.. :-\. In opera, I got no background for #body. Any idea why? Cos I only tried with bg-color, not bg-image.

 

ayok

[TheFilmGod]

can you post your css and html code? I can look over it and help you out. A link to your website would also help - if your website is hosted on a server.

[ayok]

can you post your css and html code? I can look over it and help you out. A link to your website would also help - if your website is hosted on a server.

 

Hi God,

 

this is the link. Try to open with opera.

[ayok]

It doesn't work either in firefox..  ???

 

this is the css file.

 

the bgcolor of #main is #666666, and no bgcolor for #nav. However, in firefox and opera the #nav bgcolor is #body bgcolor(#F4F4F4).

 

Thank you,

 

ayok

[bronzemonkey]

By the way, body is an html element. You have no element with an id of "body" so it is confusing when you refer to #body.

You're also going to need to put your code through a validator and fix the errors that get flagged up.

 

I'd recommend that you get the Firefox extension "HTML Validator", which will flag errors/warning for you and show you straight away where the problems are...it will even "Tidy" your code for you if you wish. While you're at it, download the extension "Firebug", because it will also help you with debugging and show you what is going on with your elements and what styles are actually being applied to them. Useful tools.

 

Back to your problem: it is just that you have floated content within #main and you will need to clear it. The default behaviour of a float is to remove it from the document flow, so it will "stick out" from the bottom of it's parent if the content within the float causes it to have a height greater than that of its parent.

 

You can see what is happening if you comment out the background image for #header. You'll see that the background color of #main only extends down as far as #header (because #header is not floated and so #main expands to contain it).

 

How to fix it: using {clear:both} on the footer will not do the trick. It is also bad practice to use an empty "clearing div" within your markup. You'll need to use a self-clearing technique - you can read more about the concept behind it at this website - http://www.positioniseverything.net/easyclearing.html:

 

/*For modern browsers like FF, Opera, Safari, etc*/
#main:after {
clear:both;
display:block;
height:0;
content:".";
font-size:0;
line-height:0;
visibility:hidden;
}

/*For IE7*/
*+html #main {
min-height:1px;
}

/*For IE6*/
* html #main {
height:1px;
}

[ayok]

Wow... thanks bronzemonkey,

 

Thanks for the links. Firebug is such a great tool.

 

ayok

[acidglitter]

theres also a way i read about on a list apart. since the content is probably going to be longer, set the background for the content in a div outside of the navigation and content

 

(like

<div style="background:#ffffff;">

<div id="navigation">

</div>

<div id="content>

</div>

</div>)

 

and then make a left border on the content div as wide as the left navigation. then for the navigation set the z-index to 2 so it shows up over the border. something like that i think. i thought that was an interesting idea..

[TheFilmGod]

I don't understand why you can't just use a background image. Sure it's creative, but a .png image file would only take like 2kb, thus using only markup/css doesn't give such a download boost.

 

If you'd like, I can make that image file for you and then just put it into the #body declarations.