Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   CSS problem (http://www.velocityreviews.com/forums/t156018-css-problem.html)

Wipkip 12-01-2003 05:57 AM

CSS problem
 
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.

--
Duende



m 12-01-2003 06:52 AM

Re: CSS problem
 
Wipkip wrote:

> 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.
--
Cheers, m -- mbstevens.com

Leif K-Brooks 12-01-2003 06:52 AM

Re: CSS problem
 
Wipkip wrote:
> 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 12-01-2003 07:07 AM

Re: CSS problem
 
Leif K-Brooks wrote:
> 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 12-01-2003 07:22 AM

Re: CSS problem
 
Leif K-Brooks wrote:
> Leif K-Brooks wrote:
>> 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.


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

--
Duende



Eric Bohlman 12-01-2003 07:26 AM

Re: CSS problem
 
"Wipkip" <duende@email.com> wrote in
news:XKAyb.28456$zG1.17337@newssvr29.news.prodigy. com:

> 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 12-01-2003 07:31 AM

Re: CSS problem
 
Leif K-Brooks wrote:
> 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 12-01-2003 07:35 AM

Re: CSS problem
 
m wrote:
> Wipkip wrote:
>
>> 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.



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

--
Duende



Leif K-Brooks 12-01-2003 07:58 AM

Re: CSS problem
 
Wipkip wrote:
> 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 12-01-2003 08:10 AM

Re: CSS problem
 
Eric Bohlman wrote:
> "Wipkip" <duende@email.com> wrote in
> news:XKAyb.28456$zG1.17337@newssvr29.news.prodigy. com:
>
>> 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):


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.

--
Duende




All times are GMT. The time now is 03:02 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.