PDA

View Full Version : layout problem !!!


nits4u
07-11-2009, 03:04 PM
i use list tag to built thumb gallery. They are displaying exactly as i want to be EXCEPT in I.E. !!!
in I.E:

http://i27.tinypic.com/34edg8x.gif

in Firefox:

http://i28.tinypic.com/a0hp8j.gif

code is attached....

thanx

nits4u
07-12-2009, 05:59 AM
no replies ???

Corrosive
07-12-2009, 09:40 AM
no replies ???

Not by the look of it :wink:

domedia
07-12-2009, 03:40 PM
Can you put this online somewhere?
It's soo much easier to debug that way :)

nits4u
07-12-2009, 04:41 PM
Can you put this online somewhere?
It's soo much easier to debug that way :)


in that case i have to upload all the related pics also..n that is not possible. coz the net is slow. :(

i have also attached the req. code...

Corrosive
07-13-2009, 11:50 AM
in that case i have to upload all the related pics also..n that is not possible. coz the net is slow. :(

i have also attached the req. code...

Then this may be a useful link for you...

http://www.positioniseverything.net/

Have a look at the recorded IE6 bugs and see which one might be affecting your layout and solve it from there.

nits4u
07-14-2009, 05:42 PM
no use man!!!
hey i think you get a little idea from the above pics.
please chk them....
in I.E 7 they are not align vertically.

edbr
07-15-2009, 01:09 AM
use different top margins for the images maybe.

nits4u
07-15-2009, 05:56 AM
its not working !!! :(

nits4u
07-15-2009, 06:03 AM
cant figure it out with the attached code ?

Corrosive
07-15-2009, 07:46 AM
cant figure it out with the attached code ?

We are not going to be able to figure out every problem! Have you tried taking it apart and re-building the section from scratch, maybe pre-viewing in browser at each stage to see which styles are affecting your images? Have you tried different build methods, different ideas? Personally I don't open attachments from websites very often...even if it is only a .txt file.

edbr
07-15-2009, 07:54 AM
i looked . its incomplete not showing doctypes awate of time looking. i agree corrosive i do not usually download attachments either. why should we?
using top margins will do it of course

nits4u
07-15-2009, 06:34 PM
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nahan-gallery</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
background-image: url(_images/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
div, h1, h2, ul, li, p {
margin: 0px;
padding: 0px;
}
#wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 90%;
height: auto;
width: 795px;
margin-right: auto;
margin-left: auto;
}
#sidebar {
float: left;
width: 200px;
position: fixed;
top: 70px;
}
#sidebar #menu ul {
font-family: "Courier New", Courier, monospace;
font-size: .9em;
color: #CCC;
list-style-type: none;
top: 70px;
}
#sidebar #menu ul li {
line-height: 25px;
color: #FFF;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #FFF;
}
#sidebar #menu ul li a {
color: #FFF;
text-decoration: none;
display: block;
}
#sidebar #menu ul li a:hover, #sidebar #menu ul li a.current{
color: #000;
text-decoration: none;
background-color: #FFF;
}
.............CSS CODE RELATED TO THAT HTML PORTION...................
#maincontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
padding: 1px;
float: right;
height: auto;
width: 550px;
margin-top: 75px;
margin-bottom: 20px;
}
#maincontent a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}
#maincontent ul {
margin-bottom: 6px;
}
#maincontent ul li {
list-style-type: none;
}
#maincontent ul li a {

float: left;
padding: 2px;
display:inline;
}
#maincontent ul li a:hover {
background-color:#666;
}
.................................................. .................................................. ......
#maincontent hr {
clear: both;
margin-top: 5px;
}
#maincontent p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-decoration: none;
text-align: justify;
}

#footer {
clear: both;
padding-bottom: 2px;
}
#footer p {
font-size: 0.7em;
color: #000;
text-align: right;
}
#footer p a {
font-size: 1.2em;
color: #F00;
text-decoration: none;
padding-left: 5px;
}
#footer p a:hover, #footer p a.fActive {
color: #060;
text-decoration: overline;
}
.holder{
}
-->
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<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>
</head>

<body>
<div id="wrapper">
<div id="sidebar">
<div id="menu">
<ul>
<li><a href="home.html" title="home" class="holder">Home</a></li>
<li><a href="history.html" title="history" class="holder">History</a></li>
<li><a href="facts n figures.html" title="facts & figures" class="holder">Facts & Figures</a></li>
<li><a href="places of intrests.html" title="places of intrests" class="holder">Places of Intrests</a></li>
<li><a href="education.html" title="educational institutes" class="holder">Educational Institutes</a></li>
<li><a href="test_gallery.html" title="gallery" class="current">Gallery</a></li>
</ul>
</div> <!--menu-->
</div> <!--sidebar-->
<div id="maincontent">
PROBLEM AREA.............................................. ......
<ul>
<li><a href="_images/HPIM1276.jpg" title="on the way to bhagayni mata" rel="lightbox">
<img src="_images/HPIM1276_thumb.jpg" width="128" height="90" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=.7;this.filters.alpha.opacity=7 0"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=10 0"/>
</a></li>
<li>
<a href="_images/HPIM1345.jpg" title="bhagayni mata (haripur dhar)" rel="lightbox">
<img src="_images/HPIM1345_thumb.jpg" alt="bhagayni mata" width="128" height="90" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=.8;this.filters.alpha.opacity=8 0"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=10 0"/></a></li>
<li>
<a href="_images/HPIM1331.jpg" title="library bhagayni mata" rel="lightbox">
<img src="_images/HPIM1331_thumb.jpg" alt="library" width="128" height="90" style= "opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=.8;this.filters.alpha.opacity=8 0"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=10 0" /></a>
</li>
<li><a href="_images/HPIM1333.jpg" title="view from bhagayni mata" rel="lightbox">
<img src="_images/HPIM1333_thumb.jpg" alt="view from bhagayni mata" width="128" height="90" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=.8;this.filters.alpha.opacity=8 0"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=10 0" /></a>
</li>
<li><a href="_images/HPIM1340.jpg" title="another view fron temple" rel="lightbox">
<img src="_images/HPIM1340_thumb.jpg" alt="another view fron temple" width="128" height="90" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=.8;this.filters.alpha.opacity=8 0"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=10 0"/></a>
</li>
<li><a href="_images/HPIM1368.jpg" title="on the way to bhagayni mata" rel="lightbox">
<img src="_images/HPIM1368_thumb.jpg" alt="on the way to bhagayni mata" width="128" height="90" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=.8;this.filters.alpha.opacity=8 0"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=10 0"/></a>
</li>
</ul>
.................................................. ..................................
</div> <!--main content-->
<div id="footer">
<p>&nbsp; </p>
<p>&copy; All rights reserved 2009 <a href="sitemap.html" title="site map">site map</a> | <a href="contact us.html" title="contact" class="holder">contact us</a>
</p>
</div> <!--fotter-->
</div> <!--wrapper-->
</body>
</html>

nits4u
08-01-2009, 10:52 AM
this is the link http://nits4u.110mb.com/gallery.html
please chk it....
not displayed properly in I.E

Corrosive
08-02-2009, 10:55 AM
#maincontent ul li a {

float: left;
padding: 2px;
display:inline-block;
}


I think it is the display:inline-block; that IE doesn't like. There is an explanation and a couple of workarounds suggested here;

http://www.brunildo.org/test/InlineBlockLayout.html