7 replies [Last post]
Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 13 years 50 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

http://tony.gonk.net/
After a lot of reading about the future of webstandards I've converted my site to a floading DIV layout. I've always been one to validate my XHTML and CSS, ever since I discovered the services that the W3C offered, so that much is solid at least.

However, my site displays (so far) correctly in IE6, but Netscape (7.1) and Opera (7.23) don't display it correctly on many, many counts.

I'm asking for general advice on how to throw in those tricks that help a website become truly cross-browser. Any advice is most welcome.

There are a few specific questions I had, however, such as:

1) What are the benefits and drawbacks (if any) to using @import instead of the LINK tag when referencing stylesheets?

2) How do I get my site to horizontally center in Netscape and Opera, as it behaves in IE6? (edit: I've fixed this one, thanks to the handiness of margin:auto. Thanks, margin:auto!)

3) How do I get the content on the "games" page (http://tony.gonk.net/games/index.html) to display in other browsers as it does in IE6?

Any and all help greatly appreciated. I'm hoping to make a complete transition to a tables-free site (for layouts, at least) and still have my website be as friendly as possible.

-- Zearin Galaurum
http//tony.gonk.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Site appraisal please?

Hi Zearin Galaurum,
1) @import is not supported by some older browsers such as Netscape 4.
It is often used to hide css from those browsers.

3) looks like you are missing a clearing element inside item-container.
As the image within item-container is floated you will need something to clear everything before you close the item-container div.

<div class="item-container"> 
			<img class="item-img" src="/images/icon_starcraft.gif" alt="StarCraft" /> 
			 
			<p class="item-p"> 
			Nowadays outshined ....</p> 
<p style="clear:both;"></p> 
		</div>


Hope that helps

Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 13 years 50 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

Cool--and weird.

I've done it. But curious ... why does there need to be a clear-all before closing the div? Either Opera and Netscape didn't respond to this, or there are other problems remaining....

Discount the footer if it's still displaying wrong, I've got a solution I'm working on for it.

-- Zearin Galaurum
http//tony.gonk.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Site appraisal please?

Hi Zearin Galaurum,
Looks like I was barking up the wrong tree :?
From the quick look I had of your site clearing seemed to be the problem, now we will have to have a closer look and see what we find.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Site appraisal please?

Ok back from another quick look.
You need to set the clearall class to display:block; not display:inline;

Hope that helps

Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 13 years 50 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

Hmm...

Done, it's set to block. Still weird, though. Sorry bout the inline, I'd meant to take it out; at first I tried it out because putting the clearall in, even given width height padding margin and fontsize of 0, took up space. I'm not too distressed if it does, I was just trying to mitigate it if possible.

Oh well. As long as the page continues to misbehave I've got bigger problems to worry about....

-- Zearin Galaurum
http//tony.gonk.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Site appraisal please?

Oh well were getting closer.
Try not floating the item-p class so it just wraps around the image.
Also add some margin-right to the image and we should be getting closer still.

Zearin Galaurum
Zearin Galaurum's picture
Offline
Regular
Maryland, USA
Last seen: 13 years 50 weeks ago
Maryland, USA
Timezone: GMT-5
Joined: 2004-02-07
Posts: 34
Points: 0

Veddy close indeed!

Ooh! Cool! I did it and it did something I didn't expect happened--the item-p's light yellow background goes behind the image and it wraps below the image when there's enough text (see the War3 description). I like it! Unintentional but not unwanted. I love happy mistakes.

The effect was close but not quite in Netscape and Opera so I played around with some margins and padding, the end result being roughly equivalent to what I started with. I think they pretty much match now.

The only conundrum left is the item-links ... I understand that padding is added to the overall width. I think that's a royal pain in the arse. I want item-links to be 100% width of its parents (item-container), but what if I want pixel and/or EM for padding? Really, I wish the W3C would not have opted to add padding to a block's dimensions. Really.

I'm aware the footer sits on top of content in the non-IE browsers. I'm currently trying to get a faux-frame footer (or header) like the examples here:
http://css-discuss.incutio.com/?page=FooterInfo

They look fantastic! But when I tried them they didn't work and some weird stuff happened, so I reverted to my current footer. One problem at a time I guess. This thing with the item-p/container/links is almost through and I'm excited that it's been possible with no tables, even if it has been more work. Actually it's been a learning experience--thanks! Smile

So, uh ... got any suggestions for item-links? Laughing out loud (Re-linkage: http://tony.gonk.net/games/index.html )

-- Zearin Galaurum
http//tony.gonk.net