CSS problem

[Wipkip]

I am trying to come close to duplicating a page that is a mess of tables with a page
that uses no tables. I have gotten close enough but only in IE6. It is a big broken
mess in Netscape 7 & Opera 7. Both the old & new pages & their css files validate.

New page & css
http://wipkip.us/guide/index_new.html
http://wipkip.us/guide/styles/handyguide.css

Old page & css
http://wipkip.us/guide/index.php
http://wipkip.us/guide/styles/hg_style.css

Would some kind soul point out my errors on the new page.

 

[m]

I am trying to come close to duplicating a page that is a mess of tables
with a page that uses no tables. I have gotten close enough but only in
IE6. It is a big broken mess in Netscape 7 & Opera 7. Both the old & new
pages & their css files validate.

New page & css
http://wipkip.us/guide/index_new.html
http://wipkip.us/guide/styles/handyguide.css

Old page & css
http://wipkip.us/guide/index.php
http://wipkip.us/guide/styles/hg_style.css

Would some kind soul point out my errors on the new page.

Instead of floating the leftside menu, try :
position:absolute;
width:25%;

and with the right side content,
instead of floating right, try:
position:absolute;
left: 30%;

This seems to work very stably across standards browsers
and IE. IE will handle it a bit differently than the others,
so you can either use a (yucch) hack, or just leave a bit
of extra room for it to roam, as I did with the 5% here.

 

[Leif K-Brooks]

I am trying to come close to duplicating a page that is a mess of tables with a page
that uses no tables. I have gotten close enough but only in IE6. It is a big broken
mess in Netscape 7 & Opera 7. Both the old & new pages & their css files validate.

I was bored, so I decided to redo the design instead of fixing it. It
doesn't look quite the same, but should be similar enough.

The address is http://tw.ecritters.biz/for_wikip/. The HTML validates,
and the CSS would if not for the validator border-right bug.

 

[Leif K-Brooks]

I was bored, so I decided to redo the design instead of fixing it. It
doesn't look quite the same, but should be similar enough.

The address is http://tw.ecritters.biz/for_wikip/. The HTML validates,
and the CSS would if not for the validator border-right bug.

Hmm, doesn't seem to work right in IE. I'll fix it when I have more than
10 seconds access to a Windows machine.

 

[Wipkip]

Hmm, doesn't seem to work right in IE. I'll fix it when I have more
than 10 seconds access to a Windows machine.

What do you mean 10 seconds. It took me half day to get it wrong.
You sure shrunk my messy css file.

Thanks for your help

 

[Eric Bohlman]

I am trying to come close to duplicating a page that is a mess of
tables with a page that uses no tables. I have gotten close enough but
only in IE6. It is a big broken mess in Netscape 7 & Opera 7. Both the
old & new pages & their css files validate.

New page & css
http://wipkip.us/guide/index_new.html
http://wipkip.us/guide/styles/handyguide.css

A few immediate problems (BTW, if you haven't validated both your HTML and
your CSS, do so first, and fix any reported problems):

1) You have a style defined for "#menu lu" which, I'm guessing, should be
"#menu ul".

2) The style for #menu specifies both float and relative positioning.
Generally, floated elements shouldn't be positioned; you wind up creating a
tug-of-war that ends up with different winners in different browsers.

3) Floated elements need an explicit width.

4) Specifiying "margin: auto" for #footer fixes the footer alignment
problem.

5) You've got your fonts, widths and margins specified in pixels, resulting
in an inflexible design. Use percentages instead.

Take a look at <http://www.omsdev.com/dawnas/index_new.html> for some fixes
that make it look OK in Opera 7.22 (I just changed the CSS file, not the
HTML or the GIF). Let me know when you're done with it and I'll take it
down. There are still some problems with the footer in Mozilla; for some
reason that I don't quite understand, it's being moved up into the body.

 

[Leif K-Brooks]

Hmm, doesn't seem to work right in IE. I'll fix it when I have more than
10 seconds access to a Windows machine.

Or so I thought. Ended up getting it to look reasonable, but not quite
as cool.

 

[Wipkip]

Instead of floating the leftside menu, try :
position:absolute;
width:25%;

and with the right side content,
instead of floating right, try:
position:absolute;
left: 30%;

This seems to work very stably across standards browsers
and IE. IE will handle it a bit differently than the others,
so you can either use a (yucch) hack, or just leave a bit
of extra room for it to roam, as I did with the 5% here.

Thanks Mr Stevens but I'm still seeing it badly broken in Netscape but better in
Opera & looks the same on IE.

 

[Leif K-Brooks]

What do you mean 10 seconds. It took me half day to get it wrong.

I only had about 10 secondsn for testing it on Windows IE, it took more
than that (a lot more to make it on my Linux box.

Thanks for your help

No problem.

 

[Wipkip]

A few immediate problems (BTW, if you haven't validated both your
HTML and your CSS, do so first, and fix any reported problems):

All css & html files validated.

1) You have a style defined for "#menu lu" which, I'm guessing,
should be "#menu ul".

Now that helped.

2) The style for #menu specifies both float and relative positioning.
Generally, floated elements shouldn't be positioned; you wind up
creating a tug-of-war that ends up with different winners in
different browsers.


3) Floated elements need an explicit width.

Didn't know that but when I tried that it broke in IE.

4) Specifiying "margin: auto" for #footer fixes the footer alignment
problem.

I made it different.

5) You've got your fonts, widths and margins specified in pixels,
resulting in an inflexible design. Use percentages instead.

Ya, I used px for the footer font size & menu widths. Also I wanted to keep
everything within a 750px wide box because there isn't much content. Looks better to
me than 3 or 4 lines of text on a wide screen. Other pages have even less content,

Take a look at <http://www.omsdev.com/dawnas/index_new.html> for some
fixes that make it look OK in Opera 7.22 (I just changed the CSS
file, not the HTML or the GIF). Let me know when you're done with it
and I'll take it down.

Ok, I've saved it.

There are still some problems with the footer
in Mozilla; for some reason that I don't quite understand, it's being
moved up into the body.

I saved your css file.
Thanks four time & help.

 

[Wipkip]

Or so I thought. Ended up getting it to look reasonable, but not quite
as cool.

That's ok. I like Darna better than Dawna. Damna might be better yet.

 

[Wipkip]

Ok I'm closer.
I have gotten close enough in IE6 and Opera 7 but it is still broken in Netscape 7.
I stuck a <hr> in just before the </body> tag trying to understand what Netscape was
doing, didn't help.

The page & css files validate.

New page & css
http://wipkip.us/guide/index_new.html
http://wipkip.us/guide/styles/handyguide.css

 

[picayunish]

Ok I'm closer.
I have gotten close enough in IE6 and Opera 7 but it is still broken in Netscape 7.
I stuck a <hr> in just before the </body> tag trying to understand what Netscape was
doing, didn't help.

The page & css files validate.

New page & css
http://wipkip.us/guide/index_new.html
http://wipkip.us/guide/styles/handyguide.css

Add 2 break with clear=both before the end div tag (above the footer)
and before the last end div tag.
Like this:
<br>

</div>
<div id="footer">
<div id="copy">
&copy; Dawna Sawatzky All rights reserved
</div>
<div id="siteby">
<a href="#">Site by Tom D. Hay</a>
</div>

<br>

</div>

In the style sheet
br {clear: both;}

The <hr> can be removed.

 

[Wipkip]

Add 2 break with clear=both before the end div tag (above the footer)
and before the last end div tag.
Like this:
<br>

</div>
<div id="footer">
<div id="copy">
&copy; Dawna Sawatzky All rights reserved
</div>
<div id="siteby">
<a href="#">Site by Tom D. Hay</a>
</div>

<br>

</div>

In the style sheet
br {clear: both;}

The <hr> can be removed.

Works great. Thanks Picky van der Vaart. Now if the would all treat my menu the same
there would be much joy in my world.

 

[picayunish]

Works great. Thanks Picky van der Vaart. Now if the would all treat my menu the same
there would be much joy in my world.

You're welcome