IE is killing my layout

[pathfinder74]

I finally got everything position perfect in through my style sheet for this page (http://www.mattandpamazon.com/portfolio/webportfolio.html)


I plug it into IE and it's a hot mess.

The biggest thing is that I'm losing the two tabs at the bottom of the frame (resume' and contact). When the page loads I can see one of them hidden behind the main stuff.

Could this be fixed by a z-index? I'm thinking no since when it flashes there before disappearing it's nowhere near in the right place.

The positioning of the name is slightly higher...

The other annoying thing is that the center div with the tan repeating BG is set to auto size so it reaches the top and bottom of the screen without the scrollers. In FF it works like a champ.

Suggestions? Because short of repositioning everything for IE I'm not entirely sure what's causing these problems.

[bluemoon562]

I love your design in Firefox.

I see what you mean about the IE snafu. I think the problem has to do with the containers but I'm not sure.

I hope someone has a solution for you quickly and am sorry that I don't have any suggestions. I'm too much of a newbie.

Good luck.

[Centauri]

First off, IE is being thrown into quirks mode by the xml declaration before the doctype - remove this <?xml version="1.0" encoding="utf-8"?>

You also have a few css errors (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.mattandpamazon.com%2Fportfolio%2Fstyle.css&profile=css21&usermedium=all&warning=1&lang=en).

[WebJoel]

.sample_frame
{padding: 0px 0px 0px 0px;
margin: 18px 0px 0px 5px;
float: left;
clear: right;
height: 315px;
width: 543px;
border: 2px single rgb(250,0,255)} huh? Do you mean "solid"? There is no "single" I beleive...

-Still searching for the cause of the problem... :)

edit:

ARRGH! -C beats me again!

[pathfinder74]

yeah.... the border errors I'm not so much concerned with... I'll remove them but I seriously doubt they're any cause for the main problem.

I usually have the border things in a lot of the containers just so I can turn them on and off to look at their size and what not... gives me a better idea of what may or may not be bumping against other things.

I'll get rid of <?xml version="1.0" encoding="utf-8"?> as well.

I also didn't think to check the screen resolutions.... At 1024x768 it gets scrollies even in FF. D'oh!!!

[Dragonkai]

Try Firebug extension with firefox...

Look at all the dimensions and stuff their in "Layout"

Then compare that to your code.

Then hardcode each dimension into the code that FF guessed.

It should fix some errors...

Then if it still doesn't work, you could try doing ie specific stylesheets.

However, make sure you validate your code first!

[pathfinder74]

I hate doing IE style sheets.... but I guess that's really the best alternative to wasting hours trying to get something to line up that will never be consistent

I'll try that extension... not really sure I understand what it does

[pathfinder74]

What are some "techniques" that are absolutely the same across all browsers that won't cause positioning inconsistencies?

Which ones are the worse to use that will almost definitely throw things off in one browser?

[WebJoel]

"margin:0 auto;" in conjunction with any stated width (including a %-width) is consistant across browsers CAVEAT: be sure to add any valid !doctype to ensure that IE less-than/7 browsers get it right. Else, IE w/out "!doctype" is "quirks mode" and things get messy not to mention "margin:0 auto; +width; for centering" no longer works...

I avoid negative left or right margins for IE's sake unless we're only talking about a few pixels that won't break a page if not carried out correctly. IE can get negatives left/right ..messed-up.
Seems okay with negative top or bottom marings though..

<!-- comment --> tags MUST have a 'whitespace' after the "<!-- " and again before the " -->" because under some circumstances, (at least older versions of~) Firefox (!!) while NOT actually displaying the 'comment', will give it 'line-height' in your visual layout and you will have this unyeilding 20px high 'padding'-thing that is un-diagnosable until you 'click-hold-&-drag' your mouse on the page to 'highlight it', -then, the "<!--comment-->" (<-- as written, incorrectly) text will be revealed! I spent 3/4 of an hour once testing this for a client whom was complaining of this mysterious 20-pixel somethingoranother margin or padding that was not supposed to be there...

I saw this in Firefox 2.x in a page that had a LOT of javascript action going on, and I cannot seem to be able to reproduce it in Firefox 3.0 so maybe this was fixed, but a comment-tag so written in 'invalid' anyway, so should not be written as shown (without withspace/s)..

There are more oh, I assure you.. :o Most are just validational things being ignored and displayed but incorrectly so on IE, like "color: 000000;" works for IE but fails for Firefox, as it requires a octothorpe character (" # ") to make it work, etc..

I think that the BIGGEST browser inconsistancy is IE's not being able to get "height:100%;" right for any element UNLESS "html, body" are ALSO "height:100%;". -The more anyone works on webs, the more one finds to not like about IE..

[Centauri]

Probably the one "technique" that will allow you to achieve consistancy is to continully check in different browsers whilst developing - every time you add or adjust something, test it cross browser before proceding. This way if anything crops up, the cause wil be known and it can be addressed quickly before it becomes extremely difficult to find.

[Dragonkai]

Ah, then wouldn't it be great if we had a browser aggregation software? So we didn't have to get them all.

[slaughters]

The Firefox "IE Tab" pluggin comes in real useful for this kind of checking.

[pathfinder74]

Finally got that issue worked out


here's the results. Last I checked it works in IE (http://www.mattandpamazon.com/portfolio/portfolio%20page/HESSPORT/webportfolio.html)

Now I need to figure out how to get it where when you mouseover the images a description shows up in the right pane where the text is

[Centauri]

Now I need to figure out how to get it where when you mouseover the images a description shows up in the right pane where the text is

If the spans within each <a> were to contain the text you wanted to display to the right, then these spans can be positioned absolutely (with respect to .sample_frame if you also apply position:relative to its style) and normally positioned off to the left of the screen (not hidden with the display property) and brought into position on hover of the <a>.

You can also save a lot of code in the css by defining the all the common properties of the thumbnails by referencing the container, and then you only need to specify the background image for each thumbnail link.
.sample_frame {
padding: 0px 0px 0px 0px;
margin: 18px 0px 0px 5px;
float: left;
position: relative;
height: 315px;
width: 543px;
}

.sample_frame a {
float: left;
width: 107px;
height: 101px;
background-repeat: no-repeat;
background-position: 0 0;
}
.sample_frame a:hover {
background-position: 0 -101px;
}
.sample_frame a span {
position: absolute;
top: 20px;
left: -999px;
width: 225px;
height: 280px;
background: #61553D;
color: #000;
}
.sample_frame a:hover span {
left: 566px;
}
#ML {
background-image: url("MLbutton.gif");
}
#DnT {
background-image: url("Dntbutton.gif");
}
#AC {
background-image: url("ACbutton.gif");
}
.
.
etc
.
.

[Dragonkai]

This is just my two cents, it could be better if the text were brighter. Right now it's not that easily read.

When I mean text:

I mean this:



Welcome to Matthew Hess: An Online Portfolio. Here you'll samples of various work I have done in the last 5 years. Crestwoodonline

My resume reflects my experience and education. Click here to download my resume.

[pathfinder74]

IE is throwing everything out of whack again... different way but still a problem. Probably something I did when I added all of the lightbox stuff and the rollover images.

I was able to incorporate that rollover thing using "sprite" or whatever the term where it's one image. Works pretty well.

This is just my two cents, it could be better if the text were brighter. Right now it's not that easily read.

I changed the font-weight to bold and it makes it easier to read. I tried white but it looked too bright... drew too much attention away from everything else... not enough balance with the rest of the page.

[pathfinder74]

Just so I understand what's happening there... everything contained in the sample frame takes on all of the attributes(?... or is it properties.. always confuses me). So all of the <a> tags in the .sample_frame will all have the same attributes? I think I'm getting it.

But, and once I upload my revisions (that don't include your streamlined code yet) I think you'll find two things wrong:

(1) IE makes every button after the first in the row step down in succession. I don't get it. If I "manually" adjust using margins then it's all goofed up in FF. I could do two separate sheets... one for IE and one for FF if necessary, but I can't imagine that's completely necessary.
(2) IE7 renders some of the colors slightly off. I don't know if it's because they're a different format or what... like the rollover images aregif format while the BG of the sample frame is a JPG... and there is just a slight difference in the color. Also not in FF.

Ok... me go back to work... thanks again to everyone.

If the spans within each <a> were to contain the text you wanted to display to the right, then these spans can be positioned absolutely (with respect to .sample_frame if you also apply position:relative to its style) and normally positioned off to the left of the screen (not hidden with the display property) and brought into position on hover of the <a>.

You can also save a lot of code in the css by defining the all the common properties of the thumbnails by referencing the container, and then you only need to specify the background image for each thumbnail link.
.sample_frame {
padding: 0px 0px 0px 0px;
margin: 18px 0px 0px 5px;
float: left;
position: relative;
height: 315px;
width: 543px;
}

.sample_frame a {
float: left;
width: 107px;
height: 101px;
background-repeat: no-repeat;
background-position: 0 0;
}
.sample_frame a:hover {
background-position: 0 -101px;
}
.sample_frame a span {
position: absolute;
top: 20px;
left: -999px;
width: 225px;
height: 280px;
background: #61553D;
color: #000;
}
.sample_frame a:hover span {
left: 566px;
}
#ML {
background-image: url("MLbutton.gif");
}
#DnT {
background-image: url("Dntbutton.gif");
}
#AC {
background-image: url("ACbutton.gif");
}
.
.
etc
.
.

[Centauri]

Can't check it - I get a 404 error on the links.

[pathfinder74]

Can't check it - I get a 404 error on the links.

sorry... took forever to upload it to my server

here it is (http://www.mattandpamazon.com/portfolio/webportfolioIE.html)

[Centauri]

You have a couple of html errors - missing closing > on li's :<li <a id="MLC"and <li <a id="country"

I think you may also need to float the .sample_frame li's left as well.

[pathfinder74]

thanks...

[pathfinder74]

Ok... I'm trying something different to make it consistent across both browsers... I kind of have it, kind of not.

I've deleted the top- middle- bottom-row divs. Since I'm using UL's it seemed a bit redundant. It cured a major issue that IE was having. I had a problem with a big space between the UL and the sample_frame. I ditched the padding and margin for the UL and it got rid of the gap. I'm so proud to have figured that out. :P
Still working through it but it's working out better than I though.

[pathfinder74]

ok.... test drive time

link (http://www.mattandpamazon.com/portfolio/webportfolio.html)

probably typos.... didn't proofread yet.

I'm pretty happy with how I fixed some of the issues with cross browser compatibility... without even asking for help

let me know how it works out.

biggest issue is file size of images. Haven't figured out how to do the "next/previous" thing in the lightbox without putting several gallery thumbnails up front.

I was thinking I could span the additional ones an just stick them off to the side... if I even needs them... I have no clue. If I figure it out I can get rid of the huge gifs and go for individual ones. I know they are bogging things down pretty bad. I just wanted to get through the major issues for now.

I also want to do a target: blank for the flash banner and make the size of the blank browser smaller... the fullsize looks like crap. I don't know if this is something I can do in HTML or if I need to d it in javascript.

I have it in another website I did... but I can't make heads or tails or it at the moment.

[drhowarddrfine]

Ah, then wouldn't it be great if we had a browser aggregation software? So we didn't have to get them all.
Well, the biggest hurdle is just to use any standards compliant browser and code/test using that one. Chances are it will work everywhere just fine. For example, I am nearly finished with a restaurant online ordering system. I always tested with Firefox as I coded but it always worked fine in Opera and Safari with no issues. Most people will find this true of their sites, too, but there are occasional slight differences.

The only real "cross-browser issues" are really issues with IE alone. Anyone who uses IE as their test browser will always have problems with modern browsers, so, if you avoid that for you initial testing, the hacks and bugs for IE are well known and you won't have too much trouble fixing them....uh....maybe.

[drhowarddrfine]

Do yourself a favor and validate your html for that list of 97 html errors and your css for that 1 css error.

[Centauri]

Lookin good, but still a few issues with IE6. Most problematic is the unclosed #AMD <a> tag.

You need to sit down and work backwards from the thumbnail sizes and rework the sizes of containers - The thumbnails are 104px wide, but you have set the <a>s to 107px and the <li>s to 103px. FF will allow elements to overhang containers which are too narrow, but IE6 won't. Even at 104px wide, 5 thumbnails is a total of 570px, but the <ul>s are set at 535px and the .sample_frame div is 510px ..... Make sure the mathematics add up.

Not sure also what you are doing with the .Frame_BG and .Frame divs either - you have .Frame set at 810px wide with 15px of side padding, making 825px total, but .Frame_GB is set to max-width of 810px. IE6 won't recognise max-width anyway, so .Frame_BG is full width and therefore nothing is centred in IE6 - better off setting .Frame_BG to a defined width.

[pathfinder74]

The frame BG is killing me because I want it to extend to the bottom regardles of the browner size.. but that one's giving me a hard time. I tried min-height.

I still need to go in and fix those tags...

I haven't been using IE6 to test things in a while.... I guess I should knowing not everyone has upgraded, huh?

[Centauri]

Good grief - what started out as a seemingly simple adjustment to correct the .Frame_BG height and width ended up going right through all element sizes and positioning as I mentioned above, getting rid of unnecessary styles and absolute positioning....

To get the .Frame_BG to go full height, you need to set a min-height of 100% - but this also means you cannot apply vertical padding or margins. You also need to kill the default margins on the body.

The changes I made are too numerous to go through, so compare the following code to what you have now :

styles.css:html, body {
height: 100%;
margin: 0;
}
contentFrames.css:.Frame_BG {
background-image: url('tan_bg.jpg');
background-repeat: repeat;
margin: 0 auto;
padding: 0;
width: 824px;
min-height: 100%;
}

* html .Frame_BG {
height: 100%;
}

.Frame {
position: relative;
background-image: url('frame.png');
background-repeat: no-repeat;
background-position: center 187px;
padding: 200px 15px 22px 0px;
width: 810px;
height: 378px;
text-align: justify;
}


.name {
background-image: url('name.gif');
background-repeat: no-repeat;
float:right;
clear: right;
width: 245px;
height: 45px;
margin-bottom: -45px;
}

.name span {
font-size: 1px;
color: #B8A075;
}

.content_BG {
background-image: url('contentFrame.png');
background-repeat: no-repeat;
float: right;
margin: 5px 5px 0 0;
padding: 5px;
width: 232px;
height: 290px;
display: inline;
}

.content {
padding: 0px 10px 0px 5px;
margin: 5px 0px 0px 0px;
overflow: auto;
width: 217px;
height: 280px;
}

.tabs {
position: relative;
clear: both;
margin: 0 261px 0 0;
top: -5px
}
samples.css:.sample_frame {
position: relative;
float: left;
margin: 0px 0px 0px 20px;
height: 312px;
width: 520px;
}

.sample_frame li a {
float: left;
width: 104px;
height: 101px;
background-repeat: no-repeat;
background-position: 0 0;
}

.sample_frame li a:hover {
background-position: 0 -101px;
}
.sample_frame li a span {
position: absolute;
padding: 3px 3px 3px 3px;
top: 12px;
left: -999px;
width: 227px;
height: 280px;
background: #61553D;
color: #000;
}

.sample_frame li a:hover span {
left: 550px;
}

.sample_frame ul {
padding: 0px;
margin: 0px;
height:104px;
}

.sample_frame li {
float: left;
}

[pathfinder74]

Centauri

Was it really that much of a mess, or was it IE6 that couldn't render the positioning I had whereas IE7 and Ff were GTG?

Looks good except that think the bottom tabs use to rest behind the frame and were were bottom aligned. I moved them up to be that way but now that overlap the thumbs.

No props for getting rid of the top_ middle_ and bottom_rows in place of the UL's. Seems kind of redundant and confusing to have them both as I figured it's better code that way. No?

Gonna see if I can move those tabs behind the frame...

Thanks again.

[pathfinder74]

Do yourself a favor and validate your html for that list of 97 html errors and your css for that 1 css error.


I need to change this to transitional...

I don't get why all the "A"s in the text are being interpreted as a mistake that should be an opening anchor tag.

I'm just going to change it all to have the titles in an <h1> tag and the descriptions in a <p>/ Probably better code that way.

[Centauri]

The main reason for those errors listed on the "A"s is due to the <br>s you are using are not closed under XHTML rules - <br> is HTML, <br /> is XHTML. If you are going to declare XHTML via the doctype, then write XHTML, not HTML. If you don't know why you are using an XHTML doctype, then go back to HTML 4.01 strict.

[pathfinder74]

Had it validated. Now I'm just trying to make the titles for the descriptions underlined. I'm using a <object> tag around them and then just doing text-decoration:underline to do it since the spans don't allow block level tags like <h1>. Kind of a pain but I don't know of any other way.

[pathfinder74]

For some reason with name and name span...

In IE.. the span attributes take effect... but the image doesn't display.

In FF the name displays but the span attributes have no effect.

Also... I got the lightbox gallery thing to work. Problem is that the gallery images stack top to bottom. I think because I set the li list-type to none.

I thought there was a way to make the bulleted lists lay side by side instead of stacked... but I guess not. That might have cured part of the problem because I could stack 4 across instead of 3 high.

I used some of the changes from Centauri but some of them were making things act kind of weird... so I stuck with my crapped up code.

[pathfinder74]

The other option I thought of was that the images being stacked are only the button graphics was to position them absolutely one on top of the other. I wouldn't need to bother with a z-index or anything because they all look the same. The way it is now they peek like 2 pixels out below the top image so it bumps all the stuff in the next row down slightly. I ended up just moving things around and tightening up the ul rows... seems to have worked... more or less.

[Centauri]

I used some of the changes from Centauri
Why not try using ALL of it (I didn't type all that for nothing) - you aren't addressing the basic errors in sizing and coding and the whole thing is getting worse in IE6 than it was before..... :rolleyes:

To play around with this more, I would have to set it up locally on my machine, but probably won't have time to do so for several days.

[pathfinder74]

D'oh!!!
I think I did all of your changes and the biggest issue was the tabs thing I mentioned before... it was on top of the frame and positioned below it. So when I moved it up it would obscure the thumbs.

Now my problem is... and I can't figure out for the life of me why... the portfolio text I can't make go away in FF... and in IE I can control the text but the image doesn't show up.

Don't get me wrong... I appreciat everything you did and I will try it again... trust me on that.

[Centauri]

Don't know what you mean by "portfolio text" - I can't see any problem there with FF. The sizes of things haven't been changed and the <li>s still aren't floated, so the thumbnails are still misaligned in IE (7 and worse in 6). The addition of the white borders in the frame area has also upset positioning a bit.

[pathfinder74]

I fixed it.... was one extra } or something.
No more border

should be able to view in IE7 and FF (http://www.mattandpamazon.com/portfolio/webportfolio.html)

[Centauri]

Ahh - that link is different to the previous one posted, so we have probably been looking at the wrong version of the page....

Looks good, but something is causing IE6 to abort loading the page - don't know what that is, but something to do with javascript. With javascript off, IE6 is displaying all of the extra thumbnails as well - I wonder whether these could be set up as basic links with no display instead of trying to overlay them on top of each other :<a href="images/pbbg/ML2.gif" rel="lightbox[Mobslaw]" style="display: none"></a>
<a href="images/pbbg/ML3.gif" rel="lightbox[Mobslaw]" style="display: none"></a>

Not sure why you used the object tags for the description headings - you could have used unclassed <b> tags and styled the .sample_frame b with the desired font decoration, and set it as block display as well to get rid of the need for the <br />s.

[pathfinder74]

Ahh - that link is different to the previous one posted, so we have probably been looking at the wrong version of the page....

Looks good, but something is causing IE6 to abort loading the page - don't know what that is, but something to do with javascript. With javascript off, IE6 is displaying all of the extra thumbnails as well - I wonder whether these could be set up as basic links with no display instead of trying to overlay them on top of each other :<a href="images/pbbg/ML2.gif" rel="lightbox[Mobslaw]" style="display: none"></a>
<a href="images/pbbg/ML3.gif" rel="lightbox[Mobslaw]" style="display: none"></a>

Not sure why you used the object tags for the description headings - you could have used unclassed <b> tags and styled the .sample_frame b with the desired font decoration, and set it as block display as well to get rid of the need for the <br />s.

I think because they were ina span it doesn't allow block elements? I tried a <p> and a <h1> tag... are those block of inline. Either way... when I validated the page it came up with errors on those.

I'll try removing the images on the additional thumbs for the lightbox... good idear. Thanks again.

[Centauri]

You can't put natural block elements (<h>, <p>, <div> etc) inside inline elements like spans or <a>s, but there is nothing stopping you from setting an internal inline element to display as a block. You could even use <strong> tags for this and it would then convey semantic meaning of a heading.

[pathfinder74]

I fixed the issue of the image stacking... just took out the id tag.... worked just fine.

when I use the FF webDev tool and disable the css... the image links don't work. I'm guess the shadow box jacks them all up.
Also... it looks pretty cruddy.

Probably not a huge issue since it's not likely anyone will look at it that way.. but still bigs me. I've been trying to follow some sort of HTML formatting where if you didn't have the css it would like like a regular page... without all the pretty effects, positioning, etc.

[pathfinder74]

Speaking of IE6.... is there a way to install 6 when you have 7 on your pc?
Or is there an add-on for FF that allows you to view in IE 6 and 7?

[Dragonkai]

Runs on windows, download this.

Multiple IEs. Just select what you want.

http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

[pathfinder74]

thank you

[pathfinder74]

Aside from the issue of positioning the BG and sample frame...

I'm looking at it in IE6 and it seems like the issue of the rows not stacking one under the other is because of the additional unclassed href's in the top two rows. They're not visible but their still occupying space as if they were.

I though just positioning them out of the visible area would fix it... position: absolute, left: -999px; top: -999px;.... which didn't work.

So I added in class for all of the ones causing the stacking... and put a display: hidden; just to those.

Seems to have worked, but it's adding a lot of additional crap code which is really making a mess of everything...

I'm going to have to go back and insert Centauri's changes... but I wanted to see if I could do it a different way without asking for help.

The other issue is that IE6 can't do transparent png's, which makes the whole thing look like crap.