PDA

View Full Version : DIVS not displaying correctly in IE


Finland Blue
05-20-2010, 08:01 AM
I've been playing with a new layout.

http://www.travel-experience.net/new.htm

Looks as I expect in Chrome and Firefox. But in IE, totally wrong.

Can anyone advise me why?

edbr
05-20-2010, 08:49 AM
might be the javascript but i'm not too up on it
these warning show


line 62 column 403 - Warning: '<' + '/' + letter not allowed here
line 62 column 666 - Warning: '<' + '/' + letter not allowed here
line 62 column 672 - Warning: '<' + '/' + letter not allowed here
line 64 column 103 - Warning: '<' + '/' + letter not allowed here
line 106 column 14 - Warning: '<' + '/' + letter not allowed here
line 161 column 1 - Warning: <script> inserting "type" attribute
line 381 column 185 - Warning: <img> id and name attribute value mismatch

and explained here
Cause:

The 2 characters "</" have been detected in a wrong place.
Example:

In most cases, this is due to wrong javascript:
chrome://tidy/skin/error.pngdocument.write("</h1>"); chrome://tidy/skin/good.pngdocument.write("<\/h1>"); Solution:

Add a "\" in the javascript code.

Finland Blue
05-20-2010, 09:29 AM
Thanks for the reply. I edited those things (all except line 161, I don't know what that means ,,, )
But, no change to the way it displays in any of the browsers, so IE still appears to put the main content and right column underneath the left column for some reason ...


... I did notice though, that if I take away the main image, then the main content and right column display as expected in IE.

Corrosive
05-20-2010, 09:33 AM
I'm not getting that in my IE but the site is left aligned rather than centred as it is in Chrome.

Finland Blue
05-20-2010, 09:46 AM
Which IE version you have? It displays wrongly in 6.0 and 8.0 that I tried.

And, yes, you are right, it also does not centre, like it does in Chrome/Firefox.

any ideas how to change the centreing, if not the way it displays the divs?

Corrosive
05-20-2010, 09:56 AM
Now it looks broken in IE for me. That's odd. One thing that looks strange is you choosing to display your divs (naturally block elements) inline but not sure that is causing the problem.

I'd suggest re-starting the page and the layout and seeing at what point the layout breaks. That's what I do when the validator shows up nothing as an obvious problem.

Finland Blue
05-20-2010, 10:21 AM
Thanks for the reply. I'm new to working with DIV layouts : not sure what you mean by disaplying divs "inline"?

But, I fund if I change the image display to 604 px instead of 607, then it "fits" correctly in IE - although the image can be seen justified right in IE with a 3px (I presume) of white space on the left. In Firefox and Chrome this white space displays on the right!

I don't know why IE won't display the image when its set to 607px and the other browsers do. The container is set to 780 px, the left and right columns to 173, and the middle to 434, which should be exactly right.

Corrosive
05-20-2010, 10:50 AM
I don't know why IE won't display the image when its set to 607px and the other browsers do.

Short answer is because it is a dog!

When I say display inline I mean;

#aside
{
float: right;
width: 173px;
padding: 0px 0;
margin: 0 0px 0 0;
display: inline;
}

I'm assuming you had a reason to put it there?

As for the picture messing the code up you could well be right and it may go back to the errors that edbr found.

Did you create this layout from scratch or is it something you have downloaded and changed?

Some of the approach is bloating your code. For instance there is no need to use javascript rollover to create your buttons. They could be in an unordered list using the link, visited, hover, active psuedo classes to swap the background gradient to achieve the same effect.

I'd also highly recommend placing javascript in a separate .js page and linking it in.

gentleone
05-20-2010, 11:30 AM
To center it for IE try this:



body {
text-align: center;
}

#container {
margin: 0 auto;
width: 780px;
background: #fff;
text-align: left;
}


I'm not sure either why we still need this old method to center a layout for IE6 and later, but sometimes we do. :confused:

Finland Blue
05-20-2010, 11:46 AM
Thanks for the help.

I'm new to DIV layouts, so I copied one sample form the internet, which seemed to be more or less what I wanted, and fiddled a bit, learnt a bit, fixed a few issues ... and now found some more issues ;-)

It now centres in IE, thanks for that tip.

Still does not put the picture in the right place though :-(
IE DOES place the picture right though on what is currently the "live" web site, which was in fact my very first attempt at using DIV layout.
See http://www.travel-experience.net/fits.htm

Here though I had some issues about the background of the left column and the border of the right column not working right with different amounts of content. Hence I tested this new version - which did fix that issue ... but brought now the new one re the placing of the image in IE. What is different between the two that makes the image OK in IE in one but not the other ... ?

Corrosive
05-20-2010, 12:14 PM
I'm really struggling to see the difference between the two. I do notice on the new one you've not set any styles for ID #picture whereas you do have styles in the layout that works.

Finland Blue
05-20-2010, 01:20 PM
Thanks for checking it, I really appreciate.

Now I guess, I had better work backwards to the basic layout, and try adding the image then, and see if that works.

Finland Blue
05-20-2010, 01:37 PM
OK, I went back to scratch. All was fine until I added the image, and then the layout goes wrong.
If its now more easy to see what the cause is, without all the Javascripts...
http://www.travel-experience.net/column.htm

The image shows OK in Firefox, Chrome, but now not even the text below it is right.

gentleone
05-20-2010, 02:18 PM
Corrosive mentioned it earlier, but I'm also not so fond at this rule:

#aside {
float: right;
width: 173px;
display: inline;
}
Can you remove the display: inline to see what happens? Or did you do that already one time?

Finland Blue
05-20-2010, 05:22 PM
Changed that now, no change ...

Finland Blue
05-21-2010, 04:30 AM
The only difference between the layouts I can think, with the one that worked was 2 columns, and the one which didn't was 3 columns. Perhaps the picture crossing over 2 columns had something to do with it?

gentleone
05-21-2010, 07:12 AM
The only difference between the layouts I can think, with the one that worked was 2 columns, and the one which didn't was 3 columns. Perhaps the picture crossing over 2 columns had something to do with it?

Yes! That indeed will mess up things. Just add an extra div underneath your top navigation that holds your section menu with a left float and the picture with a right float.

Finland Blue
05-21-2010, 09:41 AM
Like this?

<div id="content-container">

<div id="menupic"> (to hold the left menu and picture)

<div id="section-navigation">
Left column navigation here, float left
</div>

<div id="picture">
Picture image here, float right
</div>

</div> (menupic)

<div id="main content"> (float left)
Main text content here
</div>

<div id="right column"> (float right)
Right column stuff goes here
</div>

<div id="footer">
Footer goes here
</div>

</div>

gentleone
05-21-2010, 11:59 AM
Yes, and you might need to clear your floats here and there :)

Finland Blue
05-21-2010, 12:03 PM
I think ... I found the solution.
http://www.travel-experience.net/aboutusX.htm

But, I have no idea how I managed it other than (increasingly frazzled) trial & error.

gentleone
05-21-2010, 01:25 PM
Good! Another step forward in CSS land :) Next step is not to wrap every element in a div ;)