...

View Full Version : Problem with width of list in IE



Jas01724
01-17-2004, 07:53 AM
Hi,

I have in the past used tables to create gallery pages (I know, my bad) and as i'm redesiging my site currently I decided to change to something that's hopefully a little more suitable; an unordered list.

I have seven images horizontally on each line with the first six given a width of 10% and a right margin of 5%, totalling 90%, and the last of the six images is given a class so that it has a width of 10% without a margin. This totals 100% and works perfectly in Mozilla (no surprise), resizing to fit almost any screen resolution.
However in IE it looks great at 1024 and above, but when used on an 800 screen it has a strange and annoying problem. When maximised to the entire screen it's fine, but as soon as it is minimised as little as a couple of pixels it gets horizontal scrollbars that aren't present in any other browser and the last image on each line breaks onto a second line.

I've tried reducing the size of the margins so that they total less than 100%, but so far nothing I have tried to that effect has made a difference. It's a small problem in the scheme of things and I could live with it, but if it's solvable i'd appreciate any help.

The CSS i'm using is:



div.gallery {
width: 100%;
color:#000000;
background-color: transparent;
padding: 0;
margin: 0;
}
ul.gallery {
width: 100%;
color: #000000;
background-color: transparent;
list-style-type: none;
margin: 0 0 14px 0;
padding: 0;
float: left;
}
ul.gallery li {
width: 10%;
display: block;
margin: 0 5% 0 0;
padding: 0;
float: left;
color: #000000;
background-color: transparent;
text-align: center;
}
ul.gallery li.edge{
width: 10%;
display: block;
margin: 0;
padding: 0;
float: left;
color: #000000;
background-color: transparent;
text-align: center;
}


The html code is:



<div class="gallery">
<ul class="gallery">
<li>
<img src="" height="" width="" alt="" title="" />
</li>
<li>
<img src="" height="" width="" alt="" title="" />
</li>
<li>
<img src="" height="" width="" alt="" title="" />
</li>
<li>
<img src="" height="" width="" alt="" title="" />
</li>
<li>
<img src="" height="" width="" alt="" title="" />
</li>
<li>
<img src="" height="" width="" alt="" title="" />
</li>
<li class="edge">
<img src="" height="" width="" alt="" title="" />
</li>
</ul>
</div>


Thanks to anyone who can help. No doubt it will be something stupid that i've overlooked. ;)

me'
01-17-2004, 11:28 AM
Chances are it's a box model problem. Insert this in place of your current doctype, or insert it before the rest of your document if you don't already have a doctype declared.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">IE6 will then use the correct box model. You'll still be stuck with IE5 and IE5.5 though, you'll have to hack if you want compliance with those two.

Final note: if you have the xml prologue <?xml ... ?> in your code, or a reference to a stylesheet with <?xml-stylesheet ... ?>, be sure to insert the <!DOCTYPE ... !> declaration AFTER these.

Jas01724
01-17-2004, 12:15 PM
Thanks for those tips. I'm actually changing from XHTML 1.0 Transitional to Strict as part of the redesign so I already have that doctype, but I still think it's something to do with the IE6 box model. I just can't place what.

I do have people viewing the site in its current form in many different browsers, however I have a 'warning' that the site may not render correctly in anything other than an up-to-date one - if asked I recommend Mozilla. A large majority (something like 90%) of visitors use either IE6 or Mozilla and it's really a semi-personal site anyway so it's not a major concern that it won't look quite right in older browsers.

I don't use the xml prologue as i've never found it to be necessary for what I want to do, so it can't be that either.

I guess I may have to chalk it up to IE being a pain in the behind. I've never been fond of hacks so I may just leave it if nobody can think of anything. It's still perfectly passable and viewable and the horizontal scrollbar doesn't actually scroll at all, it just looks ugly.

I would link to the page, only the design i'm working on now isn't uploaded anywhere.

ETA: Apparently IE doesn't like 100% width totals. In my original post I said that it would probably be something stupid that i'd overlooked, et voila, it was.
The problem arose when using this list because it was a resizable list that totalled 100%, but it was precipitated by the surrounding layout also equaling 100% with an 80% central portion and a 10% margin on either side. I adjusted the surrounding layout so that it equaled something like 98% and the problem is gone.

Weird that some sleep can make things makes sense...

Thanks, me'. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum