Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS problem

Reply
Thread Tools

CSS problem

 
 
Wipkip
Guest
Posts: n/a
 
      12-01-2003
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


 
Reply With Quote
 
 
 
 
m
Guest
Posts: n/a
 
      12-01-2003
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
 
Reply With Quote
 
 
 
 
Leif K-Brooks
Guest
Posts: n/a
 
      12-01-2003
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.

 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      12-01-2003
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.

 
Reply With Quote
 
Wipkip
Guest
Posts: n/a
 
      12-01-2003
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


 
Reply With Quote
 
Eric Bohlman
Guest
Posts: n/a
 
      12-01-2003
"Wipkip" <(E-Mail Removed)> wrote in
news:XKAyb.28456$(E-Mail Removed). 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.
 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      12-01-2003
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.

 
Reply With Quote
 
Wipkip
Guest
Posts: n/a
 
      12-01-2003
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


 
Reply With Quote
 
Leif K-Brooks
Guest
Posts: n/a
 
      12-01-2003
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.

 
Reply With Quote
 
Wipkip
Guest
Posts: n/a
 
      12-01-2003
Eric Bohlman wrote:
> "Wipkip" <(E-Mail Removed)> wrote in
> news:XKAyb.28456$(E-Mail Removed). 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM
Set CSS property equal to another CSS property? Noozer HTML 10 10-13-2004 09:20 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments