IE7 text and image issues

[TartanNeil]

I've nearly finished my site and all was great until someone pointed out that a couple of pages don't load as I intended on IE7.

My site is neilleslie.com and the pages that are problematic are Home (text problems) and Portfolio (image problems).

Any help solving these issues most appreciated.

p.s. here's my css code.




/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
background-color: white

}
text1{ color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20pt;
line-height: 1em;
}

thumbtext{ color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
line-height: 1em;
}
hellotext{ color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20pt;
line-height: 1.55em;
}


IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }







#wrapper {
width: 800px;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 500px;
text-align: left;
border: 1px solid #000000;
}
#header1 {
margin: 0px;
padding: 0px;
height: 50px;
width: 800px;
text-align: center;
background-color: #ffffff;
}
#headerlinksleft {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerhome {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerport {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerstock {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerclients {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerprocess {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerbio {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerblog {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headercontact {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#headerlinksright {
margin: 0px;
padding: 0px;
height: 15px;
width: 80px;
float: left;
text-align: center;
background-color: #ffffff;
}
#header11 {
margin: 0px;
padding: 0px;
height: 10px;
width: 800px;
float: left;
text-align: center;
background-color: #ffffff;
}

#header {
margin: 0px;
padding: 0px;
height: 70px;
width: 800px;
text-align: center;
background-color: #ffffff;
}

#header a {
padding: 0px;
}
#container {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: auto;
}


a:link {color:#000000; text-decoration:none }
a:visited {color:#000000; text-decoration:none }
a:hover {color:#999999; text-decoration:none }
a:active {color:#000000; text-decoration:none }

#spacer {
margin: 0px;
width: 800px;
height: 425px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-color: #ffffff;
}

#hello {
margin: 0px;
width: 314px;
height: 425px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-color: #ffffff;
}
#hellospacer {
margin: 0px;
width: 20px;
height: 425px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-color: #ffffff;
}
#helloright {
margin: 0px;
width: 466px;
height: 425px;
text-align: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-color: #ffffff;
}

#top {
margin: 0px;
width: 800px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-color: #ffffff;
}

#left {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 30px;
width: 70px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}

#center {
height: 30px;
width: 280px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 1.8em;
background-color: #ffffff;
}

#mainarea {
height: 425px;
width: 800px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 1.8em;
background-color: #ffffff;
}

h1 {
font-size: 14px;
margin: 0px;
padding: 0px;
}
#right {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 30px;
width: 450px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}

#bottom {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 220px;
width: 800px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}

#spacer2 {
margin: 0px;
width: 800px;
height: 43px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-color: #ffffff;
}

.thumbnail
{
float: left;
width: auto;
border: 0px solid #999;
margin: 0 0px 0px 0;
padding-right: 15px;
padding-bottom: 12px
}

#portfolio {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
overflow: auto;
width: 138px;
height: 425px;

float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}
#leftspacer {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 138px;
height: 425px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}


#loadarea {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 425px;
width: 524px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}
.show { display: block; }
.hide { display: none; }


.clearboth { clear: both; }


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: 12px Verdana;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: left;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}


#biobox {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: left;
overflow: auto;
width: 800px;
height: 425px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}

#leftspace {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 0px;
height: 425px;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffffff;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #ffffff;
}

 

[angelwatt]

Just a quick comment; Use the code tag (the # button in the tool bar) when posting this type of code so it doesn't take up so much space.

 

[TartanNeil]

Oops, I didn't know about that, thanks.

 

[TartanNeil]

Some more information:

I've just noticed that in IE every time my css specifies a new font size IE ignores the instruction to do so.

So my text size problem isn't just limited to my Home page, it occurs on every page of my site.

Am I missing something basic here?

Thanks

 

[angelwatt]

Some more information:

I've just noticed that in IE every time my css specifies a new font size IE ignores the instruction to do so.

So my text size problem isn't just limited to my Home page, it occurs on every page of my site.

Am I missing something basic here?

Thanks

IE will treat px values "statically" meaning that when you tell IE (with the browser controls) to change text size it won't because it's respecting those declarations. IE7 does page zoom though from what I've seen, vut still has the text size controls, which I believe work the same. That may be part of it. You also have some font sizes using pt values, which should only be used for print style sheets because they have no meaning on computer screens.

Font sizes are declared at a number of spots in the CSS so it's hard to determine if something is causing a cascade effect, and I don't have IE around (not that I'm complaining) to see the problem.

 

[TartanNeil]

Thanks for pointing out the px/pt issue. I've sorted that, unfortuanately it's not the source of my text size problem.

I've attached some screen shots that illustrate the problem.

Here's how my home page should look

And here's how it looks in IE

Here's how my portfolio page should look

And here's how it looks in IE

As always, any help most appreciated.

 

[TartanNeil]

Ok, there seems to be some problem with the screen grabs. Here we go with a second attempt.



Here's how my home page should look

And here's how it looks in IE

Here's how my portfolio page should look

And here's how it looks in IE

As always, any help most appreciated.

 

[angelwatt]

On the home page that text area is inside a tag called "hellotext" which is not a real HTML tag of course. This is possibly causing IE to twitch and freak out.

On your Portfolio page you have "<div id="container"" which is missing the > tag at the end and likely causing the issue on that page.

As a tip for finding these little issues use a HTML validator, http://validator.w3.org/ Though your pages have tons of validation errors. You should start working on those.

 

[TartanNeil]

Thanks so much for pointing out the missing > tag. I've now got my portfolio page working as intended.

I ran my html through the validator suggested. You were not kidding about there being tons of errors. Unfortunately I didn't really understand what the validator was telling me other than that there are errors. Once again, my lack of skill becomes all too obvious.

I didn't realise that <hellotext> wasn't valid. I've used other tags, i.e. <text1>, on another page of my site to indicate text I wanted in a different size and, of course, that's not appearing correctly in IE either. Can you tell me what the tag should be changed to to make it valid? Or is it not that simple?

Once again, thanks.

 

[TodVader]

You should define paragraphs with a class such as:

<p class="hellotext">The content of hello text</p>

Then, in your stylesheet, you can add styles to your "hellotext" class.

You can't invent tags like you did.

 

[angelwatt]

Yes, like TodVader said, you can use a class, or even a id attribute. Use the id attribute if that will be the only one on the page, and class if it's something that'll exist in multiple places. In your CSS you'll refer to it like so,

/* for an id */
#hellotext {
 font-size: 3em;
}
/* for a class */
.hellotext {
 font-size: 3em;
}

 

[TartanNeil]

Thanks for all the help, not to mention patience, folks. I believe I've now sorted out my issues. Well, the main ones regarding IE7. And learned something about css and html on the way, so that can't be bad.

Cheers

Neil