more on inline lists

A

Animesh K

Hello All:

Continuing on last thread, but this time I have concrete examples of the
issues I am facing.

1) http://www.eecs.berkeley.edu/~animesh/pictures.htm

This page has _inline_lists_ with background image (two sided
image-border). Surprizingly, unlike most CSS page, this displays better
in IE against mozilla. However, Mozilla and Opera are giving
unacceptable solutions. The CSS definitions can be found at:

http://www.eecs.berkeley.edu/~animesh/pics.css

If I don't do the lists inline, i.e., if <li> are left as a block
element, then the following happens (and rightly so);

2) http://www.eecs.berkeley.edu/~animesh/pictures_block.htm

This page works fine in Mozilla or IE both. The CSS defintion is
different from pics.css in only one line (display: inline; is removed in
pics_block.css as compared to pics.css).


If someone can explain what exactly is going wrong, I shall be obliged.
I tried a nested div before, but IE is being the cry-baby with nested
divs. I also misplaced an online article on using nested div's to
display images :-(. Any other alternative (tableless) solutions are
welcome too.

Thanks a lot,

Best regards,
Animesh
 
E

Els

Animesh said:
2) http://www.eecs.berkeley.edu/~animesh/pictures_block.htm

This page works fine in Mozilla or IE both. The CSS defintion is
different from pics.css in only one line (display: inline; is removed in
pics_block.css as compared to pics.css).

If someone can explain what exactly is going wrong, I shall be obliged.
I tried a nested div before, but IE is being the cry-baby with nested
divs. I also misplaced an online article on using nested div's to
display images :-(. Any other alternative (tableless) solutions are
welcome too.
Click to expand...

If I understand correctly what the desired result is, all you need to
do now is to add "float:left;" to the styles for li.image.
 
A

Animesh K

Els said:
Animesh K wrote:




If I understand correctly what the desired result is, all you need to
do now is to add "float:left;" to the styles for li.image.
Click to expand...

Hi Els:

Thanks for the reply. Could you please explain more on your solution?

I tried the float:left part. Again, it works out nicely in IE. In
mozilla there is a bit of background-image problem. The background image
does not extends in the next row of images.

Thanks a lot.

Best regards,
Animesh
 
E

Els

Animesh said:
Hi Els:

Thanks for the reply. Could you please explain more on your solution?

I tried the float:left part. Again, it works out nicely in IE. In
mozilla there is a bit of background-image problem. The background image
does not extends in the next row of images.
Click to expand...

To start, you'd best add this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
to the top of your file. This will cause IE6 to follow the standards,
as Mozilla is already doing. It makes it easier to get identical
results in both browsers.

Then, in my browsers the background image is extended, but the pics
aren't vertically centered within the <li> element.
Playing a bit with borders and margins and such, I found that the
following addition to the styles made the images appear vertically
centered within their frame, and the background images extending as
well, in both Firefox, IE6 and Opera:

li.image a{
display:block;
width:180px;
height:140px;
margin:0;
padding:0;
}
li.image a img{
margin-top:30px;
}
 
A

Animesh Kumar

Hi Els:
To start, you'd best add this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
to the top of your file. This will cause IE6 to follow the standards,
as Mozilla is already doing. It makes it easier to get identical
results in both browsers.

Then, in my browsers the background image is extended, but the pics
aren't vertically centered within the <li> element.
Playing a bit with borders and margins and such, I found that the
following addition to the styles made the images appear vertically
centered within their frame, and the background images extending as
well, in both Firefox, IE6 and Opera:

li.image a{
display:block;
width:180px;
height:140px;
margin:0;
padding:0;
}
li.image a img{
margin-top:30px;
}
Click to expand...

Hi Els:

I tried these tips. For some reason my browsers (Mozilla/Firefox) don't
extend the background images. Is it some preference-setting which could
be the reason? And yes, in Mozilla, even now, the second row of images
is not display properly. Please have a look at the same link if you get
time:

www.eecs.berkeley.edu/~animesh/pictures.htm

Best regards,
Animesh

PS: Thanks for the doctype tip. I appreciate it a lot. It's my biggest
complacence so far.
 
E

Els

Animesh said:
I tried these tips. For some reason my browsers (Mozilla/Firefox) don't
extend the background images. Is it some preference-setting which could
be the reason? And yes, in Mozilla, even now, the second row of images
is not display properly. Please have a look at the same link if you get
time:

www.eecs.berkeley.edu/~animesh/pictures.htm
Click to expand...

I think I understand now what you meant with the background image not
extending - you are talking about the white background, not the leafy
things, right?

It's because the div the images are in, isn't extended to encompass
the images, because they are floats. In IE a div extends automatically
if it has a width or height, but in other browsers that's not the
case.
You'll need a clearing element after the last image, before the end of
the containing div.
You can add a simple <div class="clear">&nbsp;</div> before the end of
div#mainbody, and add this to the CSS:
div.clear{
clear:both;
font-size:1px;
line-height:1px;
}

The 1px values are to make the space that div takes up as small as
possible.
 
A

Animesh Kumar

I think I understand now what you meant with the background image not
extending - you are talking about the white background, not the leafy
things, right?

It's because the div the images are in, isn't extended to encompass
the images, because they are floats. In IE a div extends automatically
if it has a width or height, but in other browsers that's not the
case.
You'll need a clearing element after the last image, before the end of
the containing div.
You can add a simple <div class="clear">&nbsp;</div> before the end of
div#mainbody, and add this to the CSS:
div.clear{
clear:both;
font-size:1px;
line-height:1px;
}

The 1px values are to make the space that div takes up as small as
possible.
Click to expand...

Hi Els:

Thanks again for your valuable suggestions. Wow you really took off a
great burden from my shoulder by telling about non-extending background.
I was feeling perplexed for a few weeks since I had no clue of this. I
was reading from Eric Meyer to understand things better.

I hope I will implement these tricks and make my poetry page and this
picture page better.

Thanks a lot buddy.
Animesh
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

HTML Problems 7
home isn't where it should be 1
FAQ update (roundup of pending requests - for comment) 6

Members online

Total: 63 (members: 1, guests: 62)
Robots: 445

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,815
Latest member
treekmostly22

Latest Threads

Top