/    Sign up×
Community /Pin to ProfileBookmark

Issue with Lightbox 2 and centering in IE

Copy linkTweet thisAlerts:
Aug 06.2008

Two problems. First I should have a disclaimer:

GRAPHIC ARTIST learning to do websites… and trying to grasp coding. There. ?

Now. My two problems.

1st Lightbox 2 is giving me an issue. I am trying to use lightbox as a portfolio enchancement. I am using it with some thumbnails to show a series of work , like 4 pics , when you click on one thumbnail, using the grouping function of lightbox. Works fine except ONE problem. The pictures load backwards. As in, when I click on the thumb, it shows image 4 first, and I have to click PREVIOUS tab to browse the pics.

2nd problem is , I am using AP divs mostly on my site ( yes I know please dont hit me ). I wrapped the whole site in a div itself, to center the ap divs to make the site stay centered. Works great in Safari, and Firefox, but is left justified in IE.

Here is my code. Sorry its a mess. ( using Dreamweaver CS3 )

[code=html]
<html>
<head>
<title>web1973smaller</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>

<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />

<style type=”text/css”>
<!–
body {
background-image: url(images/web1973slice.jpg);
background-repeat: repeat-x;
}
#apDiv1 {
position:absolute;
left:510px;
top:200px;
width:60px;
height:60px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:590px;
top:200px;
width:80px;
height:70px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:646px;
top:359px;
width:30px;
height:30px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:366px;
top:217px;
width:40px;
height:30px;
z-index:2;
}
#apDiv5 {
position:absolute;
left:436px;
top:218px;
width:50px;
height:50px;
z-index:3;
}
#apDiv6 {
position:absolute;
left:506px;
top:217px;
width:50px;
height:40px;
z-index:4;
}
#apDiv7 {
position:absolute;
left:296px;
top:288px;
width:40px;
height:40px;
z-index:5;
}
#apDiv8 {
position:absolute;
left:576px;
top:360px;
width:30px;
height:30px;
z-index:6;
}
#apDiv9 {
position:absolute;
left:576px;
top:218px;
width:40px;
height:30px;
z-index:7;
}
#apDiv10 {
position:absolute;
left:366px;
top:288px;
width:40px;
height:40px;
z-index:8;
}
#apDiv11 {
position:absolute;
left:436px;
top:288px;
width:60px;
height:40px;
z-index:9;
}
#apDiv12 {
position:absolute;
left:506px;
top:288px;
width:40px;
height:40px;
z-index:10;
}
#apDiv13 {
position:absolute;
left:576px;
top:288px;
width:30px;
height:30px;
z-index:11;
}
#apDiv14 {
position:absolute;
left:366px;
top:360px;
width:20px;
height:20px;
z-index:12;
}
#apDiv15 {
position:absolute;
left:296px;
top:360px;
width:30px;
height:30px;
z-index:13;
}
#apDiv16 {
position:absolute;
left:506px;
top:360px;
width:40px;
height:40px;
z-index:14;
}
#apDiv17 {
position:absolute;
left:646px;
top:288px;
width:40px;
height:40px;
z-index:15;
}
#apDiv18 {
position:absolute;
left:648px;
top:219px;
width:40px;
height:40px;
z-index:16;
}
#apDiv19 {
position:absolute;
left:436px;
top:360px;
width:30px;
height:30px;
z-index:17;
}
#apDiv20 {
position:absolute;
left:296px;
top:218px;
width:30px;
height:30px;
z-index:18;
}
#master {
margin: 0px auto;
width: 900px;
position: relative;
left: 0px;
top: 0px;
}
–>
</style>

</head>
<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<div id=”master”>

<!– ImageReady Slices (web1973smaller.jpg) –>
<div id=”apDiv3″><a href=”images/WORK/ART FLYER2.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/ART FLYERsmall.jpg” alt=”l s u s art show poster” width=”60″ height=”60″></a></div>
<div id=”apDiv4″><a href=”images/WORK/porte-2.jpg” rel=”lightbox[porte]” ><a href=”images/WORK/porte-1.jpg” rel=”lightbox[porte]” ><img src=”images/WORK/thumbs/portesmall.jpg” alt=”accounting firm brochure” width=”60″ height=”60″></a></div>
<div id=”apDiv5″><a href=”images/WORK/carson.jpg” rel=”lightbox”><img src=”images/WORK/thumbs/carsonsmall.jpg” alt=”coctostan title david carson style” width=”60″ height=”60″></a></div>
<div id=”apDiv6″><a href=”images/WORK/foo2.3.jpg” rel=”lightbox[Foonatics]” > <a href=”images/WORK/foo.2.jpg” rel=”lightbox[Foonatics]” ><a href=”images/WORK/foo.jpg” rel=”lightbox[Foonatics]” ><a href=”images/WORK/foo4.jpg” rel=”lightbox[Foonatics]” ><img src=”images/WORK/thumbs/foosmall.jpg” alt=”foo fighters fan website” width=”60″ height=”60″></a></div>
<div id=”apDiv7″><a href=”images/WORK/gcac.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/gcacsmall.jpg” width=”60″ height=”60″></a></div>
<div id=”apDiv8″><a href=”images/WORK/wabi.jpg” rel=”lightbox[wabi]” ><a href=”images/WORK/wabi.2.jpg” rel=”lightbox[wabi]” ><img src=”images/WORK/thumbs/wabismall.jpg” alt=”wabi tea packaging” width=”60″ height=”60″></a></div>
<div id=”apDiv9″><a href=”images/WORK/Redemption.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/Redemptionsmall.jpg” alt=”redemption illustration” width=”60″ height=”60″></a></div>
<div id=”apDiv10″><a href=”images/WORK/dropcloth.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/dropclothsmall.jpg” width=”60″ height=”60″></a></div>
<div id=”apDiv11″><a href=”images/WORK/chance1.jpg” rel=”lightbox[chance]” ><a href=”images/WORK/chance2.jpg” rel=”lightbox[chance]” ><img src=”images/WORK/thumbs/chancesmall.jpg” alt=”chancellor’s report l s u s” width=”60″ height=”60″></a></div>
<div id=”apDiv12″><a href=”images/WORK/planet****2.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/planetsmall.jpg” alt=”l s u s design poster” width=”60″ height=”60″></a></div>
<div id=”apDiv13″><a href=”images/WORK/IDEA.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/splashsmall.jpg” alt=”rush bookstore splash page” width=”60″ height=”60″></a></div>
<div id=”apDiv14″><a href=”images/WORK/letterhead.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/letterheadsmall.jpg” alt=”de brun and foy letterhead” width=”60″ height=”60″></a></div>
<div id=”apDiv15″><a href=”images/WORK/Solo Swarm.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/Solo Swarmsmall.jpg” alt=”solo swarm illustration” width=”60″ height=”60″></a></div>
<div id=”apDiv16″><a href=”images/WORK/faith logo.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/faithlogosmall.jpg” alt=”faith based alliance logo” width=”60″ height=”60″></a></div>
<div id=”apDiv17″><a href=”images/WORK/jazzposter.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/jazzpostersmall.jpg” width=”60″ height=”60″></a></div>
<div id=”apDiv18″><a href=”images/WORK/cover.jpg” rel=”lightbox” ><img src=”images/WORK/thumbs/calendarsmall.jpg” alt=”lsus calendar” width=”60″ height=”60″></a></div>
<div id=”apDiv19″><a href=”images/WORK/cancer2.gif” rel=”lightbox” ><img src=”images/WORK/thumbs/cancersmall.gif” width=”60″ height=”60″></a></div>
<div id=”apDiv20″><a href=”images/WORK/mcd.gif” rel=”lightbox” ><img src=”images/WORK/thumbs/mcdsmall.gif”alt=”mc donalds magazine” width=”60″ height=”60″></a></div>
<table width=”900″ height=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ id=”Table_01″>
<tr>
<td>
<img src=”images/index_01.jpg” width=”50″ height=”27″ alt=””></td>
<td>
<img src=”images/index_02.jpg” width=”93″ height=”27″ alt=””></td>
<td>
<img src=”images/index_03.jpg” width=”164″ height=”27″ alt=””></td>
<td>
<img src=”images/index_04.jpg” width=”235″ height=”27″ alt=””></td>
<td>
<img src=”images/index_05.jpg” width=”358″ height=”27″ alt=””></td>
</tr>
<tr>
<td>
<img src=”images/index_06.jpg” width=”50″ height=”159″ alt=””></td>
<td>
<img src=”images/index_07.jpg” width=”93″ height=”159″ alt=””></td>
<td>
<img src=”images/index_08.jpg” width=”164″ height=”159″ alt=””></td>
<td>
<img src=”images/index_09.jpg” width=”235″ height=”159″ alt=””></td>
<td>
<img src=”images/index_10.jpg” width=”358″ height=”159″ alt=””></td>
</tr>
<tr>
<td>
<img src=”images/index_11.jpg” width=”50″ height=”197″ alt=””></td>
<td>
<img src=”images/index_12.jpg” width=”93″ height=”197″ alt=””></td>
<td>
<img src=”images/index_13.jpg” width=”164″ height=”197″ alt=””></td>
<td>
<img src=”images/index_14.jpg” width=”235″ height=”197″ alt=””></td>
<td>
<img src=”images/index_15.jpg” width=”358″ height=”197″ alt=””></td>
</tr>
<tr>
<td>
<img src=”images/index_16.jpg” width=”50″ height=”217″ alt=””></td>
<td>
<img src=”images/index_17.jpg” width=”93″ height=”217″ alt=””></td>
<td>
<img src=”images/index_18.jpg” width=”164″ height=”217″ alt=””></td>
<td>
<img src=”images/index_19.jpg” width=”235″ height=”217″ alt=””></td>
<td>
<img src=”images/index_20.jpg” width=”358″ height=”217″ alt=””></td>
</tr>
</table>
<!– End ImageReady Slices –>

</div>
</body>
</html>
[/code]

Thanks in advance.
john

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelAug 06.2008 — [B]<html>[/B]....

....

#master {

[B]margin: 0px auto;[/B]

width: 900px;

position: relative;

left: 0px;

top: 0px;

}

-->

</style>[/QUOTE] In a nutshell: -you won't get "margin:0 auto;" to work in IE unless you have a valid !doctype. Else, IE ignores "margin:foo [B]auto[/B];"

Wondering though, -why you are trying to 'center' this with "margin:0 auto;" and then, state "[B]left:0;[/B] top:0;"... You could lose both "left:0;" and "top:0;" and let "margin:0 auto;" center this for you (with a valid !doctype)

(edited: [I]wrong word used. Replaced[/I])
Copy linkTweet thisAlerts:
@Mr__E__CrypticAug 06.2008 — Even with the doc type, you're probably still going to have a problem with the placement of your images (The lightbox thumbs).

I'd guess that your order problem with the lightbox images is due to each tumb / link being in it's own div.

Can you provide a working link where we can actually see the images etc., in action?
Copy linkTweet thisAlerts:
@johngray73authorAug 06.2008 — Honestly what I had used was advice from someone else. I will take yours though and change it up a bit. I hope I dont sound too ... ignorant, but I use dreamweaver like I said. What is , or how do I, state a valid !doctype?

Thank you very much.


Solved my own issue with Lightbox as well 8)
Copy linkTweet thisAlerts:
@Mr__E__CrypticAug 06.2008 — Replace <html> at top of code with doc type; eg code:

If you're using CS3 you can select the Doc Type on the far right side of the model window when you click file->new

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[/code]
Copy linkTweet thisAlerts:
@johngray73authorAug 06.2008 — Umm... wow. Perfect.

I thought I would be pulling my hair out for days.

Amazing help. Thank you so very much. Soon I hope to know enough to help... at least one person hehe.

Cheers and thanks again.
Copy linkTweet thisAlerts:
@Mr__E__CrypticAug 06.2008 — Sorry, just had a closer look at your code. It's probably better suited to a HTML 4 doc type

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>[/code]

(instead of last provided).

Even at that, though, you've quite a few validation errors.
Copy linkTweet thisAlerts:
@johngray73authorAug 06.2008 — Yeah... I have a long way to go until I get this figured out. But I am at least on the road heading in the right direction... I hope ?
Copy linkTweet thisAlerts:
@puppyknucklesAug 20.2008 — Honestly what I had used was advice from someone else. I will take yours though and change it up a bit. I hope I dont sound too ... ignorant, but I use dreamweaver like I said. What is , or how do I, state a valid !doctype?

Thank you very much.


Solved my own issue with Lightbox as well 8)[/QUOTE]

Can you post how you solved the Lightbox problem? I am having the same exact thing, except the pictures load backwards in Firefox and Safari, but load fine in IE...
×

Success!

Help @johngray73 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...