CSS issue, ping Els or any of you really

L

Lars Eighner

In our last episode,
the said:
Hi all.
I have a test page at: http://freewebdesignonline.org/test/temp.html
For some reason the CSS in this three colum layout does not show
properly (as it should in IE7 or 6 for that matter.

You haven't said how it fails in IE. IE is so buggy that it is hard to
guess what your concern may be.

However, just as a shot in the dark, try making your navigation links like
this:

<ul
<li><a href="foo.html">Link 1</a></li
<li><a href="bar.html">Link 2</a></li
</ul>

IE cannot handle lists properly. Tidy will "fix" this if you do it before
tidy, so if you use tidy, you need a script to untidy your lists after you
run tidy: be sure there is no white space (including newlines) between the
close and open tags.

Also there is a well-know bug in vertical padding.

If you can be more specific about the problem, you will probably get
a more useful answer.
 
D

dorayme

Chaddy2222 said:
Hi all.
I have a test page at: http://freewebdesignonline.org/test/temp.html
For some reason the CSS in this three colum layout does not show
properly (as it should in IE7 or 6 for that matter. What is going on
here. It looks fine both firefox and Opera, well more like it should
look anyway.

Not totally sure of the look you want? Got a screenshot of the ideal?
Anyway, you might want to try overflow: hidden on #wrapper?

Not sure why your wrapped an h1 in a div? Or why you needed so many
&nbsp;s. This latter is usually a sign of frustration at not being able
to get something to be where it is in cleaner ways.

You probably need to look carefully at your wrapper. Give it a red
background to see what it is doing. btw, height: 5.55556e+7px; is a new
one on me! Perhaps leave height out altogether is best. Let the overflow
mentioned above take care of it 'seeing' its floats and growing height
for them.

In fact, why not get rid of a few divs, like #header which are not
really needed. Get rid of all &nbsp;s

Probably don't put the h2 as a list item, it is not really part of any
meaningful list, except as a layout device.

If I go on any more, rf will think I have too much time on my hands...
<g>
 
C

Chaddy2222

Not totally sure of the look you want? Got a screenshot of the ideal?
Anyway, you might want to try overflow: hidden on #wrapper?

Not sure why your wrapped an h1 in a div? Or why you needed so many
&nbsp;s. This latter is usually a sign of frustration at not being able
to get something to be where it is in cleaner ways.

You probably need to look carefully at your wrapper. Give it a red
background to see what it is doing. btw, height: 5.55556e+7px; is a new
one on me! Perhaps leave height out altogether is best. Let the overflow
mentioned above take care of it 'seeing' its floats and growing height
for them.

In fact, why not get rid of a few divs, like #header which are not
really needed. Get rid of all &nbsp;s

Probably don't put the h2 as a list item, it is not really part of any
meaningful list, except as a layout device.
Well yes, that is why it's there.
But if you have a look at the page in Firefox you will get the idea of
how it is meant to look, the content box goes below both menu lists in
IE.
 
D

dorayme

Well yes, that is why it's there.

It's there as a layout device? OK. I would prefer to draw the line at
doing this in a case where you do not actually have to. Surely good
practice means trying to get by as far as possible with semantic markup
and then succumbing when the going gets tough! Meaning, I am not a
complete purist. said:
But if you have a look at the page in Firefox you will get the idea of
how it is meant to look, the content box goes below both menu lists in
IE.

That is the browser I looked at your site on. I see the menu and links
box hanging out of the wrapper. Perhaps that is a look you want. OK fair
enough. As for why the content is dropping in IE6, there could be a few
reasons, but I cannot at the moment fire up my Winbox. I might be able
to tomorrow.

Mostly, of course, it is because IE6 thinks there is not enough room.
Have you given dimensions of any kind to #content and the left and right
floats? Try it. Watch out, even then, for the 3px bug.

I would lay all this out rather differently but if you want to fix for
IE6 eyes only (use a conditional):

#othercontent {
...
width: 11em;
}
#content {
...
margin-right: 16em;
margin-left: 20em;
}

#navlist {
....
width: 10em;
}

or something like that... Just some thoughts...
 
R

richard

Hi all.
I have a test page at: http://freewebdesignonline.org/test/temp.html
For some reason the CSS in this three colum layout does not show
properly (as it should in IE7 or 6 for that matter. What is going on
here. It looks fine both firefox and Opera, well more like it should
look anyway.

Most likely you don't have proper width assignments.
IE shows me the "welcome" box below the menu and links.
This tells me there is a width problem.

I'd personally set "menu" and "links" width in either percentage or
ems.
Then give "welcome" no width at all. Let it float between the two as
needed.

Those 3 columns are inside a container. So they don't break apart.

The footer should either be centered or as wide as the banner box.

IE shows the ugly green background for the image box way way way down
the page. While FF shows it only partly down the page.

A few minor adjustments in the CSS should cure it all.
 
C

Chaddy2222

Most likely you don't have proper width assignments.
IE shows me the "welcome" box below the menu and links.
This tells me there is a width problem.

I'd personally set "menu" and "links" width in either percentage or
ems.
Then give "welcome" no width at all. Let it float between the two as
needed.

Those 3 columns are inside a container. So they don't break apart.
Thanks for that, not setting a width on the content box was what did
the trick.
 
C

Chaddy2222

It's there as a layout device? OK. I would prefer to draw the line at
doing this in a case where you do not actually have to. Surely good
practice means trying to get by as far as possible with semantic markup
and then succumbing when the going gets tough! Meaning, I am not a


That is the browser I looked at your site on. I see the menu and links
box hanging out of the wrapper. Perhaps that is a look you want. OK fair
enough. As for why the content is dropping in IE6, there could be a few
reasons, but I cannot at the moment fire up my Winbox. I might be able
to tomorrow.

Mostly, of course, it is because IE6 thinks there is not enough room.
Have you given dimensions of any kind to #content and the left and right
floats? Try it. Watch out, even then, for the 3px bug.

I would lay all this out rather differently but if you want to fix for
IE6 eyes only (use a conditional):

#othercontent {
 ...
width: 11em;}

#content {
  ...
  margin-right: 16em;
  margin-left: 20em;

}

#navlist {
...
  width: 10em;

}

or something like that... Just some thoughts...
Thanks mate. You were kind of on the right track but it was as richard
said a content width issue.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top