19 replies [Last post]
sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Hey guys,

I have my navbar working but now my boss wants the bgcolor to scroll down all the way to the bottom of the screen even if there are no elements inside of it.

I tried giving it a height but that scrambles up in IE by giving huge margins inbetween all the different elements. I know that height 100% is bad because it spans like a million scroll downs hehehe.

#nav-col{
	font-size: 10px;
	font-family:Charlesworth, Times New Roman, Bookman Old Style, Baskerville, BernhardMod BT, Mangal, Rockwell;
	margin: 0;
	background: #600;
	width: 130px;
	float: left;
	position: relative;
	}	

That's my css.

Seb

"Don't worry about Blank let me worry about Blank"

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE breaks my navbar

I presume, the menu column is shorter than the page height.

Your problem is a common one, its solved by a technique called faux-columns. Which means, placing the required background on the container element which does extend to the bottom of the page. Full details can be found at A List Apart or by googling on faux-columns.

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

Alright,

nav-col is the container and I'm using a image to see if it was the image that was necessary but it doesn't make a difference. My background still stops when the content stops.

This is the modified code:

#nav-col{
	font-size: 10px;
	font-family:Charlesworth, Times New Roman, Bookman Old Style, Baskerville, BernhardMod BT, Mangal, Rockwell;
	margin: 0;
	background: #600 url(../gui_images/bg_nav.jpg) repeat-y 50% 0;
	width: 130px;
	float: left;
	position: relative;
	}


edit: sorry my bad, it's not the container >.<

Trying to fix it now

Seb

"Don't worry about Blank let me worry about Blank"

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

Hmm works in IE but not in FF.

The technique is the same as in the aListApart website...

#mid-container{
	background: url(../gui_images/bg_nav.jpg) repeat-y 0 0;
	margin:10px 0 0 0;
	width: 600px;
	}

Is my margin causing the error?

Seb

"Don't worry about Blank let me worry about Blank"

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE breaks my navbar

It shouldn't.

Do you have a link to your page or can you post the relevant html fragment.

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

Alright, thanks for taking the time Smile

This is my index page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<link href="inc/exterior-css.css" rel="stylesheet" type="text/css" />

<html>

<head>
<%
dim blnLang
blnLang = 1
webpage = "index"
%>
</head>

<body>
<div id="head-container">
	<!--#include file="inc/header.asp"-->
</div>

[b]<div id="mid-container">
	<div id="nav-col">[/b]
		<img src="gui_images/sidenav_top.jpg">
		<!--#include file="inc/navbar_display.asp"-->
		<!--<img src="gui_images/sidenav_bottom.jpg">-->
	</div>
	<div id="content-col">
		<%response.write(pageContent)%>
	</div>
</div>

<div id="foot-container">
	<!--#include file="inc/footer_e.asp"-->
</div>

</body>

</html>

I want the nav-col to have the bg color but I realize I have to add the effect to the middle container so here's the css:

#mid-container{
	background: url(../gui_images/bg_nav.jpg) repeat-y 0 0;
	margin:10px 0 0 0;
	width: 600px;
	}

/* I don't know if you need the nav-col but incase
I did something wrong here: */

#nav-col{
	font-size: 10px;
	font-family:Charlesworth, Times New Roman;
	margin: 0;
	width: 130px;
	float: left;
	position: relative;
	}

edit: Seems like I can't bold the text inbetween code tags. The lines I wanted to put in emphasis are marked inbetween "b" and "/b" Smile

Seb

"Don't worry about Blank let me worry about Blank"

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE breaks my navbar

Your stylesheet link :

<link href="inc/exterior-css.css" rel="stylesheet" type="text/css" />

is in the wrong place; it shoudl be in the <head> section.

Verschwindende wrote:
  • CSS doesn't make pies

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

I'm working with a Content Manager. I don't see the styles until the content is loaded into the index page so to check whether or not it works I was working with a simple template that had the doctype and the link following it on the next line.

Now, regardless of the fact that I forgot to put it back, the background colour still doesn't appear in FF when it does in IE. I doubt that FF doesn't support this feature and that IE does so I'm asking what's wrong with the posted code causing it to not work. Got an answer for that one smarty pants? o_O <-- twitchy eye smily

Seb

"Don't worry about Blank let me worry about Blank"

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE breaks my navbar

Your code (for the appropriate parts) looks alright to me, as far as it goes.

You wouldn't be floating #content-col right would you?
If so...

Floats are out of flow elements. So their parents don't expand to surround them. They only expand to surround child elements which are in flow (IE, of course does its own thing). If this is your problem you need to get some in-flow content beyound the two floated elements, read up on clearing a float.

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

Nah, I'm floating it left but I assume I'll get the same problem Tongue

I'll read up on clearing floats but is this what causes the mid-content container to now share it's background with both of it's children even though they both have no given colours/background images?

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

IE breaks my navbar

See my 2 Column ... demo. It pretty much applies both the faux columns and a clearing method that's nearly fool-proof.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

Hey,

sorry to bring this thread back from the dead but I can't seem to make it work. The background appears fine in IE but doesnt' seem to exist in FF.

#mid-container{
	background: url(../gui_images/bg_nav.jpg) top left repeat-y 0 0;
	margin:10px 0 0 0;
	width: 600px;
	}

this is my code, and I compare it to Gary's tutorial and it seems similar. The path to the image is fine (it works in IE) but the images don't appear in FF.

This is the part of gary's code that applies:

/*The background image should be the width of
  the sidebar.  Its purpose is to simulate a
  column of full height.*/
#wrapper {
    position: relative;
    width: 750px;
    margin: 0 auto; /*proper centering*/
    text-align: left; /*return to normalcy*/
    border: 1px solid #333;
    background: #eee url(navcolbg.jpg) top left repeat-y;
    }

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

IE breaks my navbar

Did you include the clearing stuff?

If you still have problems, use my demo as your starting point, and add your content. If you add something that breaks something, well, you know what broke it. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

Cool Thanks I had neglected the clearing

I guess I should of been more attentive. But it works now and I have that page bookmarked!

I'm curious though, is this how CSS is supposed to work? I mean, is this a hack or is it really the proper method?

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

IE breaks my navbar

It's a hack that works the way css is really supposed to work.Smile

IE very wrongly extends an element to enclose its content without proper conditions being met. In this case, there needs to be something to clear the float. Else, the container is unaware of the float's existence and acts as if it weren't there.

There are other ways to do it, but this is the most consistent.

cheers,

gary

[edit] Spell check is no help if you right/rite/write the wrong word—can you fix that, Tony? Sad [/edit]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE breaks my navbar

It's a hack to hack a hack, if you consider that floats are meant to break through a container and for elements to wrap around them, we hack them to be our layout tool so we need to hack their proscribed behavior to our twisted ways.

"Oh, what tangled webs we weave when first we practice to deceive"
Sir Francis Bacon

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 3 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE breaks my navbar

Thing is, if it wasn't for IE demanding a height value for its *beep* hasLayout mode, we could get containers to expand all the time using height:auto; overflow:auto; which IS the specified behaviour.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

IE breaks my navbar

All in all, there are several methods to enclose floats. Adding a clearing element just prior to closing the float's parent is the most consistent method and is what Tony's hack does. It has problems, though, in that it will also clear beyond the bounds of its parent, causing a clearing action in neighboring columns, for example.

As Chris pointed out, there is an implicit method defined in the specs that is triggered by having {overflow: ≠visible;}. This has inheritance issues and certain exceptions.

That same section specifies that a float element will enclose its own descendent floats. Of course, you still have to deal with the ancestor float. Smile

Tables naturally enclose float elements. Giving the parent element {display: table;} will also enclose its floats—maybe. This seems a clean and elegant approach, but. There are exceptions that I haven't quite sussed out yet. In a short discussion with Georg Sǿrtun, css-d, I gather this is still a hazy approach with low visibility. In my 2 column demo, you can remove Tony's hack and make #wrapper {display: table;}[1], achieving the same results.

Each method has its pluses and minuses. It is important that you become familiar with each and use the one most appropriate for the situation.

cheers,

gary

[1] Remove enough content from the main area so that the left column is the longer for proof's sake. You can also replace {display: table;} with {overflow: hidden;} with the same result.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 10 years 2 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

IE breaks my navbar

Alright, well is using floats for layout purposes, when they were designed for things to wrap around them, considered malpractice?

I guess I'm thinking of tables and doing a vague comparassion. I do realize tables made it hard for screenreaders to go through content and that if you take away the CSS from a page the text is displayed in a very lisible way... but does the floats-as-layout have disadvantages?

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

IE breaks my navbar

No. But floats have gotchas with big teeth, and IE has floats that live in an alternate universe.

Floats do not destroy the structural integrity nor the semantics of the markup. They are a presentational tool. Tables, used as layout tools, are the markup and are neither structural nor semantic.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.