Compatibility and formatting problems with CSS.

Junior WebHelper Joined: 20 Feb 2003 Posts: 1

Hey people!

Thought I’d make my first post a nice long one for yous Razz

.

I'm working on a (hopefully) large site right now. I had previously designed the site using tables, but decided to attempt to convert (and improve) the base design using CSS. I’ve not really got any experience with CSS, but I wanted to learn it seeing as it offered more power over tables. Besides, given how complex I was intending to make the layout WITH tables, I thought it probably wouldn’t take me much longer… All went (relatively) well when creating a very basic model to work with, however when I started embedding CSS boxes within a main CSS box I started getting margin, wrapping and cross browser compatibility problems Confused

. The layout is pretty complex, so I’ve had no luck scouring the internet for examples and tutorials, so I thought I’d put the collective knowledge of the 4WebHelp forums to the test Very Happy

.

Right… where to start…

1. I’ve used absolute values to align the right column where I want it… The problem is it’s great to look at until it extends further than the main or left columns - after that it overlaps the copyright on the bottom of the site, which I don’t want. I’ve tried to avoid using absolute values, but the right column always ends up appearing below (and to the right) of the main column.

2. Can’t get the copyright information in the bottom to centre itself at the bottom of the page.

3. I wanted the Latest Reviews and ELSPA Top 10 to be to take up 50% of the main panel each, with a small gap between them (probably 5px)

4. Last main problem… There seems to be bugs in the formatting when the page is viewed at smaller resolutions (not as apparent without an actual POTD picture). I’m guessing it’s some sort of wrapping problem that sometimes leaves large gaps between boxes (that I hadn’t defined).

Two minor points too…

1. It would be nice if there was a little more spacing between the POTD image and the text. I might be able to figure this one out myself, but if anyone could speed up the process, it would be appreciated.

2. You might have noticed the table I stuck below the ELSPA Top 10. Is there an equally easy way of converting it to CSS or should I just take the easy route and keep it as a table?

Any help in any or all those problems will be greatly appreciated.

Oh – and for anyone else still reeling from my inconsistent formatting – don’t worry, I just quickly threw together that page and didn’t bother tidying the code. It’ll be fixed when I publish the site… Honest! Razz

http://sayro.yaboo.dk/Arkshell/dived.html

Posted: Thu Feb 20, 2003 11:39 pm (21 years, 2 months ago)

Ally153 wrote:

Hey people!

Thought I’d make my first post a nice long one for yous Razz

.

cool

Ally153 wrote:

... I’ve not really got any experience with CSS, but I wanted to learn it seeing as it offered more power over tables. Besides, given how complex I was intending to make the layout WITH tables, I thought it probably wouldn’t take me much longer…..

A very bad assumption to make -- especially if you're supporting multiple platforms or any older browsers Razz

Ally153 wrote:

All went (relatively) well when creating a very basic model to work with, however when I started embedding CSS boxes within a main CSS box I started getting margin, wrapping and cross browser compatibility problems Confused

.

not too surprising...

Ally153 wrote:

The layout is pretty complex, so I’ve had no luck scouring the internet for examples and tutorials, so I thought I’d put the collective knowledge of the 4WebHelp forums to the test Very Happy

.

Then you're not looking very hard, as there are TONS of examples and tutorials on the web. You could literally spend months (or longer) reading what's out there on CSS, and any site successfully using CSS is a good example to learn from as well ...

Ally153 wrote:

Right… where to start…

Tried Google? Or the W3C?

Ally153 wrote:

.... I might be able to figure this one out myself, but if anyone could speed up the process, it would be appreciated. ...

Any help in any or all those problems will be greatly appreciated. ... Razz

With CSS, you should start small. Start with some tutorials, do some simple pages, learn about some of the more basic incompatibilities, then work your way up -- kapeesh? Wink