Need help with placing image and js code in HTML

On the page http://www.ecsundance.com/portfolio.html I have two issues:

  1. The horse is below the main wrap, it should be in the sidebar next to the links (like on the about me page) I cannot figure out why is it going so far down.

  2. I put in the script for IE8, and I am not sure if I did it right on the same page. I only have Safari, so I cannot see it in IE8.

Thanks for the help! :slight_smile:

Regarding questions 1, place the sidebar code inside the wrapper div, instead of out of it.

Regarding 2, the link looks ok, except that I’m not sure the path to the file is right. Anyhow, why is it just for IE? What does the script do?

HI, thanks for the help. Problem 1 solved. :slight_smile:

1.a) Another one created: why is my second quote so far below the first one? Should be on the next line, it is in between <p></p> tags.

  1. The lightbox needs js for IE8. The lightbox is when you click on the portfoliopieces, it brins up the viewer.

  2. And I just noticed another new thing. I added links to the web site pieces in the lightbox, now the fonts are smaller on the description in the lightbox than the rest. Sorry, these problems are just coming up. Any idea on these? Thanks!

It’s this code here:

#sidebar p {
  color: #741D0A;
  font-family: "Book Antiqua",Palatino,"Times New Roman",Times,serif;
  font-size: 12px;
  font-style: italic;
  line-height: 18px;
  margin-bottom: 10px;
  padding-left: 50px;
  [COLOR="Red"]padding-top: 280px;[/COLOR]
}

You have told the browser to apply a big top padding to any <p> in the sidebar, so you might have to target the first p with a special class instead. E.g.

<p.top>

#sidebar p.top {
  padding-top: 280px;
}
  1. The lightbox needs js for IE8. The lightbox is when you click on the portfoliopieces, it brins up the viewer.

Hmm, normally you shouldn’t need anything extra for IE. A normal lightbox script will work cross browser. That script isn’t working in IE8 anyhow, so maybe the path is wrong.

  1. And I just noticed another new thing. I added links to the web site pieces in the lightbox, now the fonts are smaller on the description in the lightbox than the rest. Sorry, these problems are just coming up. Any idea on these? Thanks!

Sorry, don’t understand.

OK, let us go one problem at a time -

I put in the code but it does not work still:what am I missing? Also, I just noticed, the font is smaller than on the other pages. That just happened after I put in the links for the lightbox for the web designs. Any clue as to why? Thanks a lot for helping!


<div id=“sidebar”>
<p class=“top” “Art is never finished, only abandoned.” ~Leonardo da Vinci</p>
<p>“Simplicity is the ultimate sophistication.” ~Leonardo da Vinci</p>
</div>


#sidebar p {
margin-bottom:10px;
color: #741D0A;
font-family: “Book Antiqua”, Palatino, “Times New Roman”, Times, serif;
font-size: 12px;
font-style: italic;
line-height: 18px;
padding-left: 50px;
}

#sidebar p.top {
padding-top: 280px;
}

Try it like this:

#sidebar p {
	margin-bottom:10px;
	color: #741D0A;
	font-family: "Book Antiqua", Palatino, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: italic;
	line-height: 18px;
	padding-left: 50px;
[COLOR="Red"]        padding-top: 280px;[/COLOR]
}

sidebar p.top {
[COLOR="Red"]	padding-top: 10px;[/COLOR]	
}

You missed a closing > on the <p>:

<p class="top"[COLOR="Red"]>[/COLOR] "Art is never finished, only abandoned." ~Leonardo da Vinci</p>

I just noticed, the font is smaller than on the other pages.

Which font? Be as specific as possible.

Thanks very much, it worked. I was tired yesterday. :confused: Steven, your solution split up the quotes. What I was after was to have both under the picture, together like it is now. Thanks very much though.

However, the font size for the quote is still smaller on this page, than on other pages. Any ideas on that? I am not sure how, I think the lightbox code is taking over a lot of my code (cascade)?

Also, if you look in the lightbox (click on a portfolio piece in web design or Illustration and compare the description area with any of the pieces in graphic design, you will see.) I hope I explained it OK. Thanks for the help!

The font sizes for the quotes are the same on both pages, but the fonts are different! Georgia on one and Book Antiqua on another. So you need to clean up your style sheets a bit. One page is getting its #sidebar p styles from one style sheet (main) and the other is getting it from mainplaybox2.css. It would be better to keep the main styles just in the main.css file, and use other style sheets perhaps for specific items that appear in special places (if you need more than one style sheet at all).

Yah, you are right. Thanks, I looked at things and now they are fixed. :rofl: Thanks very much!

The only thing left is to figure out this js code. Why is the js code not seen by IE8? The lightbox needs js for IE8. Right now the lightbox does not come up in IE. I posted it on the js forum but only one person got back to me but it was not helpful. Do you think I should post it separately on this (CSS) post? Or can you help me? Thanks for all your help it was very helpful.

I take it back, the picture floated to the bottom middle. I am getting tired of this. I fix one thing, another gets busted. Could you take a look?

Sorry, got it - missed a <div>.

OK, just to check, is all working now, or is the IE problem still there?

I do not know if IE works or not. I made some changes so I would love to know if it is working. If not, maybe someone could help me debug it. That would be cool! (:

I just checked IE8, and it works fine there.

Awesome! :smiley: I guess it works in earlier IE versions as well then? But thanks very much for all the help! Finally I think it is all worked out. I was just a little sloppy.:frowning: I will be more careful! :slight_smile:

OK, checked in IE6 and IE7, and the popup works in both. Only little prob was in IE6, where the popup sits in the top left corner of the screen, rather than in the center. To be honest, I wouldn’t worry about that, as I’m done with IE6. But it’s up to you, as not everyone has that luxury. :slight_smile:

I am good with that, thanks for checking! And thanks for all! Until the next time! :wave: