# Solved: Problem with display in Internet Explorer



## Aquarian (Apr 24, 2005)

I'm currently giving myself a crash cource in web design with NuVu. I published a page that view very nicely in firefox but IE moves the right navigation boxes to the bottome of the page rather that being at the top. It also changes the font size and style on one area. I can live with thiat, I guess, but not the box move. How do I fix this kind of problem?

Here is the page: http://www.geocities.com/aquarianessence/aquarianessence_2006/eris.html

Here is the style sheet:

/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */

body { margin: 0pt;
padding: 0pt;
background: rgb(255, 255, 255) url(back.gif) repeat-y scroll center top;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
font-family: Verdana,Sans-serif;
font-size: 74%;
text-align: center;
}

abbr { cursor: help;
}

a { font-size: 1em;
text-decoration: none;
color: rgb(204, 51, 204);
}

#image { background: transparent url(about.gif) no-repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
position: absolute;
top: 50px;
left: 0pt;
width: 160px;
height: 300px;
}

a:hover { color: rgb(65, 180, 242);
text-decoration: underline;
}

#toplinks a { margin-right: 6px;
}

span a { margin-left: 6px;
color: rgb(65, 180, 242);
}

span a:hover { color: rgb(65, 180, 242);
}

h1 { font-family: tahoma,verdana,sans-serif;
font-weight: normal;
padding-left: 10px;
font-size: 2.1em;
color: rgb(192, 0, 167);
}

#header h1 { color: rgb(51, 51, 51);
}

#sidebar h1 { margin: 0pt 0pt 0pt 5px;
font-size: 1.4em;
padding-top: 5px;
width: 160px;
color: rgb(51, 51, 51);
}

#leftcolumn h1 { padding-top: 20px;
}

h2 { padding-left: 10px;
font-size: 0.9em;
font-weight: normal;
margin-top: -18px;
text-transform: uppercase;
color: rgb(65, 180, 242);
}

h2 a { text-transform: none;
}

p { font-size: 1em;
color: rgb(34, 34, 34);
margin-left: 10px;
margin-top: -1px;
line-height: 1.3em;
text-indent: 2em;
}

#sidebar p { padding: 4px;
background: rgb(51, 204, 255) url(sidebottom.gif) no-repeat scroll right bottom;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
text-indent: 1em;
}

#sidebar ul { list-style-type: none;
list-style-image: none;
list-style-position: outside;
margin-bottom: 0pt;
padding-top: 0pt;
}

#sidebar li { list-style-image: url(bullet.gif);
}

#header img { border: 1px solid rgb(51, 51, 153);
padding: 3px;
margin-left: 10px;
margin-top: -10px;
margin-bottom: 0pt;
}

#container { margin: 0pt auto;
width: 690px;
padding-top: 0pt ! important;
text-align: left;
position: relative;
}

#toplinks { position: absolute;
top: 12px;
right: 30px;
}

#leftcolumn { float: left;
width: 470px;
}

#sidebar { margin: 10px 10px 0pt 0pt;
float: right;
width: 200px;
}

#footer { border-top: 1px solid rgb(204, 204, 204);
clear: both;
margin-left: 0pt;
width: 677px;
text-align: center;
color: rgb(83, 51, 153);
}

span { float: right;
margin-right: 30px;
}

.sidebox { background: rgb(51, 204, 255) url(sidetop.gif) no-repeat scroll left top;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 185px;
margin-bottom: 15px;
}

Any suggestions greatly apprecieated. If I learn how to fix it here, I'll be able to do it with the other pages and different style sheets, I think.


----------



## WendyM (Jun 28, 2003)

Hi Aquarian,
I don't know about the positioning, but the problem with your font display is all of the tags you have included. If you take those out, your font should be consistent with the display in Firefox. For example, in the paragraph that begins "It just so happens that 19 Aries is the degree of the Sun's greatest exaltation.", you have a font tag just before "She went direct 2 days later ..." and that's causing the change in your font. You also have places where you have four consecutive tags for no apparent reason. From your style sheet and your code, it doesn't look like you ever actually want these tags. You do have a couple of places where you use for something, but even those should probably be done in the style sheet. The font tag has been deprecated. If I were you, I'd do a search for and delete every instance of it (along with the corresponding tags). It'll give you much cleaner code and hopefully eliminate the conflict you're having with the display. I'd also go through and take a look at your tag. It repeats in several places too, and sometimes is opened and closed with nothing in between. I hope that helps.


----------



## Aquarian (Apr 24, 2005)

Thanks, Wendy. That's something NuVu is doing for some reason. I noticed a bunch of extras in source view, deleted them but the next time I went back to source view they were back. I can edit from the web site location and they shouldn't come back but I'll have to do that with every page I'm redesigning. Ugh  

Thanks, again.


----------



## WendyM (Jun 28, 2003)

I don't know whether NuVu allows you to search the whole site at once, but you may be able to do a global search for and replace with nothing. The problem is that if you search for and replace with nothing, you'll also be deleting the closing tags for the font tags you legitimately need to close. I'd probably do it anyway because it would isolate those other font tags (like and ) and you'd know which ones you need to fix. No matter what, it's going to be something of a pain.

It would also be a good idea to validate your site at http://validator.w3.org/. Once you remove the code that's generated by the server there aren't too many errors, but you have things like heading tags within span tags that should be fixed. Good luck!


----------



## Aquarian (Apr 24, 2005)

This is depressing. I ran the check on that page and it says "This page is not Valid XHTML 1.0 Transitional!" and it has 39 errors. How will I ever track down things like Line 1144 column 209? I thought I only had two columns. Shows what I know 

Even though you made me depressed, thank you. Just kidding. I really appreciate your help.


----------



## WendyM (Jun 28, 2003)

Don't despair. You only have about 9 "real" errors. The first thing you should do is take out the lines of code above lines like . That appears in several places and if you whack all of it, you'll find that your errors go way down. Then, after you validate your page, tell it to revalidate, but check the box for "show source". All of your code will appear below the errors with the line numbers so you can check which line it's referencing. The line number refers to the line of the code, and the column number refers to the character position in that line of code (not the number of columns on your page). It's not as daunting as it looks.


----------



## Aquarian (Apr 24, 2005)

Oh good. Here that big sigh of relief? Actually I did just do the show source option and that makes it much more doable. I'll tackle it in the morning when I'm fresh.  

Thanks again.


----------



## thecoalman (Mar 6, 2006)

A good text editor will give you the line count....

As far as your positioning problem your content is probably exceeding the width of the viewport. For example in IE if you float a div left and the content to the right exceeds the width of the viewport it will drop it below the float even though if it is still positioned on the same left margin, effectively it just moves it down. Here's a simple example:


```
<html>
<body>
<div style="width: 100%; background-color: #000000;">
<div style="width: 150px; float: left; height: 500px; background-color: #FF0080;">Link Text</div>
<div style="background-color: #00FFFF; margin-left: 160px;"><img src="http://www.40lbhead.com/headfiles/albums/userpics/10002/normal_40_LB2.jpg"></div>
</div>
```
I fought with this myself for quite some time and finally gave up having not found a suitable solution and have since designed all my sites using absolute positioning.


----------



## Aquarian (Apr 24, 2005)

Thanks, coleman. This is really new to me, the css was designed by someone else and I'm just editing, learning as I go. So are you saying this part of the style: 

#leftcolumn { float: left;
width: 470px;
}

#sidebar { margin: 10px 10px 0pt 0pt;
float: right;
width: 200px;

is what is causing the problem and I have to change it to an absolute rather than float, then also change the width of the left column to fit IE? If so, what is the max px of IE viewport?


----------



## thecoalman (Mar 6, 2006)

Aquarian said:


> is what is causing the problem and I have to change it to an absolute rather than float,


I'm not saying that is the cause but if you try that code above you'll see it does what you describe. *** I forgot to mention that it will work fine, it drops below when you decrease the width of the window.**** My suggestion would be to strip the surrounding code and work from there. Using absolute positoning works very well because it's absolute but it has it's own problems as well such as not expanding whatever div it's in. This will probably not work witht the code you have....



> If so, what is the max px of IE viewport?


Vieport refers to the width of the monitor, the max would depend on whatever the user has set. Try setting your monitor to higher resolution, most likely your floats will go where they belong.... If that works you need to decrease the width of them.


----------



## Aquarian (Apr 24, 2005)

Well coalman, I've tried what you said, I tried making my page smaller because I though yahoo geocities side bar may be causing it to be too wide, I played with resolutions, I tried changing to absolute position. Noting changes it at all. Is my only option to have all my horizontal at the top?

Also, I cleaned up all the font tags (Thank you Wendy :up: ) and tried to validate but it insists it is not a valid xhtml transitional. From the error codes, it seems to have to do with yahoo. Their editor won't let me view or delete the lines from them that were inserted. They inserted:

</layer></style></noscript>[/TABLE]</script>









Now the 1st error with the explaination:
Error Line 2, column 12: there is no attribute "style" .

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that *uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" *(this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

Could my problem be that geocities yahoo is making this a frames document and I'm trying to make it a transitional xhtml? Could the problem be that yahoo gave it an html extention instead of xhtml?

There are 30 errors, all from yahoo's lines. It was giving an error because it had the line so I replaced it with just and it is ok with it. But that still doesn't get rid of yahoos lines or get me a validated page or put my navigation boxes where they belong. I realized that the only place it displayes correctly is on my desktop with fox fire. Nothing displays right through the server.

Help pretty please


----------



## WendyM (Jun 28, 2003)

Hi Aquarian,
I think I've gotten to the bottom of why your menu is appearing at the bottom. You have a couple of problems with your divs. Currently, your sidebar div is within your leftcolumn div. You need to close the leftcolumn div before you start the sidebar. So add a just before and take one out at the end. Also, your footer id is appearing within the sidebar div, which is probably not what you want since the sidebar floats right and the footer doesn't. I'd add a just before

and take another one out at the end. You'll lose the formatting that the footer is inheriting from the sidebar, so if you want to keep it, you'll need to add it to the footer id in the style sheet. Thirdly, your container doesn't allow enough width for the menu to exist next to the left column. Your container width is 690px, your leftcolumn is 470px, and your sidebar is 200px with a margin of 10px on each side. That would all be fine, except that you have an image in the left column that's 501px and it pushes that left column out too far. You can either change the width of your container to 720px or change the width of that image to 470px.

As far as the validation goes, if you truly can't delete that yahoo code, then your page will never validate and I'd give up on it. Validation is extremely important on professional sites to make sure your code is "true" and fixing validation errors will often correct problems with displays in various browsers. For your purposes, once your display looks ok, and once you're sure that all of the validation errors are coming from that generated code (which they currently are), I don't think I'd spend much more time on it.

Hope that helps!


----------



## Aquarian (Apr 24, 2005)

Thank you so much Wendy.  You must be sharing you little guardian ghost with me. I had already resized one image I thought might be the problem but didn't think of this one. It wouldn't resize nicely so I just put in on a new page with link. I really learned a lot from this problem and really appreciate your talking me through it. Now it shouldn't happen again. Thank you:up: 

I guess the inability to get true validation with free geocities space is a handicap that comes with free space. I wonder if this happens with other servers. I've though of moving to Juno's space because she is our internet provider. And Juno is an asteroid I work with  

Thanks again. The page looks good now. 
Connie


----------



## WendyM (Jun 28, 2003)

Great job. :up: You can mark this thread solved by going to Thread Tools just above your first post. Glad you got it all sorted out!


----------



## Aquarian (Apr 24, 2005)

Ok, thanks. I should mention that I inadvertantly messed up the tags while experimenting, trying to figure it out. The only problem was the oversized image. Boy do I feel silly.


----------



## WendyM (Jun 28, 2003)

Don't feel silly at all. Things like this are how you get familiar with the code. Chalk it up to a learning experience - it'll definitely come in handy in the future.


----------

