homepage Welcome to WebmasterWorld Guest from 54.196.201.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
<div> content looks ok in IE6, but way to the right in Firefox
jack38




msg:3673931
 11:07 am on Jun 13, 2008 (gmt 0)

Here is the <div> code in question: it contains a spry detail and master image regions. The images are positioned the way I want in IE6 (they appear centered and on screen). When I preview in firefox/navigator, the images are displayed way to the right, almost off-screen. I tried using position:absolute; top:***px; right:***px; but it doesnt help. Is there a way to fix the layout in firefox?

The css controling the <div> is posted below.

<div id="wrap">
<div spry:detailregion="ds1">
<div id="limg">
<img src="../images/large/{imgfile}" width="{imglarwidth}" height="{imglarheight}" alt="{imgfile}" /> </div>
</div>
<div id="cont">
<div spry:region="ds1">

<ul id="ulthumb"><li spry:repeat="ds1" spry:setrow="ds1"><img src="../images/thumb/{imgfile}" width="{imgthumbwidth}" height="{imgthumbheight}" alt="{imgname}" /></li>
</ul>
</div>
</div>
</div>

css
__________________

@charset "utf-8";
/* CSS Document */

#wrap {
text-align:center;
padding:0px;
height:100px;
width:100px;
margin:0px auto;
}
#limg {
height:1%;
width:0px;
padding:0px;
text-align:center;
margin:0px;
}
#limg img {
padding:5px;
margin:0px auto;
border:1px solid #aaa;
background-color:#fff;
}
#cont {
margin:0px -3px 0px 0px;
padding:0px;
height:1%;
width:700px;
}
#ulthumb {
list-style:none;
list-style-type:none;
margin:0px;
padding:0px;
}
#ulthumb li {
float:left;
margin:30px 10px 0px 0px;
width:auto;
height:auto;
display:block;
}
#ulthumb img {
cursor:pointer;
padding:2px;
border:solid 1px #aaa;
background-color:#fff;
}

 

appi2




msg:3674090
 2:59 pm on Jun 13, 2008 (gmt 0)

Sorry not played with adobes spry framework, but if I strip out the spry stuff and use just the basic html + css you posted, then in FF2 the two images are centered in IE6 they are about 200px from the left of the window and in IE7 the are centered but overlap.

And I dont have a clue which one is supposed to look right ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved