Web Design Advice

[Springheel]

I'm redesigning my online gallery. I have it looking exactly the way I want it in Netscape, but everything is shifted to the right when using IE. I can't seem to find a way to fix it in IE without screwing it up in Netscape. Anyone know how I can fix the following?

 

Here's how it looks under Netscape:

 

 

And here's how it appears under IE:

 

 

 

My style sheet includes the following:

 

div.container -- the entire tan section

{

background: tan;

width:750px;

min-height: 785px;

margin-top: 10px;

border:3px solid gray;

}

 

div.side -- the tall picture on the left

{

position: relative;

float: left;

top: 20px;

left: 20px;

height: 630px;

width: 250px;

border-style: none;

}

 

div.buttons -- the menu buttons on the right

{

position: relative;

top: 20px;

height: 63px;

width: 440px;

left: 135px;

background-image:

url('bgbuttons.jpg');

background-repeat: repeat-x;

}

 

div.maintext -- the text part

{

text-align:justify;

position: relative;

height: 600px;

top: 50px;

left: 135px;

width: 440px;

 

}

 

The last two sections are the ones that seem to be off. I tried using a fixed position instead of relative, but that messed it up in Netscape.

[pakmannen]

When you say Netscape, do you mean the Firefox renderer? (As in the new netscape version)

 

Position:fixed is not understood by IE. It just reverts back to absolute positioning. Min-height is also not understood by IE, so you might as well go with height:auto there (unless you really want that min-height I suppose)

 

As far as your problem goes, I would guess it has something to do with the float and different interpretations about where relative blocks should be placed. I'll take a look this afternoon, if no one beats me to it.

[Domarius]

I'm sure your problem is a known one - I'm just not involved in it enough to remember. There is a guy I know that knows like, everything about getting things to look right in all browsers.

[oDDity]

Don't forget to check it in opera as well. Thta's where I usually find problems, and it's a very popular broswer now since it went freewasre.

[Springheel]

There is a guy I know that knows like, everything about getting things to look right in all browsers.

 

Does he have a site somewhere? I'm not terribly good at this--it takes me a lot of trial and error to figure out how to do the layout, and trial and error doesn't work very well when something works with one browser but not another.

 

When you say Netscape, do you mean the Firefox renderer? (As in the new netscape version)

 

I've checked it with Netscape 7.1 and 7.2...don't know if there is a newer version.

 

As far as your problem goes, I would guess it has something to do with the float and different interpretations about where relative blocks should be placed. I'll take a look this afternoon, if no one beats me to it.

 

Thanks pak. If you want to see the source, the pages are currently up here:

 

http://www.mindplaces.com/html2/index.htm

 

and the style sheet is http://www.mindplaces.com/html2/style1.css

[New Horizon]

Yeah, I see it's doing the same thing in Opera and Firefox.

[pakmannen]

(Still at work) The new Netscape (version 8) uses both the Firefox and the IE renderer. You switch between them using a little icon located in the statusbar.

 

Reg. Opera: it's true that it's got a few flaws when it comes to rendering, but the errors you get are (mostly) easier to fix than those you get in IE. Which isn't that weird considering that Opera has a lot better css-support than Microsoft's reader.

[pakmannen]

Alright, I checked the code, and pretty much rewrote the whole thing.. Sorry about that. Anyway, I slimmed it down since you had a lot of unnecessary divs and tables and whatnot lying around.

 

The problem was what I thought it was, different interpretations of the "float" property. My code should work in IE, Mozilla and Opera. Don't have Netscape installed so I guess you'll have to check that one.

 

If you have any questions about the code or anything just ask.

And here it is (you only need to download the html and the css file)

[Springheel]

Wow, thanks Pak. I'll have to go over it and see what you've done.

 

 

edit: Definitely looks a lot cleaner than my version. I'm not sure what these lines mean though:

 

margin:0 0 2em 0;

 

I assume it's setting the margins on all four sides, but what does 'em' mean?

[Domarius]

Does he have a site somewhere?

http://www.dontlament.com/

 

Actually he has another site or something, with actual tutorials I think - I will email him for it.

[Springheel]

Dammit this is frustrating. I want to modify things just slightly, to make the container closer to the original size. I change the container to 735px wide, and then add a margin of 1em to the left of the div.left and to the right of the div.content. Simple, right? In Netscape, it's perfect. In IE, the left image does not line up with the title. It's as if the two browsers are using different 'em' widths.

[Domarius]

Yeah I remember something - IE considers margin values, padding etc. as part of the total size of something. Mozilla doesnt. Can't remember the specifics yet, or what the workaround is... I emailed my friend, he should get back to me.

 

There are ways to get them looking similar so you get a nice comprimise. Sometimes the solution never looks EXACTLY the same but it will look good enough in both cases.

[OrbWeaver]

Dammit this is frustrating. I want to modify things just slightly, to make the container closer to the original size. I change the container to 735px wide, and then add a margin of 1em to the left of the div.left and to the right of the div.content. Simple, right? In Netscape, it's perfect. In IE, the left image does not line up with the title. It's as if the two browsers are using different 'em' widths.

 

I think your expectations are too high. HTML was never intended for exact, per-pixel alignment, and attempting to get this right can be a real struggle.

 

It is also arguably not a very good way to design a web site which might be viewed on different platforms with different font sizes and resolutions.

[pakmannen]

Yeah, "margin:x x x x" and "padding/border whatever x x x x" are shortcuts. The order: top right bottom left.

 

You don't have to use em, I just did it out of habit. You could code your page with px instead, since the other measures are done like that. Em is a dynamic unit, and 1em is equal to the current text-size. Confusing? In short, it's used when you want to create pages that scale well when the user changes his font-size in the browser. It doesn't make sense to use in your case though, so it's probably better to stick with pixels.

[pakmannen]

http://www.dontlament.com/

 

Actually he has another site or something, with actual tutorials I think - I will email him for it.

You might want to tell your friend his page doesn't validate

[Domarius]

Yeah I think that's his old site that he doesn't use anymore! Sorry about that. I'll check with him anyway.

 

@Spring - here is the info you need;

 

Your problem is with somehting called the box model, and IE makes a mess

of it. its easy to if using conditional statements. You can google both

these. Go to alistapart.com, its a great site, or

http://www.alvit.de/handbook/

By conditional if statements, he means you make an if statement (done any programming before?) that says "if mozilla, display this, but if IE, display this instead".

[Springheel]

Ah, thanks Dom. A search for that topic turned up this:

 

Normally the div.logo has a left margin of 22px. However, Explorer Windows is buggy when it comes to margins of floated elements: it doubles them. Therefore I wanted to tell Explorer Windows to use a 10px margin instead. The conditional comment does so.

 

Which sounds like my problem.

 

edit: Yep, just added a conditional element for IE, and it fixed it!

[Dram]

Yep, just added a conditional element for IE, and it fixed it!

 

Great to hear

[Domarius]

Awesome news Glad to help.

[pakmannen]

What exactly is it you're trying to do? Conditional elements are only supposed to be used as a last resort. (And they're annoying since you have to put css code in your html document, and thus update two files when you want to make a change)

 

Margin is buggy in ie with floated elements yes, but padding is not, so if possible, try to replace whatever margin you want to change to a padding instead.

[Subjective Effect]

You can put conditional elements in css files. I do it all the time. There are few layouts I use that both FF and IE render properly (IEs fault natch).

 

Of course when I say conditional elements I mean bits that only IE can or cannot see (depending on the situtation).

 

I say pah to last resorts. I build layouts with these IE quirks in mind. I think you have to.

[Springheel]

What exactly is it you're trying to do? Conditional elements are only supposed to be used as a last resort. (And they're annoying since you have to put css code in your html document, and thus update two files when you want to make a change)

 

IE was doubling the margin width for some reason. All I did was add a conditional statement to the html document, changing the margin value by half for IE. Works fine and I didn't have to change anything in the css file.

[pakmannen]

You can put conditional elements in css files. I do it all the time. There are few layouts I use that both FF and IE render properly (IEs fault natch).

 

Of course when I say conditional elements I mean bits that only IE can or cannot see (depending on the situtation).

 

I say pah to last resorts. I build layouts with these IE quirks in mind. I think you have to.

Wait.. By conditional comments I assume they were talking about:

<!--[if IE]>
<style>
#content {height:100%}
<![endif]-->

You can't add those things to the css file as far as I know. Can you?

 

@Spring: Did you try to replace the faulty margin with a padding instead?

[Subjective Effect]

Oh, I thought these were the thing:

 

div#hack_test{

html>body div#hack_test{

 

IE doesn't see the 2nd one.

[Springheel]

@Spring: Did you try to replace the faulty margin with a padding instead?

 

That also seems to work.