16 replies [Last post]
phil-b
Offline
Regular
Surbiton (UK)
Last seen: 16 years 31 weeks ago
Surbiton (UK)
Joined: 2005-06-22
Posts: 14
Points: 0

Hi, i have 3 problems as follows:

Firstly, in IE the background image isn't fixing properly in the content div, I had a sililar problem a while ago but with FF and now can't reproduce it!

Secondly, in IE there is a gap above and below the navigation at the bottom, i am aware of hacks to get rid of this but i havent a clue how to use them!

thirdly, the navigation list is displaying backwards (from 5-1) , i know that it is because i have it floated right, but can't seem to swap them without moving the whole thing to the left.

html - www.tflcompany.com/evr/concepts/concept1.htm
css- www.tflcompany.com/evr/concepts/concept1.css
both in a txt file for easier viewing - www.tflcompany.com/evr/concepts/htmlcss.txt

Any help is appreciated.
Thanks
Phil

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE problems and float problem - still not working

#1 isn't easy because, of course, IE doesn't do position: fixed. There are hacks out there to make it work in IE. Just do a google.
#2 put margin: 0 on the #navigation ul
#3 float the ul to the right and the lis to the left.

phil-b
Offline
Regular
Surbiton (UK)
Last seen: 16 years 31 weeks ago
Surbiton (UK)
Joined: 2005-06-22
Posts: 14
Points: 0

IE problems and float problem - still not working

Thanks for the advice, heres what i got...

#1 ok i'll look into that myself
edit: FF and IE seem to do opposite things with this so i uded a hack to get around it as follows:
#content {
height:300px;
padding-top: 30px;
width: 600px;
float: left;
text-align: left;
background: #FFFFFF url(../images/stock/chess.jpg) no-repeat fixed bottom right;
padding-bottom: 0px;
overflow: auto;
}

html>body #content {
background: #FFFFFF url(../images/stock/chess.jpg) no-repeat scroll bottom right;
}

#2 I have tried that, doesnt seem to work :?:

#3 That kinda does the trick but moves the whole lot into the center :?

heres the css i have so far.. to make it easier for you to see:

#navcontainer li {
float: left;
}
#natcontainer ul {
float: right;
}

#navcontainer ul li
{
list-style-type: none;
padding: 0px;
margin: 0px;
display: block;
background: url(../images/navbarbg.gif) repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
}

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
border-top: 1px solid #EA7211;
border-bottom: 1px solid #EA7211;
border-left: 1px solid #EA7211;
padding-left: 10px;
padding-right: 10px;
}

#navcontainer a:hover {
background: url(../images/navbarbghover.gif) repeat-x 20px;
}

phil-b
Offline
Regular
Surbiton (UK)
Last seen: 16 years 31 weeks ago
Surbiton (UK)
Joined: 2005-06-22
Posts: 14
Points: 0

IE problems and float problem - still not working

I've still had no luck with the bottom navigation bar, if anyone knows what the problem is, please help!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE problems and float problem - still not working

phil-b wrote:

#2 I have tried that, doesnt seem to work :?:

Maybe cos you've spelt your div name wrong:

#natcontainer ul {
	float: right;
}

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

phil-b
Offline
Regular
Surbiton (UK)
Last seen: 16 years 31 weeks ago
Surbiton (UK)
Joined: 2005-06-22
Posts: 14
Points: 0

IE problems and float problem - still not working

ooops silly ole me! :oops:

Thanks

edit: nope still not quite doing the trick
:? :?:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE problems and float problem - still not working

You need to give ul a width.

#navcontainer ul {
    width: 450px;
	float: right;
	padding: 0px;
	margin: 0px;
    list-style: none;
    text-align: center;
    }

#navcontainer li {
    width: 75px;
    float: left;
    background: url(../images/navbarbg.gif) repeat-x 20px;
    font: 10px/20px "Lucida Grande", verdana, sans-serif;
    }

#navcontainer a {
    color: #000;
    text-decoration: none;
    display: block;
    border: 1px solid #EA7211;
    }

/***alternative***
#navcontainer ul {
    width: 450px;
	padding: 0px;
    margin: 0px auto;
    list-style: none;
    text-align: center;
    }
***end alternative***/

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.

phil-b
Offline
Regular
Surbiton (UK)
Last seen: 16 years 31 weeks ago
Surbiton (UK)
Joined: 2005-06-22
Posts: 14
Points: 0

IE problems and float problem - still not working

This way is fine until you have page names that are longer than "page one"

The Page names come from a databse, so can/will change in size. So setting the width like this isn't really an option.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE problems and float problem - still not working

phil-b wrote:
This way is fine until you have page names that are longer than "page one"
The Page names come from a databse, so can/will change in size. So setting the width like this isn't really an option.

For important elements like navigation, I think design has to take precedence over content to a certain degree so I would make your <li>s a little bit larger to accommodate bigger words but then also make sure that the words coming from the database are a suitable length. With a bit of thought, it shouldn't be that hard to come up with words of suitable length.
Or if you're likely to have lots of really long words that can't be shortened, you may have to think about replacing your horizontal nav with a vertical one.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE problems and float problem - still not working

phil-b wrote:
This way is fine until you have page names that are longer than "page one"

The Page names come from a databse, so can/will change in size. So setting the width like this isn't really an option.
Ah, I just love feature creep. That is kinda critical to the solution and just might could've been mentioned earlier.

Floats should be given widths because their behavior otherwise is not clearly defined. Some browsers cinch up about the content, others give each float element the full available width.

So, with the change in specs, do this;
 
#navcontainer ul { 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
    text-align: right; 
    font: 10px/20px "Lucida Grande", verdana, sans-serif; 
    } 
 
#navcontainer li { 
    display: inline; 
    border: 1px solid #EA7211;	 
    } 
 
#navcontainer a { 
    padding: 0 10px; 
    color: #000; 
    background: url(../images/navbarbg.gif) repeat-x; 
    text-decoration: none; 
    } 
 
#navcontainer a:hover { 
    background: url(../images/navbarbghover.gif) repeat-x; 
    }

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE problems and float problem - still not working

kk5st wrote:

Floats should be given widths because their behavior otherwise is not clearly defined. Some browsers cinch up about the content, others give each float element the full available width.

gary, I'm curious, what browsers give full width to undefined width floats? I'll take a guess with IE/PC :roll: (can't test right now). But doesn't the current 2.1 specs state that a float with a width of auto should shrink wrap?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE problems and float problem - still not working

wolfcry911 wrote:
kk5st wrote:

Floats should be given widths because their behavior otherwise is not clearly defined. Some browsers cinch up about the content, others give each float element the full available width.


gary, I'm curious, what browsers give full width to undefined width floats? I'll take a guess with IE/PC :roll: (can't test right now). But doesn't the current 2.1 specs state that a float with a width of auto should shrink wrap?

Hey wolf,

I can't claim any expertise in the specs field. Nor can I cite offhand the browser/behavior combos. I have prepared a small test case, shown below.

The W3 css2.2 Visual formatting model says, "A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements)(emphasis added). Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float."

From that I take it that you're supposed use the 'width' property to set width unless it's something like an img that has its own implicit width. The second part I take to mean that a float should act as a block element, i.e. take all available width. The fact seems to be that some browsers may shrinkwrap the content, but I do not see that we can depend on that behavior.

If someone could cite the appropriate passage that suggests shrinkwrap to be the default behavior, I'd appreciate it. I think I've heard that css3 may have a width property calling for that, but I haven't seen it.

test case:
 
#test { 
    width: 400px; 
    height: 50px; 
    border: 1px solid black; 
    background-color: #f88; 
    } 
 
#test ul { 
    margin: 0; 
    padding: 0; 
    float; right; 
    background-color: #8f8; 
    } 
 
#test li { 
    display: inline; 
    background-color: #88f; 
    } 
----------------- 
<div id="test"> 
  <ul> 
    <li>list</li> 
    <li>item</li> 
  </ul> 
</div>

cheers,

gary
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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE problems and float problem - still not working

Correct me if I'm wrong, but isn't that from the 2.0 spec? I found this in section 10.3.5 of the 2.1 spec (which incidentally doesn't have the same language in section 9.5 that you point to):
10.3.5 Floating, non-replaced elements

If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
[/url]

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE problems and float problem - still not working

Harumph! I didn't notice I was in css2. I used the search facility rather than going to the css2.1 toc and looking for myself. :oops:

My statement still stands that you can't depend on that behavior. As is seen in the floated ul in the OP's problem that is solved by assigning width. Further, see the test case. The ul takes all available width. If you float the lis, they will shrinkwrap while the ul will not. If you float the wrapping div, everything shrinks.[1]

All in all, inconsistent behavior. So one should be prepared to assign width if needed.

cheers,

gary

[1] Tested in FF1.04, Opera7.54, IE6. FF on Win98se and Debian Etch Gnu/Linux, IE and Opera on Win98se.

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE problems and float problem - still not working

Um, gary... did you paste that code as-is from your test? There is major flaw in there - it only took me 2 1/2 hours of testing to find it! AAAARRRGGGHHH! (okay, I feel better now) Do you see it? I could not for the life of me figure out why when I used phil's code I could get the ul to shrinkwrap and float right in Firefox, but I could not get your test code to work. I kept reducing phil's code until it was down to bare bones and it worked fine and yours didn't. I'll do more testing on a PC tomorrow.

I do believe you're correct in saying that behavior is inconsistent, but for my own benefit, I was trying to better understand which browsers did what when.

Oh, the flaw - look at the float: right in the ul Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE problems and float problem - still not working

I think I'll call this thread done. I've done all the damage I can.:oops:

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE problems and float problem - still not working

Well I've done a bit of testing with your (corrected) code. It works in Safari 1.3, FF 1.04 Mac and PC, IE6. Can anyone test in other browsers?
phil, what browser are you using that it failed in?