/    Sign up×
Community /Pin to ProfileBookmark

space between pics

Copy linkTweet thisAlerts:
Oct 03.2005

Hi all,

I work mostly with FFx but I need to check my work on IE as well. I have just created an images gallery at

[URL=http://www.bizkaia.com.br/galeria.php]gallery[/URL]

the CSS is:

[CODE]
html, body {
margin:0;
padding:0;
}
body {
color:#333333;
background:#ffffc6;
font: 0.76em Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}

#wrap {
width: 770px;
margin:0 auto;
padding: 2px;
text-align:left; /* “remédio” para o hack do IE */
}

#header {
padding: 4px;
margin:2px;
position:absolute;
width:759px;
color:#ffffc6;
text-align:right;
background:#ffffc6 url(../nome.gif) center no-repeat;
height:64px;
}

#content {
padding:4px;
position:absolute;
border:1px solid #006699;
height:auto;
background:#ffffc6;
width:761px;
position:absolute;
top:82px;
text-align:justify;
}

#content h2, #content h3 {
text-align:center;
font-size:1.5em;
color:#333333;
padding:1px;
margin:1px;
left: 348px;
}
.col1
{
padding: 6px;
height: auto;
width: auto;
margin-left:295px;
}

#content table{
background-color:#CCCCC;
width:100%;
line-height:1.8em;
border:1px solid #006699;
}
#content td{
width:100%;
line-height:1.8em;
border-bottom:1px solid #006699;
}

#menu {
width:290px;
float:left;
height:auto;
margin:1px auto;
background-color: #ffffc6;
}
#footer
{
color: #333333;
border:1px solid #006699;
font-size: 12px;
font-family: Verdana,Geneva,Arial,sans-serif;
background-color: #ffffc6;
text-align: center;
clear: left;
margin-top: 70px;
padding-top: 4px;
padding-bottom: 4px;
width: 100%;
}
[/CODE]

In a small screen, FFx looks great but with IE the main pic goes to the bottom and there is too much space between the thumbs. The thumbs <div> is #menu, so Is there any fix for this?

Appreciate any help
😮

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 04.2005 — #content a {
display:block;
float:left;
margin:1px; /* adjusts spacing */
}
Copy linkTweet thisAlerts:
@The_Little_GuyOct 04.2005 — I have a little suggestion, because I see they look fine in both, but you should make the thumbnails of the image smaller in size, and not the full size of the image.
Copy linkTweet thisAlerts:
@sandro27authorOct 04.2005 — Hi,

Thanks you for your help.

I thought it was possible to keep the same size of the image because I was using the <img src='galeria/restaurant.jpg' style='border: 1px solid black;[B]' width='60' height='60'[/B][U]> parameters as to reduce the img for me.



But the problem is that IE reload the images every time I click on a pic so it take ages for the page to display. In FFx it doesn´t happen , though.
Copy linkTweet thisAlerts:
@ray326Oct 05.2005 — I thought it was possible to keep the same size of the image because I was using the <img src='galeria/restaurant.jpg' style='border: 1px solid black;' width='60' height='60'[U]> parameters as to reduce the img for me. [/QUOTE]Do you realize that technique is called "dumbnailing"? A page with a load of dumbnailed images will generally only be visited once, especially by dialup visitors.
Copy linkTweet thisAlerts:
@felgallOct 05.2005 — THe whole point of having thumbnails is that the images that are loaded on the page are very small files and that when the visitor selects to view one in more detail the larger version of the file is loaded. Attaching the huge versions in the original page and telling the browser to display them at a smaller size than they are set to means that your visitor has to load a H----U----G-----E page before they can see anything. Adjust your images until the total page size including all of the attached images scripts etc is under 80k or no one will wait long enough for the page to load.
Copy linkTweet thisAlerts:
@SiddanOct 05.2005 — in other words... the filesize in KB is the same but it looks smaller visually.

The "Dumbnailing" is a great name, hehe good one
Copy linkTweet thisAlerts:
@sandro27authorOct 06.2005 — I got the dumbnailing idea...I have reduced the size of the thumbs...but my question is why in IE it loads every time the thumbs when I click in one pic while in Ffx the thumbs remain after the first load. Older versions of IE seems to have this behaviour...
Copy linkTweet thisAlerts:
@FangOct 06.2005 — You could try using relative paths, but it could be the method of swapping images.

The usual method is to pre-load images and use JavaScript to swap them.
×

Success!

Help @sandro27 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 4.30,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...