Am I missing something? (html/mozilla question)

[xouper]

If it helps, here's a screenshot of what I'm seeing in IE from your server:

http://www.xoup.net/img/ratcomp.jpg

 

[shanek]

The images are pngs, of course, but they've been supported since IE4 at least, and they open in any other application.

IE is really funky about pngs. It doesn't handle transparent pngs well at all. I'd love to use pngs all the time, everywhere, but until Microsoft gets their act together it's just not worth the hassle and the headaches.

 

[Lord Emsworth]

I don't have much knowlegde about webpage design, but methinks you forgot "/script" in the head of the html of the left frame.

Substitute all the square brackets with poity ones and try this:

[head]
[title]Left navigation page[/title]
[script type="text/javascript" src="js/spec.js"/]
img {
border: 0px;
}
[/script]
[style type="text/css"]
[/style]
[/head]

At least it works now for me in my primary browser iCab and in MSIE 5.2 mac, although IE blathers something about script errors and objects that are expected. FWIW

 

[Wudang]

If you don't mind me butting in, since you guys seem to now web design. I'm trying to get to grips more with CSS where I'm way behind the times and am struggling with getting the "box model" to do what I want. In particular, I've been using Brainjars tabs demo as a model. The one thing I can't seem to do is remove what I believe to be the margin between the tabs. E.g in his tabs I want to remove the white space betwen the tabs.

I scanned the proofs of the wedding photos to put on the web so family can decide which ones they'd like copies of and then I thought "this could be a little better" and 5 hours later here I am.

It looks great* in mozilla but in IE the lack of support for border-radius makes it look a bit clunky.
* for suitable values of "great"

 

[shanek]

If you don't mind me butting in, since you guys seem to now web design. I'm trying to get to grips more with CSS where I'm way behind the times and am struggling with getting the "box model" to do what I want. In particular, I've been using Brainjars tabs demo as a model. The one thing I can't seem to do is remove what I believe to be the margin between the tabs. E.g in his tabs I want to remove the white space betwen the tabs.

First off, drill this into your head: margin, border, padding, from outside to in. Margin, border, padding. Margin, border, padding. Margin, border, padding. Margin, border, padding. Margin, border, padding.

Now that that's over with, let's go over how to make two items appear directly together. First and foremost: NO WHITESPACE. At all. Not a space, not a newline, nothing, or else it will be interpreted by the browser as a whitespace and you'll get the space no matter what you do. A good way to do this and maintain readable formatting (I've found) is, instead of:

<div class="tabs">
     <span class="tabStyle">Tab 1</span>
     <span class="tabStyle">Tab 2</span>
     <span class="tabStyle">Tab 3</span>
</div>

Do it like this:

<div class="tabs">
     <span class="tabStyle">Tab 1</span
     ><span class="tabStyle">Tab 2</span
     ><span class="tabStyle">Tab 3</span>
</div>

The browser now ignores the whitespace since it's inside the </span> element.

Of course, make sure you have nothing else causing spaces. For example, if it's a table, make sure cellpadding and cellspacing are both set to 0.

If you've done that, then CSS should be the only thing determining the amount of space between the tabs. So just set the margin to 0 if you're using a CSS border to surround your tabs:

.tabStyle {
   margin: 0;
   border: solid 1px #AA00FF;
}

If you're not using the CSS border and you're using, say, an image or something else that's inside the element itself, then you also need to set padding to 0. Remember: Margin, border, padding.

.tabStyle {
   margin: 0;
   padding: 0;
}

It looks great* in mozilla but in IE the lack of support for border-radius makes it look a bit clunky.
* for suitable values of "great"

That's IE for you. They just refuse to implement CSS correctly. It's great to use Mozilla for testing, since Mozilla, having followed the standards, will let you know if you've done anything wrong. But you will want to make sure it displays well in IE, of course, since that's what most people use. And there you run into all sorts of stupid little quirks and nonstandard bull$#!7 that IE does that isn't documented anywhere. I probably spend an extra 25-50% of the design time just making it look good in IE. Fortunately, every successive version gets closer and closer to the standards, so it gets easier as more people upgrade.

 

[Wudang]

Thanks, I'll have a play.

 

[Wudang]

Shanek, I owe you a beer. All I did was delete the whitespace between the </a> and <a> tags and it worked.
My next task is to drain a swimming pool, fill it with caterpillars to the brim then throw the IE developers in and watch them drown in bugs - it seems so *~%$ing appropriate.

 

[Wudang]

And looks like the last bit is bullet-proof rounded corners