Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with width of list in IE

    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:

    Code:
    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:

    Code:
    <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.

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <!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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    New Coder
    Join Date
    Jul 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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'.
    Last edited by Jas01724; 01-17-2004 at 04:10 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •